Layout Presets - Declarative Slide Composition

Overview

Slides are composed using atomic components placed in regions defined by layout presets within a 640x360 SVG viewport.

┌──────────────────────────────────────────────────┐
│                    TITLE ZONE                     │
│  ┌─────────────────────────────┐ ┌─────────────┐ │
│  │ Badge + Title + Subtitle    │ │  CFU/Answer │ │
│  └─────────────────────────────┘ └─────────────┘ │
├──────────────────────────────────────────────────┤
│                   CONTENT ZONE                    │
│  ┌─────────────────┐ ┌─────────────────────────┐ │
│  │   Content Box   │ │       SVG Card          │ │
│  │  (text/lists/   │ │   (graphs/diagrams)     │ │
│  │   equations)    │ │                         │ │
│  └─────────────────┘ └─────────────────────────┘ │
└──────────────────────────────────────────────────┘

Atomic Components

Layout Presets (Starting Points — Create Custom Layouts Too)

These presets are starting points. You may create custom layouts within the 640x360 SVG viewport.

Column Content Rules (CRITICAL)

The 3-Second Scan Test: Can a student understand the slide's key point in 3 seconds? If not, it's too cluttered.

Left and right columns serve DIFFERENT purposes. Never duplicate content.

Left Column Purpose: TEXT CONTENT

Right Column Purpose: VISUAL REPRESENTATION

The Complementary Test

LEFT                    RIGHT
─────────────           ─────────────
"? × 6 = 30"      →     [Tape diagram with 6 in each box]
"30 ÷ 6 = ?"            [Visual showing 5 groups]

Text explains WHAT. Visual shows HOW IT LOOKS.
   Never write the same thing in both places.

SVG Coordinate System (640x360)

All positions use SVG coordinates within the viewBox="0 0 640 360" viewport.

Layout Zones

Layout Presets (Default Regions)

Slide Composition Flow

Step 1: Choose Layout Preset

Based on slide content needs:

• Text only → full-width
• Text + graph side-by-side → two-column or graph-heavy
• Equation/diagram as hero with text below → centered
• Needs CFU → add -with-cfu

When to use centered vs two-column:

Step 2: Fill Title Zone

Every slide has a title zone with badge, title, and optional subtitle, rendered as SVG <g> groups with data-element-id attributes.

Step 3: Place Content in Regions

Content is placed in SVG <g> groups within the coordinate system. Each group gets a data-element-id for progressive reveal via the show() predicate.

Step 4: Add CFU/Answer (if needed)

CFU/Answer use separate slide IDs — they appear via progressive reveal using the show() predicate, not overlays on the same slide.

CFU and Answer are rendered via the CfuAnswerCard TSX component with their own slide IDs ("step-N-cfu", "step-N-answer").

Content Composition

Within content regions, compose using SVG elements:

Element IDs (Required for Progressive Reveal)

Every distinct visual element group must have a data-element-id attribute on its SVG <g> wrapper. This enables:

• The show() predicate to control visibility per slide
• Fixture tests to verify visibleElements and hiddenElements per slide ID
• The <Animated> wrapper to handle transitions

<g data-element-id="base-graph">
  {/* Grid, axes, labels */}
</g>

<g data-element-id="line-1">
  {/* Blue line + point */}
</g>

<g data-element-id="label-intercept">
  {/* Y-intercept annotation */}
</g>

Naming Convention:

• line-N for data lines and their associated points
• label-X for text annotations (X = descriptive suffix like "b0", "shift20")
• arrow-X for arrows (X = descriptive suffix like "shift", "highlight")
• eq-N for equation labels (N = line number)
• point-X for point labels (X = coordinates like "3,9")

Creative Layout Ideas

Beyond the standard presets, consider these layouts when they better serve the content:

• Full-bleed visual with text overlay: Visual fills most of the slide, key text in a semi-transparent card
• Asymmetric split (30/70 or 25/75): When the visual needs significantly more space than the text
• Centered hero with supporting details below: Large visual or equation centered, brief explanation underneath
• Three-column comparison: For slides comparing multiple approaches or representations
• Grid layout: For practice problems or when showing multiple related items
• Stacked full-width sections: Title → visual → supporting text, all spanning the full width