Interactive math course as a single HTML file
A pipeline that turns a topic outline into a self-contained HTML course with sliders, graphs, and quizzes — six modules, no CMS, no hosting lock-in.
What changed. A six-module interactive course is packaged as one HTML file, with controls, quizzes and local progress.
Stack. architect–module–integrator pipeline · inline SVG and canvas · self-contained HTML · local progress
Context
Tutors and small online schools still ship learning as PDFs and slide decks. Building a module by hand — copy, figures, formatting — stretches across days. The result is static. Students read. They do not move a parameter and watch a curve respond. Updating a course means another production cycle.
This case describes a teaching artifact. Its formulas, worked examples and quiz answers still need subject review.
Task
Take a topic outline and produce a course a student can open in any browser: theory, worked examples, live plots, a calculator, and a self-check quiz. One file. No CMS, no CDN, no student account on someone else’s platform. Progress stays on the device. Agree the review and delivery scope before setting a completion target.
What we built
A four-stage generator. An architect model lays out topics, learning objectives, and module boundaries. Six module agents write in parallel — foundations, formulas, worked examples, interactive plots, a solver, and a quiz — each with its own sliders and checks. An integrator assembles the modules, unifies styling, and validates navigation.
The output is a single HTML file: CSS, scripts, and SVG or canvas inlined. Sliders recompute formulas in the page. Graphs redraw without an external charting library. Quizzes return immediate feedback. The student can work offline.
What changed
The six modules are assembled into one file a tutor can distribute or host. No matched timing study is provided here, so this case does not claim a production-time saving. Students explore variables instead of watching a recorded take. There is no student database to operate and no plugin stack to patch.
What we would do differently
Put a structural gate in the integrator from the first run: every module must expose a heading, at least one interactive control, a quiz item, and no broken in-page links. We originally eyeballed the assembled HTML. A missing quiz or broken fragment must fail the assembly check before delivery.
Related service: Web apps