Python Tutor comes to Codio as “Visualizer”

Feb 27, 2019 8:40:52 PM

Visualizations can help students better understand complex programming concepts like parameters, constructors, and recursion.

visualizer header codio

For many computer science educators, Python Tutor is a familiar name —Philip Guo’s wonderful resource has been around for almost a decade. During that time, “over five million people in over 180 countries have used Python Tutor to visualize over 75 million pieces of code.”

Why a visualization tool? Why Python Tutor?

Previous research has shown that students who interacted more with an earlier version of Python Tutor outside of class had statistically significant higher midterm exam grades. Additionally, use of the visualizer outside of class was correlated with the students’ performance on the three unannounced quizzes.[1]

A professor at UC Davis wrote, “I have students who are currently retaking the class in the summer session, since they dropped out in spring, when they were struggling. I can see from their reaction in class that this tool has literally been an eye-opener for them - it’s making a huge difference![2]

One student posted, “This tool is particularly helpful when debugging recursive functions. I used it for the recursive unit at cs101 and it was a lifesaver.” Other students wrote that it was “exactly what I need to solve knotty python questions without cheating” and “exactly what I need to untangle lists and arrays.”[3]

Program visualizations “can help beginners develop a viable understanding of the notional machine…[and have] the potential to help students avoid and overcome misconceptions about tricky programming concepts such as parameters, constructors, or recursion.” [4]

But, do students actually use visualization tools?

Yes! Sirkiä and Sorva’s 2015 ICER paper reports that “Most students used the [program visualizations] throughout the course. Beginners used them somewhat more actively than non-beginners...Significantly, the students did not only use the [program visualizations] that were directly tied to a graded assignment.”[5]

And the students aren’t just clicking through mindlessly. When moving through the steps of the visualization “there are steps … where many students slow down. This suggests that a good number of students are paying attention and giving more consideration to certain animation steps than to routine ones. Informally, we observe that such collective slowdowns seem to happen in reasonable places, that is, at steps that are complex and/or pedagogically relevant.[6]

What makes Codio’s implementation different?

Our implementation of Visualizer is designed not only to improve your student’s learning efficiency—it’s designed to make course development and content authoring easier and more seamless for you, too!

Key Features of Codio’s Visualizer:

  • Natively-embedded for easy content authoring

  • Turn off editing and pair it with an assessment

  • Make the code editable for students to use as a debugger tool

  • Pair with Codio’s audio element to create impactful demonstrations that you can scale (great for online learning programs)!

  • Visualizer exists in its own resizable window, which means you and your students can see everything at once.

To learn more about Codio’s Visualizer, schedule a call with a Codio team member who can walk you through the experience and give you tips on how to enhance your own materials with Codio’s platform and resources.

Schedule a conversation

Click here for instructions on how to enable Visualizer to open automatically. 

visualizer open

Below: Codio's Visualizer is enabled

visualizer header

Click here for instructions on how create links in Guides so that students can easily open and close Codio's Visualizer.

create guides


[1] Alvarado, C., Morrison, B. B., Ericson, B., Guzdial, M., Miller, B., & Ranum, D. L. (2012). Performance and use evaluation of an electronic book for introductory Python programming.

[2] Guo, P. J. (2013, March). Online python tutor: embeddable web-based program visualization for cs education. In Proceeding of the 44th ACM technical symposium on Computer science education (pp. 579-584). ACM.

[3] Ibid. (pp. 4-5)

[4] Sirkiä, T., & Sorva, J. (2015, July). How Do Students Use Program Visualizations within an Interactive Ebook?. In Proceedings of the eleventh annual International Conference on International Computing Education Research (p. 179). ACM.

[5] Ibid. (pp. 185-186)

[6] Ibid. (p. 185)

Elise Deitrick

Written by Elise Deitrick

Director of Curricula and Education Programs Elise believes in making quality educational experiences available to everyone. With a BS in Computer Science and a PhD in STEM Education, she has spent the last several years teaching robotics, computer science and engineering. Elise now uses that experience and expertise to shape Codio's content.