Topic 09 · Browser interaction + evidence-first debugging

Interactivity and Simple IntelligenceTurn a design contract into observable behavior and test evidence.

A working feature is not “the agent said it is done.” It is an observable chain from input to event to validation to rule to state to output, supported by expected-versus-actual tests and a human approval decision.

Before class

Bring or recreate the Topic 8 input, event, exact rule, output, missing-input behavior, and three expected tests—or use the course Study Sprint Interaction Lab. No AI account, coding agent, prior packet, API key, backend, paid tool, private data, or public deployment is required.

By the end

Four outcomes you can demonstrate.

The focus is judgment students can show, not vocabulary they can merely repeat.

01 · TRACE

Explain one interaction as input → event → validation → rule → state → output.

02 · RUN

Implement or configure one working client-side behavior through an own-app, supplied-lab, or approved accessible route.

03 · TEST

Run normal, missing-input, and revise/repeat cases with exact expected and actual results.

04 · DIAGNOSE

Localize one failure or passed edge case, protect secrets, explain one behavior section, and approve the Topic 10 handoff.

Class route

Two meetings with separate learning arcs.

Meeting 1 plans 68 taught minutes plus a 12-minute flex and access buffer; Meeting 2 plans 68 plus 12.

MEETING 1

Build and Trace One Client-Side Interaction

Recover the Topic 8 oracle, predict a bounded change, and watch a teacher-led Claude Code edit with browser retests. Then reveal the six-stage interaction pipeline, run the Study Sprint lab, specify a bounded rule, and capture the first three tests.

80 MIN

00:00–00:11
Retrieve, predict + teacher editFirst 5 minutes: recover six decisions and predict. Next 6: teacher requests a real file edit, inspects the diff, and retests—or labels the prepared fallback. Stop at minute 11.
00:11–00:27
Interaction pipelineReveal six browser responsibilities and map them to one source example.
00:27–00:48
Lab Rounds 1–2Trigger missing input, then run a successful transparent-rule result.
00:48–01:08
Rule + testsSpecify one bounded behavior and run normal, missing-input, and revise/repeat checks.
01:08–01:20
Checkpoint + flex/access bufferSave the trace and tests; use the course lab when setup is unavailable.

Start Meeting 1

MEETING 2

Diagnose, Retest, and Protect the Boundary

Retrieve the test oracle, localize an observed failure, choose a minimal fix, rerun regression checks, distinguish local logic from fetch/API architecture, and prepare a Topic 10 evidence handoff.

80 MIN

00:00–00:14
Retrieval + bug contractRecover expected/actual evidence and write a reproducible failure or passed edge case.
00:14–00:38
Diagnosis Rounds 1–2Localize a course-lab bug, choose the smallest fix, and reject unrelated edits.
00:38–00:52
Retest + network boundaryRun focused and regression checks; distinguish local rules, fetch, and model APIs.
00:52–01:08
Secrets + evidence packetRespond to a fake exposed-key scenario, explain one behavior section, and package the Topic 10 handoff.
01:08–01:20
Flex/access bufferComplete missing evidence and verify accepted formats privately.

Start Meeting 2

Evidence

Interaction Evidence Packet

Show one working client-side interaction, an observable six-stage trace, three expected-versus-actual tests, one calibrated diagnosis or passed edge-case analysis, and a safe Topic 10 handoff.

What to submit

Submit one completed packet through the course LMS before Topic 10. Preferred filename: Lastname-Topic09-InteractionEvidence.pdf; maximum five pages. LMS text, DOCX/export, scanned paper, or an instructor-approved accessible alternative is accepted. The LMS supplies the exact deadline and grading-policy details.
Use either your own client-only app, the course Study Sprint Interaction Lab, or an approved accessible working-interaction route. All routes receive the same maximum credit for equivalent evidence; AI/coding-tool access and generated-code volume earn no automatic advantage.
Most evidence is drafted during the two meetings. Plan about 35–55 minutes to finish the packet afterward; allow longer if beginning from a blank packet.
Include the Topic 8 oracle (input, event, exact rule, output, missing-input behavior), a six-stage trace, the one implemented/configured change, and three tests with exact expected result, actual result, and pass/fail.
Include one expected-versus-actual diagnosis and retest, or one deliberately chosen passed edge case with a no-bug explanation. State evidence, suspected pipeline stage, smallest change or reason no change was needed, focused test, regression checks, and remaining limitation.
Include a local/fetch/model-API architecture decision, a fictional exposed-secret response, a plain-language explanation of one behavior section, route/assistance disclosure, and the Topic 10 smoke-test handoff.
Do not submit source archives unless the LMS explicitly requests them, API keys, credentials, repository/account/device screenshots, push-protection alerts, access proof, full chat histories, private logs, real student/peer/instructor records, or unnecessary identity evidence.

Open assignment

Boundary

Keep the required feature client-side and use fictional or non-sensitive input. No login, backend, database, model API, private key, private record, external action, or public deployment is required. Network and model architectures are discussed but not implemented in the Topic 9 minimum.

Access: The course Study Sprint Interaction Lab is the account-free working route. Ask the instructor through the LMS before class for a keyboard-only, projected, text-transcript, or other accessible five-page route. Lab-route students carry the lab link, configuration, and test record into the Topic 10 course-owned continuation; they are not disadvantaged for lacking a deployable app. Prior Topic 8 completion, paid tools, AI access, and public hosting are not gates.

AI disclosure: Name the route and assistance used, the behavior decision affected, one accepted/rejected/revised suggestion, the tests and diagnosis performed, the remaining limitation, and the final human approval decision.

References

Core sources and optional extensions.

The class deck contains the required explanation. These links support verification, deeper reading, or alternate access.

Teacher-led Claude Code Live EditPredict a new 30-minute choice, observe a real source edit, inspect the diff, and retest. Includes a portable starter and a clearly labeled prepared fallback.Study Sprint Interaction LabAccount-free working route with transparent rule controls, missing-input behavior, an injectable state bug, reset, and no network or storage.Editable Interaction Evidence PacketPrimary local route for oracle, trace, tests, diagnosis, secret response, explanation, and Topic 10 handoff.Printable Interaction Evidence Packet PDFFive-page offline/paper version with the same evidence fields.MDN Introduction to EventsCore reference for browser events, addEventListener, form submission, keyboard activation, and default behavior.MDN DOM Scripting IntroductionCore reference for selecting page elements and updating content through the browser DOM.MDN Fetch APIConcept reference for requests and responses; network implementation is not required this week.OpenAI Production Best PracticesInstructor/security reference: avoid keys in code or public repositories; use approved secret storage and server-side boundaries.GitHub Push ProtectionInstructor/security reference for secret-blocking behavior; never require students to expose an alert or account screen.AI Workflow Skill MapOptional diagnosing-bugs and test-first workflow references; skill installation is not required.

Next week

Topic 10: Complete and Deploy—or Demonstrate Locally

Own-app students carry their local file. Course-lab students carry the lab link, configuration, and test record into a course-owned continuation. Both run the same essential smoke checks and can use a public or equal-credit local fallback.

Open next week