Showcase Format Comparison¶
Specification¶
The full specification below is extracted from Chapter 20: Capstone Design Challenges and Course Wrap-Up.
Type: interactive-infographic
**sim-id:** showcase-format-comparison<br/>
**Library:** Chart.js<br/>
**Status:** Specified
Learning objective: Students will *evaluate* (Bloom L5: Evaluate) which showcase format best fits a given capstone project and its intended audience.
Canvas: 700x420px, responsive via Chart.js `responsive: true` and `maintainAspectRatio: false` inside a fixed-height wrapper.
Data: a radar (spider) chart with three overlapping series, one per showcase format from the table above, each scored 1-5 across four axes: "Live Demonstration," "Formal Judging," "Public Reach," "Preparation Time Needed." Series colored using the book's accent palette.
Controls: three checkboxes, one per format, allowing a student to toggle any series on or off to compare formats one at a time or all together.
Interaction: clicking a data point on any axis opens a small tooltip (Chart.js's built-in tooltip plugin) explaining, in one sentence, why that format scores the way it does on that axis, pulled from the surrounding chapter prose. A short text panel below the chart updates to recommend a format when only one checkbox is active, based on which axes score highest.
Implementation: Chart.js `radar` chart type with a `plugins.tooltip.callbacks.label` function supplying the custom one-sentence explanations, and checkbox `onchange` handlers toggling dataset visibility via `chart.getDatasetMeta(index).hidden`.