From Typing to Insights: An Interactive Code Visualization for Enhanced Student Support Using Keystroke Data

The continuous rising of digital learning platforms has unarguably brought about a surge in the amount of data obtained from different learning environments, which presents a great opportunity for computer science teachers to gain an understanding of students' coding processes. This is vital for enhancing student support as teachers can gain insights into students' thought process, strategies and identify areas where students might be struggling while tackling programming tasks. Traditional assessment methods such as feedback after homework submissions or completed lab assignments often results in late and untimely intervention that would prevent early dropouts and massive failures as the students' learning journey is neglected. We leverage students' keystroke data obtained from Python and Java-based introductory programming courses delivered through CODIO learning platform - covering 3 semesters and having 13 programming assignments each, to design an interactive code visualization platform using Streamlit. The application features an interface that reproduces students' code snippets with JavaScript enabled syntax highlighting. It includes a combination of dropdown menu and an adjustable slider which enables an instructor to navigate through the timestamps and have a detailed view of students' coding processes. The intervention ultimately fosters a more supportive learning environment and helps boost students' confidence.