Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have **7** delicious strawberries on your plate. You eat 2 of them right up!

How many strawberries do you have left? You can find out using just your fingers!

By **connecting concrete** stories (like 5 frogs where 2 hop away) to our fingers, we can easily write the math sentence $5 - 2 = 3$.

By **connecting concrete** math stories (like 7 strawberries or 5 jumping frogs) to symbols, we can write the number sentence $7 - 2 = 5$.

When we **subtract**, we take away. We start at the big number and **count back** like a rocket launch: 5, 4, 3, 2, 1, blastoff!

<!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">
  <title>Counting Back with Fingers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .main-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    /* Equation Bar */
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 26px;
      font-weight: 800;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid #eef2f6;
    }
    .num-start { color: #35a7ff; }
    .op { color: #8e9aae; }
    .num-sub { color: #ff9f1c; }
    .num-ans {
      color: #2ec4b6;
      display: inline-block;
      min-width: 28px;
      text-align: center;
    }

    /* Number Line Box */
    .track-card {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      padding: 14px 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border: 1px solid #eef2f6;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .number-track {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding: 0 4px;
    }

    .track-line {
      position: absolute;
      top: 50%;
      left: 16px;
      right: 16px;
      height: 4px;
      background: #e2e8f0;
      z-index: 1;
      transform: translateY(-50%);
      border-radius: 2px;
    }

    .track-node {
      position: relative;
      z-index: 2;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #64748b;
      transition: all 0.3s ease;
    }

    .track-node.start {
      border-color: #35a7ff;
      color: #35a7ff;
      background: #f0f8ff;
    }

    .track-node.active-pos {
      border-color: #2ec4b6;
      background: #2ec4b6;
      color: #ffffff;
      transform: scale(1.15);
      box-shadow: 0 4px 12px rgba(46, 196, 182, 0.35);
    }

    .track-node.passed {
      border-color: #94a3b8;
      color: #94a3b8;
      background: #f8fafc;
    }

    /* Visual Action Stage */
    .stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .panel {
      background: #ffffff;
      border: 1px solid #eef2f6;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      min-height: 110px;
      text-align: center;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: 6px;
    }

    .speech-bubble {
      font-size: 28px;
      font-weight: 800;
      color: #1e2945;
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .hand-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
    }

    .finger-box {
      width: 28px;
      height: 36px;
      background: #f1f5f9;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #94a3b8;
      border: 2px solid transparent;
      transition: all 0.3s ease;
    }

    .finger-box.raised {
      background: #fff8eb;
      border-color: #ff9f1c;
      color: #ff9f1c;
      transform: translateY(-3px);
      box-shadow: 0 3px 6px rgba(255, 159, 28, 0.2);
    }

    .sub-count-tag {
      font-size: 12px;
      font-weight: 700;
      color: #ff9f1c;
      margin-top: 4px;
    }

    /* Navigation Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 8px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn:active {
      background: #f1f5f9;
    }
    .btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .btn-primary {
      background: #35a7ff;
      border-color: #35a7ff;
      color: #ffffff;
    }
    .btn-primary:active {
      background: #238ee0;
    }

    .step-dots {
      display: flex;
      gap: 6px;
    }

    .step-dot {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: none;
      background: #e2e8f0;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-dot.active {
      background: #35a7ff;
      color: #ffffff;
      transform: scale(1.1);
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    
    <div class="equation-bar">
      <span class="num-start">7</span>
      <span class="op">−</span>
      <span class="num-sub">3</span>
      <span class="op">=</span>
      <span class="num-ans" id="ans-display">?</span>
    </div>

    
    <div class="track-card">
      <div class="number-track">
        <div class="track-line"></div>
        <div class="track-node" data-val="3">3</div>
        <div class="track-node" data-val="4">4</div>
        <div class="track-node" data-val="5">5</div>
        <div class="track-node" data-val="6">6</div>
        <div class="track-node start" data-val="7">7</div>
        <div class="track-node" data-val="8">8</div>
      </div>
    </div>

    
    <div class="stage">
      
      <div class="panel">
        <div class="panel-title">Say Out Loud</div>
        <div class="speech-bubble" id="speech-box">
          <span id="speech-text">7</span>
        </div>
      </div>

      
      <div class="panel">
        <div class="panel-title">Fingers Up</div>
        <div class="hand-display">
          <div class="finger-box" id="f1">☝️</div>
          <div class="finger-box" id="f2">☝️</div>
          <div class="finger-box" id="f3">☝️</div>
        </div>
        <div class="sub-count-tag" id="finger-tag">0 / 3</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prev-btn">← Back</button>
      <div class="step-dots">
        <button class="step-dot active" data-step="0">0</button>
        <button class="step-dot" data-step="1">1</button>
        <button class="step-dot" data-step="2">2</button>
        <button class="step-dot" data-step="3">3</button>
      </div>
      <button class="btn btn-primary" id="next-btn">Count Back →</button>
    </div>

  </div>

  <script>
    const steps = [
      { step: 0, currNum: 7, fingers: 0, ans: '?', speech: '7', tag: '0 / 3' },
      { step: 1, currNum: 6, fingers: 1, ans: '?', speech: '6', tag: '1 / 3' },
      { step: 2, currNum: 5, fingers: 2, ans: '?', speech: '5', tag: '2 / 3' },
      { step: 3, currNum: 4, fingers: 3, ans: '4', speech: '4 🎯', tag: '3 / 3 (Stop!)' }
    ];

    let currentStep = 0;

    const ansDisplay = document.getElementById('ans-display');
    const speechText = document.getElementById('speech-text');
    const fingerTag = document.getElementById('finger-tag');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const dots = document.querySelectorAll('.step-dot');
    const nodes = document.querySelectorAll('.track-node');
    const fingerBoxes = [
      document.getElementById('f1'),
      document.getElementById('f2'),
      document.getElementById('f3')
    ];

    function updateDiagram() {
      const data = steps[currentStep];

      // Update Equation Result
      ansDisplay.textContent = data.ans;
      ansDisplay.style.color = (data.ans === '4') ? '#2ec4b6' : '#8e9aae';

      // Update Speech
      speechText.textContent = data.speech;

      // Update Fingers
      fingerTag.textContent = data.tag;
      fingerBoxes.forEach((box, i) => {
        if (i < data.fingers) {
          box.classList.add('raised');
        } else {
          box.classList.remove('raised');
        }
      });

      // Update Track Nodes
      nodes.forEach(node => {
        const val = parseInt(node.getAttribute('data-val'), 10);
        node.classList.remove('active-pos', 'passed');
        if (val === data.currNum) {
          node.classList.add('active-pos');
        } else if (val > data.currNum && val <= 7) {
          node.classList.add('passed');
        }
      });

      // Update Dots
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentStep);
      });

      // Buttons
      prevBtn.disabled = (currentStep === 0);
      if (currentStep === steps.length - 1) {
        nextBtn.textContent = 'Restart ↺';
      } else {
        nextBtn.textContent = 'Count Back →';
      }
    }

    prevBtn.addEventListener('click', () => {
      if (currentStep > 0) {
        currentStep--;
        updateDiagram();
      }
    });

    nextBtn.addEventListener('click', () => {
      if (currentStep < steps.length - 1) {
        currentStep++;
      } else {
        currentStep = 0;
      }
      updateDiagram();
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        currentStep = idx;
        updateDiagram();
      });
    });

    // Initialize
    updateDiagram();
  </script>
</body>
</html>

How do we do this? We use our fingers as a **tracking tool** to count each backward step rather than showing the entire group.

Let's solve $6 - 1$. Lock the **starting number** 6 in your head before counting back.

Now put up **1 finger** and say the next number backwards: **"5"**. So, $6 - 1 = 5$!

<!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">
<title>Counting Back with Fingers</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .math-banner {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .math-banner .ans {
    color: #8338ec;
    display: inline-block;
    min-width: 28px;
    transition: all 0.3s ease;
  }
  .track-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .number-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 380px;
    position: relative;
    padding: 0 10px;
  }
  .line-bar {
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    height: 4px;
    background: #e2e8f0;
    transform: translateY(-50%);
    z-index: 1;
  }
  .num-node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    z-index: 2;
    transition: all 0.3s ease;
    color: #64748b;
  }
  .num-node.active {
    background: #8338ec;
    border-color: #8338ec;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(131, 56, 236, 0.2);
  }
  .num-node.landed {
    background: #f1e8fd;
    border-color: #8338ec;
    color: #8338ec;
  }

  /* Fingers and spoken word matching section */
  .match-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
  }
  .match-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 2px solid rgba(0,0,0,0);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .match-card.active {
    border-color: #8338ec;
    background: #faf7ff;
    box-shadow: 0 4px 12px rgba(131, 56, 236, 0.15);
  }
  .finger-icon {
    font-size: 32px;
    line-height: 1;
    filter: grayscale(100%);
    opacity: 0.3;
    transition: all 0.3s ease;
  }
  .match-card.active .finger-icon,
  .match-card.passed .finger-icon {
    filter: grayscale(0%);
    opacity: 1;
  }
  .step-label {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
  }
  .match-card.active .step-label {
    color: #8338ec;
  }
  .word-bubble {
    font-size: 15px;
    font-weight: 800;
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 20px;
    margin-top: 2px;
    transition: all 0.3s ease;
  }
  .match-card.active .word-bubble {
    background: #8338ec;
    color: #ffffff;
  }

  /* Controls */
  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
  }
  .btn {
    border: none;
    background: #ffffff;
    color: #1e2945;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .btn:hover {
    background: #f1f5f9;
  }
  .btn:active {
    box-shadow: none;
  }
  .btn-primary {
    background: #8338ec;
    color: #ffffff;
  }
  .btn-primary:hover {
    background: #7226db;
  }
  .dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .dot.active {
    background: #8338ec;
    transform: scale(1.2);
  }
</style>
</head>
<body>

<div class="app-container">
  
  <div class="math-banner">
    7 − 3 = <span class="ans" id="ansVal">?</span>
  </div>

  
  <div class="track-card">
    <div class="number-line">
      <div class="line-bar"></div>
      <div class="num-node" id="n4">4</div>
      <div class="num-node" id="n5">5</div>
      <div class="num-node" id="n6">6</div>
      <div class="num-node active" id="n7">7</div>
    </div>
  </div>

  
  <div class="match-grid">
    <div class="match-card" id="card0">
      <div class="finger-icon">☝️</div>
      <div class="step-label">Step 1</div>
      <div class="word-bubble">"6"</div>
    </div>
    <div class="match-card" id="card1">
      <div class="finger-icon">✌️</div>
      <div class="step-label">Step 2</div>
      <div class="word-bubble">"5"</div>
    </div>
    <div class="match-card" id="card2">
      <div class="finger-icon">🤟</div>
      <div class="step-label">Step 3</div>
      <div class="word-bubble">"4"</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <div class="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
    <button class="btn" id="nextBtn">→</button>
    <button class="btn btn-primary" id="playBtn">⏸</button>
  </div>
</div>

<script>
  let step = 0;
  const totalSteps = 4;
  let timer = null;
  let isPlaying = true;

  const nodes = [
    document.getElementById('n7'),
    document.getElementById('n6'),
    document.getElementById('n5'),
    document.getElementById('n4')
  ];

  const cards = [
    document.getElementById('card0'),
    document.getElementById('card1'),
    document.getElementById('card2')
  ];

  const dots = document.querySelectorAll('.dot');
  const ansVal = document.getElementById('ansVal');
  const playBtn = document.getElementById('playBtn');

  function render() {
    // Update number track
    nodes.forEach((n, idx) => {
      n.className = 'num-node';
      if (idx === step) {
        n.classList.add('active');
      } else if (idx < step) {
        n.classList.add('landed');
      }
    });

    // Update match cards
    cards.forEach((c, idx) => {
      c.className = 'match-card';
      if (step > idx) {
        c.classList.add('active');
        if (step > idx + 1) {
          c.classList.add('passed');
        }
      }
    });

    // Update answer
    if (step === 3) {
      ansVal.textContent = '4';
    } else {
      ansVal.textContent = '?';
    }

    // Update pagination dots
    dots.forEach((d, idx) => {
      d.classList.toggle('active', idx === step);
    });
  }

  function setStep(newStep) {
    step = (newStep + totalSteps) % totalSteps;
    render();
  }

  function startTimer() {
    stopTimer();
    timer = setInterval(() => {
      setStep(step + 1);
    }, 3000);
    isPlaying = true;
    playBtn.textContent = '⏸';
  }

  function stopTimer() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
    isPlaying = false;
    playBtn.textContent = '▶';
  }

  document.getElementById('nextBtn').addEventListener('click', () => {
    stopTimer();
    setStep(step + 1);
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    stopTimer();
    setStep(step - 1);
  });

  playBtn.addEventListener('click', () => {
    if (isPlaying) {
      stopTimer();
    } else {
      startTimer();
    }
  });

  dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
      stopTimer();
      setStep(idx);
    });
  });

  cards.forEach((card, idx) => {
    card.addEventListener('click', () => {
      stopTimer();
      setStep(idx + 1);
    });
  });

  render();
  startTimer();
