---
game: rangi
name: Rangi — Colors & Shapes
file: rangi_v1.html
subject: Numeracy
grades: R-2
languages: en, bem, nya, ton, loz
score-format: stars
content-version: 1.0.0
source-file: rangi_v1.html
source-hash: 831adb639a44cc4a
---

# Rangi — Colors & Shapes · Curriculum Map

Early-childhood colour theory and geometry with a friendly kawaii presentation.
Learners identify colours, shapes, colour-shape combinations and colour-mixing
results — answering by touch or, on camera-equipped devices, by hand gestures via
MediaPipe hand tracking. First-try answers earn stars.

## Learning Objectives

- Name and identify nine colours: red, blue, green, orange, purple, yellow, black,
  pink and brown.
- Name and identify ten shapes: square, circle, triangle, star, pentagon, hexagon,
  crescent, oval, heart and diamond.
- Combine attributes: find the object matching BOTH a colour and a shape
  (e.g. "blue circle").
- Predict colour mixing: blue + yellow = green, yellow + red = orange,
  red + blue = purple, red + white = pink.
- Follow spoken/written single-step instructions and respond by pointing (gesture) or
  tapping — early assessment-following skills.

## Curriculum Alignment

| Game content | Zambian learning area | Notes |
|---|---|---|
| Shape identification | Early Mathematics — geometry (2-D shapes) | [VERIFY: CDC early-learning framework codes] |
| Colour identification & mixing | Expressive Arts — colour theory | [VERIFY: CDC early-learning framework codes] |
| Mixed colour+shape questions | Early Mathematics — attributes & classification | Two-attribute reasoning |
| Gesture/touch interaction | Motor development — fine/gross motor response | Hand-tracking or touch |

## Unit Map

| Unit | Title | Focus | Content | Assessment |
|---|---|---|---|---|
| Colours | Know Your Colours | Identifying nine colours by name | 9 colour-identification questions with rendered colour swatches | First-try stars; per-question quiz events |
| Shapes | Know Your Shapes | Identifying ten 2-D shapes by name | 10 shape-identification questions | First-try stars; per-question quiz events |
| Colour Mixing | Mixing Magic | Predicting the result of mixing two colours | 4 colour-mixing questions (green, orange, purple, pink) | First-try stars; per-question quiz events |
| Colour + Shape | Find the Match | Matching two attributes at once | 2 combined questions (blue circle, green square) | First-try stars; per-question quiz events |

## Content Inventory

- **25 questions total** in the round pool: 9 colour, 10 shape, 4 colour-mix,
  2 mixed colour+shape.
- Question instructions vary by type ("Which colour…", "Which shape…", "What do we
  get when we mix…", "Find the…") and render as i18n keys.
- Scaffolded wrong-answer flow (hint pulse after two wrong tries), kawaii faces on
  answer targets, star rewards for first-try answers.
- **2 input modes**: touch and AI gesture mode (camera hand tracking).

## Assessment & Analytics

- Events emitted: `game_open`, `session_start`, `quiz_attempt`
  (`questionId: 'rangi_{type}_{answer}'`), `quiz_correct`, `quiz_wrong`,
  `puzzle_complete` + `level_complete` with `{score, stars, firstTry, total}`.
  Subject reported: **Numeracy**.
- Score format: `stars` (first-try accuracy is the star signal).
- Teacher dashboard: `firstTry` counts distinguish confident knowledge from
  trial-and-error tapping — for early learners this is the meaningful mastery signal.

## AI & Accessibility Features

- **AI gesture mode** — MediaPipe hand tracking (camera device + secure context
  required); answers by pointing/holding, no reading or fine-motor tapping needed.
- **AI question generation** — "Generate Colors (AI)" creates additional
  age-appropriate question sets with adaptive difficulty.
- Voice command support (experimental).
- Full UI translation: English, Bemba, Nyanja, Tonga, Lozi (fail-to-English) — options
  are translated so pre-readers can hear/see local-language colour and shape names.

## Lesson Planning Notes

- 10-15 minute activity for reception/Grade 1-2 or ECE centres — run 2-3 rounds with
  a physical echo between rounds (hold up real coloured objects/shape cards and
  repeat the round's questions off-screen).
- Colour mixing pairs perfectly with a paint or coloured-water demonstration: play
  the Mixing Magic unit first, then mix for real and compare predictions.
- Gesture mode is the accessibility path for learners who struggle with precise
  tapping — it needs the classroom HTTPS listener on shared LAN devices (see the
  server's /trust page).
- Local-language mode doubles as vocabulary teaching: run one round in English and
  the same round in the class's home language.
- Differentiation: pre-readers use gesture/touch with teacher-read prompts; stronger
  learners chase all-first-try star rounds.

## Change Log

| Date | Game Version | Change | Curriculum Impact |
|---|---|---|---|
| 2026-08-10 | rangi_v1.html | Rendering repair: the crescent/moon SVG path's inner arc radius was smaller than half its chord, so SVG radii auto-correction collapsed the shape to ZERO AREA — the crescent question's target (and the star question's MOON option icon) showed an invisible shape with a floating face. Rebuilt as a valid two-arc crescent. Mixed colour+shape questions (blue circle, green square) now render their target as the real coloured SVG shape with the kawaii face (was plain text) and their options as SVG shape icons (was colour-square emoji — tofu boxes on devices without Emoji 12.0 fonts; the emoji stay as internal answer values so analytics ids are unchanged). AI-generated questions now preserve/derive colorKey/shapeKey so AI colour rounds show the correct target colour (previously always red) | No unit/question-count change; the crescent question, the Find the Match unit and the star question's moon option are visible and playable on all devices for the first time |
| 2026-08-09 | rangi_v1.html | Gesture mode repaired end-to-end (audit re-run): the MediaPipe vision bundle is now loaded on demand before initVision (it was never loaded on this page, so gesture mode could not initialise on ANY install), the camera preview is played explicitly for Android WebView, the detection loop survives detector throws and not-ready frames, and a missing-assets failure shows an honest "Gesture AI is not installed on this server yet" message. HUD gained compact phone breakpoints (the exit button clipped off-screen at ≤480px) and the progress bar now scales to AI-generated round lengths | No unit/question-count change; the gesture input mode documented in this map is genuinely usable for the first time on AI-provisioned installs, and phone-width classrooms regain the exit control |
| 2026-08-09 | rangi_v1.html | Gesture-mode lifecycle hardening: explicit camera capability guard, stream teardown on mode switch/unload/error, deterministic round `attemptId` propagation across analytics + score sync, and safer no-camera fallback messaging | No unit/question-count change; improves reliability for camera-based classroom rounds and strengthens analytics/score traceability per round |
| 2026-08-05 | (no game change) | Hash restamped: source-hash now computed over LF-normalized game HTML so stamps match on Windows and Linux/CI alike (v10.27.1 fix) | None - game content unchanged, documents remain valid |
| 2026-08-05 | rangi_v1.html | Initial curriculum map authored (platform standard adoption, v10.25.0) | Baseline — 25 questions across 4 units, 2 input modes documented |
