design(#89): visuele refresh Quiz (Brok 4) #101

New issue

Closed

opened 2026-04-21 15:12:18 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-21 15:12:18 +02:00

(Migrated from codeberg.org)

Onderdeel van #89 — REFINE-89.md Brok 4.

Scope (schermen 5, 6, 7 uit handoff)

Top-bar: sky-background met HP-bar (= streak-bar hergebruikt). XP-bar-visual optioneel dummy.
Map krijgt 4 px ink-frame + hard shadow.
Vraag-box in RkDialog-stijl (blue frame, chunky shadow) — geen Piep/mascotte (zie #109).
Opties als 2×2 chunky buttons met A/B/C/D-badges.
Correct-state: yellow banner + sparkle. Copy in NL/B1.
Wrong-state: rode frame-pulse + uitleg-tekst (geen mascotte-expressie).
Let op: beide states nu inline feedback; moet omgezet naar aparte UI-momenten binnen finishAnswer (index.html:1949-1985).

Impact

~250 LOC CSS + ~120 LOC JS (nieuwe feedback-animaties).
Raakt renderQuestion, checkMcAnswer, checkTextAnswer, handleMapClick, finishAnswer.
Alle tests/set*.spec.js steunen op bestaande DOM-selectors → bijwerken in dezelfde branch.

Afhankelijkheden

#97 (tokens) — blocker
#98 (CSS-extractie) — blocker
Vraag 1 → Optie C ✅, vraag 3 → mascotte uit scope ✅, vraag 4 → NL/B1 ✅. Unblocked.

Copy-constraint (design principle)

Alles Nederlands, B1-taalniveau. Specifiek:

❌ "SUPER EFFECTIVE" / "CRITICAL HIT" / "COMBO" / "Pokédex"
✅ "Goed gedaan!" / "Prima!" / "Reeks van X" / "Ranglijst" / "Voortgang"

Release

Feature-branch feature/design-quiz → preview → dev-review → merge.

Effort

3–4 dagen.

Onderdeel van #89 — REFINE-89.md Brok 4. ## Scope (schermen 5, 6, 7 uit handoff) - Top-bar: sky-background met HP-bar (= streak-bar hergebruikt). XP-bar-visual optioneel dummy. - Map krijgt 4 px ink-frame + hard shadow. - Vraag-box in `RkDialog`-stijl (blue frame, chunky shadow) — **geen Piep/mascotte** (zie #109). - Opties als 2×2 chunky buttons met A/B/C/D-badges. - Correct-state: yellow banner + sparkle. Copy in NL/B1. - Wrong-state: rode frame-pulse + uitleg-tekst (geen mascotte-expressie). - **Let op**: beide states nu inline feedback; moet omgezet naar aparte UI-momenten binnen `finishAnswer` (`index.html:1949-1985`). ## Impact - ~250 LOC CSS + ~120 LOC JS (nieuwe feedback-animaties). - Raakt `renderQuestion`, `checkMcAnswer`, `checkTextAnswer`, `handleMapClick`, `finishAnswer`. - Alle `tests/set*.spec.js` steunen op bestaande DOM-selectors → bijwerken in dezelfde branch. ## Afhankelijkheden - #97 (tokens) — blocker - #98 (CSS-extractie) — blocker - Vraag 1 → Optie C ✅, vraag 3 → mascotte uit scope ✅, vraag 4 → NL/B1 ✅. **Unblocked.** ## Copy-constraint (design principle) Alles **Nederlands, B1-taalniveau**. Specifiek: - ❌ "SUPER EFFECTIVE" / "CRITICAL HIT" / "COMBO" / "Pokédex" - ✅ "Goed gedaan!" / "Prima!" / "Reeks van X" / "Ranglijst" / "Voortgang" ## Release Feature-branch `feature/design-quiz` → preview → dev-review → merge. ## Effort 3–4 dagen.

Ghost commented

2026-04-21 23:15:41 +02:00

(Migrated from codeberg.org)

Fixed in v2.21.0 — Routekaart-refresh voor Quiz-scherm (sky score-bar, ink-frame map, paper RkDialog question-box, chunky A/B/C/D options, yellow/sky/red feedback banners).