Editable starter
Offers 15 / 25 / 45. HTML, CSS, and JavaScript are together in one file, with labeled source sections. The teacher edits this file live.
Topic 9 · Teacher-led demonstration · First 11 minutes
Watch one change become real.
Predict a result. Ask Claude Code for one bounded edit. Inspect the changed file, refresh the local browser, and compare what happened with what you expected.
Students observe before independent building. No student AI account, paid tool, prior packet, or coding setup is required. The existing course lab remains a full-credit working route.
Class 0:00–0:05 · Retrieve and predict
Know what success means before a file changes.
Opening evidence question: why is one polished result insufficient evidence that an interaction works? Name one alternative path you would test.
Recover these six decisions from Topic 8, or use the supplied Study Sprint example. Packet completion never gates Topic 9. The test oracle is the expected result written before the run.
InputFictional task + duration.
EventBuild my plan.
Rule2 / (duration − 5) / 3.
OutputPrepare / Work / Reflect.
ErrorExplain Task; keep duration.
TestsNormal, missing, repeat.
Predict now: the starter offers 15, 25, and 45 minutes. If we add 30, what three times should appear? What should remain when the task is blank or only spaces? Write the expected results before opening the test list.
Use “Review chapter notes” as the fictional task. Never enter real student records, credentials, private schedules, or protected material.
Class 0:05–0:11 · Six-minute demonstration window
Follow the evidence from request to browser.
The teacher uses a preflighted local copy and an already configured Claude Code environment. This is a bounded demonstration, not a promise that an agent will finish in six minutes. Students watch, predict, and compare.
1 · Show the file and the starting page
Point to the local study-sprint.html file. Show its HTML choices, CSS appearance, and JavaScript validation/rule sections. Open the local browser page and confirm that 30 is absent.
2 · Make the real request in Claude Code
Send the bounded change request from the same folder. Let students see that the agent is editing this file. Record any delay or failure rather than presenting a prepared result as a live edit.
3 · Inspect what changed
Read the actual file diff. Locate the new option and the validation change. Check that the rule and boundaries stayed intact. The agent’s completion message is not a browser test.
4 · Refresh, run, and compare
Refresh the local preview. Run the new 30-minute case, blank and spaces-only recovery, and old-choice checks. Compare each actual result with its written oracle; mark anything not run.
Fallback cutoff: class minute 8. If there is no inspectable edited file by then, stop waiting and open the visibly labeled prepared reference. Use the remaining three minutes for checks. Hard stop: minute 11. Continue to the pipeline screen and mark unrun checks; the fallback adds no time.
Teacher preflight · before class
One portable file. A clearly separate reference.
Use a fresh local teaching folder. Keep the unedited starter separately so rehearsal does not silently replace the starting state. The app has no dependencies, network requests, storage, or AI runtime. Claude Code is the teacher’s editing tool outside the browser.
Prepared reference
Already includes 30. Its visible label says it was prepared before class. Use it for comparison or a disclosed fallback.
- Save the starter as study-sprint.html in a fresh folder. Open that folder in the editor and terminal. Check the starting 15/25/45 choices and all baseline tests.
- Rehearse the exact prompt and local preview before class. Keep the labeled reference available in another tab. Close unrelated accounts, files, and notifications before projecting.
- Start a local preview in that folder using the command below. Keep it running while the file changes. In a second terminal in the same folder, open Claude Code with claude.
- Before students arrive, restore a fresh starter copy in the teaching folder and verify that 30 is absent. This setup happens outside the eleven-minute opening.
python3 -m http.server 8792 --bind 127.0.0.1
Open http://127.0.0.1:8792/study-sprint.html. Use only the teaching folder as the server root. Verify Python and Claude Code beforehand; installation or account troubleshooting is not part of the live window. Stop this local server with Ctrl+C when the demonstration is finished.
The downloadable file also opens directly in a browser. The teacher uses the local-server route to make file → preview → refresh visible; no public hosting is involved.
One bounded request · select and copy
Add a choice. Preserve the behavior.
Ask Claude Code for an observable change and the checks that define success. This request names the file, the new choice, the preserved rule, error recovery, and the boundary.
Edit only study-sprint.html. Add a 30-minute choice alongside 15, 25, and 45. Update both the displayed choices and validation so 30 produces Prepare 2, Work 25, Reflect 3. Keep the transparent 2 / (duration − 5) / 3 rule. Blank or spaces-only task input must show a specific message, focus the task field, show no plan, and preserve the selected duration. Keep the old choices and their results, keyboard operation, and reset behavior. Add no dependencies, network requests, storage, account, backend, API key, or model call. Show the file diff and report checks actually performed; do not claim a browser test unless you ran it.
After the edit, point to the actual changed lines and explain their purpose. Refresh the browser only after confirming that the local file was saved. A visible diff plus a fresh browser test provides evidence that a completion message alone cannot.
Expected first · actual after running
Check the new path and the paths it might disturb.
Record expected → actual → pass/fail/not run. These are expected results, not a claim about a live Claude Code edit that has not yet happened.
- New choice · 30
- Enter Review chapter notes, choose 30, and activate Build my plan. Expect Prepare 2 / Work 25 / Reflect 3, total 30, with the fictional task visible.
- Blank · keep 30
- Clear Task, keep 30 selected, and submit. Expect a specific task message, attention/focus on Task, no plan, and 30 still selected. Correct the task and submit again.
- Spaces · keep 30
- Enter only spaces, keep 30 selected, and submit. Expect the same recovery. The app must not treat spaces as a real task.
- Old choices
- 15 → 2 / 10 / 3.
25 → 2 / 20 / 3.
45 → 2 / 40 / 3.
Run each with the fictional task. Check the values, labels, and total after the change. - Keyboard + reset
- Use Tab, the duration selector, and Enter/Space to operate the form. Focus must stay visible. Reset should clear the task, error, and result, restore 25, and return focus to Task. Inspect a narrow window too.
For a starter baseline, run the old choices and blank/spaces recovery with 25. The unedited starter intentionally has no 30 option. The prepared reference is a known comparison artifact; its results never prove that the live edit succeeded.
Keep access and evidence honest
A useful fallback still names what happened.
Say what is on screen: “This is the prepared reference. The live edit did not finish, or we did not verify it within the timebox. We can inspect this reference, but it is not evidence that today’s agent changed the file successfully.”
At class minute 8, switch to the reference if there is no inspectable edited file. Use the remaining three minutes to compare predicted and actual results. Note the steps and tests you actually observed. Continue to the pipeline at minute 11 and mark unrun checks.
The existing Study Sprint Interaction Lab remains the account-free, full-credit working route. Its controlled corrected-simulation option is labeled as a simulation and does not edit source code. Watching this teacher demonstration creates no extra submission and does not require students to own or run Claude Code.