H2 Econs

# H2 Econs — interactive lessons for the SEAB H2 Economics syllabus (★★)

Build a lesson app for the SEAB H2 Economics syllabus (code 9570). Eight lessons where every diagram in the course is live: drag a demand curve and watch price and quantity find a new equilibrium, slide a tax in and see who pays, pull a marginal external cost apart from the private cost and shade the welfare loss, push aggregate demand and watch the multiplier work round by round, and put a tariff on and read off who gains and who loses. 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 theme. Build the stage first, then the cards. Diagrams are drawn as SVG with labelled axes, curve labels that move with the curves, and shaded areas with a key. Every curve a student can move has a handle. There is no 3D in this app.

1. **Scarcity and the production possibility curve** (9570 Theme 1.1). Stage: a PPC for two goods with a draggable point on, inside and outside the curve, a readout of the opportunity cost of one more unit as the slope at that point, and buttons for "more resources" (shift out), "better technology for good A" (pivot) and "unemployment" (point inside). Predict: "Move along the curve towards more of good A. Does the opportunity cost of A rise or fall?" Reveal: it rises, with the slope shown. Second round: a point outside the curve, possible or not. Worked example: the opportunity cost of moving from one combination to another, then a blank for the reverse move. Checks on the three questions of the central problem, points inside and outside, and the marginalist principle (do it if marginal benefit exceeds marginal cost).
2. **Demand, supply and equilibrium** (Theme 2.1, price mechanism). Stage: demand and supply with handles to shift each, a price line the student can drag to show shortage and surplus with arrows pushing price back, and buttons for named events (income rises for a normal good, cost of inputs falls, a substitute gets cheaper, a complement gets dearer) that shift the right curve. Consumer and producer surplus toggles. Predict: "A substitute gets cheaper. Which curve moves, and which way?" and "Price is held above equilibrium. Shortage or surplus?" Worked example: explain the effect of a rise in income on the market for a normal good in four steps (shift, disequilibrium, adjustment, new equilibrium), then a blank for an inferior good. Checks on shift against movement, the determinants, and the signalling, rationing and incentive functions.
3. **Elasticity** (Theme 2.1, elasticities). Stage: a straight-line demand curve with a draggable point: PED at that point, the total revenue rectangle, and a total revenue against quantity graph beside it; a steepness slider; a PES panel with a time slider from immediate to long run; a YED and XED panel where you pick two goods and see the sign. Predict: "Price falls on the elastic part of the curve. Does total revenue rise or fall?" and "Where on a straight line is PED exactly 1?" Worked example: a PED calculation from two price and quantity pairs and what it means for a firm's pricing, then a blank for the revenue change. Checks on the determinants of PED (substitutes, necessity, proportion of income, time), the signs of YED and XED, and a mistake about steepness meaning elasticity.
4. **Government intervention in markets** (Theme 2.1, intervention). Stage: a market with a tax slider (a wedge between the price consumers pay and the price producers get, tax revenue shaded, deadweight loss shaded), a subsidy slider, a price ceiling and a price floor handle with the shortage or surplus shown, and a quota line. A side readout of consumer surplus, producer surplus, government and total welfare. Predict: "Impose a price ceiling below equilibrium. Shortage or surplus, and what does the government have to deal with next?" Worked example: the effect of a specific tax on price, quantity and welfare, in steps with the areas named, then a blank for a subsidy. Checks on who the burden falls on in words (not calculation), the deadweight loss, and why a price floor leads to surpluses and storage.
5. **Firms: costs, revenue and profit** (Theme 2.2). Stage: cost curves (AC, AVC, MC) and revenue curves (AR, MR) for a price-setting firm, an output slider, with profit or loss shaded as a rectangle at the output chosen; a "find MR = MC" button that animates to the profit-maximising output; a long-run average cost curve with economies and diseconomies of scale marked and a plant size slider. Predict: "Produce where MR exceeds MC. Should the firm make more or less?" Reveal: more, with the extra profit shaded. Second round: price below AVC, shut down or not. Worked example: read profit from the diagram at the chosen output, then a blank for the shutdown price. Checks on MC cutting AC at its minimum, internal against external economies of scale, and a cognitive bias question (why a firm might not maximise profit).
6. **Market failure** (Theme 2.3). Stage: the two-diagram approach for a negative externality (MPC, MSC, MPB, MSB) with a slider for the size of the external cost; the free-market output, the socially optimal output and the deadweight loss shaded; policy buttons (tax equal to the external cost, regulation, tradeable permits) that show whether MSB = MSC is reached; a second panel for a positive externality with a subsidy; a public goods card with non-rivalry and non-excludability as a two-by-two sorter of goods. Predict: "Raise the external cost. Does the free-market output change?" Reveal: no, the market ignores it; the loss grows. Worked example: show and explain the welfare loss from a negative externality in consumption, then a blank for the right size of tax. Checks on the sources of market failure in the syllabus (public goods, externalities, information failure, factor immobility, market dominance), efficiency against equity, and which policy fits which failure.
7. **Aggregate demand, aggregate supply and the multiplier** (Theme 3.1). Stage: an AD and AS diagram with handles for both, a Keynesian AS with its flat, rising and vertical parts, a readout of the price level and real output; a multiplier panel with sliders for the marginal propensities to consume, save, tax and import, showing k = 1/(1 − MPC) built as rounds of spending in a bar chart that shrinks round by round. Predict: "Raise the marginal propensity to import. Does the multiplier rise or fall?" and "AD rises when the economy is on the vertical part of AS. What rises?" Worked example: the change in national income from a rise in investment with given propensities, then a blank for a different MPC. Checks on the components of AD (C + I + G + (X − M)), the shape of AS, the circular flow withdrawals and injections, and output gaps.
8. **Macroeconomic policy and trade** (Themes 3.2 and 3.3). Stage: a policy panel that applies fiscal, monetary (interest rate), exchange rate (Singapore's choice) and supply-side policies to the AD and AS diagram with the time lag shown; a standard of living card with a Lorenz curve the student can bend and a Gini readout, plus GDP against HDI toggles; a trade panel with two countries' PPCs where comparative advantage is found from opportunity costs and a tariff diagram with imports before and after, tariff revenue and the two welfare triangles. Predict: "Put a tariff on. Who gains, who loses, and by how much in total?" and "Country A is better at both goods. Can trade still help?" Worked example: the effect of an exchange rate appreciation on inflation and on exports in steps, then a blank for a depreciation. Checks on the types of unemployment and inflation, the policy for each, the Marshall-Lerner condition in words, and reading a Lorenz curve.

## Done looks like

- Home page lists the eight lessons under their themes 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.
- Every diagram is labelled the way an examiner expects: axes, curve names, equilibrium points, shaded areas with a key.
- Economics matches the 9570 syllabus: no tax incidence calculations, market structures as awareness only, comparative advantage without numerical examples beyond opportunity cost.
- 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.
- SVG diagrams, no chart library, no Three.js.
- Nothing beyond the 9570 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 (shift against movement, steepness as elasticity, tax paid by whoever hands it over) 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 themes, hash routes, one placeholder lesson, and the shared SVG diagram module (axes, draggable curve handles, shaded areas with a key).
   Check: on a laptop the stage sits left and cards right; at 360 px the stage is on top at half height; a demand curve can be dragged with a finger and its label follows.
2. **Scarcity and PPC, Demand and supply.** Lessons 1 and 2.
   Check: moving along the PPC towards good A raises the opportunity cost readout; "substitute gets cheaper" shifts demand left and the new equilibrium is marked.
3. **Elasticity, Government intervention.** Lessons 3 and 4.
   Check: the midpoint of a straight-line demand curve reads PED 1 and the top of the revenue curve; a tax shows the wedge, the revenue and a deadweight loss triangle that grows with the tax.
4. **Firms, Market failure.** Lessons 5 and 6.
   Check: the MR = MC button lands on the output where the profit rectangle is largest; a tax equal to the external cost brings the market to the socially optimal output.
5. **AD, AS and the multiplier, Policy and trade.** Lessons 7 and 8.
   Check: the multiplier bars sum to 1/(1 − MPC) times the injection; the tariff diagram shades two welfare loss triangles and a revenue rectangle.
> 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, Globalisation (Theme 3.3): a trade-flows map and a balance of payments sorter.
- Lesson 10, Information failure (Theme 2.3): a used-car market with asymmetric information.
- Essay planner: a card that turns a lesson's diagram into the skeleton of an exam answer.
- 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.
- Economics outside the 9570 syllabus in the main lessons, including tax incidence calculations and detailed market structure models.
- 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.