Schematic Symbol Matcher¶
Specification¶
The full specification below is extracted from Chapter 4: Digital I/O, PWM, and the MicroPython Workflow.
Type: infographic
**sim-id:** schematic-symbol-matcher<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/circuits/tree/main/docs/sims/circuit-symbol-flashcards<br/>
**Status:** Specified
Learning objective: Students will *identify* (Bloom L1: Remember) standard schematic symbols for a resistor, LED, capacitor, battery/VCC source, and ground, and match each symbol to its component name.
Canvas: 700x400px, responsive — recompute a card grid's column count from `windowWidth` inside `windowResized()` (3 columns above 600px, 2 columns between 380-600px, 1 column below 380px).
Layout: a grid of small cards, each rendering one schematic symbol (drawn with basic p5.js line/shape primitives: zigzag for resistor, triangle-plus-line for LED, two parallel lines for capacitor, stacked long/short lines for a battery, downward hatching for ground) beside a blank label field.
Controls: a `createSelect()` dropdown per card, pre-populated with all five component names, defaulting to "Choose..."; a `createButton()` labeled "Check Answers" that grades every card at once.
Interaction: selecting a component name from a card's dropdown and clicking "Check Answers" colors that card's border green if correct or red if incorrect, and a small text link beneath an incorrect card reveals the correct name plus a one-sentence description drawn from this chapter's definitions. A "Shuffle" button (`createButton()`) re-randomizes which symbol appears on which card and clears all previous answers, letting a student re-attempt the activity.
Implementation: p5.js. Store the five symbol/name/description triples as an array of objects; render each symbol procedurally with `line()`/`triangle()`/`rect()` primitives rather than image files so the diagram stays crisp at any canvas size. Use `createSelect()` for every dropdown per project convention, positioned relative to each card's canvas coordinates and repositioned inside `windowResized()`.