H2 Chem

# H2 Chem — interactive lessons for the SEAB H2 Chemistry syllabus (★★★)

Build a lesson app for the SEAB H2 Chemistry syllabus (code 9476, examined from 2027). Eight lessons, each a hands-on model you can turn, slide and poke, with questions that make you predict before you see. Molecules are real 3D objects you rotate with a finger. Gases are particles in a box. Rate curves and equilibrium shifts move when you move a slider. 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.

1. **Orbitals** (9476 section 1, Atomic Structure). Stage: 3D orbitals, s, three p and the five d, drawn as translucent lobes, one at a time or stacked by energy level; a diagram of boxes 1s to 4p that fills with arrows as you drag an element slider from H to Kr. Predict: "Which fills first, 4s or 3d?" and "Where does the first ionisation energy dip across period 3?" Reveal: 4s before 3d; Al below Mg and S below P, with the orbital picture showing why. Worked example: write the electronic configuration of Fe and Fe3+. Checks on configurations, the two dips, and successive ionisation energy jumps.
2. **Shapes of molecules** (section 2, Chemical Bonding, VSEPR). Stage: pick a central atom, add bonding pairs and lone pairs with buttons; the 3D model rearranges with a spring animation; bond angle labels; a "show lone pairs" toggle; electronegativity arrows and a net dipole arrow with a "polar?" readout. Predict: "Add one lone pair to CH4's shape. What happens to the angle?" (109.5 to 107). Reveal with the animation. Second round: CO2 against H2O, polar or not. Worked example: shape and angle of SF6 and of PCl3, then a blank for NH4+. Checks on BF3, CO2, CH4, NH3, H2O, SF6 and one unfamiliar analogue.
3. **Lattices and forces** (section 2, structure and properties; intermolecular forces). Stage: 3D lattices of NaCl, diamond, graphite, iodine, ice and copper, with sliders for "pull apart" (shows what breaks) and "heat". A second view sorts six molecules by boiling point as you drag them, then grades the order and shows the force responsible (instantaneous dipole, permanent dipole, hydrogen bond). Predict: "Which melts higher, MgO or NaCl, and why?" and "HF or HCl, which boils higher?" Worked example: explain the difference in boiling point between butane and propanone. Checks on conductivity (graphite yes, diamond no), ice floating, and the sorted molecules.
4. **Gases** (section 3, The Gaseous State). Stage: a box of moving particles with sliders for n, T and V, a pressure gauge, and a live pV against p graph for an ideal gas and a real one. Predict: "Halve the volume at fixed T. What happens to p?" then "Cool a real gas near its boiling point: is pV/nRT above or below 1?" Reveal: the particles, then the curve. Partial pressures: a mixture with two colours and Dalton's law shown as two gauges adding up. Worked example: find M of a gas from p, V, T and mass with pV = nRT. Checks on the kinetic theory assumptions and where they fail.
5. **Energetics** (section 7). Stage: an energy level diagram you build by dragging labelled steps onto a ladder (Born–Haber for NaCl, and a Hess cycle for a combustion problem); the ladder sums the steps and shows the unknown. A second panel plots ΔG = ΔH − TΔS against T with sliders for ΔH and ΔS and marks the temperature where a reaction becomes feasible. Predict: "ΔH positive, ΔS positive. Feasible when hot or cold?" Worked example: lattice energy of NaCl from the cycle, then a blank cycle for MgO. Checks on sign conventions, bond energy use, and reading the ΔG line.
6. **Kinetics** (section 8). Stage: concentration against time for order 0, 1 and 2 with a rate constant slider; a half-life ruler the student drags along the curve; the rate against concentration graph beside it. Second view: the Boltzmann distribution with a temperature slider and an activation energy line, shaded area counting the molecules that can react, and a catalyst button that moves the line. Predict: "Order 1. Is the second half-life longer, shorter or the same?" and "Raise T by 10 K. Does the peak move left or right?" Worked example: find the order from a table of initial rates, then a blank for the rate constant with units. Checks include a rate equation from mechanism data and the enzyme and catalyst explanation.
7. **Equilibria** (section 9). Stage: the Haber process as particles in a box, with sliders for T, p and "add N2", a yield readout, and a live Kc value that stays fixed when p changes and moves when T changes. Predict: "Raise the pressure. Does Kc change?" Reveal: yield up, Kc unchanged. Second round: raise T for an exothermic reaction. Worked example: calculate Kc from equilibrium amounts, then a blank for Kp. Checks on Le Chatelier, the effect of a catalyst, and the compromise conditions used in industry.
8. **Hybridisation and isomerism** (sections 11.1 and 11.2, organic). Stage: 3D ethane, ethene and ethyne with sp3, sp2 and sp orbitals drawn, the sigma and pi bonds colour-coded; a "rotate the bond" control that turns freely for ethane and locks for ethene. Second view: a chiral centre with four coloured groups and its mirror image, a "try to superimpose" button that shows they cannot match; a swap-two-groups button that makes them match. Predict: "Rotate about the C=C bond. Does the pi bond survive?" and "Swap two groups on the mirror image. Same molecule or different?" Worked example: name the geometric isomers of but-2-ene and find the chiral carbon in 2-bromobutane, then a blank for 2-chlorobutane. Checks on constitutional against stereoisomers, cis-trans conditions, and why one enantiomer of a drug can act and the other cannot.

