# Interactive Activities 2026

Vanilla HTML/CSS/JS redesign of the 8 interactive activity formats. No build
step, no componentization framework — the structure here is the production
structure.

## Structure

```
Interactive Activities 2026/
  global.css              ONE shared file:
                          • TOKENS (colors, spacing, type, radius, shadows,
                            buttons, grade palettes) — edit here to rebrand
                          • shared components (buttons, modals, top bar,
                            toolbar, toast, states) + the three grade themes
  activities/
    matching/index.html   Each activity links ../../global.css and adds ONLY
    sorting/              its activity-specific CSS (cards, board, slots, etc.)
    q-and-a/              plus its own JS.
    spinner/
    dice-roller/
    fill-in-the-blanks/
    multiple-choice/
    flashcards/
  assets/
    shared/               Logos, icons, celebration animations, shared art.
    matching/             Per-activity illustrator assets (created per activity
                          as art arrives; only shared/ + matching/ exist so far).
  docs/
    Execution Plan.md
    Matching - Feature Brief.md
    colors-and-buttons.md
    Phase 1 Recon - 7 Formats.md
```

Rebrand = change values in the TOKENS block at the top of `global.css`; it flows
to every activity.

## Running / sharing

Serve from a real http origin — from this folder run `python3 -m http.server`,
then open `http://localhost:8000/activities/matching/index.html?id=<activityId>`.
A bare `file://` open or the Slack inline preview will block the live data fetch.
For reviewers, share a staging link, not the raw file.

## Grade levels

`global.css` defines three themes (`.grade-lower`, `.grade-upper`, `.grade-mh`)
that recolor **only the top bar** (each grade's Main color). The switch is a
review-only dropdown in the **prototype toolbar** (same rack as the "paste any
id" box) — not part of any activity. The toolbar is removed at handoff; the real
grade signal is sourced by engineering.

## Note on hidden files

No hidden files in the project content. The only hidden items are a `.claude/`
folder (Claude Code's launch config) and, on macOS, `.DS_Store` files that Finder
recreates automatically whenever you open the folder — both harmless.

## Status

- `global.css` — final tokens + shared components. ✓
- **All 8 activities built** on the shared foundation (first-draft prototypes,
  verified headlessly): matching, sorting, q-and-a, spinner, fill-in-the-blanks,
  dice-roller, multiple-choice, flashcards. Each links `global.css`, uses the
  dotted background, shared buttons/modals, grade switch, TTS, and the parent
  `postMessage` events.
- Non-scored formats (Q&A, Spinner, Dice, Flashcards) finish on a Done action /
  last card — confirm those completion triggers.