# Test 4 in 3D Implementation Plan

> **For agentic workers:** Use superpowers:executing-plans to implement this plan task by task.

**Goal:** Represent every question and answer in `docs/Test_4.md` and `docs/Test_Answers.md` through an educational, interactive 3D lesson.

**Architecture:** Extend the existing TypeScript/Three.js lab with a separate Test 4 collection. Share the renderer and parameter UI; keep test physics, lesson content, and scene construction in focused modules. Native execution in the current checkout; the user delegated design and implementation choices.

**Tech Stack:** Existing Three.js, TypeScript, Vite, Vitest, Playwright; no new dependencies.

**Spec:** The two source documents above and the design below.

## Design and constraints

- Six lessons, with exact question scope, all subparts and original marks: 4A = 100 points, 4B = 100 points.
- Guided lessons were selected as the implementation default after the user said “Choose the details and build it.” An exam-only view hides useful explanation; a disconnected presentation would duplicate the existing renderer.
- Test 4 is the default entry. Existing experiment hash links and all eight experiments remain available through a collection switch.
- Q1: uniform-field straight/curved paths with the same endpoints and work; Q2: repelling charge, energy bars and conserved K + U; Q3: radial motion, inverse-radius energy, reference at infinity; Q4: assemble three charges and add a fourth, showing pair energies once; Q5: angled displacement in a uniform field; Q6: dipole forces, torque, rotation work and energy versus angle.
- Use adjustable progress for inspectable motion; decorative animation respects pause and reduced motion. Explicit physical units and visual scale explanations. Equations and derivations remain usable without WebGL.
- Original questions, step-by-step answers, live numerical examples and a prediction/reveal check in each lesson. Source Markdown is linked from the built app.
- Preserve existing unrelated work and source documents. No publication or repository integration requested.

## Review focus

Signed charges and work; arbitrary energy zeros; infinity represented analytically rather than as a finite point; each charge pair counted once; dipole torque sign versus magnitude and unstable equilibrium; mobile overflow; WebGL fallback; collection/history state.

## Task 1: Physics models

Files: `src/physics/test4.ts`, `src/physics/test4.test.ts`.

- [x] Write independent numerical tests for uniform and central work, conservation, pair assembly, dipole torque/work and infinity.
- [x] Run the tests and observe missing model failure.
- [x] Implement SI functions with explicit energy references and domain validation.
- [x] Run physics tests and confirm passing.

## Task 2: Guided lesson content and scenes

Files: `src/test4.ts`, `src/scene/test4.ts`, `src/experiments.ts`, `src/scene/experiments.ts`.

- [x] Add browser checks for lesson selection, parameter changes, answers, graphics and fallback. Initial browser execution required enabling the local server and downloading Chromium into `/tmp`.
- [x] Implement all six lesson definitions with original questions, subparts and derivations.
- [x] Build parameter-linked 3D diagrams with endpoint labels, force/field arrows and energy plots or bars.

## Task 3: Navigation, learning UI and verification

Files: `src/main.ts`, `src/style.css`, `tests/test4.spec.ts`, `tests/lab.spec.ts`, `README.md`.

- [x] Add Test 4/experiment collection navigation, question and solution panels, observation prompts, prediction reveal, previous/next links and retained parameter state.
- [x] Verify direct links, collection/history navigation, mobile overflow, all scenes, resets and WebGL fallback.
- [x] Run `npm test`, `npm run build`, `npm run test:e2e`; inspect desktop and mobile screenshots.
- [x] Obtain an independent code review and address significant findings; document final outcome.

## Execution record

Baseline: 20 unit tests passed; production build passed (existing Three.js bundle-size advisory).

Completed: all six questions and subparts are covered. Independent review confirmed physical and content consistency and found a mobile pagination issue. A new browser regression reproduced the issue, then passed after explicit pagination began focusing and scrolling the new heading. Review polish items were addressed with valid `aria-current="page"`, responsive framing and less crowded mobile labels. Both original Markdown links returned HTTP 200 with their original content from the production preview; assets are emitted as files rather than inlined data URLs.

Final verification: 25 unit tests passed, 17 browser tests passed, strict TypeScript and production build passed, and `git diff --check` passed. No new dependencies. The existing Three.js bundle-size advisory remains. Work is left in the user's checkout without a commit or publication.