Lawson's Playground

A toddler-friendly learning playground for iPad (and phones). Pure HTML/CSS/JS, no framework, no build step, no external assets. Add to the home screen to play offline.

Run it

Open index.html in any modern browser. For service-worker / "add to home screen" support, serve over HTTP (e.g. python3 -m http.server).

Home screen

Tuned for a 3-year-old: no reading required, small counting numbers, big tap targets. The home screen surfaces the six games he plays most, each opening straight into play. Everything else lives one tap away behind the More card.

Six headline games:

• Pop! — pop floating balloons. Three modes: Free (streaks + rare rainbow), ABC ("Pop the B!"), 123 ("Pop the 3!") — letters and numbers ride on the balloons. The ABC / 123 goal is a quiz prompt: said once more if the kid goes quiet for twelve seconds.
• Whack! — whack critters as they pop out of six holes. Its ABC / 123 goal ("Whack the B!") is a quiz prompt too, as is Memory's "Find the matching pairs!".
• Find It! — hidden-object hunt across themed scenes (farm, ocean, park, sky). Free / ABC / 123 modes.
• Cook! — pancakes: pour batter, watch it bubble, flip, plate, stack. The pancake's name follows along ("Pancake: ready, flip it"), so a keyboard or screen-reader user knows what a press will do.
• Baby Dino — bath time: drag (or tap) soap to lather, pull (or tap) the shower to rinse, drag (or tap) the towel to dry. Hearts when he's clean.
• Garden! — plant a seed, drag the watering can (or tap the can, then the pot) to grow it, harvest the fruit. 12 plants; bees, butterflies, a bird, surprise rain, and a slow day/night cycle. The sun and clouds are named buttons (in Farm and Train too), so Tab / a screen reader can poke them the same way a finger does, and under "Less motion" the clouds rest inside the sky instead of parking off its left edge.

More → hubs

The More drawer holds themed hub cards, each opening a small menu:

• Art Studio — Doodle, Coloring, Color Mix, Sticker Scene
• Music — Piano, Music Studio (drums + xylophone + bells), Listen. Each Song button names the tune and waits for the name to be heard before the first note.
• Brain Games — Match, Memory, Pattern, Dots
• Numbers — 1 2 3, Count, How Many?
• Wonder World — ABC + 8 flashcard topics (Colors, Shapes, Animals, Vehicles, Dinos, Weather, Food, Family)
• Town — Train, Farm, Ice Cream (illustrated sandbox scenes)
• Library — Story (tap anywhere, the "keep going" line, or press Enter to turn the page), Sticker book

Sandboxes (open-ended, no scoring):

• Sticker Scene — drag stickers onto 12 themed backgrounds. Your decorated scene is saved and restored between visits. The picture is named after the scene it shows ("Beach scene"), so a screen reader knows which one is up, a restored one included.
• Farm — care for animals: milk the cow, shear the sheep, feed the pig/horse, fetch with the dog, collect eggs, pick apples, fish, drive the tractor. Drag a tool onto an animal, or tap the tool and then the animal. The milk bucket's name counts what is in it ("Milk bucket: 1 of 3", then "full"), so a screen reader hears the level the drawing shows. Day/night + weather. The sun and clouds are named buttons, so Tab / a screen reader can poke them the same way a finger does. The pond ducks are named buttons too.
• Ice Cream — build a sundae: drag scoops onto a cone (or tap a tub), add toppings, tap Eat! Eat names the sundae ("Eat: vanilla sundae", "Eat: empty cone"), so a screen reader hears what the scoops show.
• Train — drive a chuffing train between three stations; passengers hop on and off. The stations say where the train is ("Station 2, train here"), so a screen reader follows the journey. The sun and clouds are named buttons, so Tab / a screen reader can poke them the same way a finger does.
• Music Studio — drum kit, rainbow xylophone, jingle bells, plus a Song button that names the tune and waits for the name to be heard before the first note, so "Twinkle Twinkle" is never played over.
• Doodle — rainbow / solid brushes, eraser, sizes, save as PNG.

Collection:

• Stickers — 34 unlockables across every game, with a progress bar and an all-stickers finale when you find them all.

Settings (gear icon in the header)

