Product Decision Framework Wizard¶
Specification¶
The full specification below is extracted from Chapter 2: Choosing the Right Raspberry Pi Product.
Type: microsim
**sim-id:** product-decision-framework-wizard<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) the four-question product decision framework to recommend a Raspberry Pi board for a given project scenario and budget.
Canvas: 700x460px, responsive — recompute question-panel width from `windowWidth` inside `windowResized()`.
Data Visibility Requirements:
Stage 1: Show the current question text and its answer options as large clickable buttons.
Stage 2: After each answer, show a running "narrowed-down list" of remaining candidate boards along the bottom of the canvas, with eliminated boards shown grayed out and crossed through rather than removed.
Stage 3: After all four questions, show the single recommended board with a one-sentence justification referencing the specific answers given.
Controls: four `createButton()` groups, one per framework question, revealed one at a time (question 2 only appears after question 1 is answered, and so on). A `createButton()` labeled "Start Over" resets all answers and restores the full five-board list.
Interaction: clicking an answer button advances to the next question and updates the narrowed-down board list beneath the question panel in real time, so students can watch candidates get eliminated as they answer. The final recommendation panel includes a "Why?" button that re-displays each of the four answers next to the framework question it addressed.
Instructional Rationale: A step-through wizard with visible candidate elimination is appropriate for an Apply-level objective because it lets students see cause and effect between each framework question and the shrinking set of viable boards, rather than just receiving a final answer with no visible reasoning.
Implementation: p5.js. Represent the five boards as an array of objects with boolean-eligibility flags per question branch; each answer button click sets flags and filters the displayed list. Use `createButton()` for all controls per project convention, positioned with `.position()` relative to canvas coordinates, and repositioned inside `windowResized()`.