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 24 shiny marbles and your best friend gives you 15 more.

You do not need paper or counting fingers to find the total — you can do it right in your head!

Our first trick is **partitioning**, which just means breaking big numbers into friendly tens and ones.

To solve $24 + 15$, break 24 into $20 + 4$ and 15 into $10 + 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">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    user-select: none;
  }

  .nav-bar {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 480px;
    justify-content: center;
    margin-bottom: 12px;
  }
  .step-tab {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }
  .step-tab.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
  }

  .stage-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  }

  .num-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
  }

  .num-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
  }

  .main-bubble {
    font-size: 26px;
    font-weight: 800;
    padding: 6px 18px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    color: #0f172a;
    transition: all 0.3s ease;
  }

  .split-branches {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: 100%;
    justify-content: center;
  }

  .chip {
    font-size: 18px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .chip-tens {
    background: #e0f2fe;
    color: #0369a1;
    border: 2px solid #bae6fd;
  }

  .chip-ones {
    background: #fef3c7;
    color: #b45309;
    border: 2px solid #fde68a;
  }

  .chip.dim {
    opacity: 0.25;
    transform: scale(0.95);
  }

  .chip.highlight {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4);
  }

  .chip-ones.highlight {
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.4);
  }

  .op-symbol {
    font-size: 22px;
    font-weight: 800;
    color: #94a3b8;
  }

  .work-zone {
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    justify-content: center;
  }

  .calc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 17px;
    font-weight: 700;
    transition: all 0.3s ease;
  }

  .calc-row.tens-active {
    background: #f0f9ff;
    border-color: #0284c7;
    color: #0369a1;
    transform: scale(1.02);
  }

  .calc-row.ones-active {
    background: #fffbeb;
    border-color: #d97706;
    color: #b45309;
    transform: scale(1.02);
  }

  .calc-row.final-active {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #15803d;
    transform: scale(1.02);
  }

  .badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .badge-tens { background: #bae6fd; color: #0369a1; }
  .badge-ones { background: #fde68a; color: #b45309; }
  .badge-sum  { background: #bbf7d0; color: #15803d; }

  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 480px;
    margin-top: 10px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
  }
  .btn:hover { background: #f8fafc; }

  .btn-play {
    min-width: 76px;
    justify-content: center;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="step-tab active" data-step="0">1. Split</button>
  <button class="step-tab" data-step="1">2. Tens</button>
  <button class="step-tab" data-step="2">3. Ones</button>
  <button class="step-tab" data-step="3">4. Total</button>
</div>

<div class="stage-card">
  <div class="num-row">
    
    <div class="num-block">
      <div class="main-bubble" id="b24">24</div>
      <div class="split-branches">
        <div class="chip chip-tens" id="c20">20</div>
        <span style="color:#cbd5e1;font-weight:bold;">+</span>
        <div class="chip chip-ones" id="c4">4</div>
      </div>
    </div>

    <div class="op-symbol">+</div>

    
    <div class="num-block">
      <div class="main-bubble" id="b15">15</div>
      <div class="split-branches">
        <div class="chip chip-tens" id="c10">10</div>
        <span style="color:#cbd5e1;font-weight:bold;">+</span>
        <div class="chip chip-ones" id="c5">5</div>
      </div>
    </div>
  </div>

  <div class="work-zone">
    <div class="calc-row" id="row-tens">
      <span class="badge badge-tens">Tens</span>
      <span id="tens-eq">20 + 10 = <strong>30</strong></span>
    </div>
    <div class="calc-row" id="row-ones">
      <span class="badge badge-ones">Ones</span>
      <span id="ones-eq">4 + 5 = <strong>9</strong></span>
    </div>
    <div class="calc-row" id="row-sum">
      <span class="badge badge-sum">Combine</span>
      <span id="sum-eq">30 + 9 = <strong style="font-size:20px;color:#16a34a;">39</strong></span>
    </div>
  </div>
</div>

<div class="controls">
  <button class="btn" id="prevBtn">← Prev</button>
  <button class="btn btn-play" id="playBtn">⏸ Pause</button>
  <button class="btn" id="nextBtn">Next →</button>
</div>

<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<script>
  const tabs = $$('.step-tab');
  const rowTens = $('#row-tens');
  const rowOnes = $('#row-ones');
  const rowSum = $('#row-sum');
  
  const c20 = $('#c20');
  const c4 = $('#c4');
  const c10 = $('#c10');
  const c5 = $('#c5');
  const b24 = $('#b24');
  const b15 = $('#b15');

  let currentStep = 0;

  function render(step) {
    currentStep = step;
    tabs.forEach((tab, i) => {
      tab.classList.toggle('active', i === step);
    });

    // Reset styles
    [c20, c4, c10, c5].forEach(c => {
      c.classList.remove('dim', 'highlight');
    });
    rowTens.classList.remove('tens-active');
    rowOnes.classList.remove('ones-active');
    rowSum.classList.remove('final-active');

    rowTens.style.opacity = '0.35';
    rowOnes.style.opacity = '0.35';
    rowSum.style.opacity = '0.35';

    if (step === 0) {
      // Split stage: show all chips evenly
      b24.style.borderColor = '#0284c7';
      b15.style.borderColor = '#0284c7';
    } else if (step === 1) {
      // Tens stage
      c20.classList.add('highlight');
      c10.classList.add('highlight');
      c4.classList.add('dim');
      c5.classList.add('dim');
      rowTens.classList.add('tens-active');
      rowTens.style.opacity = '1';
    } else if (step === 2) {
      // Ones stage
      c4.classList.add('highlight');
      c5.classList.add('highlight');
      c20.classList.add('dim');
      c10.classList.add('dim');
      rowTens.style.opacity = '0.7';
      rowOnes.classList.add('ones-active');
      rowOnes.style.opacity = '1';
    } else if (step === 3) {
      // Combine stage
      rowTens.style.opacity = '0.7';
      rowOnes.style.opacity = '0.7';
      rowSum.classList.add('final-active');
      rowSum.style.opacity = '1';
    }
  }

  let timer = null;
  let playing = true;

  function setStep(idx) {
    const s = (idx + 4) % 4;
    render(s);
  }

  function startAuto() {
    stopAuto();
    timer = setInterval(() => {
      setStep(currentStep + 1);
    }, 3200);
    $('#playBtn').textContent = '⏸ Pause';
    playing = true;
  }

  function stopAuto() {
    if (timer) clearInterval(timer);
    timer = null;
    $('#playBtn').textContent = '▶ Play';
    playing = false;
  }

  tabs.forEach((tab, i) => {
    onTap(tab, () => {
      stopAuto();
      setStep(i);
    });
  });

  onTap($('#prevBtn'), () => {
    stopAuto();
    setStep(currentStep - 1);
  });

  onTap($('#nextBtn'), () => {
    stopAuto();
    setStep(currentStep + 1);
  });

  onTap($('#playBtn'), () => {
    if (playing) {
      stopAuto();
    } else {
      startAuto();
    }
  });

  render(0);
  startAuto();
</script>
</body>
</html>

Add the tens first: $20 + 10 = 30$. Then add the ones: $4 + 5 = 9$. Put them together to get **39**!

What if your ones make more than ten? Can we hop to a friendly number first?

**Bridging** means jumping forward on a number line to reach the nearest friendly ten.

Let's solve $28 + 6$. 28 needs just 2 more to become 30, so split 6 into 2 and 4.

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 16px 12px;
      user-select: none;
    }

    .main-area {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      flex: 1;
      justify-content: center;
    }

    /* Equation & Split Tree */
    .equation-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 380px;
    }

    .equation-row {
      font-size: 26px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .num-base { color: #1e2945; }
    .num-split {
      color: #8b5cf6;
      border: 2px dashed #8b5cf6;
      border-radius: 8px;
      padding: 2px 8px;
      background: #f5f3ff;
      transition: all 0.3s ease;
    }

    .split-tree {
      position: relative;
      width: 130px;
      height: 52px;
      margin-top: 6px;
      margin-left: 58px;
    }

    .tree-lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .split-nodes {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .node {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 15px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }

    .node-2 {
      background: #f5f3ff;
      border: 2px solid #8b5cf6;
      color: #8b5cf6;
      opacity: 0.3;
      transform: scale(0.9);
    }

    .node-4 {
      background: #f0fdf4;
      border: 2px solid #22c55e;
      color: #16a34a;
      opacity: 0.3;
      transform: scale(0.9);
    }

    /* Number Line Canvas Container */
    .numberline-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 12px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      width: 100%;
    }

    .numberline-svg {
      width: 100%;
      height: 120px;
      overflow: visible;
    }

    /* Jump Arcs */
    .jump-arc {
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .jump-arc-1 {
      stroke: #8b5cf6;
      stroke-width: 3.5;
    }

    .jump-arc-2 {
      stroke: #22c55e;
      stroke-width: 3.5;
    }

    .jump-tag {
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transition: opacity 0.3s ease;
      text-anchor: middle;
    }

    .tag-1 { fill: #8b5cf6; }
    .tag-2 { fill: #16a34a; }

    /* Interactive Stepper Navigation */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      margin-top: 4px;
    }

    .step-btn {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #8b5cf6;
      color: #ffffff;
      border-color: #8b5cf6;
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
    }

    .play-btn {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .play-btn:active, .step-btn:active {
      background: #f1f5f9;
    }

    /* Active State Transitions */
    .step-state-1 .node-2,
    .step-state-1 .node-4 {
      opacity: 1;
      transform: scale(1);
    }

    .step-state-2 .node-2 {
      opacity: 1;
      transform: scale(1.1);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    }
    .step-state-2 .node-4 { opacity: 0.5; }
    .step-state-2 .jump-arc-1 { stroke-dashoffset: 0; }
    .step-state-2 .tag-1 { opacity: 1; }
    .step-state-2 .dot-30 { fill: #8b5cf6; r: 6; }
    .step-state-2 .text-30 { font-weight: 800; fill: #8b5cf6; }

    .step-state-3 .node-2 { opacity: 0.5; }
    .step-state-3 .node-4 {
      opacity: 1;
      transform: scale(1.1);
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    }
    .step-state-3 .jump-arc-1 { stroke-dashoffset: 0; }
    .step-state-3 .tag-1 { opacity: 1; }
    .step-state-3 .dot-30 { fill: #8b5cf6; }
    .step-state-3 .jump-arc-2 { stroke-dashoffset: 0; }
    .step-state-3 .tag-2 { opacity: 1; }
    .step-state-3 .dot-34 { fill: #22c55e; r: 7; }
    .step-state-3 .text-34 { font-weight: 800; fill: #16a34a; font-size: 16px; }
  </style>
</head>
<body class="step-state-1">

  <div class="main-area">
    
    <div class="equation-card">
      <div class="equation-row">
        <span class="num-base">28</span>
        <span>+</span>
        <span class="num-split">6</span>
        <span id="final-result" style="color:#16a34a; opacity: 0; transition: opacity 0.3s ease;">= 34</span>
      </div>

      <div class="split-tree">
        <svg class="tree-lines" viewBox="0 0 130 20">
          <line x1="65" y1="0" x2="20" y2="18" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
          <line x1="65" y1="0" x2="110" y2="18" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <div class="split-nodes">
          <div class="node node-2">2</div>
          <div class="node node-4">4</div>
        </div>
      </div>
    </div>

    
    <div class="numberline-card">
      <svg class="numberline-svg" viewBox="0 0 400 110">
        
        <line x1="25" y1="80" x2="375" y2="80" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>

        
        
        <line x1="25" y1="74" x2="25" y2="86" stroke="#94a3b8" stroke-width="2"/>
        <text x="25" y="102" fill="#94a3b8" font-size="13" font-weight="500" text-anchor="middle">26</text>

        
        <line x1="95" y1="72" x2="95" y2="88" stroke="#1e2945" stroke-width="2"/>
        <circle cx="95" cy="80" r="5" fill="#1e2945"/>
        <text x="95" y="102" fill="#1e2945" font-size="14" font-weight="700" text-anchor="middle">28</text>

        
        <line x1="165" y1="70" x2="165" y2="90" stroke="#8b5cf6" stroke-width="2"/>
        <circle class="dot-30" cx="165" cy="80" r="4.5" fill="#94a3b8" style="transition: all 0.3s ease;"/>
        <text class="text-30" x="165" y="102" fill="#64748b" font-size="14" font-weight="600" text-anchor="middle" style="transition: all 0.3s ease;">30</text>

        
        <line x1="305" y1="70" x2="305" y2="90" stroke="#22c55e" stroke-width="2"/>
        <circle class="dot-34" cx="305" cy="80" r="4.5" fill="#94a3b8" style="transition: all 0.3s ease;"/>
        <text class="text-34" x="305" y="102" fill="#64748b" font-size="14" font-weight="600" text-anchor="middle" style="transition: all 0.3s ease;">34</text>

        
        <line x1="375" y1="74" x2="375" y2="86" stroke="#94a3b8" stroke-width="2"/>
        <text x="375" y="102" fill="#94a3b8" font-size="13" font-weight="500" text-anchor="middle">36</text>

        
        <path class="jump-arc jump-arc-1" d="M 95 76 Q 130 35 165 76"/>
        <text class="jump-tag tag-1" x="130" y="38">+2</text>

        
        <path class="jump-arc jump-arc-2" d="M 165 76 Q 235 12 305 76"/>
        <text class="jump-tag tag-2" x="235" y="20">+4</text>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(1)">1. Split 6</button>
    <button class="step-btn" onclick="setStep(2)">2. Jump to 30</button>
    <button class="step-btn" onclick="setStep(3)">3. Jump to 34</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play/Pause">⏸</button>
  </div>

  <script>
    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    function updateView() {
      document.body.className = `step-state-${currentStep}`;
      
      const buttons = document.querySelectorAll('.step-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === currentStep);
      });

      const finalResult = document.getElementById('final-result');
      if (currentStep === 3) {
        finalResult.style.opacity = '1';
      } else {
        finalResult.style.opacity = '0';
      }
    }

    function setStep(step) {
      currentStep = step;
      updateView();
      if (isPlaying) {
        restartTimer();
      }
    }

    function nextStep() {
      currentStep = currentStep >= 3 ? 1 : currentStep + 1;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        nextStep();
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function restartTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    // Initialize
    updateView();
    startTimer();
  </script>
</body>
</html>

First jump: $28 + 2 = 30$. Second jump: $30 + 4 = 34$.

What if you need to add a number like 19 or 29 that is super close to a ten?

**Compensation** means adding an easy round number first, and then fixing the extra amount.

To solve $35 + 19$, pretend 19 is 20 because adding 20 is super fast!

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <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 16px;
      user-select: none;
    }

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

    /* Math expression box */
    .calc-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 700;
      min-height: 48px;
      background: #ffffff;
      padding: 8px 20px;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .calc-part {
      transition: all 0.3s ease;
    }

    .highlight-plus {
      color: #f59e0b;
    }

    .highlight-minus {
      color: #ef4444;
    }

    .highlight-result {
      color: #10b981;
    }

    /* SVG Number Line */
    .svg-container {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 16px 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Jump arcs & markers */
    .jump-arc {
      fill: none;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s ease, opacity 0.3s ease;
    }

    .arc-plus {
      stroke: #f59e0b;
      stroke-width: 3.5;
    }

    .arc-minus {
      stroke: #ef4444;
      stroke-width: 3.5;
      stroke-dasharray: 4 4;
    }

    .jump-label {
      font-size: 13px;
      font-weight: 800;
      transition: opacity 0.3s ease;
    }

    .label-plus { fill: #d97706; }
    .label-minus { fill: #dc2626; }

    .point-circle {
      transition: transform 0.3s ease, fill 0.3s ease;
      transform-origin: center;
    }

    .point-tag {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn {
      border: 1px solid #e5e7eb;
      background: #ffffff;
      color: #4b5563;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .btn:hover {
      background: #f9fafb;
      border-color: #d1d5db;
    }

    .btn.active {
      background: #f59e0b;
      color: #ffffff;
      border-color: #f59e0b;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
    }

    .play-btn {
      width: 36px;
      height: 36px;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  
  <div class="calc-display" id="calcDisplay">
    
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 460 170" id="numberLineSvg">
      <defs>
        <marker id="arrow-plus" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 8 5 L 0 9 z" fill="#f59e0b" />
        </marker>
        <marker id="arrow-minus" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 8 1 L 0 5 L 8 9 z" fill="#ef4444" />
        </marker>
      </defs>

      
      <line x1="30" y1="130" x2="430" y2="130" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />
      <polygon points="432,130 424,125 424,135" fill="#cbd5e1" />

      
      <g stroke="#94a3b8" stroke-width="2">
        <line x1="70" y1="123" x2="70" y2="137" />
        <line x1="370" y1="123" x2="370" y2="137" />
        <line x1="330" y1="123" x2="330" y2="137" />
      </g>

      
      <text x="70" y="156" class="point-tag">35</text>
      <text x="330" y="156" class="point-tag" id="tag54" opacity="0.4">54</text>
      <text x="370" y="156" class="point-tag" id="tag55" opacity="0.4">55</text>

      
      
      <path id="jump20" class="jump-arc arc-plus" d="M 70 120 C 130 30, 310 30, 366 120" marker-end="url(#arrow-plus)" opacity="0" />
      <text id="label20" x="220" y="48" text-anchor="middle" class="jump-label label-plus" opacity="0">+20</text>

      
      <path id="jump1" class="jump-arc arc-minus" d="M 370 120 C 365 85, 335 85, 332 120" marker-end="url(#arrow-minus)" opacity="0" />
      <text id="label1" x="350" y="80" text-anchor="middle" class="jump-label label-minus" opacity="0">−1</text>

      
      <circle id="dot35" cx="70" cy="130" r="7" fill="#f59e0b" class="point-circle" />
      <circle id="dot55" cx="370" cy="130" r="6" fill="#cbd5e1" class="point-circle" />
      <circle id="dot54" cx="330" cy="130" r="6" fill="#cbd5e1" class="point-circle" />
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn play-btn" id="playBtn" title="Play / Pause">▶</button>
    <button class="btn active" id="btn0">1. Start (35)</button>
    <button class="btn" id="btn1">2. Jump +20</button>
    <button class="btn" id="btn2">3. Take 1 Away</button>
  </div>
</div>

<script src="{{VENDOR_CDN}}/katex.min.js"></script>
<script>
  let step = 0;
  let timer = null;
  let isPlaying = true;

  const stepsData = [
    {
      calc: "35 + 19",
      j20: 0,
      j1: 0,
      dot35: "#f59e0b",
      dot55: "#cbd5e1",
      dot54: "#cbd5e1",
      tag55Op: "0.4",
      tag54Op: "0.4"
    },
    {
      calc: "35 + <span class='highlight-plus'>20</span> = <span class='highlight-plus'>55</span>",
      j20: 1,
      j1: 0,
      dot35: "#f59e0b",
      dot55: "#f59e0b",
      dot54: "#cbd5e1",
      tag55Op: "1",
      tag54Op: "0.4"
    },
    {
      calc: "55 <span class='highlight-minus'>− 1</span> = <span class='highlight-result'>54</span>",
      j20: 0.35,
      j1: 1,
      dot35: "#f59e0b",
      dot55: "#94a3b8",
      dot54: "#10b981",
      tag55Op: "0.6",
      tag54Op: "1"
    }
  ];

  function renderStep(idx) {
    step = idx;
    const d = stepsData[step];

    // Update Equation
    document.getElementById('calcDisplay').innerHTML = d.calc;

    // Update Number Line elements
    const jump20 = document.getElementById('jump20');
    const label20 = document.getElementById('label20');
    const jump1 = document.getElementById('jump1');
    const label1 = document.getElementById('label1');
    const dot35 = document.getElementById('dot35');
    const dot55 = document.getElementById('dot55');
    const dot54 = document.getElementById('dot54');
    const tag55 = document.getElementById('tag55');
    const tag54 = document.getElementById('tag54');

    jump20.style.opacity = d.j20;
    label20.style.opacity = d.j20;
    jump1.style.opacity = d.j1;
    label1.style.opacity = d.j1;

    dot35.setAttribute('fill', d.dot35);
    dot55.setAttribute('fill', d.dot55);
    dot54.setAttribute('fill', d.dot54);

    tag55.setAttribute('opacity', d.tag55Op);
    tag54.setAttribute('opacity', d.tag54Op);

    // Update button states
    [0, 1, 2].forEach(i => {
      document.getElementById('btn' + i).classList.toggle('active', i === step);
    });
  }

  function nextStep() {
    renderStep((step + 1) % 3);
  }

  function startAutoPlay() {
    if (timer) clearInterval(timer);
    timer = setInterval(nextStep, 3200);
    document.getElementById('playBtn').textContent = '⏸';
    isPlaying = true;
  }

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

  // Setup click listeners
  [0, 1, 2].forEach(i => {
    document.getElementById('btn' + i).addEventListener('click', () => {
      pauseAutoPlay();
      renderStep(i);
    });
  });

  document.getElementById('playBtn').addEventListener('click', () => {
    if (isPlaying) {
      pauseAutoPlay();
    } else {
      nextStep();
      startAutoPlay();
    }
  });

  // Initial render & run
  renderStep(0);
  startAutoPlay();
</script>

</body>
</html>

Add $35 + 20 = 55$. Since you added 1 too many, take 1 away: $55 - 1 = 54$.

Next time you see an addition puzzle, ask yourself: should I split it, bridge it, or round it?

math

Mental Addition Strategies for Large Numbers. Use partitioning, compensation, and bridging to add whole numbers mentally.

Mental Addition and Subtraction Strategies (Curriculum for Excellence - Second Level)

Securing Mental Strategies: Calculation and Bridging (Spine 1: Number, Addition and Subtraction)

Strategies for Adding Two- and Three-Digit Numbers Mentally (Break Apart & Compensation)

Although the Curriculum for Excellence benchmark MNU 2-03a formally spans Second Level (P5–P7), mental arithmetic principles originate from early concrete/pictorial work (P1–P4). When teaching multi-digit mental strategies, ground discussions in open number line visualizations and 'number talks' where pupils verbally justify why a chosen strategy (partitioning, bridging, or compensation) is the most efficient for a given number structure.

Mental Addition Strategies for Large Numbers

Split into Tens and Ones

Bridging to Ten