Closing the Block-to-Text Gap: A Domain-Specific JavaScript Editor for Early Computational Thinking

Abstract

This paper presents a web-based JavaScript editor designed to help children aged 8-10 transition from block-based to text-based programming. The system introduces a simplified domain-specific language (DSL) focused on visual art, combining authentic JavaScript syntax with immediate, creative visual feedback. A four-week pilot study (N = 15) demonstrated significant improvements in computational thinking skills (mean CTCI gain of +10.9, p < 0.001), along with a 70% reduction in syntax errors. Participants advanced from basic drawing functions to sophisticated algorithmic designs using loops, conditionals, and animations. By integrating constructionist principles with a visual-first DSL, this research contributes a validated pedagogical framework for easing the block-to-text transition in K-12 computer science education. The system encourages creativity, self-correction, and sustained engagement, offering educators a practical, scalable tool for introducing authentic coding to young learners.