Jsvee & Kelmu: Creating and tailoring program animations for computing education

Abstract

To learn to program, a novice programmer must understand the dynamic, runtime aspect of program code, a so‐called notional machine. Understanding the machine can be easier when it is represented graphically, and tools have been developed to this end. However, these tools typically support only 1 programming language and do not work in a Web browser. In this article, we present the functionality and technical implementation of the 2 visualization tools. First, the language‐agnostic and extensible Jsvee library helps instructors visualize notional machines and create expression‐level program animations for online course materials. Second, instructors can use the Kelmu toolkit to augment automatically generated animations, for instance, by adding annotations such as textual explanations and arrows on top of the original animation. Both of these libraries have been used in introductory programming courses, and there is preliminary evidence that learners find the animations useful and annotated animations change student behavior.

Interaction support systems between teachers and visual content for effortless creation of program visualization

“…A few systems, such as Jsvee & Kelmu (Sirkiä, 2018) and ANIMAL (Rössling & Freisleben, 2002), can customize PVs. Jsvee & Kelmu is PV system consisting of two subsystems: Jsvee, which can automatically create PVs similar to many other existing PV systems, and Kelmu, which allows teachers to annotate the PVs generated by Jsvee.…”

A Study of Worked Examples for SQL Programming

“…Animated examples do not limit the example presentation to just showing students the code of example programs, but allow the students to see the code executed step-by-step using program visualization [26]. The use of step-wise program visualization enables students to see the internal state and intermediate results or program execution, which are usually hidden [11,19,25], and thus better understand the behavior of program constructs [29]. More recently, there have been several attempts to develop other types of worked examples that focus on code exploration rather than code animation [8,31]…”

“…Students were assigned randomly to each of the four study conditions. Prior to the experiment, we hypothesized that augmenting query execution illustrations with textual explanations might improve the learners' understanding of visualization and raise learners' eagerness to explore more execution steps [20,25]. Similarly, we expected that the concept-based OLM would provide additional navigational support and could potentially increase student engagement with the learning tools [7,9].…”