Prototype: interactive story hotspots overlay with data-attribute hooks (issue #1) #32

Closed

Mark wants to merge 4 commits from prototype/hotspot-overlay into main

Mark commented

2026-08-20 05:02:54 +00:00

Owner

Standalone prototypes/prototype-hotspots.html demonstrating the HTML rendering side of the activity-book-app "Interactive Story Elements" feature (forgejo #1).

Hotspot targets marked with [data-interaction] (define | fact) on inline elements
Bear (definition), House (definition), SVG/IMG tree (fact: data-fact=trees-give-oxygen)
Click/tap toggles a dismissible popover; ESC, close button, and outside-click close
Accessible: role=button, keyboard focusable (Tab+Enter), aria-label, role=dialog, focus return
Touch + mouse via pointer events; respects prefers-reduced-motion
No build step; pure HTML/CSS/JS

Verified: 25/25 jsdom functional checks + clean load in headless Chromium. Feeds the downstream integration plan; pairs with docs/interactions-schema.md (v1.0.0).

Standalone prototypes/prototype-hotspots.html demonstrating the HTML rendering side of the activity-book-app "Interactive Story Elements" feature (forgejo #1). - Hotspot targets marked with [data-interaction] (define | fact) on inline elements - Bear (definition), House (definition), SVG/IMG tree (fact: data-fact=trees-give-oxygen) - Click/tap toggles a dismissible popover; ESC, close button, and outside-click close - Accessible: role=button, keyboard focusable (Tab+Enter), aria-label, role=dialog, focus return - Touch + mouse via pointer events; respects prefers-reduced-motion - No build step; pure HTML/CSS/JS Verified: 25/25 jsdom functional checks + clean load in headless Chromium. Feeds the downstream integration plan; pairs with docs/interactions-schema.md (v1.0.0).

Mark added 1 commit

2026-08-20 05:02:55 +00:00

feat(i#1): prototype interactive story hotspots with data-attribute hooks

CI / Python Tests (pull_request) Failing after 2m20s

Details

CI / Android Tests (pull_request) Failing after 5m19s

Details

6a770d61d6

Standalone prototypes/prototype-hotspots.html demonstrating the HTML
rendering side of the activity-book-app interaction-elements feature
(forgejo issue #1).

- [data-interaction] hook (define|fact) on inline targets
- Bear (def), House (def), SVG/IMG tree (fact, data-fact=trees-give-oxygen)
- Click/tap toggles a dismissible popover; ESC, close button, and
  outside-click all close it
- Accessible: role=button, focusable, aria-label, role=dialog, tabindex
- Touch + mouse (pointer events); respects prefers-reduced-motion
- No build step; pure HTML/CSS/JS

Feeds the downstream integration plan; pairs with the interactions
schema (docs/interactions-schema.md, v1.0.0).

Mark added 1 commit

2026-08-20 05:06:06 +00:00

docs(i#1): TTS spike — pronunciation/spelling options for popovers

CI / Python Tests (pull_request) Failing after 2m29s

Details

CI / Android Tests (pull_request) Failing after 4m39s

Details

536c5d3a5f

Mark added 1 commit

2026-08-20 05:21:02 +00:00

feat(i#1): CSS-only interaction feedback animation prototype

CI / Python Tests (pull_request) Failing after 2m26s

Details

CI / Android Tests (pull_request) Failing after 4m39s

Details

622c236383

Adds prototypes/interaction-animations.css + an HTML demo page showing
four reusable CSS-only feedback animations for story elements:
  - wiggle on hover/tap of a defined term
  - pop scale on hotspot activation
  - gentle floating idle for the tree example
  - spell-correct flash when a spelling attempt is right

Transitions/animations finish under 400ms; all motion is neutralized
under prefers-reduced-motion: reduce. No JS animation libraries —
the spell-correct demo drives via :has(:checked) so the set is pure CSS.

Mark added 1 commit

2026-08-20 05:25:51 +00:00

docs: add interaction-elements integration plan tying schema, hotspots, TTS, animations

CI / Python Tests (pull_request) Failing after 2m30s

Details

CI / Android Tests (pull_request) Failing after 4m45s

Details

d60d74f123