Student Task Solving Experience
Relevant source files
The following files were used as context for generating this wiki page:- frontend/src/pages/class/[classId]/session/[sessionId]/join.tsx
- frontend/src/pages/login/student.tsx
- frontend/src/pages/class/[classId]/session/[sessionId]/task/[taskId]/solve.tsx
- backend/src/api/solutions/solutions.controller.ts
- frontend/src/components/Task.tsx
- e2e/tests/task/solve-task.spec.ts
- frontend/src/api/collimator/hooks/solutions/useSolution.ts
- frontend/src/components/task/TaskForm.tsx
The Student Task Solving Experience provides the user interface and logic for students to participate in a class session, work on assigned tasks, and submit their solutions. The system supports both authenticated and anonymous student sessions. Students interact with tasks through an embedded application, such as Scratch, which is loaded within an iframe. The flow begins with a student joining a session via a unique link, after which they can navigate between tasks, save their progress, and submit final solutions for evaluation.
Session Joining
A student initiates their experience by navigating to a session-specific "join" URL. The system then determines whether the session requires authentication or allows anonymous access.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/join.tsx, frontend/src/pages/login/student.tsx
Joining Flow
The following diagram illustrates the logic for a student joining a session.
This diagram shows the branching logic for anonymous versus authenticated session joining.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/join.tsx:37-56, frontend/src/pages/login/student.tsx
- Anonymous Sessions: If a session is configured for anonymous access, the student is prompted to enter a pseudonym. This allows them to participate without logging in, but their work is only tied to the current browser session.
- Authenticated Sessions: If the session is not anonymous, the student is redirected to a login page (
/login/student). After successful authentication (e.g., via Microsoft), they are redirected to the task.
Task Solving Interface
The primary interface for solving a task is located at /class/{classId}/session/{sessionId}/task/{taskId}/solve. This page embeds an external application (e.g., Scratch) within an iframe to provide the task-solving environment.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/task/[taskId]/solve.tsx, frontend/src/components/Task.tsx, e2e/tests/task/solve-task.spec.ts:80-82
Key UI Components
| Component/Page | Description | File Path |
|---|---|---|
SolveTaskPage | The main page component that orchestrates data fetching, state management, and user actions for solving a task. | frontend/src/pages/class/\[classId\]/session/\[sessionId\]/task/\[taskId\]/solve.tsx |
Task | A reusable component that wraps the embedded application and the session menu overlay. It handles student activity tracking. | frontend/src/components/Task.tsx |
EmbeddedApp | A generic component responsible for rendering the iframe and managing communication with the embedded application via iframe-rpc-react. | frontend/src/components/EmbeddedApp.tsx |
| Session Menu | An overlay, toggled by the "Show/Hide Session" button, that displays the list of all tasks in the session, allowing the student to navigate between them. | frontend/src/components/Task.tsx:39-68 |
User Actions
The interface provides several key actions for the student:
- Submit Solution: Saves the current state of the work as a solution for the task.
- Show/Hide Session: Toggles the session menu to navigate between tasks.
- Export/Import: Allows the student to download their current work to a file or upload a file to continue their work.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/task/[taskId]/solve.tsx:241-279
Loading Previous Work
When a student opens a task, the system attempts to load their most recent solution.
This diagram shows how the system decides whether to load a student's previous work or the initial task template.
The onAppAvailable callback in SolveTaskPage is triggered once the embedded application is ready. It uses the useFetchLatestSolutionFile hook to get the student's last submission for that task.
- If a file is found, it's sent to the
iframevia aloadSubmissionrequest. - If no previous solution exists (or the fetch fails), the original task template (
taskFile) is loaded via aloadTaskrequest.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/task/[taskId]/solve.tsx:181-206, frontend/src/api/collimator/hooks/solutions/useSolution.ts:133-148
Solution Submission
Submitting a solution involves a coordinated flow between the frontend UI, the embedded application in the iframe, and the backend API.
Sources: frontend/src/pages/class/[classId]/session/[sessionId]/task/[taskId]/solve.tsx:119-179, backend/src/api/solutions/solutions.controller.ts:47-75
Submission Sequence Diagram
The following diagram details the sequence of events when a student submits a solution.
This diagram illustrates the end-to-end process of a student submitting a solution, from the UI to the database.
Backend API Endpoint
The submission is handled by the createStudentSolution endpoint in the SolutionsController.
| Method | Endpoint | Description |
|---|---|---|
POST | /classes/:classId/sessions/:sessionId/task/:taskId/solutions/student | Creates a new student solution. The request is multipart/form-data and includes the solution file and an array of test results. The student is identified via their authentication context. |
Sources: backend/src/api/solutions/solutions.controller.ts:47-75
The controller method uses the FileInterceptor to handle the file upload and a custom JsonToObjectsInterceptor to parse the tests field from the form data. The SolutionsService is then responsible for persisting the solution and its associated data.
Sources: backend/src/api/solutions/solutions.controller.ts:56-69