RAVIC: Runtime Analysis Visualizer for Introductory Courses

As the global economy's demand for computer applications soars, the demand for well-trained computer science (CS) professionals is rising. This trend fuels a surge in CS undergraduate degree production which, in turn, puts a strain on departmental resources. In addition, CS departments have to contend with high dropout and failure rates, fragile learning and bimodal outcomes \citeRobins19. Thus, the need for effective teaching techniques in CS education is greater than ever. Some concepts and skills in CS are very difficult to acquire such as analyzing the running time of short pieces of code \citeAlbluwi21, and particularly, computing the running time of loops. Most instructors use a trace-sum-approximate flow chart described in \citeAlbluwi21 to teach students how to analyze the running time of code. The two most important skills in this analysis process are the tracing of code and the approximation of the sum of different number patterns, e.g. the sum of the linear number pattern 1+2+3+...+n is equal to \fracn*(n+1) 2 and it is approximated to O(n^2). Novice programmers struggle with both these integral skills \citeCunningham17, Farghally17. Visual systems have been recognized to improve students' understanding of these concepts \citeFarghally17. Several tools have been developed to assist students with running time analysis. Existing tools are targeted at students with more advanced training, such as a background in advanced data structures (AAV \citeFarghally17 ) or experience with code tracing and approximation of the sum of different number patterns (Compigorithm \citeSmith20 ). However, none of the existing tools teach students how to compute the running time at the introductory level, and this gap presented a unique opportunity for us. An effective run-time analysis visualization system for introductory courses must depict the tracing and approximation of the sum. We propose a design in which the depiction of the loop tracing for run-time analysis is done through the use of a table, where the columns represent loop variables and each row represents one iteration of the loop. More specifically, it tabulates the operations in the order they happen during the execution of the loop as shown in Figure~\reffig:ravic. The table is displayed alongside the program. The current line of code being executed is highlighted while the table information is updated. At the end of the execution, the number of operations is determined by summing all the operations in the table column-by-column from the right-most side to the left as shown in Figure~\reffig:ravic. The student controls the visualization using navigation arrows to go back and forth. Instructors use a similar technique in the tracing of loops, but this approach allows students to proceed at their own pace. The tool is currently being developed as an extension to VS Code.