Math Quiz Project Report
1. The Concept
Math Quiz is a lightweight, single-file web game that drills basic math (+ - x ÷, plus "Mixed" and multi-term "Expression" questions) for kids. I picked a kids' quiz game for this sprint because it is a good baseline test for a multi-AI pipeline: one AI plans/organizes the work and a second AI writes the code and designs the visuals.
2. The Stack
The Stack: HTML5, Vanilla CSS, and JavaScript — everything in one index.html, no framework, no build step, runs offline. Web Audio API for in-browser sound effects and Canvas for confetti.
The AI Assist: Cursor acted as the orchestrator — it held the plan and design rules, broke the work into steps, and directed each task. Codex did the actual work: writing the code and designing the UI (jungle theme, wooden buttons, grass platforms, mascot, gauge), all as image assets.
3. The 1 Day Sprint:
Morning (Hours 1–3): Planning. We wrote MathQuizPlan.md and two strict design rule files (mobile-game UI + image-asset rules), then Cursor handed Codex a clear spec to build the base game: start, quiz, and result screens with scoring.
Afternoon (Hours 4–6): Build + theme. Codex generated the single-file game, then we redesigned it into a jungle/platformer look: image backgrounds, wooden buttons, answers on grass mounds, a turtle mascot, sounds, confetti, and result tiers (win/medium/lose).
The Finish Line (Hour 7-8): Polish + compliance. We switched the UI to English, added the Expression mode, fine-tuned layout (even buttons, number tiles centered on the mounds), and replaced the last CSS-drawn progress bar with an image gauge so the project fully follows the asset rules. Final QA, then done.
4. The Roadblocks
Roadblocks: The biggest roadblock was the strict "no CSS shapes — image assets only" rule. Generated PNGs came with solid white backgrounds, so we needed an image pipeline (Python/Pillow) to cut out and crop every asset. Aligning separately generated images (number tiles on platforms, fill inside the gauge frame) also needed several rounds of nudging. Responsive 9:16 on mobile (address-bar cropping) took extra care.
5. Key Takeaways
What worked best? The rule-driven, asset-based workflow. Giving Codex explicit design rules up front produced a real "mobile game" feel instead of a plain web form, and AI-generated art made the whole thing look polished fast.
What worked worst? Pixel-perfect alignment of generated assets and the repeated back-and-forth to position elements exactly right.
My final thought: With one more day I would add localStorage high scores and a few animations. The single-orchestrator setup (Cursor planning, Codex coding/designing) worked well because the plan and rules stayed in one place, so requirements were not lost between steps.