Pedagogical Framework for Worked Example Slide Decks

This document explains the research-based framework behind the slide structure.

Why ALL Worked Examples Need Visual Progression

Research Foundation

Cognitive load theory and worked example research consistently demonstrate:

1. Dual Coding Theory (Paivio, 1986): Information encoded both verbally AND visually is remembered better and understood more deeply. Students who see both text and diagrams outperform those who see text alone.

2. Cognitive Load Reduction: Visuals offload working memory by externalizing mathematical structure. Instead of holding abstract relationships in their heads, students can see them on the slide.

3. Progressive Revelation: Step-by-step visual changes (adding a line, filling in a value, highlighting an element) create clear mental models of the process. This is more effective than showing the final answer.

4. Transfer Support: Seeing the same visual structure across different contexts helps students recognize underlying mathematical patterns. A tape diagram for division with stickers transfers to division with cookies.

Every Concept Has a Visual Form

The Diagram Evolution Preview

Before generating slides, teachers see a step-by-step ASCII preview of how the visual will develop:

INITIAL STATE (Problem Setup)
─────────────────────────────
[Visual showing the problem setup - unknowns visible]

STEP 1: IDENTIFY
────────────────
[Visual after step 1 - first element added/highlighted]
+ What changed in this step

STEP 2: CALCULATE
─────────────────
[Visual after step 2 - builds on step 1]
+ What changed in this step

This preview prevents surprises during slide generation and ensures the teacher approves the visual progression before committing.

Deck Visual Format: Progressive Reveal with Slide IDs

IMPORTANT: Slides are rendered as deck visuals (TSX + SVG) with progressive reveal.

• Each slide has a unique slide ID (e.g., "title", "problem-setup", "step-1", "step-1-cfu", "step-1-answer")
• CFU and Answer use separate slide IDs, revealed progressively via the show() predicate
• The <Animated> wrapper handles element transitions between slides
• No teacher instructions slide — the deck starts at "title"
• Total slide count varies: title + problem-setup + S step slides (each with cfu + answer sub-slides) + practice slides (where S = 2-5 steps, default 3)

Core Principles

1. Cognitive Load Theory

Breaking complex problems into micro-steps prevents cognitive overload. Students can focus on one decision point at a time.

2. Active Prediction Pedagogy

Separating questions from answers forces mental commitment before revealing solutions. This active engagement improves retention. In the deck system, this means advancing to the CFU slide ID, then the answer slide ID.

3. Transfer of Learning

Independent practice (practice slides) tests whether students can apply logic to new contexts without scaffolding.

Slide Structure (Dynamic, based on step count)

Slide: "title"

Purpose: Introduce the core concept to students Content:

• Grade/Unit/Lesson prominently displayed
• "BIG IDEA" badge
• Big Idea statement (large, centered)
• Clean, student-facing design

Slide: "problem-setup"

Purpose: Provide context and show complete problem (Scenario 1) Content:

• Engaging scenario with theme icon
• Problem statement
• Visual representation (graph, table, diagram)
• No solution yet

Slides: "step-1" through "step-S" (with "step-N-cfu" and "step-N-answer")

Each step has three slide IDs:

"step-N" (e.g., "step-1"):

• Step badge: "STEP 1"
• Title: The action question (e.g., "IDENTIFY the slope and y-intercept")
• Visual with result highlighted/annotated
• Problem reminder at bottom

"step-N-cfu" (e.g., "step-1-cfu"):

• CFU box appears via progressive reveal
• Rendered via CfuAnswerCard component

"step-N-answer" (e.g., "step-1-answer"):

• Answer box appears via progressive reveal, overlays CFU
• Rendered via CfuAnswerCard component

Number of Steps: N steps = N slide groups (2-5, default 3)

Practice Slides

Purpose: Present practice problems for whiteboard work Content:

• One problem per slide (Scenario 2, then Scenario 3)
• Visual representation
• "Your Task:" section
• NO CFU/Answer — students work independently

Printable Worksheet

Purpose: Provide take-home practice Content:

• ALL practice problems (Scenarios 2 and 3)
• White background, black text (for printing)
• Times New Roman font
• 8.5in x 11in page format
• NO strategy reminders - students apply independently
• Generated separately after all step and practice slides complete

