Slide Interactive

Slide Interactive

A deck is a sequence of single ideas, each readable from the back of the room in three seconds, and a few moments where the audience gets to use a slide instead of watching it. The starter gives you the frame, every layout's CSS, an icon sprite and a runtime script that drives the interactive slides and the presenter. Your job is the story, the layout choices, very few very good words, and choosing where interaction earns its place.

What to read

read_skill_file("slide-interactive", "references/starter.html") is required: your file is built on it. Read the others as you need them, all in one turn, before you write:

• references/layouts.md: the 16 layouts with character budgets (tested in wide fonts; within budget nothing overflows), skeletons, the bar-chart recipe and the diagram kit.
• references/interact.md: exact attribute semantics, the calc / explore / tabs / quiz recipes, and the honest-numbers rules the checker applies.
• references/styles.md: six style families (tokens, font pairs, a style block each) and a contrast-checked hue table.

Then make no more tool calls: the next reply is the finished deck.

The bar

• Action titles. Every h2 is a full sentence stating the takeaway; the headlines alone tell the story. .kicker is a 1–4 word topic label.
• One idea per slide, about 15–30 visible words, never over 40 (data-deck chart/stats/compare 55; calc 50; explore/tabs 45 with one pane showing). A number is shown as a number or a chart, not a sentence; a lone number gets its comparison or meaning.
• Every brief figure on a slide, as written, nothing invented. Every row of every table or series in the brief appears (notes don't count); worsening metrics get a chart. If the brief lists slides, make exactly those, in order. Shorten long numbers without losing precision (3,250 → 3.25k, never 3k).
• Variety and rhythm. No layout twice in a row, at least 6 layouts in 8–12 slides, a chart, diagram or icon row at least every third slide. title first, closing last.
• A look that belongs to this deck. Pick a style family from styles.md that fits the audience and room, and an accent from the hue table drawn from a concrete object in the subject's world, not the topic's cliché hue (green for energy, navy for finance) unless it is the brand colour. Replace the TOKENS block, the Google Fonts <link>, and paste the family's style block as section 6 of <style>. Accent is emphasis only: kicker, the key number or bar, at most one <em> per slide.
• Interaction where the room would ask "what would it cost me?", "what happened that month?", "what about my town?", "would I have guessed?". 2–3 slides, two different kinds when the story allows, never first or last. Each is a complete slide before anyone touches it (an explore opens on the bar the headline is about, a calc on the brief's typical case); only a quiz opens unanswered.

Contract (the checker relies on all of it)

• One self-contained HTML file. Each slide is <section class="slide LAYOUT"> (1920×1080, stacked), LAYOUT one of title section statement big-number stats chart compare cards process visual quote closing calc explore tabs quiz, optional inverse, with a non-empty <aside class="notes"> of 30–90 spoken words.
• Copy the starter's <head>, <style> frame and layout CSS, icon sprite and runtime unchanged; change only tokens, <title>, fonts link and style section 6. The runtime <script> goes whole and unchanged as the last thing in <body>; the checker looks for its parts, and a trimmed copy renders but nothing responds. No other script, no onclick, no handlers, no framework.
• No inline style, no font-size, no <br> in headings, no absolute positioning, transforms or negative margins. SVGs have a viewBox, no width/height attributes, text ≥ 26 units. Images are inline SVG or a .slot placeholder; never invented URLs, never emoji.
• A PLAN comment first in <body>: one line per slide (number, layout, headline), the style choice, and one LIVE | line per interactive slide (layout, variables with values and default, the question it answers).

Non-obvious knowledge about the interactive layer

• Attributes are the whole API: data-live="k=default" on the section (quiz: data-live="pick"), data-set="k=v" on buttons or SVG shapes (never on a <g> or label), data-show="k=v" on .panes, <input type="range" name min max step value> in a .dial, data-calc formulas on the section, data-out / data-bar for results, one data-correct per quiz. Every data-set value needs a pane with exactly that data-show value and the reverse; values compare whole (jul ≠ july). At most 2 variables per slide.
• Formulas are arithmetic, not JavaScript: + - * / ( ), min, max, round, plain numbers (0.35, not 35% or 1,500). Every constant must be a brief figure (percent as fraction), a small integer up to 12, or a unit conversion (7, 24, 52, 60, 100, 365, 1000). Write the brief's figures out (km * 220 * 0.21), never a factor you pre-multiplied: the checker flags it as invented.
• data-out defaults are checked against the formula at the default dial and choice values, and the text you write is the format (prefix, decimals, thousands separators, k/M scaling). Compute them exactly. Slider value and max must be min plus whole steps; .ends show min and max.
• Derived figures need a home. A figure you work out (a payback, a cost after a grant) is honest only when a calc formula computes it in its default state; then it may appear elsewhere too. Otherwise it counts as invented.
• Every state is measured: each pane and slider position is screenshotted and budget-checked like a slide, and figures that appear only after a click are checked against the brief. The whole series stays visible in the default state; panes add detail.
• With/without options are 0/1 choices set by a two-tab .tabbar in .dials, used as numbers in the formula.

Deliverable

The reply after the reads is the complete HTML in one ```html block, ending with </html> and the fence; never stop at the plan. After it, 2–4 lines: the style and accent chosen, the layout sequence, the interactive slides (press P to present; controls work in both views), and any placeholder to replace.