<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      user-select: none;
      color: #0f172a;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .btn.active {
      background: #0f172a;
      border-color: #0f172a;
      color: #ffffff;
    }

    /* Ten Frame */
    .ten-frame-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
      background: #ffffff;
      padding: 8px;
      border-radius: 16px;
      border: 3px solid #cbd5e1;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    }

    .cell {
      aspect-ratio: 1 / 1;
      background: #f1f5f9;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .counter {
      width: 80%;
      height: 80%;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      transform: scale(0);
      opacity: 0;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    }

    .counter.blue {
      background: linear-gradient(145deg, #38bdf8, #2563eb);
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 3px 6px rgba(37,99,235,0.3);
    }

    .counter.amber {
      background: linear-gradient(145deg, #fef08a, #f59e0b);
      color: #78350f;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), 0 3px 6px rgba(245,158,11,0.3);
    }

    .counter.visible {
      transform: scale(1);
      opacity: 1;
    }

    /* Equation & Info */
    .equation-bar {
      margin-top: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 26px;
      font-weight: 800;
      background: #ffffff;
      padding: 6px 20px;
      border-radius: 14px;
      border: 2px solid #e2e8f0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .num-blue { color: #2563eb; }
    .op { color: #94a3b8; font-weight: 600; }
    .num-amber { color: #d97706; }
    .num-total { color: #0f172a; }

    .caption {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #475569;
      height: 20px;
      text-align: center;
    }

    @media (max-width: 360px) {
      .equation-bar { font-size: 22px; padding: 4px 14px; }
      .btn { font-size: 11px; padding: 5px 10px; }
      .counter { font-size: 15px; }
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btn1" onclick="setStep(1)">1. Start with 6</button>
    <button class="btn" id="btn2" onclick="setStep(2)">2. Count 4 More</button>
    <button class="btn" id="btn3" onclick="setStep(3)">3. Complete 10</button>
  </div>

  <div class="ten-frame-container">
    <div class="ten-frame">
      
      <div class="cell"><div class="counter blue" id="c0"></div></div>
      <div class="cell"><div class="counter blue" id="c1"></div></div>
      <div class="cell"><div class="counter blue" id="c2"></div></div>
      <div class="cell"><div class="counter blue" id="c3"></div></div>
      <div class="cell"><div class="counter blue" id="c4"></div></div>
      
      <div class="cell"><div class="counter blue" id="c5"></div></div>
      <div class="cell"><div class="counter amber" id="c6">1</div></div>
      <div class="cell"><div class="counter amber" id="c7">2</div></div>
      <div class="cell"><div class="counter amber" id="c8">3</div></div>
      <div class="cell"><div class="counter amber" id="c9">4</div></div>
    </div>

    <div class="equation-bar">
      <span class="num-blue">6</span>
      <span class="op">+</span>
      <span class="num-amber" id="eqAdded">?</span>
      <span class="op">=</span>
      <span class="num-total" id="eqTotal">10</span>
    </div>

    <div class="caption" id="captionText">6 filled spots</div>
  </div>

  <script>
    let currentStep = 1;
    let autoTimer = null;

    function render(step) {
      currentStep = step;
      
      // Update Buttons
      document.getElementById('btn1').classList.toggle('active', step === 1);
      document.getElementById('btn2').classList.toggle('active', step === 2);
      document.getElementById('btn3').classList.toggle('active', step === 3);

      // Blue counters (0-5) always visible
      for (let i = 0; i < 6; i++) {
        const el = document.getElementById('c' + i);
        el.classList.add('visible');
      }

      // Amber counters (6-9)
      const amberIds = ['c6', 'c7', 'c8', 'c9'];
      if (step === 1) {
        amberIds.forEach(id => document.getElementById(id).classList.remove('visible'));
        document.getElementById('eqAdded').textContent = '?';
        document.getElementById('eqAdded').style.opacity = '0.4';
        document.getElementById('captionText').textContent = '6 filled spots';
      } else if (step === 2) {
        amberIds.forEach((id, idx) => {
          setTimeout(() => {
            if (currentStep === 2) document.getElementById(id).classList.add('visible');
          }, idx * 120);
        });
        document.getElementById('eqAdded').textContent = '4';
        document.getElementById('eqAdded').style.opacity = '1';
        document.getElementById('captionText').textContent = 'Count 4 empty spots';
      } else if (step === 3) {
        amberIds.forEach(id => document.getElementById(id).classList.add('visible'));
        document.getElementById('eqAdded').textContent = '4';
        document.getElementById('eqAdded').style.opacity = '1';
        document.getElementById('captionText').textContent = '6 + 4 = 10 in all!';
      }
    }

    function setStep(step) {
      clearInterval(autoTimer);
      render(step);
    }

    // Initial load
    render(1);

    // Pedagogical gentle sequence preview on first arrival
    let stepCycle = 1;
    autoTimer = setInterval(() => {
      stepCycle = (stepCycle % 3) + 1;
      render(stepCycle);
    }, 3200);
  </script>
</body>
</html>

Filling a Ten-Frame to Find the Missing Number

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .frame-container {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
      background: #f1f5f9;
      padding: 8px;
      border-radius: 12px;
      border: 2px solid #cbd5e1;
    }
    .cell {
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      user-select: none;
    }
    .counter {
      width: 80%;
      height: 80%;
      border-radius: 50%;
      background: #ef4444;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(239, 68, 68, 0.3);
      animation: popIn 0.3s ease-out;
    }
    .cell.empty-spot {
      background: #dcfce7;
      border: 2px dashed #86efac;
      color: #15803d;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
    }
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
      color: #334155;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      height: 32px;
      padding: 0 8px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 800;
    }
    .badge-red {
      background: #fee2e2;
      color: #b91c1c;
      border: 1.5px solid #fca5a5;
    }
    .badge-green {
      background: #dcfce7;
      color: #15803d;
      border: 1.5px solid #86efac;
    }
    .badge-total {
      background: #e0f2fe;
      color: #0369a1;
      border: 1.5px solid #7dd3fc;
    }
    .caption {
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      text-align: center;
      line-height: 1.3;
    }
    @keyframes popIn {
      0% { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
  </style>
</head>
<body>
  <div class="frame-container">
    <div class="ten-frame" aria-label="Ten-frame with 7 red counters and 3 empty spots">
      
      <div class="cell"><div class="counter"></div></div>
      <div class="cell"><div class="counter"></div></div>
      <div class="cell"><div class="counter"></div></div>
      <div class="cell"><div class="counter"></div></div>
      <div class="cell"><div class="counter"></div></div>
      
      <div class="cell"><div class="counter"></div></div>
      <div class="cell"><div class="counter"></div></div>
      <div class="cell empty-spot">1</div>
      <div class="cell empty-spot">2</div>
      <div class="cell empty-spot">3</div>
    </div>

    <div class="equation-bar">
      <span class="badge badge-red">7</span>
      <span>+</span>
      <span class="badge badge-green">3</span>
      <span>=</span>
      <span class="badge badge-total">10</span>
    </div>

    <div class="caption">
      7 red counters + 3 empty boxes = 10 total
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
    }

    .diagram-content {
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Top label */
    .top-label {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f0f9ff;
      border: 1.5px solid #22b7ff;
      padding: 6px 14px;
      border-radius: 20px;
    }

    .top-label .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #22b7ff;
      display: inline-block;
    }

    /* Ten-frame grid */
    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
      padding: 8px;
      background: #ffffff;
      border-radius: 12px;
    }

    .box {
      aspect-ratio: 1;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Filled spot styling */
    .box.filled {
      background-color: #f8f9fa;
      border: 2px solid #1e2945;
    }

    .counter {
      width: 72%;
      height: 72%;
      border-radius: 50%;
      background-color: #22b7ff;
      box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    }

    /* Empty spot styling */
    .box.empty {
      background-color: #f8f9fa;
      border: 2px dashed #94a3b8;
    }

    .question-mark {
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
      user-select: none;
    }

    /* Bottom callout area */
    .bottom-callout-row {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 4px;
    }

    .bottom-label-group {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
      background: #f8fafc;
      border: 1.5px dashed #94a3b8;
      padding: 6px 12px;
      border-radius: 20px;
    }

    .arrow-icon {
      font-size: 16px;
      line-height: 1;
      color: #64748b;
    }

    /* Total indicator footer */
    .total-badge {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      background: #f8f9fa;
      padding: 6px 14px;
      border-radius: 8px;
      width: 100%;
      display: flex;
      justify-content: space-around;
    }

    .total-badge span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .num-blue { color: #0284c7; font-weight: 700; }
    .num-gray { color: #64748b; font-weight: 700; }
  </style>
</head>
<body>

  <div class="diagram-content">
    
    <div class="top-label">
      <span class="dot"></span>
      <span>6 filled spots</span>
    </div>

    
    <div class="ten-frame" aria-label="Ten-frame showing 6 filled and 4 empty spots">
      
      <div class="box filled"><div class="counter"></div></div>
      <div class="box filled"><div class="counter"></div></div>
      <div class="box filled"><div class="counter"></div></div>
      <div class="box filled"><div class="counter"></div></div>
      <div class="box filled"><div class="counter"></div></div>

      
      <div class="box filled"><div class="counter"></div></div>
      <div class="box empty"><span class="question-mark">?</span></div>
      <div class="box empty"><span class="question-mark">?</span></div>
      <div class="box empty"><span class="question-mark">?</span></div>
      <div class="box empty"><span class="question-mark">?</span></div>
    </div>

    
    <div class="bottom-callout-row">
      <div class="bottom-label-group">
        <span class="arrow-icon">↑</span>
        <span>4 empty spots</span>
      </div>
    </div>

    
    <div class="total-badge">
      <span><span class="num-blue">6</span> + <span class="num-gray">4</span> = <strong>10</strong></span>
    </div>
  </div>

</body>
</html>

Counting Sounds and Actions up to 5

Matching Sets to Numerals from 0 to 5

Ordering Numbers from 0 to 5 Forward and Backward

Finding One More and One Less Within 5

Partitioning Numbers to 5 into Two Parts

math

Exploring Number Relationships and Operations to 5

Complements of 1 and 9 to Make 10

Complements of 2 and 8 to Make 10

Complements of 3 and 7 to Make 10

Complements of 4 and 6 to Make 10

The Double Five Fact to Make 10

Mental Strategies for Friends of 10

Writing Equations for Ten Complements

Making Ten: Complements and Ten-Frames

Counting On with Fingers and Number Tracks

Doubles Facts to Doubles of 10

Near Doubles: Doubles Plus 1 and Minus 1

Making Ten to Add Within 20

Compensation Strategies for Addition

Adding Three Single-Digit Numbers

Deriving New Facts from Known Number Facts

Addition Strategies and Facts Within 10 and 20

Adding With Objects: Combining Two Groups

Ways to Compose 2 and 3

Ways to Compose 4 With Connecting Cubes

Number Bonds for 5: Different Ways to Make 5

Finding All Ways to Make 5

Composing Numbers 2 Through 5

Skip Counting in 2s to 10 with Pairs

Skip Counting in 2s up to 20

Skip Counting in 5s to 20

Skip Counting in 10s to 50

Skip Counting in 10s to 100

Choosing the Best Counting Strategy

Skip Counting and Number Patterns

Mental Addition Strategies Within Twenty

Mental Subtraction Strategies Within Twenty

Adding and Subtracting Multiples of Ten

Adding a Single-Digit Number to a Two-Digit Number

Subtracting a Single-Digit Number from a Two-Digit Number

Adding Two-Digit Numbers Without Regrouping

Subtracting Two-Digit Numbers Without Regrouping

Adding Two-Digit Numbers With Regrouping

Subtracting Two-Digit Numbers With Regrouping

Two-Digit Addition and Subtraction Methods

Using the Counting-On Strategy Within 10

Using Counting On to Add (Within 10)

Counting On with Sums to 20

Counting On on an Open Number Line to 50

Counting On by Tens and Ones to 100

Counting On Strategies for Addition

Using the Empty Number Line for Addition

Using the Empty Number Line for Subtraction

Understanding the Inverse Relationship Between Addition and Subtraction

Checking Subtraction Using Addition

Choosing Between Mental and Written Calculation Methods

Flexible Strategies and Inverse Operations

Conceptual Subitising: Seeing Parts in 6

Conceptual Subitising: Seeing Parts in 7 and 8

Conceptual Subitising on Ten-Frames up to 10

Comparing Quantities with Matching Towers

Comparing Numbers Using 'More Than' and 'Less Than' to 10

Comparing Numbers With Different Tens Digits

Comparing Two-Digit Numbers With Base-Ten Models

Subitising and Comparing Quantities to 20

Composing 5 on One Hand With Fingers

Composing 5 Using a Five-Frame

Composing 5 With a Part-Part-Whole Mat

Story Problems: Putting Together to Make 5

Finding the Hidden Partner to Make 5

Making 5 With Three Small Groups

Celebrating All Ways to Make 5

Visual Models and Story Problems for 5

Choosing Between Addition and Subtraction

Representing Problems with Number Sentences

One-Step Addition Word Problems

One-Step Subtraction Word Problems

Two-Step Addition and Subtraction Problems

Multi-Step Addition and Subtraction Problems

Addition and Subtraction Word Problems

Subtracting One and Two: Counting Back Within 10

Subtracting Three: Counting Back on a Number Track

Using Counting Back to Subtract (Within 10)

Counting Back to Subtract within 20

Counting Back on an Open Number Line to 50

Counting Back by Tens and Ones to 100

Counting Up to Subtract Close Numbers Within 10

Counting Up to Find the Difference Within 20

Choosing Between Counting On and Counting Back

Explaining Counting Strategies in Word Problems

Counting Strategies for Subtraction

Finding All Ways to Make 6

Finding All Ways to Make 7

Finding All Ways to Make 8

Finding All Ways to Make 9

Number Bonds for 9: Different Ways to Make 9

Finding All Ways to Make 10

Number Pairs for 6 to 10

Comparing Groups: More and Less by Matching

Identifying Groups with the Same Number of Objects

Using the Words Fewer and Less Correctly

Comparing Two Numbers up to 5 Using Towers

Comparing Two Numbers up to 10 on Ten-Frames

Finding How Many More in One Group Than Another

Finding How Many Fewer in a Group

Comparing Numbers on a Number Track to 10

Making Two Groups Equal by Adding or Removing Items

Comparing Three Groups to Find Most and Least

Comparing Quantities and Numbers

Recognizing Equal and Unequal Groups

Connecting Repeated Addition to Multiplication

Building and Reading Arrays

Multiplying by Skip Counting by Twos

Multiplying by Skip Counting by Fives

Multiplying by Skip Counting by Tens

Exploring the Commutative Property of Multiplication

Solving Multiplication Word Problems with Drawings

Foundations of Multiplication

Exploring the Five-Frame

Number Bonds to 5 Using Two-Coloured Counters

Introducing the Ten-Frame

Seeing Numbers as Five and Some More

Part-Whole Models for Numbers up to 6

Part-Whole Models for Numbers 7 to 9

Frames and Part-Whole Models up to 9

Making Ten on Ten-Frames

Making Ten to Add Numbers within 20

Making Ten with Addend 9

Making Ten with Addend 8

Making Ten with Addends 7 and 6

Subtracting by Taking from Ten

Subtracting by Getting to Ten First

Making Ten within 20

Composing 6 to 9 as 5 and Some More

Making Towers of 10 With Two Colors

Composing Numbers With a Bead String to 10

Composing Equal Doubles up to 10

Finding the Missing Partner on a Ten-Frame

Decomposing and Recomposing Quantities to 10

Story Problems: Composing Quantities up to 10

Strategies for Composing up to 10

Making the Next Ten: Adding to Two-Digit Numbers

Bridging the Ten When Adding Within 50

Bridging the Ten When Subtracting Within 50

Making Tens with Three Addends

Making Tens to Add Two-Digit Numbers

Comparing Make-Ten and Counting Strategies

Solving Word Problems by Making Tens

Making Tens Fluency Challenge

Bridging Tens in Multi-Digit Arithmetic

Rainbow Pairs That Make 10

Ten Fingers Up: Bending Fingers to Make Pairs

Making 5 Versus Making 10 Comparison

Fill the Ten-Frame Game

Mystery Partner Clues for 5

Mystery Partner Clues for 10

Making 10 With an Egg Carton Ten-Frame

Using Zero When Making 5 and 10

Rapid Recall of Partners for 5

Rapid Recall of Partners for 10

Partners to 5 and 10 Mastery Celebration

Fluency with Anchors 5 and 10

Combining Two Groups of Objects to Find the Total

Telling Addition Stories with Pictures and Toys

Using a Part-Part-Whole Mat for Addition Within 5

Understanding the Plus and Equals Symbols

Writing Addition Number Sentences Within 5

Adding by Counting on Using Fingers or Counters

Adding by Counting on Along a Number Track

Exploring Number Bonds to 5

Foundations of Addition Within 5

Making 10 with Two-Coloured Counters

Finding the Missing Part to Make 10

Writing Addition Sentences for Bonds of 10

Ten as a Single Group: A Bundle of 10

Connecting 10 Ones to 1 Ten Rod

Solving Story Problems with Bonds of 10

Making 10 and Early Place Value

Understanding Division as Fair Sharing

Understanding Division as Equal Grouping

Writing Division Number Sentences

Dividing by Two and Halving Quantities

Dividing by Five and Ten

Relating Multiplication and Division Fact Families

Solving Division Word Problems

Solving Multiplication and Division Calculation Word Problems

Two-Step Problems Combining Multiplication and Addition or Subtraction

Understanding Division and Fact Families

Adding One and Adding Two to Any Number Within 10

Adding Zero and Discovering the Identity Rule

Exploring the Turnaround Rule in Addition

Combining Groups on a Ten-Frame Within 10

Exploring Number Bonds That Make 10

Solving Real-World Addition Word Problems to 10

Addition Strategies and Number Bonds to 10

Building 11 to 13 with Ten-Frames

Building and Decomposing Teen Numbers

OGM.1.OA.4

Aligned learning resources

Related diagrams