Concept-Driven Generation of Intuitive Explanations of Program Execution for a Visual Tutor

Abstract

Learning a programming language is hard. Students need to acquire three types of skills: (1) understand the new language concepts, (2) interpret pieces of code that use those concepts, and (3) write pieces of code involving those concepts. In this paper, we present an approach to help with the second type of skill. There are tools that explain/visualize the execution by stepping through the code. However, such tools suffer from two types of problems. First, the granularity of the stepping is coarse, hiding the intermediate steps in evaluating expressions. Second, for a single statement corresponding to a step of the execution, the order of the evaluation of source code constructs is not aligned with the order the constructs appear in the source code. To fix those, we combine compile-time with run-time information to automatically produce intuitive explanations of code. At compile time, we generate the explanations by traversing the AST. The runtime information provides the execution map and runtime values. We applied our idea to the Java version of Online Python Tutor, a web-based program visualization tool. Each explanation is complemented by highlighting the piece of the source code to which it corresponds, being spoken by the system, and a tree structure visualizing the evaluation of the involved expressions. The fact that the generation of explanations is syntax driven makes the result close to what a human tutor would provide.