gaetan/knowledgify

Decision: Card review UI — how the review screen works #11

New issue

Closed

opened 2026-08-20 14:35:59 +02:00 by gaetan · 1 comment

gaetan commented

2026-08-20 14:35:59 +02:00

Owner

Part of #1

Question

What does the card review screen look like, and how does the user interact with it?

The content model (Q&A + Vrai/Faux) and user model (no auth, single user) are settled. Now we need to decide the review experience.

Review flow:

Card display: The card shows the question. For Q&A, the answer is hidden. For Vrai/Faux, the user chooses.
Answer reveal: User clicks/presses a key to reveal the answer + explanation.
Rating: User rates their recall. This feeds into the SRS algorithm.

Rating mechanisms:

4 buttons (SM-2 standard): Again (red), Hard (orange), Good (blue), Easy (green). Maps to interval adjustment.
3 buttons (simplified): Wrong (red), Okay (orange), Right (green). Simpler, less granular.
Keyboard shortcuts: 1=Again, 2=Hard, 3=Good, 4=Easy. Essential for fast review.
Space to reveal, then number keys to rate: Anki's default. Very fast once memorized.

Screen layout:

Single card view — one card at a time, full screen. Minimal UI.
Card with progress bar — shows "3/25 cards due".
Category filter — review all due cards, or filter by category.

This decision is tightly coupled with the SRS algorithm (#8) and the tech stack (#9).

Dependencies

Depends on: #8 (SRS algorithm — determines rating buttons), #9 (tech stack — determines UI implementation)

Part of #1 ## Question What does the card review screen look like, and how does the user interact with it? The content model (Q&A + Vrai/Faux) and user model (no auth, single user) are settled. Now we need to decide the review experience. Review flow: 1. **Card display**: The card shows the question. For Q&A, the answer is hidden. For Vrai/Faux, the user chooses. 2. **Answer reveal**: User clicks/presses a key to reveal the answer + explanation. 3. **Rating**: User rates their recall. This feeds into the SRS algorithm. Rating mechanisms: - **4 buttons** (SM-2 standard): Again (red), Hard (orange), Good (blue), Easy (green). Maps to interval adjustment. - **3 buttons** (simplified): Wrong (red), Okay (orange), Right (green). Simpler, less granular. - **Keyboard shortcuts**: 1=Again, 2=Hard, 3=Good, 4=Easy. Essential for fast review. - **Space to reveal, then number keys to rate**: Anki's default. Very fast once memorized. Screen layout: - **Single card view** — one card at a time, full screen. Minimal UI. - **Card with progress bar** — shows "3/25 cards due". - **Category filter** — review all due cards, or filter by category. This decision is tightly coupled with the SRS algorithm (#8) and the tech stack (#9). ## Dependencies - Depends on: #8 (SRS algorithm — determines rating buttons), #9 (tech stack — determines UI implementation)

gaetan added the

wayfinder:grilling

label

2026-08-20 14:35:59 +02:00

gaetan added a new dependency

2026-08-20 14:36:07 +02:00

#8 Decision: SRS algorithm — SM-2, FSRS, or custom variant?

gaetan added a new dependency

2026-08-20 14:36:07 +02:00

#9 Decision: Tech stack — Go framework and frontend approach

gaetan referenced this issue

2026-08-20 14:36:24 +02:00

Decision: Dashboard and stats — what the user sees outside review #12

gaetan self-assigned this

2026-08-20 14:51:08 +02:00

gaetan commented

2026-08-20 14:54:33 +02:00

Author

Owner

Resolution

Card review UI decided:

Interaction model: Anki-style. Space to reveal, 1-4 to rate (1=Again, 2=Hard, 3=Good, 4=Easy). No mouse needed. On-screen hints show shortcuts.

Card display: Minimal card centered on screen. Large text. Category badge (colored, small). Progress indicator ("3/25") in corner.

Q&A flow:

Show question (answer hidden)
Press space → answer + explanation appear
Press 1-4 → next card instantly

Vrai/Faux flow:

Show statement
Click Vrai or Faux (or press V/F)
See correct answer + explanation
Press 1-4 → next card

Session: All due cards in one sitting. Optional category filter. No forced breaks.

Post-session: Summary stats (cards reviewed, retention rate, new cards learned) + quick actions ("Review all cards", "Review hard cards").

Template structure (Go templates):

templates/
  review.html        # main review screen (single page, Alpine.js drives it)
  dashboard.html     # post-session summary + dashboard
  categories.html    # category selection

Alpine.js components:

x-data="{ card, revealed, rating }" — manages card state
Keyboard listener for space + 1-4
AJAX POST to /review/rate for rating submission
DOM replacement for next card (no page reload)

## Resolution Card review UI decided: **Interaction model**: Anki-style. Space to reveal, 1-4 to rate (1=Again, 2=Hard, 3=Good, 4=Easy). No mouse needed. On-screen hints show shortcuts. **Card display**: Minimal card centered on screen. Large text. Category badge (colored, small). Progress indicator ("3/25") in corner. **Q&A flow**: 1. Show question (answer hidden) 2. Press space → answer + explanation appear 3. Press 1-4 → next card instantly **Vrai/Faux flow**: 1. Show statement 2. Click Vrai or Faux (or press V/F) 3. See correct answer + explanation 4. Press 1-4 → next card **Session**: All due cards in one sitting. Optional category filter. No forced breaks. **Post-session**: Summary stats (cards reviewed, retention rate, new cards learned) + quick actions ("Review all cards", "Review hard cards"). **Template structure** (Go templates): ``` templates/ review.html # main review screen (single page, Alpine.js drives it) dashboard.html # post-session summary + dashboard categories.html # category selection ``` **Alpine.js components**: - `x-data="{ card, revealed, rating }"` — manages card state - Keyboard listener for space + 1-4 - AJAX POST to `/review/rate` for rating submission - DOM replacement for next card (no page reload)

gaetan closed this issue

2026-08-20 14:54:39 +02:00

gaetan referenced this issue

2026-08-20 14:59:37 +02:00

Wayfinder map: Anki-like spaced repetition web app for culture générale #1