Skip to content
Anh LeJune 16, 20204 min read

How to Review Code Using Codio’s Code Playback Tool

In Computer Science Education, we know the process is as important as the product. However, when code is submitted, it only provides insight into the latter. Codio’s Code Playback is an extremely insightful feature that enables teachers to get a glimpse into their students’ thought processes. It takes snapshots of their code creation from beginning to end.

Codio’s Code Playback feature allows teachers to:

  • See students’ implementation of learned concepts
  • Determine areas where students encounter difficulties
  • Grade students’ effort
  • Highlight potential cases of plagiarism


Codio Integrates Code Playback Tool

Code Playback is built into Codio’s integrated development environment (IDE). This feature is available to all teachers and is extremely easy to use. With a few clicks, teachers can access all of the files students produce in Codio while learning how to write code.

Now, when teachers want to see how a student writes a particular code file, they can simply select Tools → Code Playback. Codio will open the history of the in-focus code file. For a multi-file project, click on the folder icon to pull up the history of other project files too.

A program used to teach you how to run code

The Play button will show a series of snapshots of the student’s work from start to finish. A green highlight shows the student’s creation of new codes. Meanwhile, a red highlight with a strikethrough shows deletions of the student’s work. Teachers can pause the Code Playback tool and use the Next or Previous Buttons to move individual snapshots forward or backward.

You can also click to focus the code playback bar and use the arrow keys to navigate the snapshots. Alternatively, clicking and dragging the playback slider will accomplish the same tasks. Teachers can also use Code Playback on content collaboration—it’s available on projects and assignments.


Seeing Students’ Implementation of Learned Concepts

Code Playback enables teachers to get a glimpse into their students’ thinking on assignments on how to program where students are expected to produce written code. The green highlights show the work that the students create frame-by-frame.

This workflow, for example, can illuminate if students are building their code and then modularizing it, or starting from a framework of modularity. Additionally, teachers can see red highlights with strikethroughs to indicate deletion. This means teachers can see if students fall back on tinkering instead of thoughtful debugging.

Codio's Code Playback Tool that teaches you how to run code

Determining Areas Where Students Encounter Difficulties

Since Code Playback also captures the work that students delete, it indicates areas where students encounter the most trouble. The red highlights and strikethroughs show ideas that the students have removed from their work. For example, areas with heavy deletions can indicate students struggle to select appropriate concepts to apply in the given context. Or, it can show ineffective debugging practices such as deleting sections with bugs and re-writing.

Grading Students’ Effort

The effort that students put into their work is not readily apparent from just the final file or code output. Code Playback allows teachers to provide students' grades based on effort, as it allows them to trace the student’s journey step by step. Instead of using Codio’s time spent data, teachers can now see what work has been done when a student spends 3x the amount of time on an assignment compared to their peers.

Similar to partial points on an exam for work done on an incomplete or incorrect answer, Code Playback’s transparency into the student process allows teachers to manually add points to indicate effort.

Highlighting Potential Cases of Plagiarism

Any time a student copies chunks of codes and pastes them into the IDE, the Code Playback tool captures those moments. The Codio plagiarism highlighting feature can be critical in curbing harmful practices. It makes the copying and pasting of code easy to detect, as it shows when a large section of a student’s work suddenly appears in a green highlight. This contrasts with how codes are typically typed and will reveal to teachers all moments when students copy and paste materials into their work.

Codio's playback tool

Future Updates

This release is just the beginning - we will continue to build on and improve Code Playback. Over the next several months, look out for the ability to:

  • Glance into students’ code history in a single frame, revealing the students’ code and all their deletions, side-by-side, for a quicker peek into how they built their code.
  • Show every compilation and run of the code at their respective timestamps, which will help give an in-depth insight into students’ coding and debugging behaviors.
  • Reveal how long it took students to debug and solve errors by providing information on the duration of error and error-free states during their coding progress.

To learn more about Codio, view our on-demand demo—or download our product guide.

Watch On-Demand Demo

Create your free instructor account today!



Anh Le

Anh received his Master of Science in Computer Science from the University of Massachusetts, Boston, and is currently a curriculum developer at Codio. With backgrounds in both computer science and education, his goal is to create and provide content to students in a manner that will help them grow as individual learners.