• Edit the kid's name (used in cheers across every game), and, if the storyteller says it wrong, write how it sounds like — every line that names the kid is spoken that way while captions keep the real spelling. A greeting plays so the parent can check.
• Mute voice and/or sound effects independently
• Captions — show what the storyteller says as words on screen (great for kids who are hard of hearing, or when the voice is muted). The caption is drawn over the header title, the one strip every screen keeps free of game controls, so it never covers a tool or the story text. Off or on, every spoken line is also announced to screen readers through a live region.
• Choose and preview a storyteller voice. Sarah (soft and friendly) is the default; Lily (warm and bright) is the other choice. Both are ElevenLabs premade voices, saved on this device. Lines the app already knows are pre-generated clips and play instantly. Lines that include the child's name are spoken by the same voice through the server, then remembered in the browser. With no internet, or if that request fails, the iPad's own voice reads instead. Download Ava (Premium) or Samantha (Enhanced) in Settings, Accessibility, Spoken Content, Voices so that backup sounds warm. If the device voice can't speak, the storyteller uses the best local voice and Settings says who is standing in. A line the device swallows (iPads sometimes drop one right after a cut-off) is read again. After "Listen to this voice", Settings reports how long the line took to start and how it ended, plus a tally of the recent lines. Story Time paces its pages on the chosen voice: each page turns once the line has actually been read, plus a beat to poke the scene. Poking a character answers with its sound, then the storyteller picks the line back up if it was cut off. Tapping the words — or the "hear them again" button, the keyboard path — hears the line again from the top (the page waits for it); tapping anywhere else, the "keep going" button, or Enter turns the page. "The end!" and the cheer are heard in full before the sticker is announced and the next story begins. The quiz games (Listen, Match, Pattern, How Many?, Count, Find It!, Color Mix, Memory) likewise let the cheer — or "try again" — finish before the next prompt, and a hub's welcome line is skipped if the kid has already tapped on. A quiz prompt ("Find the cow!", "Make orange!", "Find 3!") is repeated once if nothing has happened for twelve seconds, so a kid who looked away gets a nudge, never a nag. A cheer starts as its chime rings out rather than underneath it, so the first word is never masked — every game triggers its chime before the line (the farm, garden, train and scene sounds included), and a check keeps it that way — and "New best!" and "Sticker!" announcements wait for the cheer to finish instead of cutting it off. Every short line that leads into another is heard in full before the next one starts, whatever the game: "Flip!" then "Yummy!", the counted number then the total, "Squirt squirt!" then "Bucket full of milk!", a wrong tap's name in Find It! before the goal repeats, the second colour in Color Mix before the mix, the last number in Connect-the-dots before "It's a house!" (and that reveal before the next puzzle), each "Mmm!" in Ice Cream before the next bite, Memory's last card ("bee") before "You matched them all!", Baby Dino's "All clean!" before the next wash, the popped letter in Pop! and Whack! ABC / 123 before the next goal, "Station 2!" on the train before the passenger's "Woof!", Sticker Scene's "The park!" before the how-to (and its chime before a new scene's name), Garden's "Sunshine!" before "Sunshine power!", and a Song button's tune name in Piano and Music Studio before the first note.

Accessibility

• Back means back: every hop into a hub or game is a history entry, so the browser or Android Back button and the iOS swipe-back gesture step back inside the playground (game → hub → menu, or close Settings) instead of leaving it. Home jumps straight to the menu and unwinds the entries it skips, so Back from the menu still leaves the app. Escape on a game or hub screen goes Home too (after putting down a held tool).

• Keyboard + screen readers: every tile, tool, choice and score badge is a named button — and so is every animal, pot, balloon, hole, cloud and sun you can tap: onTap() turns any plain tap target into a focusable role="button", so the sandbox and arcade games can be played with Tab and Enter. The Farm, Train and Garden skies used to hide their sun and clouds (aria-hidden then onTap), which skipped that upgrade — they are real named buttons now, and the sun's name follows day and night ("Moon", or "Stars" once the spoken line is "Stars!"). Names carry state where it matters ("Pot 2: seed planted, water it", "Hole 4: mole!", "cow, counted" in Count, "Red, used" in Color Mix, "roof, red" in Coloring, "bee, matched" in Memory, "duck, found" in Find It!). Opening a game moves focus onto that screen (a labelled region); Home puts it back on the tile you came from. Mode tabs expose their pressed state, and so do the toggles — the Song buttons in Piano and Music Studio and Train's Go / Stop say whether they are on; Memory cards say "Hidden card" until flipped. When a quiz round rebuilds its choices or a popped balloon disappears, focus moves to the next control in the game instead of falling back to the top of the page, so Tab + Enter play keeps its place. "Hidden card" until flipped. Connect-the-dots' SVG dots are buttons too, named "Dot 3, next" / "Dot 2, connected", and so are Coloring's regions ("roof", "left top wing"); Story Time turns the page from its "keep going" button or Enter on the screen. seed planted, water it", "Hole 4: mole!"). Match's example picture is a button named like the prompt ("Find the dog"), so Tab and Enter hear it again — a role="img" here used to skip the button upgrade. Opening a game moves focus onto that screen (a labelled region); Home puts it back on the tile you came from. Mode tabs expose their pressed state; Memory cards say "Hidden card" until flipped. came from. Mode tabs expose their pressed state; Doodle's brushes, sizes and Stamp do too (and Stamp says "Draw!" when the 8-second stamp window ends). Memory cards say "Hidden card" until flipped.

• Captions / live region: see Settings above.

• Reduced motion: with the OS "reduce motion" preference on, or the in-app Less motion setting, CSS animations collapse and the sparkle / confetti particle bursts are skipped entirely. Pop! balloons hold still where they appear instead of drifting, in three lanes and at most three at a time (they used to jump straight off the top and be unpoppable).

Behind the scenes

