lnet_tutor/docs/angular-frontend-spec.md

Angular Frontend Specification (Minimal)

Purpose

Render exams from JSON, preserve progress with autosave, support resume, and submit to produce bundled output.

Routes

• / → list of available exams (published − finished)
• /exam/:examId → exam player (start or resume)
• /done/:attemptId → submission confirmation with output file reference

Data Loading

• On /exam/:examId, call GET /api/exams/:examId to load exam
• Start/resume via POST /api/exams/:examId}/attempt (idempotent: returns existing in-progress attempt if any)

State & Autosave

• Local reactive form/state per question
• Autosave every N seconds and on blur/change via PUT /api/attempts/:attemptId
• Show "Saved just now" status with debounce

Timer & Submit

• Countdown from durationMinutes
• Auto-submit on expiry
• Manual submit → POST submit → redirect to /done/:attemptId

Resume Behavior

• On load, hydrate answers from attempt JSON
• Scroll to last answered question; restore timer based on startedAt and durationMinutes

Edge Cases

• Version drift: if exam JSON metadata.version differs from attempt’s examVersion, show non-blocking warning
• Connectivity loss: queue autosaves and replay when online
• Double tabs: server enforces single active attempt; UI warns

Accessibility & UX (minimal)

• Keyboard-first navigation, ARIA roles
• Clear focus states and error messages
• Save status and timer announced politely