Learning programming at scale

Millions of people around the world — from aspiring software engineers to data scientists — now want to learn programming. One of the best ways to learn is by working side-by-side with a personal tutor. A good tutor can watch you as you code, help you debug, explain tricky concepts on demand, and provide encouragement to keep you motivated. However, very few of us are lucky enough to have a tutor by our side. If we take a class, there might be 25 to 50 students for every teacher. If we take a MOOC (Massive Open Online Course), there might be 1,000 to 10,000 students for every professor or TA. And if we’re learning on our own from books or online tutorials, there’s no tutor or even fellow learners in sight. Given this reality, how can computer-based tools potentially bring some of the benefits of face-to-face learning to millions of people around the world who do not have access to an in-person tutor?

I’ve begun to address this question by building open-source tools to help people overcome a fundamental barrier to learning programming: understanding what happens as the computer runs each line of a program’s source code. Without this basic skill, it is impossible to start becoming fluent in any programming language. For example, if you’re learning Python, it might be hard to understand why running the code below produces the following three lines of output:

Learn faster. Dig deeper. See farther.

Join the O'Reilly online learning platform. Get a free trial today and find answers on the fly, or master something new and useful.

Learn more

A tutor can explain why this code prints what it does by drawing the variables, data structures, and pointers at each execution step. However, what if you don’t have a personal tutor?

pythontutor.com – visualize program execution

To mimic how a human tutor would illustrate code execution, I’ve developed pythontutor.com.

Using this tool, you can:

1. Choose your programming language and write code in your browser. The tool currently supports Python, Java, JavaScript, TypeScript, and Ruby.
2. Run your code and use the slider to step forward and backward to any execution step.
3. See a visualization of the execution state at each step, featuring stack frames, variables, data structures, and pointers.
4. See the terminal output up to the current step.

This tool helps people build robust mental models of what their code is doing behind the scenes, which is crucial for learning any programming language. So far, over 1.2 million people in over 165 countries have used it to visualize over 11 million pieces of code, often as a supplement to learning from MOOCs, digital textbooks, and online tutorials.

pythontutor.com is free and open-source software, built upon Node.js and Docker for the backend, and D3, jsPlumb, and Ace for the frontend. Read my research paper ¹ for details.

Codechella – multi-user code visualizations

Visualizing execution is helpful, but what would be better is to have a tutor sit by your side and explain those visualizations to you. To support this use case, I’ve developed a tool called Codechella ² that enables multiple people to connect to a single pythontutor.com session.

To use Codechella:

1. Click the “Start shared session” button at the top of the pythontutor.com interface. Then send the unique session URL to a tutor, which will bring them into your session.
2. Now the two of you can write code together in a collaborative text editor. Also, you will both see the same synchronized view of the visualization so that you can explore it together.
3. Chat with each other using the embedded chat box.
4. See each other’s mouse cursors in real time.

Codechella approximates the intimate experience of people huddling around a single computer to learn together. In its first nine months of deployment, people from 296 cities across 40 countries participated in 299 sessions, chatting in 27 different languages. 57% of sessions had participants who joined from different cities, and 12% from different countries, which shows that Codechella connected people who were otherwise unable to get together to learn face-to-face.

Codeopticon – one-to-many remote tutoring

Codechella works well for one-on-one tutoring, but there are usually far fewer tutors than learners. For instance, in a large university course or a MOOC, a TA might be responsible for helping hundreds or even thousands of learners. There is no way that they can devote the time to tutoring everyone individually. So to make the most of their scarce time, I’ve developed a real-time dashboard interface called Codeopticon ³.

Each tile in the interface (eight shown here) displays one learner’s actions in real time as they are writing, running, and visualizing code on pythontutor.com. The most active learners’ tiles are always shown at the top. A tutor can:

1. See each learner’s code edits in real time, with insertions in green and deletions in red.
2. See code errors in red, which could reveal learner struggles.
3. Use a slider to see a history of each learner’s actions, which could also reveal struggles.
4. Start a chat with any number of learners directly in their tiles. Each learner sees an embedded chat box in their pythontutor.com session, similar to using Codechella.

Codeopticon scales up a single tutor’s scarce attention so that they can monitor and help multiple learners at once. During user testing, we found that tutors could keep an eye on around 50 learners during a 30-minute session, start 12 chat conversations, and concurrently help 3 learners at once. Tutors felt surprisingly immersed in the experience as though they were helping students face-to-face in the computer lab.

Codepourri – crowdsourced tutorial generation

Codeopticon is useful for making the most of a single tutor’s limited time, but what if you’re learning on your own without a tutor in sight? If you’re taking a MOOC or using online resources such as StackOverflow or pythontutor.com, there are up to hundreds of other learners on that same website at the same time you are. Can you somehow call out to them for help? My student Mitchell and I built a tool called Codepourri ⁴ that explores this possibility.

Using Codepourri, you can upload your code to pythontutor.com and let a crowd of people collectively create a tutorial for it by annotating each execution step in the visualization. For example, here are four steps of a tutorial explaining how a simple “while” loop works:

We deployed Codepourri live on pythontutor.com and recruited a crowd of learners there to volunteer to annotate two pieces of Python code from a textbook. The crowd wrote 145 total annotations, and a panel of four Python experts judged 65% of those annotations as correct and 17% of the correct ones as containing surprising insights that even the experts did not consider. The crowd then voted on the best annotations for each step to include in a final tutorial, and the experts judged the learner-created tutorials as comparable to those that experts would create. This experiment shows that, at least for simple code, Codepourri allows you to summon a crowd of fellow learners to explain how a piece of code works, even when there are no experts around.

To recap, pythontutor.com and the three extensions built upon it — Codechella, Codeopticon, and Codepourri — bring some of the benefits of face-to-face learning to millions of people around the world who want to learn programming but who do not have access to an in-person tutor. Email me at philip@pgbovine.net if you have questions about any of these projects!

References

1. Philip J. Guo. Online Python Tutor: Embeddable Web-Based Program Visualization for CS Education. ACM Technical Symposium on Computer Science Education (SIGCSE), March 2013. [PDF]↩

2. Philip J. Guo, Jeffery White, Renan Zanelatto. Codechella: Multi-User Program Visualizations for Real-Time Tutoring and Collaborative Learning. IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC), Oct 2015. [PDF]↩

3. Philip J. Guo. Codeopticon: Real-Time, One-To-Many Human Tutoring for Computer Programming. ACM Symposium on User Interface Software and Technology (UIST), Nov 2015. [PDF]↩

4. Mitchell Gordon and Philip J. Guo. Codepourri: Creating Visual Coding Tutorials Using A Volunteer Crowd Of Learners. IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC), Oct 2015. [PDF]↩