• PWA: manifest.json + sw.js cache every asset so the playground keeps working when the iPad's offline. The worker refreshes assets in the background and fetches the page network-first, so a deploy is picked up on the next open without editing sw.js (tests/sw-update.js checks this in Chromium).
• Welcome toast: time-of-day greeting on app load with a daily streak counter once it's 2+ days in a row.
• Tutorials: lib/tutorial.js shows a one-time hint the first time the kid opens each game (it listens for the lawson:screen event that show() fires). Taps pass straight through the hint to the game and dismiss it; leaving the screen dismisses it too.
• Audio: every sound routes through a single master gain node (lib/audio.js) so the Settings volume slider is one knob for the whole app.
• Architecture: each game lives in games/*.js and registers on window.Lawson.games. Shared utilities — audio (lib/audio.js), high-score storage (lib/storage.js), sticker collection (lib/achievements.js), tutorials (lib/tutorial.js) — are in lib/.

Storyteller voices

The API key stays on the server (ELEVENLABS_API_KEY on the Vercel project). /api/tts also reads ELEVENLABS_VOICE_ID (default EXAVITQu4vr4xnSDxMaL, Sarah) and ELEVENLABS_MODEL (default eleven_flash_v2_5; eleven_turbo_v2_5 is the other allowed model). Free ElevenLabs accounts can call premade default voices only. Sarah and Lily (pFZP5JQG7iQjIQuC4Bku) work. A library voice id is ignored, because those requests return 402 paid_plan_required. Leave ELEVENLABS_VOICE_ID on Sarah so live lines match the prebuilt clips.

Set TTS_PROVIDER=fish with FISH_API_KEY and FISH_REFERENCE_ID to swap in Fish Audio. The page does not change.

Fixed lines (prompts, cheers that do not name the child, story pages, character sounds) are generated once and served as static MP3s:

npm run tts:build

The script reads ELEVENLABS_API_KEY from the environment or .env, skips clips that already exist, and stops cleanly on an auth or quota error so it can be re-run. See .env.example.

Tests

Smoke + visual baseline checks for every game live in tests/.

npm ci && npx playwright install chromium   # once
npm test                           # everything below, in order
node tests/sw-assets.js            # sw.js ASSETS matches index.html and disk (no browser)
node tests/voice.js                # speech engine + caption event (no browser)
node tests/tts.js                  # ElevenLabs route, premade voices, static clips
npm run tts:build                  # pre-generate storyteller MP3s (needs ELEVENLABS_API_KEY)
node tests/story.js                # Story Time pacing (no browser)
node tests/garden-sky.js           # Garden sky: sun and clouds are named buttons, clouds rest in view under reduced motion (no browser)
node tests/match.js                # Match example is a named button that re-hears the prompt (no browser)
node tests/doodle.js               # Doodle tool pressed state + stamp timeout (no browser)
node tests/memory.js               # Memory last-card name before the win cheer (no browser)
node tests/dino.js                 # Baby Dino cheer pacing (no browser)
node tests/pop.js                  # Pop! ABC: letter heard before the next goal (no browser)
node tests/whack.js                # Whack! ABC: hit heard before the next goal (no browser)
node tests/train.js                # Train: station heard before the passenger (no browser)
node tests/scene.js                # Sticker Scene: name then welcome (no browser)
node tests/piano.js                # Piano Song: first note waits for the name (no browser)
node tests/music.js                # Music Studio Song: first note waits for the name (no browser)
node tests/garden.js               # Garden sun: "Sunshine!" before "Sunshine power!" (no browser)
node tests/listen.js               # Listen leftover opening clue (no browser)
node tests/train-sky.js            # Train sky: sun and clouds are named buttons (no browser)
node tests/farm-sky.js             # Farm sky: sun and clouds are named buttons (no browser)
node tests/farm-pond.js            # Farm pond: ducks are named buttons (no browser)
node tests/smoke.js                # errors-free / renders / restart-safe
node tests/smoke.js --baseline     # + diff every screen against tests/baseline/
node tests/smoke.js --update-baseline   # accept new baselines after UI changes
node tests/a11y.js                 # axe-core (light, dark, phone, iPad) + keyboard / modal / captions / overlay checks
node tests/sw-update.js            # service worker picks up a deploy without a cache bump; offline boot

npm run lint runs ESLint over the app and tests; CI (.github/workflows/test.yml) runs lint and every suite on each PR.

See tests/README.md for details (needs Playwright + Chromium).

Adding a new game

1. Create games/myname.js with an IIFE that registers window.Lawson.games.myname = { screen, start, stop }.
2. Add a <section id="mynameGame" class="screen"> in index.html and a tile in the relevant hub (or the home menu).
3. Drop the script tag at the bottom of index.html and add the path to ASSETS in sw.js (node tests/sw-assets.js checks the list; the cache name never changes).
4. Add a smoke entry in tests/smoke.js (GAMES array) and refresh the baseline with node tests/smoke.js --update-baseline.
5. Give every tappable thing a readable name (aria-label for emoji-only buttons) and run node tests/a11y.js — it picks the new game up automatically from window.Lawson.games.