Web-based IDE Component
Relevant source files
The following files were used as context for generating this wiki page:The Web-based IDE is a central feature of the PeP5 platform, providing a comprehensive environment for students to complete programming exams. It is built upon the Monaco Editor, the same editor that powers Visual Studio Code, offering a rich and familiar coding experience directly in the browser. The IDE is not just a text editor; it is deeply integrated with the platform's backend services to support features like code execution, running test cases, auto-saving, and AI-powered code evaluation.
This component is responsible for presenting the exam's project structure, allowing students to navigate and edit files, write code, and receive immediate feedback on their solutions. The architecture combines a JavaScript-based frontend for editor management with a C# backend that handles business logic, data persistence, and communication with external services like the Piston API for code execution and the OpenAI API for code analysis.
Frontend Architecture: Monaco Editor Integration
The frontend of the IDE is managed by the pepMonaco JavaScript object, which acts as a wrapper around the Monaco Editor API. This allows the Blazor application to interact with the editor instances through JS Interop.
Sources: wwwroot/js/pep-ide.js
Core pepMonaco Object
The window.pepMonaco object maintains a dictionary of active editor instances, keyed by the ID of their container element. It exposes a set of functions to create, configure, and interact with these editors.
The diagram below shows the interaction between a Blazor component and the pepMonaco JavaScript module to manage an editor's lifecycle.
Sources: wwwroot/js/pep-ide.js:4-80
Editor Configuration
When an editor is created, it is initialized with a set of default options to provide a user-friendly experience.
| Option | Value | Description |
|---|---|---|
automaticLayout | true | Ensures the editor resizes automatically with its container. |
minimap | { enabled: true } | Displays a code minimap on the side. |
fontSize | 14 | Sets the default font size. |
wordWrap | 'on' | Wraps long lines of code. |
tabSize | 4 | Sets the tab size to 4 spaces. |
insertSpaces | true | Inserts spaces for tabs. |
bracketPairColorization | { enabled: true } | Colorizes matching bracket pairs. |
quickSuggestions | { other: true, comments: false, strings: false } | Configures the behavior of IntelliSense-like suggestions. |
Sources: wwwroot/js/pep-ide.js:25-45
Key JavaScript Functions
The pepMonaco object provides several functions to manage the editor from the .NET side.
| Function | Description |
|---|---|
createEditor(id, content, lang, theme, ro, dotNetRef) | Initializes a new Monaco editor instance in the specified DOM element. |
getContent(id) | Retrieves the current text content from a specific editor. |
setContent(id, content) | Sets the text content of a specific editor, preserving the cursor position. |
setLanguage(id, language) | Changes the programming language syntax highlighting for an editor. |
setTheme(theme) | Sets the color theme for all Monaco editors on the page. |
dispose(id) | Disposes of a single editor instance to free up resources. |
disposeAll() | Disposes of all active editor instances. |
setMarkers(id, markers) | Displays error or warning squiggles in the editor based on an array of marker data. |
clearMarkers(id) | Removes all custom markers from an editor. |
Sources: wwwroot/js/pep-ide.js
Backend Services
The IDE's functionality is powered by a suite of backend services that handle code execution, evaluation, and data persistence.
Code Execution Service
The CodeExecutionService is responsible for running student code against provided inputs or test cases. It utilizes the external Piston API for sandboxed code execution across multiple languages.
Sources: Services/CodeExecutionService.cs
The service constructs a request to the Piston API, including the language, version, and a list of source files. For languages that support it, data files (e.g., .csv, .txt) are injected as string literals into a helper file to simulate a file system, as the Piston environment does not support arbitrary file I/O.
The following flowchart illustrates the code execution process.
The service uses the PistonExecuteRequest model to structure the data sent to the API.
| Field | Type | Description |
|---|---|---|
Language | string | The language to execute (e.g., "python"). |
Version | string | The specific version of the language (e.g., "3.10.0"). |
Files | List<PistonFile> | A list of files, each with a name and content. |
Stdin | string? | Standard input to be passed to the program. |
RunTimeout | int | The execution timeout in milliseconds. |
Sources: Services/CodeExecutionService.cs:72-94
AI-Powered Code Evaluation
A key feature of the IDE is its ability to provide AI-driven feedback. The OpenAIService handles this by sending the student's code, along with the task instructions, to the OpenAI API for evaluation.
Sources: Services/OpenAIService.cs
The EvaluateCodeAsync method constructs a detailed system prompt that instructs the AI model to act as a code reviewer. The prompt includes grading principles, scoring guidelines, and a required JSON output schema. This structured prompting ensures the AI returns consistent and parseable feedback.
The sequence diagram below outlines the AI evaluation flow.
The evaluation result is captured in the AICodeEvaluation class.
| Field | Type | Description |
|---|---|---|
TaskId | int | The ID of the evaluated task. |
Score | decimal | The final score awarded for the task. |
CodeQualityScore | decimal | A score from 0-100 for code quality. |
CorrectnessScore | decimal | A score from 0-100 for logical correctness. |
Feedback | string | Detailed constructive feedback. |
Strengths | string | A summary of what the student did well. |
AreasForImprovement | string | Specific suggestions for improvement. |
SolutionSuggestion | string | A brief explanation of a better approach. |
CodeSnippets | List<CodeSnippetFeedback> | Specific code snippets with targeted comments. |
Sources: Services/OpenAIService.cs:20-36
Exam and File Persistence
The ProgrammingExamService is the backbone for managing the state of a programming exam attempt. It handles creating the attempt, saving student progress, and processing the final submission.
- Starting an Exam:
StartProgrammingExamAsynccreates aProgrammingExamAttemptand copies theProjectFileentities toStudentProjectFileentities, giving the student their own workspace. - Saving Progress:
SaveStudentFileAsyncis called periodically (auto-save) or manually to update theContentof aStudentProjectFilein the database. - Submitting:
SubmitProgrammingExamAsyncmarks the attempt asCompletedand creates a finalCodeSubmissionsnapshot of all files.
Sources: Services/ProgrammingExamService.cs:410-454, Services/ProgrammingExamService.cs:522-552, Services/ProgrammingExamService.cs:618-646
Data Models
The entire programming exam experience, including the IDE, is supported by a set of relational data models. These entities define the structure of an exam, the tasks, the files, and the student's work.
The following ER diagram shows the core relationships between these models.
Sources: Models/ProgrammingExamModels.cs
Key Data Entities
| Entity | Description |
|---|---|
ProgrammingExam | Defines the overall exam, including its title, language, and associated course. |
ProjectFile | Represents a starter file for the exam project (e.g., Main.java, data.csv). These are the templates students begin with. |
ProgrammingTask | An individual problem or requirement within the exam, with instructions and points. |
ProgrammingExamAttempt | A student's specific session for an exam, linking the student to the exam and tracking their overall progress. |
StudentProjectFile | A student's version of a project file. The Content of this entity is what the IDE loads and saves. |
TaskProgress | Tracks a student's progress on a specific task, including scores and AI-generated feedback. |
Sources: Models/ProgrammingExamModels.cs:7-390
Conclusion
The Web-based IDE component in PeP5 is a sophisticated and highly integrated system. It leverages the power of the Monaco Editor for a premium frontend experience while relying on a robust set of backend services for critical functionalities. The seamless integration of code editing, sandboxed execution via the Piston API, and intelligent feedback from the OpenAI API provides a comprehensive and modern environment for conducting and assessing programming examinations. The underlying data model ensures that all student work and evaluation data is persisted reliably, making it a cornerstone of the PeP5 platform.