The Five Rules

Rule 1: The "Click-to-Reveal" Rule

CFU and Answer appear progressively via separate slide IDs

Why: Forces students to mentally commit to a strategy before seeing if they're correct. Passive reading becomes active prediction.

Implementation:

• Advancing to "step-N-cfu" reveals the CFU box
• Advancing to "step-N-answer" reveals the Answer box (overlays CFU)
• Teacher can pause, discuss, then reveal each

Rule 2: The "Visual Stability" Rule

Keep main visual in same position across the problem setup and all step slides

Why: Reduces cognitive load from visual searching. Mimics teacher at whiteboard who keeps problem visible while adding annotations.

Implementation:

• Fix position of graph/table in "problem-setup" slide
• All step slides maintain that exact position
• Add highlights, arrows, annotations AROUND the stationary element
• Never reposition the core visual between slides

Sub-Principle: Progressive Visual Revelation

"Stability" means POSITION is fixed, but CONTENT evolves.

Each step slide must ADD something new to the visual. If all step slides show identical visuals, students see repetition instead of progression. The visual should tell a story that builds toward the answer.

The Pattern:

"problem-setup":     Visual shows the PROBLEM (unknowns visible)
"step-1":            Visual shows Step 1 RESULT highlighted
"step-2":            Visual shows Step 2 RESULT added
...
Final step:          Visual shows SOLUTION complete

What Changes vs. What Stays:

Examples by Visual Type:

Anti-Pattern (WRONG):

"problem-setup": Shows "Two Possible Meanings" panel
"step-1": Shows SAME "Two Possible Meanings" panel  -- REPETITION
"step-2": Shows SAME "Two Possible Meanings" panel  -- REPETITION

Correct Pattern:

"problem-setup": Shows problem setup (unknown visible)
"step-1": Shows Step 1 interpretation HIGHLIGHTED
"step-2": Shows Step 1 result with values FILLED IN
"step-3": Shows Step 2 operation on the visual
...and so on, building toward the answer

Rule 3: The "Real World" Rule

Use engaging, age-appropriate contexts

Why: Increases motivation and helps students see relevance.

Do:

• Gaming scenarios (RPG items, esports, gaming earnings)
• Social media (views, followers, subscribers)
• STEM contexts (drones, coding, data science)
• Sports and fitness (training plans, game stats)

Don't:

• Generic "Person A and Person B"
• Boring textbook scenarios
• Abstract variables until reasoning slide

Rule 4: The "Scaffolding Removal" Rule

Maximum support → Zero support

Why: Tests true understanding vs. pattern matching.

• Step slides: Full scaffolding (step badges, CFU questions, highlighting)
• Printable slide: No scaffolding (just the raw problems + "Your Task")

Rule 5: The "3-Second Scan" Rule

A student should understand the key point in 3 seconds

Why: Every extra word competes with the math for attention. If a student can't grasp the slide's purpose in 3 seconds, it's too cluttered.

Text Limits (STRICTLY ENFORCED):

Complementary Columns (NO DUPLICATION):

LEFT COLUMN              RIGHT COLUMN
─────────────            ─────────────
Text explanation    →    Visual representation
Prose & equations        Diagrams, tables, graphs
"What we're doing"       "What it looks like"

NEVER repeat the same content in both columns

• Left column: Problem statement, step explanation, equations as text
• Right column: Visual ONLY - diagram, graph, table, tape diagram
• No text boxes inside visuals that repeat left-side content
• Labels on visuals: Only minimal labels (numbers, variable names) - NOT explanatory sentences

What to REMOVE:

• "First, let's figure out..." (explanatory subtitles)
• "Reading the graph: At point (6,12)..." (redundant info boxes)
• Two-part CFU questions ("What is X? How did you calculate it?")
• Extra context in answers ("This is also called the constant of proportionality!")

What to KEEP:

• Large, prominent main content (36-48px in columns)
• Ultra-condensed problem reminders
• Single-purpose slides (each slide adds ONE concept)
• Visual diagrams that complement (not duplicate) the text

Step Naming and Strategy Thread

CRITICAL: The strategy must be consistent throughout ALL slides.

Strategy Definition

Before generating slides, define:

