ViLLEPlug

Introduction

ViLLEPlug is a Visual Studio Code extension designed for programming students. It lets users complete coding exercises directly in their editor, making learning more interactive and efficient. With ViLLEPlug, students can access tasks, write code, submit solutions, and receive instant feedback – all within VS Code. By integrating exercises into the coding environment, ViLLEPlug helps students focus on practicing and improving their programming skills without switching between different platforms.

Goal

The goal of ViLLEPlug was to integrate a real-world development environment—Visual Studio Code—with a course exercise system like ViLLE. By embedding exercise workflows directly into the IDE, the project aimed to improve the programming experience for students by offering instant feedback and reducing friction between coding and learning platforms. This integration supports retry-based learning and aligns educational tools with industry practices, while the learning management system (LMS) continues to handle scoring, logins, and student tracking.

Implementation

ViLLEPlug follows a client-server architecture and consists of two main parts:

• Frontend: The VSCode extension, built with TypeScript and WebView components.
• Backend: A mockup backend created for testing and demonstration purposes. This simulates how the plugin will eventually connect to ViLLE's real backend.

Technologies used

• Frontend:

• Visual Studio Code

• TypeScript

• HTML/CSS

• Other tools:

• GitHub (version control)

• JIRA (project management)

• Discord (team communication)

• OneDrive (documentation)

About HAKA Login

Initially, HAKA login was considered for user authentication. After discussions with the customer, it was agreed that implementing HAKA login would be out of scope for this Capstone project. Since ViLLE already has its own authentication infrastructure and will handle integration later, our implementation focused on plugin functionality rather than authentication.

Results

The result is a fully functional early version of the ViLLEPlug extension, available currently as a .vsix file. It is testable using the mockup backend and demonstrates all key features, including:

• Logging in
• Viewing and selecting exercises from a list
• Writing code directly in VSCode
• Submitting solutions and receiving instant feedback
• Navigating exercises using a tree-view interface
• Support for multiple operating systems (Windows, macOS, Linux)

The mockup backend is not part of the deliverable, but it allowed for effective testing during development.

Future Work

• HAKA Integration: To be implemented by the ViLLE team during actual system integration.
• Use of ViLLE’s real backend: Replace mockup API with real ViLLE endpoints.
• VSCode Marketplace: Publish the plugin for easier public access.
• UI Enhancements: Improve layout, fonts, and dynamic content handling.
• Expanded Data Models: Round and Course structures could be enhanced with additional metadata.

Links

Promo Video
Landing page