Code to Concept

Novices must build an accurate model of what a program does as it runs from static code alone. Single-view tools such as Python Tutor show memory state, but students still struggle to connect code, state, and concept, and a systematic review of 90 visualization-tool papers found the field long on tools and short on rigorous evaluation.

Code to Concept is an open-source web tool with three synchronized panes: the Python code, a diagram of variables and runtime memory, and an instructor-written metaphor, such as a conveyor belt for iteration or a relay race for linked lists. Shared stepping controls keep the views coordinated, and a CS2 variant swaps the metaphor for an abstract structural view aimed at recursion and linked data structures.

In a 12-week randomized trial in a 1,080-student CS1 course (829 consenting), the multi-view tool produced higher end-of-term engagement than Python Tutor with no increase in cognitive load. Students reporting language barriers preferred multiple visuals, and eye-tracking showed code anchoring attention while memory views peaked on linked lists.