CLC Vocab Quiz
A Traditional Chinese vocabulary quiz, packaged as a static, installable Progressive Web App. No build step.
Files
| File | What it is |
|---|
index.html | The app: the quiz page plus PWA tags (manifest, icons, theme colour) and service worker registration. Loads the vocab from lessons.json. |
lessons.json | All vocabulary, one entry per lesson. This is the only file to edit when adding words. |
CLAUDE.md | Rules and steps for Claude when adding a lesson (e.g. from a photo of the textbook). |
clc-vocab-quiz.html | The original single-file quiz, kept unchanged as a backup. |
vercel.json | Sends app URLs (/vocab, /vocab/lesson-4-py-zh) to index.html so they work when opened or refreshed directly. |
manifest.webmanifest | Web app manifest: name, colours, start URL, standalone display, icons. |
sw.js | Service worker. Precaches the app shell; pages and lessons.json are network-first with offline fallback, other assets cache-first with background refresh. Bump VERSION to force a cache refresh. |
fonts/ | TW-Kai (全字庫正楷體), Taiwan's standard Kai font, split into small pieces so phones only download the characters they need. Generated by scripts/build_tw_kai.py. |
icons/ | App icons: icon-192.png, icon-512.png, icon-maskable-512.png (Android adaptive) and apple-touch-icon.png (iOS, 180×180). |
Run locally
npx serve -s .
Then open the URL it prints (usually http://localhost:3000). Service workers need localhost or HTTPS, so opening the file directly from disk won't enable offline mode.
Deploy (Vercel)
- Import this repository in Vercel.
- Framework preset: Other. Leave the build command empty and the output directory as the repo root.
- Deploy. Every push to
master redeploys.
Install on your phone
- iPhone (Safari): open the site, tap Share, then Add to Home Screen.
- Android (Chrome): open the site, tap the ⋮ menu, then Install app (or accept the install prompt).
Once installed, the quiz opens full screen and works offline after the first visit.
Adding vocabulary
Edit lessons.json (format and rules in CLAUDE.md), commit and push to master. Or send Claude a photo of the vocab list in a conversation that has access to this repo and ask it to add the lesson.
Credits
Chinese characters use TW-Kai 全字庫正楷體 © Ministry of Digital Affairs, Taiwan, under the Open Government Data License v1.0. See fonts/tw-kai/LICENSE.txt.
