Cost Per Student by Hardware Tier¶
Specification¶
The full specification below is extracted from Chapter 19: Budgeting, Sourcing, and Classroom Logistics.
Type: chart
**sim-id:** cost-per-student-by-hardware-tier<br/>
**Library:** Chart.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) how cost per student varies across the book's five hardware tiers to select a budget-appropriate project for a given class size.
Canvas: 700x450px, responsive — use Chart.js's built-in `responsive: true` and `maintainAspectRatio: false` options inside a fixed-height wrapper `<div>` so the chart reflows on window resize without overflowing.
Data: a vertical bar chart with one bar per hardware tier: "Tier 1: Pico Breadboard" (~$18 illustrative BOM), "Tier 2: Pico Robot Kit" (~$27), "Tier 3: Specialty Pico Project" (~$25), "Tier 4: Pi 500+" (~$180), "Tier 5: Pi 5 + AI HAT+" (~$260). Bars colored using the book's accent palette (raspberry `#C2185B` through copper gold `#D4AF37`). Y-axis labeled "Approximate Cost per Student (USD)." A caption below the chart notes that these are illustrative, approximate figures that should be updated with current vendor pricing before use.
Controls: a `<select>` HTML dropdown labeled "Class Size" with options 10, 20, 30 (default 20) placed above the chart, wired to a plain `onchange` handler.
Interaction: clicking any bar opens an infobox below the chart listing that tier's approximate BOM breakdown (2-4 major line items, e.g. Tier 5 shows "Pi 5 board, AI HAT+ accelerator, camera module, cooling") and recalculates a "Total for this class" figure using the current class-size dropdown value. Changing the class-size dropdown updates that total figure live for whichever bar's infobox is currently open, without requiring the bar to be re-clicked.
Implementation: Chart.js bar chart with an `onClick` handler that maps the clicked bar's index to a small JavaScript array of BOM breakdown objects. Recompute the displayed total as `perStudentCost * classSize` whenever the dropdown's `onchange` fires.