## Done looks like

- Home page lists the eight lessons under their syllabus sections with ticks for finished ones 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 lessons rotate with a mouse and a finger on a phone, at 30 frames per second or better on a mid-range phone.
- Every number shown is correct to the data booklet and the syllabus (bond angles, orders, signs). Where a value is approximate, say "about".
- 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 that need 3D. No other libraries.
- No chemistry beyond the 9476 syllabus in the Checks. Stretch ideas may go further if labelled "beyond the syllabus".
- Write questions in plain language, exam-style, one idea each. No trick questions. Every wrong option is a real misconception and its feedback says what the misconception is.
- Static files only. No server, no accounts, no tracking.

## Milestones

1. **Kit and home.** `index.html` home page, `kit.css`, `kit.js` with the card stepper, the progress dots, the stage and card layout, hash routes, and one placeholder lesson with all seven step types showing dummy content.
   Check: on a laptop the stage sits left and cards right; at 360 px the stage is on top at half height and the cards scroll under it; Back and Next move through all seven steps and the dots follow.
2. **Orbitals and Shapes.** Lessons 1 and 2, with their 3D stages.
   Check: NH3 shows 107 degrees and a lone pair; CH4 shows 109.5; the predict step blocks Next until an answer is picked, and the reveal animates the change.
3. **Lattices and forces, Gases.** Lessons 3 and 4.
   Check: halving V at fixed T doubles the gauge reading; the sort of six molecules grades correctly and names the right force for each.
4. **Energetics and Kinetics.** Lessons 5 and 6.
   Check: the Born–Haber ladder sums to the right lattice energy for NaCl; the order 1 curve shows equal half-lives when you drag the ruler.
5. **Equilibria, Hybridisation and isomerism.** Lessons 7 and 8.
   Check: raising p in the Haber stage raises the yield and leaves Kc unchanged; the mirror molecule fails to superimpose until two groups are swapped.
> 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 on the home page; the review page draws from finished lessons and reasks wrong answers after one day and one week.
   Check: finish a lesson, reload: the tick stays; answer a check wrong, change the saved date in devtools by a day, open review: that question comes back first.
7. **Phone and keyboard pass.** Every control reachable by Tab, sliders by arrow keys, 3D by keyboard arrows too. Pass over all eight lessons on a 360 px screen.
   Check: do a full lesson on a phone with one thumb, and a full lesson on a laptop without touching the mouse.

## Stretch

- Lesson 9, Acids and bases (section 10): titration curves with an indicator picker and a buffer region slider.
- Lesson 10, Periodic Table (section 5): period 3 oxides and chlorides with water, as a predict-and-see table.
- Lesson 11, Electrochemistry (section 12): a cell builder with standard electrode potentials from the data booklet.
- A teacher mode that shows a whole-class summary from exported progress files, no server needed.
- Print a one-page recap sheet per lesson.
- Put it online with Cloudflare Pages so classmates can use it.

## Leave out

- Accounts, leaderboards, anything that needs a server.
- Chemistry outside the 9476 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.