Teaching plan
Preparation
Read the walkthrough and rubric. Open ../student/index.html and ../solution/index.html relative to this folder. Run the normal-message and demo sequences and Run browser checks in each: expect 3/6 in the starter and 6/6 in the solution. Test an exported kit on the classroom machines.
Distribute the student-only export described in the exercise README. Students need a desktop browser and plain-text code editor. Explain opening versus editing a file and help students find the same copy in both programs. Do not require a terminal, package manager, server, or reading data.js and app.js.
Suggested 75–90-minute class
| Minutes | Activity | Checkpoint |
|---|---|---|
| 0–10 | Open app; ordinary, punctuation, and spaces-only messages | Everyone can use Author view, Post message, and Reader view. |
| 10–20 | Insert harmless demo; observe marker; run checks | Students record UNCHANGED → DEMO EXECUTED and the initial three failures. |
| 20–35 | Small HTML-versus-text example; three demo pieces | Students can explain why visible tags differ from an HTML element. |
| 35–60 | Teach four browser operations; guided complete-file replacement | Students understand the textContent choice, save the matching render.js, and reload. |
| 60–75 | Repeat manual cases and all six checks | Demo stays text, marker stays UNCHANGED, and actual outcomes are recorded. |
| 75–90 if needed | Finish explanation, troubleshoot, or optional challenge | Give beginners time to complete without a typing-speed penalty. |
Pause after each step; beginners should not need to predict unfamiliar code. Explain each term in the worksheet when it first appears. Run the short <strong>Hello</strong> example before discussing the longer image demo. Students should use the demo button, not type or memorize its encoded image data.
Guided repair and assessment
Teach replaceChildren, createElement, textContent, and appendChild before asking for the blank. Explain that forEach repeats the item instructions for each message. Read the scaffold with the class and identify container, messages, text, and item. Keep the wrapper provided.
Students replace the whole file, fill one property, save, and reload. The hint is intentional instruction, not an assessment leak. Full credit is available on this route. Practiced JavaScript students may attempt the independent challenge but should meet the same outcomes.
Assess observation, a working text-only repair, verification, and a simple explanation. Do not grade trust boundaries, servers, databases, stored XSS, OWASP categories, or dependency-scanning knowledge. Those appear only in the optional extension.
Optional later discussion
After the core lesson, connect the text/HTML distinction to XSS vocabulary, then discuss how a shared server might deliver stored messages. Introduce server permissions and database queries only when students have learned those systems. Keep the intentionally unsafe app local. The six checks cover this small plain-text renderer; broader security claims require broader evidence.