Sensor Survey Interactive Infographic¶
Specification¶
The full specification below is extracted from Chapter 6: Buttons, Photoresistors, and Analog Sensor Input.
Type: interactive-infographic
**sim-id:** sensor-survey-infographic<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *classify* (Bloom L2: Understand) a set of physical computing sensors by the physical quantity each one measures and whether it is typically read as digital or analog.
Canvas: 700x480px, responsive -- recompute a `cardWidth` from `windowWidth` in `windowResized()` so a 4x2 card grid above 640px collapses to a 2x4 grid between 400-640px and a 1x8 stacked list below 400px.
Layout: eight rounded-rectangle cards, one each for Tilt Switch, Reed Switch, Magnetic Sensor, Temperature Sensor, DHT11 Sensor, Humidity Sensor, Sound Sensor, and Microphone Module. Each card shows the component name, a small icon drawn with basic p5.js shapes representing its physical form factor, and a colored dot indicating Digital (circuit green `#2E7D32`) or Analog (raspberry `#C2185B`) typical read mode.
Interaction: clicking a card flips it to reveal a one-sentence description of what physical quantity it measures and one real-world example use case, drawn from the surrounding chapter prose (e.g., clicking "Reed Switch" reveals "Detects a nearby magnet -- used in door and window security sensors"). Hovering a card (desktop) or single-tapping it (touch) highlights its border before a second interaction flips it, so the widget supports both input styles. A `createButton()` labeled "Flip All" toggles every card between description-visible and description-hidden simultaneously, useful for quick review.
Implementation: p5.js. Card data stored as an array of eight objects `{name, quantity, example, mode, isFlipped}`. Draw cards with `rect()` using rounded corners; render flip state as an instantaneous swap of displayed text rather than a true 3D animation, to keep the implementation simple and fast on low-powered classroom devices. Hit-testing via rectangle bounds-checking in `mousePressed()`. Recompute the grid layout from `windowWidth` inside `windowResized()`.