Capstone Challenge Type Picker¶
Specification¶
The full specification below is extracted from Chapter 20: Capstone Design Challenges and Course Wrap-Up.
Type: interactive-infographic
**sim-id:** capstone-challenge-type-picker<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *evaluate* (Bloom L5: Evaluate) which capstone challenge type — open-ended, constraint-based, original invention, or remix and extend — best fits their own project idea.
Canvas: 700x420px default, responsive — recompute card positions from `windowWidth` in `windowResized()`, switching from a 2x2 grid to a stacked 4x1 layout below 500px wide.
Layout: four cards, one per challenge type, each showing its name and a one-line description drawn from the surrounding chapter prose. A short three-question quiz panel sits below the cards: "Do you already have a project idea in mind?", "Do you want firm constraints (budget, size, required part) or full freedom?", "Are you starting from scratch or building on an earlier chapter's project?"
Controls: three `createRadio()` groups, one per quiz question, each with two or three simple answer options; a `createButton()` labeled "Suggest a Challenge Type."
Interaction: clicking "Suggest a Challenge Type" highlights the one card (of the four) that best matches the combination of radio answers, using a simple rule table mapping answer combinations to a recommended type, and displays a one-sentence rationale beneath the highlighted card. Clicking any card directly (without using the quiz) also highlights it and shows its full description, letting a student explore all four options freely.
Implementation: p5.js with `createRadio()` and `createButton()` p5.js DOM controls, a small lookup table mapping the three radio answers to one of the four challenge-type cards, redrawn each frame to reflect the currently highlighted card.