</script>

</body>
</html>

To solve $8 - 2$, put **8 in your head**. Put up 1 finger and say **"7"**, then put up a second finger and say **"6"**.

Make sure each finger matches **one step** backward. Maintaining this strict **word correspondence** means you say exactly one number per finger.

The last number you say is your answer! So, $8 - 2 = 6$.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .equation-bar {
      font-size: 28px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .highlight-target {
      color: #2b8a3e;
      background: #ebfbee;
      padding: 2px 10px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .main-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 100%;
      max-width: 480px;
    }

    /* Head & Starting Number */
    .head-box {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 16px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: border-color 0.3s ease;
    }

    .head-box.active {
      border-color: #38b000;
      box-shadow: 0 0 0 3px rgba(56, 176, 0, 0.15);
    }

    .head-icon {
      font-size: 32px;
      line-height: 1;
    }

    .head-text {
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
    }

    .head-number {
      font-size: 24px;
      font-weight: 800;
      color: #1e2945;
    }

    /* Steps track */
    .steps-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      opacity: 0.45;
      transform: translateY(0);
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .step-card.active {
      opacity: 1;
      border-color: #38b000;
      background: #f4fbf4;
      box-shadow: 0 4px 12px rgba(56, 176, 0, 0.15);
      transform: translateY(-2px);
    }

    .step-card.current {
      border-color: #38b000;
      background: #ebfbee;
      box-shadow: 0 0 0 3px rgba(56, 176, 0, 0.25);
    }

    .finger-icon {
      font-size: 28px;
      line-height: 1;
    }

    .step-tag {
      font-size: 11px;
      font-weight: 700;
      color: #6b7280;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .step-value {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
    }

    .step-card.active .step-value {
      color: #2b8a3e;
    }

    /* Interactive controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #d1d5db;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn:active {
      background: #f3f4f6;
    }

    .btn-primary {
      background: #38b000;
      border-color: #38b000;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #2f9400;
    }

    .dots-nav {
      display: flex;
      gap: 6px;
      margin-top: 4px;
    }

    .dot-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s, transform 0.2s;
    }

    .dot-btn.active {
      background: #38b000;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="equation-bar">
    <span>9 − 3 =</span>
    <span class="highlight-target" id="result-display">?</span>
  </div>

  <div class="main-stage">
    
    <div class="head-box" id="head-box">
      <span class="head-icon">🧠</span>
      <div>
        <div class="head-text">In your head</div>
        <div class="head-number">9</div>
      </div>
    </div>

    
    <div class="steps-row">
      <div class="step-card" id="card-1">
        <span class="finger-icon">☝️</span>
        <span class="step-tag">1st back</span>
        <span class="step-value">8</span>
      </div>

      <div class="step-card" id="card-2">
        <span class="finger-icon">✌️</span>
        <span class="step-tag">2nd back</span>
        <span class="step-value">7</span>
      </div>

      <div class="step-card" id="card-3">
        <span class="finger-icon">🤟</span>
        <span class="step-tag">3rd back</span>
        <span class="step-value">6</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prev-btn" aria-label="Previous step">←</button>
      <button class="btn btn-primary" id="play-btn">▶ Step</button>
      <button class="btn" id="next-btn" aria-label="Next step">→</button>
    </div>

    
    <div class="dots-nav">
      <button class="dot-btn active" id="dot-0" aria-label="Step 0"></button>
      <button class="dot-btn" id="dot-1" aria-label="Step 1"></button>
      <button class="dot-btn" id="dot-2" aria-label="Step 2"></button>
      <button class="dot-btn" id="dot-3" aria-label="Step 3"></button>
    </div>
  </div>

  <script>
    let step = 0;
    const maxSteps = 3;

    const cards = [
      document.getElementById('card-1'),
      document.getElementById('card-2'),
      document.getElementById('card-3')
    ];
    const headBox = document.getElementById('head-box');
    const resultDisplay = document.getElementById('result-display');
    const dots = [
      document.getElementById('dot-0'),
      document.getElementById('dot-1'),
      document.getElementById('dot-2'),
      document.getElementById('dot-3')
    ];

    function setStep(newStep) {
      step = ((newStep % (maxSteps + 1)) + (maxSteps + 1)) % (maxSteps + 1);

      // Head state
      if (step === 0) {
        headBox.classList.add('active');
      } else {
        headBox.classList.remove('active');
      }

      // Card states
      cards.forEach((card, idx) => {
        const cardStep = idx + 1;
        card.classList.remove('active', 'current');
        if (cardStep <= step) {
          card.classList.add('active');
          if (cardStep === step) {
            card.classList.add('current');
          }
        }
      });

      // Dots state
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === step);
      });

      // Result answer state
      if (step === 3) {
        resultDisplay.textContent = '6';
      } else {
        resultDisplay.textContent = '?';
      }
    }

    document.getElementById('play-btn').addEventListener('click', () => {
      setStep(step === maxSteps ? 0 : step + 1);
    });

    document.getElementById('next-btn').addEventListener('click', () => {
      setStep(step === maxSteps ? 0 : step + 1);
    });

    document.getElementById('prev-btn').addEventListener('click', () => {
      setStep(step === 0 ? maxSteps : step - 1);
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => setStep(idx));
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => setStep(idx + 1));
    });

    headBox.addEventListener('click', () => setStep(0));

    setStep(0);
  </script>
</body>
</html>

Can you try $9 - 3$? Put 9 in your head, count back 3 fingers: **8... 7... 6!**

For **appropriate strategy selection**, counting back is best when subtracting small amounts like $-1$, $-2$, or $-3$. For taking away larger amounts, counting on or partitioning is much easier!

Be careful to match **one step** to each finger for exact **word correspondence**! For $5 - 2$, do not say 5 on finger one — start counting on finger one with **4**, then **3**.

**Appropriate strategy selection** makes subtraction faster. Counting back works best when subtracting small numbers like $-1$, $-2$, or $-3$; for larger amounts, counting on or partitioning is preferred.

Next time you see a takeaway problem, lock the big number in your head, pop up your fingers, and count back to find the answer!

math

Subtracting by Counting Back with Fingers. Start with a total and count back 1, 2, or 3 fingers to find the difference.

Early Level & P1 Mathematics: Addition and Subtraction Strategies

Subtract by Counting Back - Up to 10

Subtraction Within 10: Counting Back Strategies

In Scotland's Curriculum for Excellence (CfE) Early Level (P1 / MNU 0-03a), finger counting back acts as a crucial cognitive bridge between concrete object removal ('taking away') and mental agility on an abstract number line. Teachers should emphasize 'fist closed, pop a finger out per backward count' or 'touch head to lock in the starting number' to explicitly eliminate the inclusive counting error ($n, n-1$ instead of $n-1, n-2$). Daily oral backward counting warm-ups (e.g., rocket countdowns from 10 to 0) strongly support fluency in this objective.

Subtracting by Counting Back with Fingers

Counting Back Like a Rocket

Take Away 1