In Computer Science Education, we know that the process is as important as the product. However, when code is submitted, it only provides insight into the latter. Codio’s Code Playback feature enables teachers to get a glimpse into their students’ thought processes by taking 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 that students produce in Codio.
Now, when teachers want to see how a particular code file was built, they can simply select Tools → Code Playback and 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 while a red highlight with strikethrough shows deletions of the student’s work. Teachers can pause the Code Playback and use the Next change or Previous change buttons to move individual snapshots forward or backward.
You can also click to focus the 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 as well as assignments.
Seeing students’ implementation of learned concepts
Code Playback enables teachers to get a glimpse into their students’ thinking on assignments where students are expected to produce written code. The green highlights show the work that is created by the students 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 - meaning 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 can be a powerful indicator of 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 that students are struggling to select appropriate concepts to apply in the given context or 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 a code file. Code Playback provides a way for teachers to provide students grades based on effort. 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 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 captures those moments. Copying and pasting codes are shown 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.
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.