Keyboard-first session UX and progress feedback #34

New issue

Open

opened 2026-09-26 13:58:39 +00:00 by belvedere · 0 comments

belvedere commented

2026-09-26 13:58:39 +00:00

Collaborator

Objective: A session is something you can do 200 reps of without touching the mouse.

Files:

Modify: practice_live.ex, assets/js/app.js (a colocated hook if needed)

Steps:

Bindings: space reveal, 1–4 grade, enter submit a typed answer.
Show a progress bar and a remaining count.
Show the answer's audio/pinyin/romanisation slot if available (render nothing when absent).
If a JS hook manages its own DOM, set phx-update="ignore" on it (AGENTS.md).

Verify: complete a full session using the keyboard only.

Note: implement the keys in a hook under assets/js/, never as an inline <script> in HEEx.

**Objective:** A session is something you can do 200 reps of without touching the mouse. **Files:** - Modify: `practice_live.ex`, `assets/js/app.js` (a colocated hook if needed) **Steps:** 1. Bindings: `space` reveal, `1`–`4` grade, `enter` submit a typed answer. 2. Show a progress bar and a remaining count. 3. Show the answer's audio/pinyin/romanisation slot if available (render nothing when absent). 4. If a JS hook manages its own DOM, set `phx-update="ignore"` on it (AGENTS.md). **Verify:** complete a full session using the keyboard only. **Note:** implement the keys in a hook under `assets/js/`, never as an inline `<script>` in HEEx.

belvedere added this to the M4 — Practice experience milestone

2026-09-26 13:58:39 +00:00

belvedere added the

kind

feature

area

labels

2026-09-26 13:58:39 +00:00