The example gives you a three-region diagram with two complete checks. Its legend assigns A to Supplies, B to Fold paper, and C to Review models. For the folding question, B checks correct while A receives a specific mismatch explanation. An empty selection remains incomplete; clicking unassigned background clears the old response rather than guessing the nearest region.
Make the legend authoritative
The original craft-station schematic uses viewBox 0 0 100 60. A sits at x5/y5 with width 25/height 20; B at x40/y5 with width 25/height 20; C at x75/y35 with width 20/height 20. These are internal drawing units, not screen pixels. Regions do not overlap. The visible shape labels and text legend share the same stable IDs. Keep the drawing source with the teacher key so a revised label cannot silently change the meaning of a previously correct answer.
Question q-fold asks where folded paper is prepared and keys to B. Question q-review asks where models are reviewed and keys to C. Those answers follow this supplied legend rather than a universal classroom arrangement. The native answer controls deliberately appear C,A,B to demonstrate that display order does not define correctness. A key stored as “the second button” would break when controls move, even though the diagram and intended question remain the same.
Wait for an explicit check
Selecting a diagram shape or its native answer button updates one shared selection. The page announces the ID but waits for Check before evaluating it. On q-fold, A produces an explanation that A is Supplies and the question needs B, Fold paper. The learner can revise the choice without the page diagnosing general ability. Keep the question, legend and feedback together so a reader can understand the result without reconstructing an earlier view or relying on the color of a shape.
A blank Check is incomplete, not incorrect. The background clears selection and feedback; it does not become a wrong recognized region. Pointer input follows authored element IDs, including shape-label descendants, instead of a separate pixel-coordinate parser. Native buttons supply a text route to the same selected state. Before classroom use, check the clickable boundaries, keyboard controls, and screen-reader announcements in the intended browser. The script comparison alone does not test those interactions.
Invalidate feedback when the task changes
Switching questions clears the old selected ID and checked result. Reset returns to q-fold with no selection. In an authoring workflow, changing a region meaning, question, or key also needs a new revision and a fresh check. Keep the source diagram and teacher key separate from actual learner response records. A client-side answer key is open practice material, not confidential assessment storage. This original page does not run a vendor quiz module, connect to a gradebook, or save a learner's answer.
End with the full question-to-region explanation: “For q-review, I selected C because the legend assigns Review models to C.” Review which learning task the visual route and text route each ask the learner to perform rather than claiming they measure identical skills. Before using a redesigned diagram, compare its visible labels against both questions. A polished new layout should preserve the stable mapping that makes an answer meaningful.
Make your own working example
Create an original craft-station quiz with inline SVG viewBox 0 0 100 60. Rectangles: A x5 y5 width 25 height 20, B x40 y5 width 25 height 20, C x75 y35 width 20 height 20. Legend A Supplies, B Fold paper, C Review models. Use native answer buttons in C,A,B order, tied to IDs rather than indices.
q-fold asks where folded paper is prepared; key B. q-review asks where models are reviewed; key C. Provide question buttons, Check, and Reset. Recognized shapes and their labels select their region ID; native buttons feed the same selection state. Do not infer regions from screen-coordinate guesses. Keep pending selection until Check. A on q-fold explains Supplies versus B Fold paper. Blank Check is incomplete; unassigned background clears old selection and feedback.
Question changes clear selection; Reset returns to q-fold unanswered. Include a text legend and accessible native controls. Keep question, diagram and result near the top. Use no external image, H5P module, gradebook, server persistence or hidden-key confidentiality claim. Preserve source/key authority and distinguish script tests from native pointer or keyboard inspection.
Use one self-contained HTML file with no remote dependency. Keep the initial sample, output, and labeled controls near the top. Use at least 16px text, strong contrast, visible focus, and a stacked layout at 360px without horizontal overflow. Use explicit type=button click handlers and explicit DOM selectors; do not depend on native form submission. Clear stale feedback when task inputs change. Render entered text safely. Keep practice data local to the current page; do not imply saving, sending, or production integration. Return only the finished HTML.
Clarify the legend instruction
Retain the source diagram and teacher key together. For an HTML practice copy, NOS allows eligible static explanatory text to be revised visually without asking AI to regenerate it. Clarify the legend wording before the next class and recheck any changed mapping in the original source.