Coducate Project Page

Abstract

Live coding is a pedagogical technique used in programming education to demonstrate coding and problem-solving in real-time. While it engages students and enhances learning outcomes, it imposes a significant cognitive load on instructors who must simultaneously type, explain, debug, and manage classroom interactions. This thesis proposes Coducate, a code editor extension designed to streamline instructor-led live coding by providing supportive features for instructors. Coducate also improves the student experience by reducing the need for note-taking and simplifying in-class collaboration. Key functionalities include notes written directly inside the code editor and the use of AI code suggestions without participants noticing it. To evaluate the system's usability, a small usability study was conducted using the System Usability Scale (SUS) questionnaire and open-ended questions. The study resulted in a SUS score of 86.5, which is considered "excellent" according to industry benchmarks, indicating high user satisfaction.

Demos

The following videos demonstrate the key features of Coducate. For detailed instructions on how to use Coducate, including all commands and their explanations, please visit the extension documentation on the Visual Studio Code Marketplace.

Control participant permissions to foster collaborative coding. The Diff-Editor View allows for a side-by-side comparison of the instructor's code with the participants' code to manage contributions effectively. Using this view, instructors can either Accept Changes, writing the participants' code back to their VS Code editor, or Reject Changes, discarding the participants' code and reverting to the instructor's version within the web view.

Provide participants with a real-time view of the instructor's terminal activity. The terminal displayed in the web view is an emulated terminal and is always read-only for participants. The instructor interacts with the actual pseudo-terminal directly within VS Code.

Replace selected lines of code with a named in-editor note, offering inline suggestions in various modes: type manually, reveal word-by-word, line-by-line, or display everything at once.

Architecture

The architecture of the project comprises three main components: the frontend, the backend, and the VS Code extension, each maintained in its own GitHub repository. These components communicate with one another via web sockets, ensuring real-time synchronization and efficient data exchange. The frontend and backend are hosted in separate Docker containers, while a third Docker container runs a MySQL database to store the room data. The frontend is a single-page application developed using Vite with React and TypeScript (TSX). The backend, built with Express and TypeScript, handles the server-side logic. The VS Code extension facilitates collaborative editing by leveraging the VS Code API and the peer-to-peer editing framework Yjs. The following diagram illustrates the interaction between these components, showing the flow of data between the web view (frontend), the editor view (VS Code extension), the backend, and the MySQL database.

Coducate Architecture Diagram

Usability Study

To evaluate the system's usability, a small usability study was conducted using the System Usability Scale (SUS) questionnaire and open-ended questions. The study resulted in a SUS score of 86.5, which is considered "excellent" according to industry benchmarks, indicating high user satisfaction.

Coducate: A Code Editor Extension to Streamline Instructor-Led Live Coding