As a new programmer is learning their first or second programming language, one hurdle they must overcome is understanding the relationship between source code and the underlying memory representation of the state of a program as it runs. Software tools can support the user in learning this relationship by showing it to them explicitly. Many debuggers provide a rudimentary form of this functionality: they can list the names, values, and addresses of all variables in the namespace. Some tools have gone a step further, and provided dynamic schematic representations of the memory model: for example, see pythontutor.com.
Students in Data Structures and Algorithms, though, have a new conceptual task: move beyond the implementation details, and think abstractly about the behavior of canonical abstract data types as they are manipulated by a variety of different client algorithms.
Your project is to build a web app that allows a CS 201 or CS 252 student to type their own source code into an integrated editor, and then step through the code, while the app shows them an animated, visual representation of all the ADTs in their program, and how those ADTs' states are changing and interacting. Here are a couple mock-ups:
Here a Data Structures student has entered code on the left (maybe entered from instructions on a homework assignment) and then pressed the “step through” button in the upper left. As they step through their code, an execution marker shows them where they are, and the ADT visualization on the right first gets populated with their stack and queue, and then the contents of these structures move around to mirror the data movement expressed in the program.
Here an Algorithms student has entered code on the left to try out breadth-first search. In their code they've used a feature of the app's ADT implementation to generate a random test graph with multiple connected components. The app also populates the namespace with helpful numerical constants like “Inf”. As the student's code runs, they can see all the operations on the interaction data structures, as well as visual indications of access patterns in the graph.
Create the above-described tool as a web app, hostable on Carleton servers.