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

Styling Guide

Deck visual styling patterns, color schemes, layout zones, and typography guidelines

styling/styling-guide.md

Layout Presets

Pre-defined layout templates for common deck visual configurations

styling/layout-presets.md

Quality Checklists

Pre-Flight Checklist

Verification checklist before writing each slide: 3-second scan test, conciseness, technical requirements

checklists/pre-flight.md

Completion Checklist

Final verification checklist after all slides are complete

checklists/completion.md

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

Scenario Planning

Confirm & Plan Protocol

Teacher review of analysis, scenario planning with different real-world contexts

planning/phase2-confirm-plan.md