1. Strategy Name: Clear, memorable (e.g., "Plot and Connect", "Balance and Isolate")
2. One-Sentence Summary: "To solve this, we [VERB] the [OBJECT] to find [GOAL]"
3. 2-5 Moves (default 3): Each move is a verb + what it accomplishes

Step Headers Use Strategy Verbs

If your moves are IDENTIFY, PLOT, CONNECT:

• "step-1": "STEP 1: IDENTIFY"
• "step-2": "STEP 2: PLOT"
• "step-3": "STEP 3: CONNECT"
• (Continue for each additional step if more than 3 moves)

CFU Questions Reference Strategy

• "Why did I IDENTIFY the slope first?"
• "How does PLOTTING the y-intercept help me?"
• NOT "What is 2 times 3?" (computation, not strategy)

Check-for-Understanding (CFU) Question Patterns

CFU Format Rules (STRICTLY ENFORCED)

• ONE question only - never two-part questions
• 12 words max - if longer, it's too complex
• Strategy-focused - ask about WHY, not WHAT

Good CFU Questions (Strategy-focused, <=12 words)

• "Why did I [VERB] first?" (6 words)
• "How did I know to [VERB] here?" (8 words)
• "Why is the '?' at the beginning?" (7 words)
• "How does [VERB]ing help me find the answer?" (9 words)

Bad CFU Questions

• "What is 6 / 2?" (computation, not strategy)
• "What's the answer?" (result-focused)
• "What is turtle g's speed? How did you calculate it?" (TWO questions!)
• "Why did I subtract 4 from both sides instead of dividing first?" (17 words - too long!)

The difference: Good questions are SHORT, ask about decision-making and strategy. Bad questions ask for calculations or are too wordy.

Visual Annotation Guidelines

Graph/SVG Constraints

• Use viewBox for consistent scaling (640x360 viewport)
• Center in the SVG coordinate system
• Use data-element-id on <g> groups for progressive reveal

Highlighting Techniques

• Border/outline: Circle or box around element
• Background color: Shade the relevant area
• Arrows: Point to specific parts (with small labels)
• Color coding: Consistent colors for slope/intercept/points

Coordinate Mapping (CRITICAL for Graph Alignment)

• Calculate pixels per unit consistently
• Formula: pixelX = marginLeft + (x - xMin) * pixelsPerUnit
• Keep margins consistent across all graph slides
• Points MUST land exactly on grid intersections

Context Variety Across Scenarios

All three scenarios must have:

• Different surface details (different contexts, numbers)
• Same deep structure (same mathematical concept and strategy)
• Same difficulty level (don't make practice easier)

Example for Graphing Linear Equations:

1. Scenario 1 (Worked): Gaming earnings ($50 base + $15/stream)
2. Scenario 2 (Practice): Drone altitude (100ft start + 25ft/min)
3. Scenario 3 (Practice): Savings growth ($200 start + $75/week)

All three use y = mx + b, but with completely different contexts.

Visual Type Selection

SVG Graphics (Required for All Visuals)

• Coordinate planes and graphs
• Geometric shapes
• Tables with highlighting
• Custom diagrams

When to Use HTML Tables

• Data comparisons (in print layouts only)
• Simple numerical displays (in print layouts only)

Avoid

• JavaScript animations
• Interactive elements
• Canvas-based graphics (use SVG instead)

Why This Framework Works

Research Support:

• Cognitive Load Theory (Sweller, 1988)
• Worked Example Effect (Atkinson et al., 2000)
• Self-Explanation Prompts (Chi et al., 1989)
• Transfer of Learning (Bransford & Schwartz, 1999)

Practical Benefits:

• Breaks overwhelming problems into digestible steps
• Forces active thinking vs. passive reading
• Builds conceptual understanding alongside procedural fluency
• Tests true learning through transfer problems
• Works in the deck visual preview and playground

Remember: Total slide count is dynamic based on step count (S = 2-5). The slide IDs follow the pattern: "title", "problem-setup", "step-1" / "step-1-cfu" / "step-1-answer", ..., "step-S" / "step-S-cfu" / "step-S-answer", practice slides, printable, summary. The principles are fixed: separate Ask from Answer (via progressive reveal with slide IDs), maintain visual stability, use engaging contexts, remove scaffolding in the printable worksheet.