Lab Station Layout and Group Size Planner¶
Specification¶
The full specification below is extracted from Chapter 19: Budgeting, Sourcing, and Classroom Logistics.
Type: interactive-infographic
**sim-id:** lab-station-layout-group-size-planner<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) group size and station layout decisions to configure a classroom lab for a given number of students and available kits.
Canvas: 700x480px default, responsive — recompute the room grid from `windowWidth`/`windowHeight` fractions on `windowResized()`.
Layout: a top-down floor-plan view showing a grid of lab station rectangles, a shared component bin icon in a fixed central or perimeter location, and a teacher-desk icon. Each station rectangle shows a small count of student icons standing at it, matching the current group size setting.
Controls: a `createSlider()` labeled "Number of Students" (range 8-40, default 24); a `createSlider()` labeled "Number of Available Kits" (range 4-20, default 10); a `createSelect()` dropdown labeled "Group Size" with options 1, 2, 3, 4 (default 2).
Interaction: the layout recalculates the number of stations needed as `ceil(numStudents / groupSize)` and compares it to available kits; if stations needed exceeds available kits, affected stations are drawn in a warning color with a label "Kit shortage — increase group size or add kits." Clicking any station opens an infobox listing that station's assigned group size and a reminder that the shared component bin (drawn as a distinct icon) supplies items common to every station rather than duplicated in each kit. Clicking the shared-bin icon shows the example bin contents list from earlier in the chapter.
Implementation: p5.js, station positions computed as a grid laid out from `numStations` using `sqrt()` to pick a roughly square row/column count, redrawn fully each frame from current slider/dropdown values. Hit-testing via rectangular bounds per station icon.