Colors lesson

Color Lesson — Try it

No color

Use Wikimedia Commons Auto TTS fallback

Enter a color name (CSS color names are supported). The lesson will attempt to fetch relevant media that contains that color (searches like "red apple", "blue sky").

Example colors (click to load)

Image

No image yet

Audio

No audio yet

Video

No video yet

How it works

User types a color name (validation checks it looks like text).
App chooses an example search phrase (e.g., "red apple") to improve Wikimedia results.
Search Wikimedia Commons for images/audio/video using API (no keys required).
If audio not found, use Web Speech API (TTS) to speak the color name.

Download / Export

Save this single HTML file or use Print → Save as PDF for an offline copy. If you use curated media (local files), package those media files alongside this HTML.

Settings

Toggle behaviors. Curated media is best for packaging the e-book with local files.

Persist progress in localStorage

Lesson 3: Colors

Color Lesson — Try it

Example colors (click to load)

How it works

Download / Export

Settings

Mini-game — Pick the Right Color