H2 Math

# H2 Math — interactive lessons for the SEAB H2 Mathematics syllabus (★★★)

Build a lesson app for the SEAB H2 Mathematics syllabus (code 9758). Eight lessons where you drag a graph and watch its transformation, reflect a function in y = x to find its inverse, stand a plane and a line in real 3D and drop a perpendicular, multiply a complex number by i and watch it turn, slide a point along a curve and watch the gradient graph draw itself, add Maclaurin terms one by one, spin a region into a solid, and watch sample means pile into a bell. Every lesson follows one pattern (goal, explore, predict, reveal, worked example, check, done), and a mixed review page brings back questions you got wrong a day and a week later.

## The lesson kit

Every lesson in this app, and in its sister apps (H2 Chem, H2 Bio, H2 Math, H2 Econs), uses the same kit, so a student who has done one lesson knows how all of them work. If you have built one of the sister apps, copy its `app/kit.css` and `app/kit.js` and do not change them; if not, build the kit from this spec in milestone 1.

Files. One static app, no build step, ES modules: `app/index.html` (home), `app/kit.css`, `app/kit.js`, `app/lessons/<slug>.js` (one file per lesson, exports a lesson object), `app/review.js` (mixed review). Hash routes: `#/` home, `#/lesson/<slug>`, `#/review`.

Layout. A top bar with the subject, the lesson title and a progress strip of dots, one per step. Below it, two parts: the **stage** (the interactive: a 3D view, a canvas or an SVG, plus its sliders and buttons) and the **cards** (the words). On a laptop the stage is on the left and the cards on the right. On a phone the stage is on top, 50% of the screen height, and the cards scroll under it. One card is shown at a time, with Back and Next. The stage keeps its state when the card changes, so a student can look back at what they set.

Steps of a lesson, in this order, every lesson:
1. **Goal.** One sentence, what you will be able to do, and the syllabus reference in small print.
2. **Explore.** Hands on the controls, with a short instruction: "Drag the slider. Watch the angle." No explanation yet.
3. **Predict.** A multiple-choice question about what will happen next on the stage. Next is disabled until an answer is picked. The stage does not change yet.
4. **Reveal.** The stage shows the answer (an animation or a change the student can see). The card says whether the prediction was right and explains in under 60 words. A wrong choice gets the reason that choice is tempting, not just "wrong".
5. **Worked example.** One problem of the kind the exam asks, solved in numbered lines on the card, using the stage. Then the same problem with one line blanked for the student to fill (a drop-down or short answer).
6. **Check.** Three questions, one at a time, immediate feedback with a one-line reason per option, no time limit. Questions use the stage where they can ("set the pressure to 2 atm, what is the volume?").
7. **Done.** Three lines of recap, the syllabus reference, and a link to the next lesson.

Longer lessons may repeat Explore, Predict and Reveal once before the worked example. Never more than about 60 words on a card. No paragraphs of theory: the stage shows, the card names what was seen.

Teaching rules, built into the kit: predict before you see; one idea per card; feedback names the misconception; a worked example before a test; questions reuse the controls; recap at the end. The **mixed review** page pulls Check questions from lessons the student has finished, mixed across lessons, and asks any question they got wrong again, first after one day and then after a week (spaced practice). Progress and wrong-answer history live in localStorage under one key per app, for example `h2chem:v1`.

Look. Shared colour tokens in `kit.css`: background, card, ink, muted, accent, correct, wrong, and the series colours for graphs. Light and dark mode from `prefers-color-scheme`, plus a toggle. One system font stack. Sliders have a visible label and current value. Targets at least 44 px tall on a phone. Everything works with a keyboard. No horizontal scroll at 360 px. No console errors.

3D. Only lessons that need it load Three.js, from a pinned import map (`https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js`, add-ons from `.../examples/jsm/`). Never "latest". Rotate with drag, pinch or two-finger to zoom, a Reset view button. Cap the pixel ratio at 2 and pause rendering when the tab is hidden. 2D stages use canvas or SVG, no chart library.

No accounts, no server, no tracking. The app runs from a folder on your computer and from any static host.

## Lessons

Each lesson names its syllabus section. Build the stage first, then the cards. Graphs are drawn on canvas with proper axes, ticks and labels; a student can drag to pan and pinch or scroll to zoom, with a Reset button.

