SGI Worked Examples
Pedagogical framework, generation instructions, deck visual pattern references, and reference docs for creating math worked-example deck visuals. Organized by topic for on-demand access.
Pedagogy & Planning
Backward Planning Methodology
9-step process for analyzing mastery check questions and designing worked examples
pedagogy/backward-planning.md
Pedagogy Rules (Five Rules)
Core pedagogical principles: progressive reveal, visual stability, scaffolding removal, consistent steps, real-world contexts
pedagogy/pedagogy-rules.md
Visual Pedagogy
Research-based framework for visual progression, deck structure, and step naming
pedagogy/visual-pedagogy.md
Problem Analysis
Analyze Problem Instructions
Step-by-step backward planning instructions for mathematical analysis of mastery check questions
analysis/analyze-problem.md
Output Schema
JSON schema defining the structure of Phase 1 problem analysis output
analysis/output-schema.md
Graph Planning
Guidelines for planning graph evolution, scale tables, and coordinate visual strategy
analysis/graph-planning.md
Diagram Patterns
SVG patterns for non-graph visuals: tape diagrams, hangers, number lines, area models
analysis/diagram-patterns.md
Deck Visual Generation
Phase 3 Overview
Deck visual generation overview: reading order, execution flow, slide ID structure
slide-generation/phase3-overview.md
Slide-by-Slide Protocol
Per-slide design protocol: slide IDs, layout decisions, duplication test, CfuAnswerCard rules
slide-generation/slide-by-slide.md
Slide Pedagogy Rules
Teaching principles for slide generation: CFU format, conciseness, scaffolding removal, visual consistency
slide-generation/slide-pedagogy.md
Technical Specifications
Technical Rules
Deck visual technical requirements: 640x360 SVG viewport, data-element-id, progressive reveal, fixtures
technical-specs/technical-rules.md
SVG Coordinate Workflow
SVG pixel math, graph creation formulas, axis labels, and coordinate transformations for 640x360 viewport
technical-specs/svg-workflow.md
Annotation Zones
Quick reference for annotation positioning zones on slides
technical-specs/annotation-zones.md
Styling & Layout
Quality Checklists
Deck Visual Patterns
Title Zone
TitleZone TSX component reference: badge, title, subtitle, footnote
card-patterns/title-zone.md
Content Box
ContentBox TSX component reference: multi-line text with auto y-offset
card-patterns/content-box.md
CFU/Answer Card
CfuAnswerCard TSX component reference: two-stage CFU/Answer reveal via separate slide IDs
card-patterns/cfu-answer-card.md
Problem Reminder
ProblemReminder TSX component reference: persistent problem context label
card-patterns/problem-reminder.md
SVG Card
Generic SVG container pattern for graphs, diagrams, and custom graphics
card-patterns/svg-card.html
Graph Snippet
Coordinate plane template with axes, grid, arrowheads, and line equations
card-patterns/graph-snippet.html
Annotation Snippet
SVG annotation overlays for marking up visuals with callouts and arrows
card-patterns/annotation-snippet.html
Printable Worksheet
8.5x11 worksheet layout for practice problems with space for student work
card-patterns/printable-slide-snippet.html
Lesson Summary
One-page summary with big idea, strategy steps, and visual reference
card-patterns/lesson-summary-snippet.html
Visual Card Layers
Layered visual container with data-element-id grouping for progressive reveal
card-patterns/visual-card-layers.html
Title Slide
Title slide template: big idea introduction with gradient background
card-patterns/slide-big-idea.html