.png){kind=icon}
.png){kind=icon}
Return
ChartCode: A Flowchart-Centric Educational Tool for Introductory Programming
.png){kind=icon}
PRE
AI
DOI：10.1145/3770762.3772525.png)
.png){kind=icon}
Original request for help.png){kind=icon}
Share.png){kind=icon}
Save
Abstract
En 中文
This paper presents ChartCode, a web-based interactive programming environment designed to support introductory programming courses. ChartCode integrates flowchart-based visual program construction, multi-language code generation, expression parsing, and execution simulation within a single cohesive platform. Students build programs by constructing flowcharts, which are automatically translated into syntactically correct source code in Python, Java, C, and C++. A built-in expression parser generates syntax trees to help students understand operator precedence and subexpression structure. The system includes a client-side simulation engine that executes code step-by-step, dynamically highlighting control flow and visualizing changes in variable states during execution. ChartCode is publicly available at https://chartcode.org and features twenty scaffolded lessons covering core programming topics, along with a sandbox mode for open-ended exploration. The system has been deployed in university courses and high school summer camps and supports formative assessments through instructor-defined constraints on available programming constructs. This paper describes the system architecture, implementation details, instructional use cases, and plans for future enhancements to broaden its impact on computing education.
Keywords:
visual programming
flowchart-based learning
introductory programming
code simulation
formative assessment
multi-language code generation
LLM-resistant instruction
web-based educational tools
Journal
P
IF:
0
Papers:
170
Citations:
0
Organization
View more organizations