There are four main steps to learning any new programming construct. The first step is learning how to read code by doing variable and code traces. The second step is writing code from pseudocode. The third step is to learn how to read code templates, such as a template for swapping two variables or a template for testing if a value is within an acceptable limit. The fourth step is to be able to apply learned code templates to unique problems.
These steps are laid out as a theory of sequential instruction in a paper by a group of researchers at the University of Washington. The lead author of the paper is Benjamin Xie, and you can find the paper here at his web site.
In this article, I’m going to discuss the first step in this theory of programming instruction – learning how to read code by practicing variable and code tracing.
Why Learning How to Trace Code is Important
Variable and code tracing (program tracing) are used to teach students how to read a program and accurately predict its behavior by being able to follow the control flow from the beginning of the program to the end of the program. In the paper by Xie, et.al., the authors declare that tracing code is a different skill than writing code and is a skill that must be mastered before learning to write code. A learner can’t be expected to write original code if they have not mastered reading code and predicting its behavior. A great way to teach this skill is by tracing code, both variables and whole programs.
Variable Tracing
There are several ways to practice variable tracing. One way is to perform a variable trace on a program. This technique is often taught at the very beginning of a course as students are introduced to how program process arithmetic statements. For example, the figure below shows a sample C++ while loop and a variable trace where new values for variables are written down and then marked off when the variable obtains a new value:
A more involved problem might have the student demonstrate how array data is used in a calculation. Given this JavaScript program:
let grades = new Array(71, 88, 83, 92, 67);
let total = 0;
let average = 0.0;
for (let i = 0; i < grades.length; i++) {
total += grades[i];
}
average = total / grades.length;
print("The average grade is", average);
This example demonstrates another way to show variables and their updates as a program executes.
Program Tracing
Program tracing has the student indicating the flow of control in a program, sometimes by drawing arrows indicating the flow and other times by circling lines that are executed or marking out lines of code that aren’t executed. We’ll look at examples of all of these in this section.
The first type of program tracing is drawing arrows to indicate the flow of control in a program. The figure below demonstrates how to show the control flow for a program that has one loop and an if statement inside the loop:
The other way you can trace a program is to circle the lines of a program that execute and mark through the lines of a program that don’t execute. Here is an example of using this technique on a program that involves an if-else if statement:
This program trace indicates the second print statement will execute because the temperature is above 60 and it is rainy outside.
These types of exercises require students to learn how to predict the behavior of a program by understanding how a program construct affects the program’s control flow.
Parsons Problems
A Parsons Problem is a set of scrambled lines of code that the student must put into the correct order so that the program executes properly. These types of problems are excellent for determining a student’s ability to read code. They have also been shown to be more efficient for teaching programming than exercises in writing code or fixing errors in existing code (see this paper).
Here is an example of a simple Parsons Problem involving variable swapping using a Parsons Problem generator. The first screen shot is the program with the code in the correct order:
Then click the Generate an Exercise button and the code is jumbled up and placed into blocks, as shown below:
The student then drags the blocks into the blank area to the right and then hits the Evaluate button to see if they’re answer is correct, as shown in this next screen shot:
Parson Problems are a fun and different way to test code reading knowledge and need to find a bigger role in computer science education. I will devote a future article to more on why Parsons Problems are so effective.
Reading Code Comes Before Writing Code
As Benjamin Xie and his co-authors state in the paper A theory of instruction for introductory computer programming, students learn programming better when they are introduced to code reading first via the use of various tracing techniques. Practicing reading code and participating in practice drills via code and variable tracing, along with learning how to recognize code errors, help the student gain a better understanding of how code works before they first even try to write one program. One of the major faults with computer programming education today is that instructors have their students writing code as early as the first day, which is way too soon for new programmers.
Beginning programming students need to learn to read code, understand what it means, how it works, how to recognize errors in programs, and why it works before they begin writing their own code.
Once students do begin writing code, they need to start slowly by taking clear, English-like instructions and turning those instructions into working code before they start working on harder problems. This step is the subject of my next article.