1. **Graphs and transformations** (9758 section 1.2). Stage: a base graph picked from a list (a cubic, a rational function such as (x² + 1)/(x − 2), a circle, an ellipse, a hyperbola, a parametric curve) with sliders a and b that apply y = a f(x), y = f(x + a), y = f(bx) and buttons for y = |f(x)|, y = f(|x|) and y = 1/f(x). Asymptotes drawn dashed and labelled; turning points marked. Predict: "Apply 1/f(x). What happens where f(x) = 0?" Reveal: vertical asymptotes appear. Second round: order of transformations, f(2x + 1) against f(2(x + 1)). Worked example: sketch (x² + 1)/(x − 2) with its oblique asymptote, then a blank for the equation of the asymptote of a second rational function. Checks on reading asymptotes, the effect of a on turning points, and symmetry of f(|x|).
2. **Functions and inverses** (section 1.1). Stage: a graph with a draggable horizontal line (the horizontal line test), a domain slider that restricts x, the reflection in y = x drawn live, and a composite builder: pick f and g, see g∘f drawn and its domain and range reported. Predict: "Restrict x² to x ≥ 0. Does the inverse exist now?" and "Does f∘g exist if the range of g is not inside the domain of f?" Worked example: find f⁻¹ for f(x) = (2x + 1)/(x − 3) with its domain, then a blank for the range of f. Checks on one-one, the domain of an inverse, and the condition for a composite to exist.
3. **Vectors in 3D** (sections 3.1 to 3.3). Stage: real 3D (Three.js) with a draggable point, a line (point plus direction) and a plane (point plus normal, or r·n = d), all editable with number fields; shown: the foot of the perpendicular from the point to the line and to the plane, the perpendicular distance, the angle between line and plane, the projection a·n̂ as a shadow length, and |a × n̂| as the shaded parallelogram area. Predict: "Move the point along the line's direction. Does the distance to the plane change?" and "The line's direction is perpendicular to n. Does it meet the plane?" Worked example: foot of the perpendicular from (1, 2, 3) to a given plane, then a blank for the reflection of the point in the plane. Checks on the meaning of a·n̂ and a × n̂, the ratio theorem, and the relationship between a line and a plane (lies in, parallel, meets at a point).
4. **Complex numbers on the Argand diagram** (section 4). Stage: an Argand diagram with a draggable z and a second draggable w; buttons show z*, −z, z + w, z − w, iz, and z·w as arrows and points; a readout of modulus and argument. Predict: "Multiply z by i. What happens to the point?" Reveal: a quarter turn anticlockwise about O. Second round: z + z*, real or not. Worked example: solve z² − 4z + 13 = 0 and plot the roots, then a blank for the conjugate root of a given cubic. Checks on the geometric effect of conjugation, the modulus of a product, and the roots of a real polynomial coming in conjugate pairs.
5. **Differentiation** (section 5.1). Stage: three stacked graphs f, f′ and f″ sharing an x axis; drag a point on f and the tangent, the gradient value and the matching points on f′ and f″ move together; a "draw f′ from f" mode where the student sketches f′ with a finger and the stage grades the sketch by sign and zeros. Also an implicit curve (x² + xy + y² = 7) and a parametric curve with a draggable point and its tangent. Predict: "f′ changes sign from + to −. Maximum or minimum?" and "f″ = 0 at a point. Always a point of inflexion?" Worked example: stationary points and their nature for a cubic, then a blank for the tangent to the parametric curve at t = 1. Checks on reading f from f′, related rates, and the gradient of an implicit curve.
6. **Maclaurin series** (section 5.2). Stage: a function (sin x, cos x, eˣ, ln(1 + x), (1 + x)ⁿ with an n slider) drawn with its Maclaurin polynomial, a slider for the number of terms, the error shaded, and the interval of validity marked for ln(1 + x) and (1 + x)ⁿ. Predict: "Add more terms for ln(1 + x) at x = 1.5. Does the error shrink?" Reveal: no, outside the interval. Second round: small-angle sin x ≈ x against a tolerance slider. Worked example: the series of eˣ sin x up to x³ by multiplying series, then a blank for the x² coefficient of a second product. Checks on where the series is valid, the small-angle approximations, and the first few derivatives at 0.
7. **Integration, areas and volumes** (section 5.4). Stage: a region under a curve between two draggable bounds, a slider for n rectangles that shows the sum approaching the integral and the numbers converging; a "spin" button that rotates the region about the x axis or the y axis in real 3D (Three.js) and builds the solid from n discs, with the volume sum beside the exact integral. Predict: "Rotate about the y axis instead. Bigger or smaller volume?" Worked example: the volume when y = √x from 0 to 4 is rotated about the x axis, then a blank for rotation about the y axis. Checks on definite integral as a limit of sums, area between two curves, and the volume formula about each axis.
8. **Binomial, normal and sampling** (sections 6.2 to 6.4). Stage: a binomial distribution with n and p sliders drawn as bars, a normal curve overlaid with mean and variance from the sliders, shading for P(X ≤ k) and P(a < X < b) with a draggable range, and a sampling panel: pick a skewed population, a sample size slider, a "draw 1000 sample means" button that piles the means into a histogram with the normal curve of the right variance over it. Predict: "n = 4 from a very skewed population. Is the mean distribution normal?" and "Increase n. The spread of the sample mean goes up or down?" Worked example: P(X ≥ 3) for B(10, 0.3) and a normal probability with standardising, then a blank for the sample size needed for a given standard error. Checks on the binomial conditions, reading shaded probabilities, and when the Central Limit Theorem is needed.

