Phase 3: Generate Deck Visual - Overview

Purpose

Create a deck visual (TSX + 640x360 SVG) using component patterns and CfuAnswerCard with separate slide IDs for CFU/Answer reveals. The number of step slides varies (S = 2-5 steps, default 3).

Note: The deck visual starts at the "title" slide (Big Idea). There is no teacher instructions slide. After the title come "problem-setup", then step slides ("step-1" through "step-S"), then two practice slides ("practice-1", "practice-2"), then the printable worksheet, and finally the lesson summary. With the default 3 steps, this yields 8 slide IDs in the visual; with 5 steps it yields 10.

Output Format

All slides render as 640x360 SVG viewport, light theme. CFU/Answer boxes use CfuAnswerCard with separate slide IDs ("step-N-cfu" and "step-N-answer"), revealed progressively via SlideSystem.show().

Prerequisites

• Phase 1 & 2 complete
• User has confirmed your understanding
• You have: PROBLEM ANALYSIS, STRATEGY DEFINITION, THREE SCENARIOS

Document Reading Order

Read files in numbered order. Each file has ONE job.

Also read (referenced from component patterns):

• analysis/diagram-patterns.md - Non-graph SVG patterns (tape diagrams, hangers, etc.)
• technical-specs/annotation-zones.md - Quick zone reference for annotations

Checklists (use during/after generation):

• checklists/pre-flight.md - Verify BEFORE writing each slide
• checklists/completion.md - Verify AFTER all slides done

Phase 3 Execution Flow

STEP 3.0: Read Reference Materials
│         Read files 00 → 01 → 02 → 03 (→ 04 if SVG)
│
▼
STEP 3.1: Check Visual Type (from Phase 1)
│   ├── If "text-only" or "HTML table" → Use simple fill patterns
│   └── If "SVG visual" → Read technical-specs/svg-workflow.md + graph patterns
│
▼
STEP 3.2: Generate Deck Visual (contract.ts + visual.tsx + contract.test.ts)
│   Create the slide contract defining all slide IDs and their visible/hidden elements.
│   Then build the visual.tsx component with progressive reveal via show().
│   Slide IDs: "title", "problem-setup", "step-1", "step-1-cfu", "step-1-answer",
│   ..., "step-S", "step-S-cfu", "step-S-answer", "practice-1", "practice-2"
│
│   For each slide section:
│     1. Choose layout (full-width, two-column, centered)
│     2. Compose using TSX component patterns (TitleZone, ContentBox, CfuAnswerCard, etc.)
│     3. Add data-element-id attributes for fixture visibility testing
│     4. Use <Animated> components for entrance animations
│     5. Verify pre-flight checklist
│
▼
STEP 3.3: Generate Practice Slides ("practice-1" and "practice-2")
│   For each practice slide:
│     1. Use Problem Setup as template
│     2. Replace scenario with Scenario 2 (practice-1) or Scenario 3 (practice-2)
│     3. Include "Your Task:" section with the question
│     4. NO CfuAnswerCard - students work on whiteboards
│
▼
STEP 3.4: Generate Printable
│   - Generated separately after the visual component is complete
│   - Uses printable-slide-snippet.html pattern
│   - Contains practice problems from Scenarios 2 & 3 + Answer Key
│
▼
STEP 3.5: Generate Lesson Summary
│   - One-page printable summary of the lesson's main idea
│   - Uses lesson-summary-snippet.html pattern
│   - Contains: Big Idea, Strategy overview, Visual reference, Key Takeaway
│   - Must include print-page class for print detection
│
▼
STEP 3.6: Write Fixture Tests (contract.test.ts)
│   - Verify each slide ID shows the correct elements
│   - Verify hidden elements are not visible before their reveal slide
│
▼
STEP 3.7: Verify Completion Checklist
          See checklists/completion.md

Required Reading Before Generating

BEFORE creating any slides, read these files:

Read: 01-slide-by-slide.md   ← What each slide contains
Read: 02-technical-rules.md  ← Deck visual constraints
Read: 03-pedagogy.md         ← Teaching principles

Also read from reference folder:

Read: styling/styling-guide.md         ← Colors, fonts, layout classes
Read: styling/layout-presets.md        ← Layout presets + regions

3 Core Patterns

Most slides use just 3 TSX component patterns:

Plus reveal and special patterns:

• CfuAnswerCard → CFU/Answer as separate slide IDs (showCfu={show("step-N-cfu")}, showAnswer={show("step-N-answer")})
• Graph SVG patterns → Coordinate graphs (recalculate pixels for 640x360 viewport)
• Printable layout → Printable worksheet only
• Lesson summary layout → Lesson summary only

Always use and extend the TSX component patterns. Never write raw SVG layout from scratch.

File Output Structure

Write the deck visual as a set of files in the content tree. The visual component handles all slides via progressive reveal with show().

src/content/scm/<grade>/<unit>/<section>/lesson-N-sgi-deck/
├── contract.ts                    (Slide ID definitions, visible/hidden element mappings)
├── visual.tsx                     (React TSX component rendering 640x360 SVG)
├── contract.test.ts               (Fixture tests verifying element visibility per slide ID)
├── lesson-N-sgi-deck.kc.json      (KC pairing — slide IDs → knowledge components)
└── docs/
    ├── analysis.json              (Phase 1 output — saved for resume across conversations)
    ├── research.md                (Primitive research + layout plan)
    └── plan.md                    (Slide-by-slide spec)

Slide IDs (example with 3 steps, default)

"title"            → Big Idea (student-facing)
"problem-setup"    → Problem + visual
"step-1"           → Step 1 content (progressive reveal starts)
"step-1-cfu"       → Step 1 Check for Understanding
"step-1-answer"    → Step 1 Answer reveal
"step-2"           → Step 2 content
"step-2-cfu"       → Step 2 CFU
"step-2-answer"    → Step 2 Answer reveal
"step-3"           → Step 3 content
"step-3-cfu"       → Step 3 CFU
"step-3-answer"    → Step 3 Answer reveal
"practice-1"       → Practice Problem 1 (Scenario 2)
"practice-2"       → Practice Problem 2 (Scenario 3)

Progressive Reveal

Once show("step-1") returns true, all step-1 content stays visible on every subsequent slide. Content accumulates -- it is never removed. The show() predicate drives all visibility.

NEXT PHASE

When all deck visual files are written (contract.ts, visual.tsx, contract.test.ts) plus printable and lesson summary:

Proceed to the next phase of the workflow. Do NOT proceed until all files have been written and fixture tests pass.