09.4 - Quiz HUD / Timer, Progress, Counters (read-only)

[uxbyweng]

Value proposition

As a user
I want to see my progress and time,
so that I can track how I’m doing during the quiz.

Description

Add a Head-Up Display (HUD) that shows timer, progress (e.g. 3/10), correct and wrong counters.

Acceptance criteria

• HUD is visible during status=running.
• HUD shows:
  • elapsed time (mm:ss)
  • progress (currentIndex + 1 / selectedCards.length)
  • correctCount and wrongCount
• Timer starts when quiz starts and stops when quiz finishes.

Tasks

• Create a feature branch feature/quiz-hud.
• Implement timer state (startTime, interval or derived time).
• Render HUD component and wire to session state.
• Ensure flip resets appropriately when moving to the next card.