Engineering Design Process Loop¶
Specification¶
The full specification below is extracted from Chapter 20: Capstone Design Challenges and Course Wrap-Up.
Type: mermaid-diagram
**sim-id:** engineering-design-process-loop<br/>
**Library:** Mermaid<br/>
**Template:** https://github.com/dmccreary/learning-micropython/tree/main/docs/sims/project-design-process<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) the stages of the engineering design process to plan their own capstone project, recognizing which stage a given planning activity belongs to.
Canvas: responsive Mermaid flowchart rendered at container width using Mermaid's default responsive SVG scaling.
Layout: a circular Mermaid flowchart (drawn as a `flowchart LR` looping back on itself) with five stages: "Gather Requirements" → "Write a Design Brief" → "Plan the Project" → "Build a Prototype" → "Test with Real Users" → an arrow looping back to "Gather Requirements," with a secondary short-loop arrow from "Test with Real Users" directly back to "Build a Prototype," showing that testing more often sends a builder back to rebuilding than all the way back to requirements.
Interaction: every node has a `click` directive that opens an infobox beneath the diagram containing that stage's one-sentence definition, matched to the surrounding chapter prose, plus one example task from a Pico-sensor-to-Pi-5 capstone (e.g., clicking "Build a Prototype" shows "Example: wire the Pico sensor node and confirm it reads correctly before adding wireless communication"). Only one infobox is open at a time.
Implementation: Mermaid `flowchart LR` syntax with a `click NodeId "javascript:showInfobox('NodeId')"` directive on every node, paired with a small JavaScript object mapping node IDs to definition and example text.