Debugging Decision Tree¶
Specification¶
The full specification below is extracted from Chapter 1: Computational Thinking and Debugging for Physical Computing.
Type: microsim
**sim-id:** debugging-decision-tree<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) a structured debugging process to select an appropriate strategy for diagnosing a broken circuit or program.
Canvas: 700x520px, responsive — recompute node vertical spacing as a fraction of `height` in `windowResized()` so the tree stays legible on narrow screens by narrowing horizontal spacing first before shrinking text.
Layout: a top-down decision tree starting from a root node labeled "It's not working!" branching into "Did it ever work before?" — Yes leads to "What changed most recently?" (pointing to root cause analysis), No leads to "Is the problem in the wiring or the code?" which splits again into "Check wiring: power, ground, correct pins" and "Read the code out loud, line by line" (rubber duck debugging). Both paths converge on a shared bottom node: "Test one small change at a time" (trial and error testing), which loops back with a curved arrow to the root node.
Interaction: every node is clickable; clicking reveals a short tip in an infobox beneath the tree, matching that node's debugging concept as defined in the surrounding chapter text (e.g., clicking "Read the code out loud, line by line" shows a one-sentence rubber-duck-debugging tip). Only one infobox is shown at a time. A `createButton()` labeled "Reset" collapses any open infobox. Visited nodes remain marked with a small checkmark icon after being clicked, so a student can see which branches of the tree they've already explored.
Implementation: p5.js tree layout computed once at setup and on resize from a small hard-coded node/edge data structure (parent-child pairs with x/y as fractions of canvas size). Hit-testing via rectangular bounds around each node's text. Draw edges as simple bezier or straight lines connecting parent center to child center.