# H2 Bio — interactive lessons for the SEAB H2 Biology syllabus (★★★)

Build a lesson app for the SEAB H2 Biology syllabus (code 9477, examined from 2027). Eight lessons where you build molecules from monomers, push particles across a membrane, fold a protein and watch it unfold when you heat it, unwind a DNA helix and copy it, sort chromosomes through mitosis and meiosis, run a dihybrid cross and test it with chi-squared, and turn the dials on photosynthesis and respiration. 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. **Biomolecules** (9477 Core Idea 1, biomolecules of life). Stage: a workbench where you drag monomers together: two α-glucose make maltose with a water molecule leaving (condensation), a chain of them coils into amylose, β-glucose flips every second unit and makes a straight cellulose strand with hydrogen bonds to the next strand; glycerol and three fatty acids make a triglyceride; two amino acids make a peptide bond. Each join shows the bond name and the water released. Predict: "Join β-glucose units. Does the chain coil or lie straight?" Reveal: straight, with the flip shown. Worked example: how many water molecules leave when ten amino acids join, then a blank for a polysaccharide of fifty glucose units. Checks on glycosidic, ester and peptide bonds, starch against cellulose against glycogen, and the phospholipid.
2. **Membrane and transport** (Core Idea 1, cell membrane and transport). Stage: a 3D fluid mosaic membrane you rotate (phospholipid bilayer, channel and carrier proteins, cholesterol, glycoproteins), then a 2D simulation with particles on both sides and sliders for concentration on each side, with buttons for simple diffusion, osmosis, facilitated diffusion and active transport (needs ATP, button to add it); a net flow arrow. Predict: "Both sides equal. Turn on active transport. Does net movement happen?" and "Put a cell in salty water. Which way does the water go?" Worked example: water potential direction between two cells with given values, then a blank for a third cell. Checks on which processes need ATP, which need a protein, and endo- against exocytosis.
3. **Proteins** (Core Idea 1, proteins). Stage: a chain of amino acids you fold step by step: primary (sequence), secondary (helix or sheet with hydrogen bonds drawn), tertiary (ionic, disulfide, hydrophobic interactions and hydrogen bonds shown as coloured links), quaternary (haemoglobin's four chains). Temperature and pH sliders: the links break in the right order and the shape unfolds. A side panel compares haemoglobin (globular) with collagen (fibrous, triple helix). Predict: "Heat to 60 °C. Which bonds break first, hydrogen or disulfide?" Worked example: explain why a change of one amino acid can change the shape, then a blank for a change that does not. Checks on the four levels, the four bond types, and function from structure.
4. **Enzymes** (Core Idea 1, enzymes). Stage: an enzyme with an active site, substrates that fit (lock-and-key, then induced fit: the site tightens), a rate counter; sliders for substrate concentration, enzyme concentration, temperature and pH; a live graph that draws as you slide. Inhibitor buttons: competitive (blocks the site; add more substrate and the rate recovers) and non-competitive (binds elsewhere, site changes shape). Predict: "Double the substrate with a competitive inhibitor present. Does Vmax change?" Reveal: same Vmax, higher Km. Worked example: read Vmax and Km from the graph, then a blank for the curve with a non-competitive inhibitor. Checks on the graph shapes, allosteric regulation, and why the rate falls above the optimum temperature.
5. **DNA** (Core Idea 2, DNA structure, replication, transcription and translation). Stage: a 3D double helix you rotate, with a "straighten" slider that unwinds it to a ladder showing antiparallel strands, sugar-phosphate backbone and base pairs (A with T two hydrogen bonds, G with C three). A replication view: the fork opens, leading strand runs continuous, lagging strand in Okazaki fragments, primers and ligase labelled, and the end of the strand that cannot be finished (the end replication problem). A translation view: type a DNA sequence, see pre-mRNA, mRNA after splicing, then a ribosome reading codons with a codon table beside it. Predict: "Which strand needs the most primers?" and "Change the third base of this codon. Does the amino acid change?" Worked example: the mRNA and peptide from a given template strand, then a blank for a one-base substitution. Checks on antiparallel, semi-conservative replication, and the roles of helicase, polymerase and ligase.
6. **Mitosis and meiosis** (Core Idea 2, cell division). Stage: a cell with four chromosomes (two pairs, colour by parent) and a step control through interphase, prophase, metaphase, anaphase, telophase and cytokinesis; a switch to meiosis I and II with crossing over (drag to choose where) and independent assortment. A counter shows chromosome number and DNA amount at each step. Predict: "After meiosis I, is each cell haploid or diploid?" and "Where do sister chromatids separate in meiosis?" Worked example: the number of chromatids in a human cell at metaphase of mitosis, then a blank for metaphase II. Checks on the stages from pictures, the sources of variation, and what cancer cells skip (checkpoints, p53).
7. **Inheritance** (Core Idea 2, patterns of inheritance). Stage: pick two traits, set the parent genotypes, and a 4 by 4 Punnett square fills itself; a "breed 400" button draws offspring and counts them; a chi-squared panel computes the statistic against 9:3:3:1 and reads the table at 3 degrees of freedom; a linkage slider pulls the counts away from the ratio. Predict: "Linked genes, no crossing over. How many phenotypes in the F2?" Worked example: the full chi-squared calculation for a given count, then a blank for the conclusion at 5%. Checks on test crosses, epistasis ratios (9:3:4 and 9:7), and reading a chi-squared result.
8. **Photosynthesis and respiration** (Core Idea 3, Energy and Equilibrium). Stage: a chloroplast and a mitochondrion side by side as a map of the pathways: light-dependent reactions, Calvin cycle, glycolysis, link reaction, Krebs cycle, oxidative phosphorylation; click a stage to light up its inputs and outputs; a chemiosmosis animation with protons pumped across the membrane and ATP synthase turning. Sliders for light, CO2 and temperature with a live rate graph showing the limiting factor; an oxygen switch for anaerobic respiration in yeast and in muscle. Predict: "Raise light at low CO2. Does the rate rise?" Reveal: no, CO2 is limiting. Worked example: ATP yield comparison aerobic against anaerobic, then a blank for where most ATP is made. Checks on where each stage happens, what carries the electrons, and the limiting-factor graph.

## Done looks like

- Home page lists the eight lessons under their Core Ideas 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 (membrane, DNA) rotate with a mouse and a finger, 30 frames per second or better on a mid-range phone.
- Every fact matches the 9477 syllabus; where biology is simplified, the card says so ("in this model").
- 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 the lessons that need 3D. No other libraries.
- Nothing beyond the 9477 syllabus in the Checks. Stretch ideas may go further if labelled "beyond the syllabus".
- Exam-style questions, one idea each. Every wrong option is a real misconception 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 Core Ideas, hash routes and one placeholder lesson.
   Check: on a laptop the stage sits left and cards right; at 360 px the stage is on top at half height; Back and Next walk the seven steps and the dots follow.
2. **Biomolecules, Membrane and transport.** Lessons 1 and 2.
   Check: joining two α-glucose shows a water molecule leaving and names the glycosidic bond; equal concentrations give no net movement until active transport and ATP are on.
3. **Proteins and Enzymes.** Lessons 3 and 4.
   Check: heating breaks hydrogen bonds before disulfide bonds and the chain unfolds; the competitive inhibitor curve reaches the same Vmax.
4. **DNA, Mitosis and meiosis.** Lessons 5 and 6.
   Check: A pairs with T and G with C in the straightened ladder; the counter shows 23 chromosomes after meiosis I in a human cell set to 46.
5. **Inheritance, Photosynthesis and respiration.** Lessons 7 and 8.
   Check: unlinked AaBb × AaBb gives a 9:3:3:1 square and a chi-squared below the 5% critical value for a fair sample; raising light at low CO2 leaves the rate flat.
> 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, Evolution (Core Idea 4): a population simulator with selection pressure and a Hardy–Weinberg calculator.
- Lesson 10, Cell signalling (Core Idea 3): insulin and glucagon with blood glucose as the slider, cAMP as the second messenger.
- Lesson 11, Infectious diseases (Extension A): an R0 outbreak model with a vaccination slider.
- Lesson 12, Gene technology (Core Idea 2): PCR cycles that double the count, and an electrophoresis gel you load.
- 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.
- Biology outside the 9477 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.