A Comparative Analysis of Interactive Coding Platforms and a Prototype of a New Platform Based on Recording and Replaying User Interactions

Interactive coding platforms such as Codecademy, Khan Academy, Jupyter, Pluto, and
others have become popular tools in programming education. They allow learners to
experiment with code, receive immediate feedback, and engage with multimedia-
enhanced instruction. However, despite their interactive features, there remains
significant potential to improve instructional design and usability to better support
learning outcomes. Common layouts—such as notebook-style or split-pane formats—
often separate instructional content from coding tasks, disrupting the learning flow.
Additionally, limited integration of multimedia, interactivity, and collaboration
features can increase cognitive load and reduce learner engagement. Furthermore,
creating interactive lessons frequently remains a technically demanding process for
instructors. These challenges can collectively impact the overall effectiveness of the
learning experience.
Interactivity plays a crucial role in sustaining learner engagement, motivation, and
satisfaction—key factors that influence the success of online education. To build on the
strengths and address the challenges of current coding platforms, this thesis introduces
Magic Code Box (MCB), a prototype of an interactive, video-like coding environment
that integrates instruction, live code execution, in-flow quizzes, debugging tools,
visualizations, content creation, and real-time collaboration into a unified platform.
MCB captures a wide range of instructor interactions—including code edits, mouse and
keyboard input, voice narration, program output, visualizations, and embedded
questions—and compiles them into editable, replayable lessons. Learners can pause
sessions to modify and run code, observe results, visualize memory states, respond to
quizzes, and collaborate with others in real time. By offering this integrated and
interactive design, MCB aims to minimize distractions, deepen understanding, enhance
retention, and ultimately foster greater engagement and improved learning outcomes.
The thesis details the design and implementation of MCB and explores its application
in real-world contexts. Findings suggest that MCB holds promise for improving
interactivity, learner engagement, usability, and overall instructional effectiveness.