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.
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.
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.
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.
Create your free instructor account today!