## Done looks like

- Home page lists the eight lessons under their syllabus sections with ticks and a Review link.
- Every lesson has the seven steps in the kit order, a working stage, three Check questions with per-option feedback, and a worked example with a blank.
- 3D stages (vectors, volumes) rotate with a mouse and a finger, 30 frames per second or better on a mid-range phone.
- Every value shown is right to three significant figures; symbolic answers in the cards match the notation used in the syllabus (f⁻¹, r·n = d, z*).
- Works at 360 px wide with no horizontal scroll. No console errors. Keyboard reaches every control.

## Constraints

- The kit above, exactly. Lessons share `kit.js` and `kit.css` and add nothing global.
- Three.js from the pinned import map only, loaded only by lessons 3 and 7. No other libraries: write the graph drawing, the numerical integration and the normal distribution functions yourself (the error function to 1e-7 is fine).
- Nothing beyond the 9758 syllabus in the Checks: no polar form of complex numbers, no triple products, no skew-line distance. Stretch ideas may go further if labelled "beyond the syllabus".
- Exam-style questions, one idea each. Every wrong option is a real misconception (sign slip, wrong axis, forgetting the domain) and its feedback names it.
- Static files only. No server, no accounts, no tracking.

## Milestones

1. **Kit and home.** Copy the kit from H2 Chem if you have it (`app/kit.css`, `app/kit.js`), else build it from the spec. Home page with the eight lessons under their sections, hash routes, one placeholder lesson, and the shared graph module (axes, pan, zoom, curve plotting).
   Check: on a laptop the stage sits left and cards right; at 360 px the stage is on top at half height; a plotted sin x pans and zooms with the axes staying labelled.
2. **Graphs and transformations, Functions and inverses.** Lessons 1 and 2.
   Check: 1/f(x) of a cubic shows a dashed vertical asymptote at each zero; the reflection in y = x of x² on x ≥ 0 passes the horizontal line test and the card reports the inverse's domain.
3. **Vectors in 3D, Complex numbers.** Lessons 3 and 4.
   Check: the foot of the perpendicular shown matches the worked example to three significant figures; iz sits a quarter turn anticlockwise from z for any dragged z.
4. **Differentiation, Maclaurin series.** Lessons 5 and 6.
   Check: dragging through a maximum of f shows f′ crossing zero downward; the ln(1 + x) polynomial diverges visibly for x > 1 however many terms you add.
5. **Integration and volumes, Binomial, normal and sampling.** Lessons 7 and 8.
   Check: the disc volume for y = √x on [0, 4] about the x axis approaches 8π as n grows; 1000 sample means with n = 30 from a skewed population pile into a bell under the drawn normal curve.
> Up to here the lessons work with nothing saved. The next milestones remember progress and bring back what you got wrong.
6. **Progress and mixed review.** Finished lessons tick; the review page reasks wrong answers after one day and one week.
   Check: finish a lesson, reload: the tick stays; answer a check wrong, move the saved date back a day in devtools, open review: that question comes first.
7. **Phone and keyboard pass.** Every control by Tab and arrow keys; all eight lessons at 360 px.
   Check: a full lesson on a phone with one thumb, and a full lesson on a laptop with no mouse.

## Stretch

- Lesson 9, Hypothesis testing (section 6.5): a z-test with a draggable sample mean and the critical region shaded.
- Lesson 10, Correlation and regression (section 6.6): drag points, watch r and the least-squares line update; show why x on y and y on x differ.
- Lesson 11, Differential equations (section 5.5): a slope field with a draggable initial point and the family of solutions.
- Lesson 12, Sequences and series (section 2): AP and GP as bar charts with a sum-to-infinity slider.
- A teacher mode that reads exported progress files.
- Put it online with Cloudflare Pages so classmates can use it.

## Leave out

- Accounts, leaderboards, anything that needs a server.
- Mathematics outside the 9758 syllabus in the main lessons.
- Long theory text. If a card needs more than 60 words, split it or show it on the stage instead.

Start by reading WRITING.md and the guide chapter on data if you need storage.