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 a frog that can make giant leaps of **10** and tiny hops of **1**.

An **empty number line** is a straight line with no numbers on it until you draw your own jumps to add.

<!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>Empty Number Line Addition</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .problem-tabs {
      display: flex;
      gap: 8px;
    }

    .tab-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
    }

    .equation-display {
      font-size: 26px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.5px;
    }

    .equation-display .ans {
      color: #22c55e;
      transition: opacity 0.3s ease;
    }

    .svg-container {
      width: 100%;
      max-width: 580px;
      margin: 10px 0;
    }

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

    /* Jump arcs & labels */
    .jump-arc {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      transition: stroke-dashoffset 0.6s ease-out;
    }

    .jump-arc.jump-tens {
      stroke: #3b82f6;
    }

    .jump-arc.jump-ones {
      stroke: #22c55e;
    }

    .jump-arc.visible {
      stroke-dashoffset: 0;
    }

    .jump-badge {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
    }

    .jump-badge.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .point-marker {
      opacity: 0;
      transform: scale(0.6);
      transform-origin: center;
      transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
    }

    .point-marker.visible {
      opacity: 1;
      transform: scale(1);
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .step-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

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

    .dot.active {
      background: #3b82f6;
      transform: scale(1.3);
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="problem-tabs">
      <button class="tab-btn active" id="tab0">38 + 25</button>
      <button class="tab-btn" id="tab1">47 + 34</button>
    </div>
    <div class="equation-display" id="equation">38 + 25 = <span class="ans" id="ansVal">?</span></div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 540 180" id="numberLineSvg">
      
      <line x1="30" y1="140" x2="510" y2="140" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
      <polygon points="510,135 522,140 510,145" fill="#94a3b8" />
      <polygon points="30,135 18,140 30,145" fill="#94a3b8" />

      
      <g id="jumpsLayer"></g>
      <g id="pointsLayer"></g>
    </svg>
  </div>

  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <div class="step-dots" id="dotsContainer"></div>
    <button class="btn" id="playBtn">▶</button>
    <button class="btn" id="nextBtn">→</button>
  </div>

  <script>
    const PROBLEMS = [
      {
        a: 38,
        b: 25,
        total: 63,
        startX: 70,
        scale: 15, // px per unit
        steps: [
          { val: 38, x: 70 },
          { val: 48, jump: "+10", type: "tens", x: 220 },
          { val: 58, jump: "+10", type: "tens", x: 370 },
          { val: 63, jump: "+5",  type: "ones", x: 445 }
        ]
      },
      {
        a: 47,
        b: 34,
        total: 81,
        startX: 60,
        scale: 12,
        steps: [
          { val: 47, x: 60 },
          { val: 57, jump: "+10", type: "tens", x: 180 },
          { val: 67, jump: "+10", type: "tens", x: 300 },
          { val: 77, jump: "+10", type: "tens", x: 420 },
          { val: 81, jump: "+4",  type: "ones", x: 468 }
        ]
      }
    ];

    let currentProblemIdx = 0;
    let currentStep = 0;
    let isPlaying = false;
    let playTimer = null;

    const jumpsLayer = document.getElementById('jumpsLayer');
    const pointsLayer = document.getElementById('pointsLayer');
    const dotsContainer = document.getElementById('dotsContainer');
    const equationEl = document.getElementById('equation');
    const ansValEl = document.getElementById('ansVal');
    const playBtn = document.getElementById('playBtn');

    function renderDiagram() {
      const prob = PROBLEMS[currentProblemIdx];
      jumpsLayer.innerHTML = '';
      pointsLayer.innerHTML = '';
      dotsContainer.innerHTML = '';

      // Build Dots
      prob.steps.forEach((_, idx) => {
        const dot = document.createElement('div');
        dot.className = `dot ${idx === currentStep ? 'active' : ''}`;
        dot.addEventListener('click', () => goToStep(idx));
        dotsContainer.appendChild(dot);
      });

      // Build Markers and Jumps
      prob.steps.forEach((st, idx) => {
        // Point tick & label
        const ptGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        ptGroup.setAttribute('class', `point-marker pt-${idx}`);
        ptGroup.innerHTML = `
          <line x1="${st.x}" y1="133" x2="${st.x}" y2="147" stroke="#334155" stroke-width="2.5" stroke-linecap="round"/>
          <circle cx="${st.x}" cy="140" r="4.5" fill="${idx === 0 ? '#3b82f6' : (idx === prob.steps.length - 1 ? '#22c55e' : '#64748b')}"/>
          <text x="${st.x}" y="168" text-anchor="middle" font-size="15" font-weight="${idx === 0 || idx === prob.steps.length - 1 ? '700' : '600'}" fill="${idx === prob.steps.length - 1 ? '#15803d' : '#1e293b'}">${st.val}</text>
        `;
        pointsLayer.appendChild(ptGroup);

        // Jump Arc (for steps > 0)
        if (idx > 0) {
          const prevSt = prob.steps[idx - 1];
          const midX = (prevSt.x + st.x) / 2;
          const jumpWidth = st.x - prevSt.x;
          const arcHeight = Math.min(65, 30 + jumpWidth * 0.25);
          const peakY = 140 - arcHeight;

          const arcPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
          arcPath.setAttribute('d', `M ${prevSt.x} 140 Q ${midX} ${peakY - 15} ${st.x} 140`);
          arcPath.setAttribute('class', `jump-arc jump-${st.type} arc-${idx}`);
          jumpsLayer.appendChild(arcPath);

          const badgeGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          badgeGroup.setAttribute('class', `jump-badge badge-${idx}`);
          const badgeFill = st.type === 'tens' ? '#eff6ff' : '#f0fdf4';
          const badgeStroke = st.type === 'tens' ? '#3b82f6' : '#22c55e';
          const badgeTextColor = st.type === 'tens' ? '#1d4ed8' : '#15803d';

          badgeGroup.innerHTML = `
            <rect x="${midX - 20}" y="${peakY - 26}" width="40" height="22" rx="11" fill="${badgeFill}" stroke="${badgeStroke}" stroke-width="1.5"/>
            <text x="${midX}" y="${peakY - 11}" text-anchor="middle" font-size="12" font-weight="700" fill="${badgeTextColor}">${st.jump}</text>
          `;
          jumpsLayer.appendChild(badgeGroup);
        }
      });

      updateStepView();
    }

    function updateStepView() {
      const prob = PROBLEMS[currentProblemIdx];

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

      // Update Point & Jump visibility
      prob.steps.forEach((_, idx) => {
        const pt = document.querySelector(`.pt-${idx}`);
        if (pt) pt.classList.toggle('visible', idx <= currentStep);

        if (idx > 0) {
          const arc = document.querySelector(`.arc-${idx}`);
          const badge = document.querySelector(`.badge-${idx}`);
          if (arc) arc.classList.toggle('visible', idx <= currentStep);
          if (badge) badge.classList.toggle('visible', idx <= currentStep);
        }
      });

      // Update Answer
      if (currentStep === prob.steps.length - 1) {
        ansValEl.textContent = prob.total;
        ansValEl.style.opacity = '1';
      } else {
        ansValEl.textContent = '?';
        ansValEl.style.opacity = '0.5';
      }
    }

    function goToStep(step) {
      const prob = PROBLEMS[currentProblemIdx];
      currentStep = Math.max(0, Math.min(step, prob.steps.length - 1));
      updateStepView();
    }

    function nextStep() {
      const prob = PROBLEMS[currentProblemIdx];
      if (currentStep < prob.steps.length - 1) {
        goToStep(currentStep + 1);
      } else {
        goToStep(0);
      }
    }

    function prevStep() {
      const prob = PROBLEMS[currentProblemIdx];
      if (currentStep > 0) {
        goToStep(currentStep - 1);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        playTimer = setInterval(() => {
          nextStep();
        }, 1800);
      } else {
        clearInterval(playTimer);
      }
    }

    function switchProblem(idx) {
      currentProblemIdx = idx;
      currentStep = 0;
      document.getElementById('tab0').classList.toggle('active', idx === 0);
      document.getElementById('tab1').classList.toggle('active', idx === 1);
      const prob = PROBLEMS[idx];
      equationEl.innerHTML = `${prob.a} + ${prob.b} = <span class="ans" id="ansVal">?</span>`;
      renderDiagram();
    }

    document.getElementById('tab0').addEventListener('click', () => switchProblem(0));
    document.getElementById('tab1').addEventListener('click', () => switchProblem(1));
    document.getElementById('nextBtn').addEventListener('click', () => {
      if (isPlaying) togglePlay();
      nextStep();
    });
    document.getElementById('prevBtn').addEventListener('click', () => {
      if (isPlaying) togglePlay();
      prevStep();
    });
    playBtn.addEventListener('click', togglePlay);

    // Initial render
    renderDiagram();
  </script>
</body>
</html>

What is the fastest way to add a number with only tens?

When you add **10**, the tens digit goes up by 1, but the ones digit stays the same.

To solve $34 + 20$, write **34** at the start, then make two big jumps of +10 to reach 54.

<!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>Empty Number Line Addition</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .header-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 12px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #1e293b;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .pill.target {
      background: #fef3c7;
      color: #b45309;
    }

    .svg-container {
      width: 100%;
      max-width: 540px;
      margin: auto 0;
    }

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

    /* Jump arcs */
    .jump-arc {
      fill: none;
      stroke: #f59e0b;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      transition: stroke-dashoffset 0.6s ease;
    }

    .jump-arc.visible {
      stroke-dashoffset: 0;
    }

    .arrow-head {
      fill: #f59e0b;
      opacity: 0;
      transition: opacity 0.3s ease 0.4s;
    }

    .arrow-head.visible {
      opacity: 1;
    }

    /* Badges & text */
    .jump-badge {
      opacity: 0;
      transition: opacity 0.4s ease 0.2s;
    }

    .jump-badge.visible {
      opacity: 1;
    }

    .point-dot {
      fill: #ffffff;
      stroke: #1e293b;
      stroke-width: 3;
      transition: fill 0.3s ease, stroke 0.3s ease, r 0.3s ease;
    }

    .point-dot.active {
      fill: #f59e0b;
      stroke: #d97706;
      r: 8;
    }

    .point-label {
      font-size: 18px;
      font-weight: 700;
      fill: #64748b;
      text-anchor: middle;
      transition: fill 0.3s ease, font-size 0.3s ease;
    }

    .point-label.active {
      fill: #1e293b;
      font-size: 20px;
    }

    .point-label.final {
      fill: #d97706;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
      max-width: 500px;
    }

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e293b;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    .btn-play {
      border-color: #f59e0b;
      color: #b45309;
      background: #fffbeb;
    }

    .btn-play:hover {
      background: #fef3c7;
    }
  </style>
</head>
<body>

  
  <div class="header-box">
    <span class="pill">34</span>
    <span>+</span>
    <span class="pill">20</span>
    <span>=</span>
    <span class="pill target" id="ansBox">54</span>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 540 180" aria-label="Empty Number Line showing 34 + 10 + 10 = 54">
      
      <line x1="30" y1="130" x2="510" y2="130" stroke="#94a3b8" stroke-width="4" stroke-linecap="round" />
      
      
      <polygon points="25,130 35,124 35,136" fill="#94a3b8" />
      <polygon points="515,130 505,124 505,136" fill="#94a3b8" />

      
      <path id="arc1" class="jump-arc" d="M 100 130 Q 200 20 300 130" />
      <polygon id="arrow1" class="arrow-head" points="296,122 304,130 293,134" />

      
      <g id="badge1" class="jump-badge">
        <rect x="168" y="32" width="64" height="28" rx="14" fill="#fef3c7" stroke="#f59e0b" stroke-width="1.5" />
        <text x="200" y="51" text-anchor="middle" fill="#b45309" font-size="14" font-weight="700">+10</text>
      </g>

      
      <path id="arc2" class="jump-arc" d="M 300 130 Q 400 20 500 130" />
      <polygon id="arrow2" class="arrow-head" points="496,122 504,130 493,134" />

      
      <g id="badge2" class="jump-badge">
        <rect x="368" y="32" width="64" height="28" rx="14" fill="#fef3c7" stroke="#f59e0b" stroke-width="1.5" />
        <text x="400" y="51" text-anchor="middle" fill="#b45309" font-size="14" font-weight="700">+10</text>
      </g>

      
      <line x1="100" y1="120" x2="100" y2="140" stroke="#1e293b" stroke-width="3" />
      <circle id="dot1" class="point-dot active" cx="100" cy="130" r="6" />
      <text id="lbl1" class="point-label active" x="100" y="165">34</text>

      
      <line x1="300" y1="120" x2="300" y2="140" stroke="#cbd5e1" stroke-width="3" />
      <circle id="dot2" class="point-dot" cx="300" cy="130" r="5" />
      <text id="lbl2" class="point-label" x="300" y="165">44</text>

      
      <line x1="500" y1="120" x2="500" y2="140" stroke="#cbd5e1" stroke-width="3" />
      <circle id="dot3" class="point-dot" cx="500" cy="130" r="5" />
      <text id="lbl3" class="point-label" x="500" y="165">54</text>
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn active" id="btn0" onclick="setStep(0)">Start: 34</button>
    <button class="btn" id="btn1" onclick="setStep(1)">+10 → 44</button>
    <button class="btn" id="btn2" onclick="setStep(2)">+10 → 54</button>
    <button class="btn btn-play" id="playBtn" onclick="togglePlay()">▶ Play</button>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;

    const arc1 = document.getElementById('arc1');
    const arrow1 = document.getElementById('arrow1');
    const badge1 = document.getElementById('badge1');
    const dot2 = document.getElementById('dot2');
    const lbl2 = document.getElementById('lbl2');

    const arc2 = document.getElementById('arc2');
    const arrow2 = document.getElementById('arrow2');
    const badge2 = document.getElementById('badge2');
    const dot3 = document.getElementById('dot3');
    const lbl3 = document.getElementById('lbl3');

    const ansBox = document.getElementById('ansBox');

    const buttons = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2')
    ];

    function setStep(step) {
      currentStep = step;

      // Update button styles
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Step 0: Start at 34
      if (step === 0) {
        arc1.classList.remove('visible');
        arrow1.classList.remove('visible');
        badge1.classList.remove('visible');
        dot2.classList.remove('active');
        lbl2.classList.remove('active');

        arc2.classList.remove('visible');
        arrow2.classList.remove('visible');
        badge2.classList.remove('visible');
        dot3.classList.remove('active');
        lbl3.classList.remove('active', 'final');

        ansBox.textContent = '?';
      }

      // Step 1: Jump +10 to 44
      else if (step === 1) {
        arc1.classList.add('visible');
        arrow1.classList.add('visible');
        badge1.classList.add('visible');
        dot2.classList.add('active');
        lbl2.classList.add('active');

        arc2.classList.remove('visible');
        arrow2.classList.remove('visible');
        badge2.classList.remove('visible');
        dot3.classList.remove('active');
        lbl3.classList.remove('active', 'final');

        ansBox.textContent = '44';
      }

      // Step 2: Jump +10 to 54
      else if (step === 2) {
        arc1.classList.add('visible');
        arrow1.classList.add('visible');
        badge1.classList.add('visible');
        dot2.classList.add('active');
        lbl2.classList.add('active');

        arc2.classList.add('visible');
        arrow2.classList.add('visible');
        badge2.classList.add('visible');
        dot3.classList.add('active');
        lbl3.classList.add('active', 'final');

        ansBox.textContent = '54';
      }
    }

    function togglePlay() {
      const playBtn = document.getElementById('playBtn');
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Play';
      } else {
        playBtn.textContent = '⏸ Pause';
        timer = setInterval(() => {
          const next = (currentStep + 1) % 3;
          setStep(next);
        }, 1800);
      }
    }

    // Initialize resting state
    setStep(0);
  </script>
</body>
</html>

What should you do when a number has both tens and ones?

Split the number you are adding into **tens** and **ones** so each step is super simple.

To solve $25 + 23$, break 23 into **2 tens** (20) and **3 ones** (3).

<!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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px 12px;
    user-select: none;
  }

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

  /* Equation display */
  .equation-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
  }

  .num-start { color: #1e2945; }
  .num-split {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .split-badge {
    display: flex;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
  }
  .tag-tens {
    color: #2563eb;
    background: #eff6ff;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .tag-ones {
    color: #8b5cf6;
    background: #f5f3ff;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .ans-box {
    color: #16a34a;
    transition: opacity 0.3s ease;
  }

  /* SVG Number line container */
  .svg-container {
    width: 100%;
    height: 170px;
    position: relative;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Line and ticks */
  .base-line {
    stroke: #94a3b8;
    stroke-width: 3;
    stroke-linecap: round;
  }
  .arrow-head {
    fill: #94a3b8;
  }

  /* Jump paths */
  .jump-arc {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease, opacity 0.3s ease;
  }
  .arc-tens { stroke: #2563eb; }
  .arc-ones { stroke: #8b5cf6; }

  /* Jump badges / labels */
  .jump-label {
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .label-tens { fill: #2563eb; }
  .label-ones { fill: #8b5cf6; }

  /* Ticks and values */
  .tick-line {
    stroke: #475569;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: opacity 0.3s ease;
  }
  .point-val {
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    fill: #1e2945;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .point-val.res { fill: #16a34a; font-size: 20px; }

  .point-dot {
    transition: opacity 0.3s ease, r 0.3s ease;
  }

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

  .step-btn {
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .step-btn.active {
    background: #1e2945;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(30,41,69,0.25);
  }

  .play-btn {
    border: none;
    background: #eff6ff;
    color: #2563eb;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(37,99,235,0.2);
    transition: background 0.2s ease;
  }
  .play-btn:hover {
    background: #dbeafe;
  }
</style>
</head>
<body>

<div class="diagram-box">
  
  <div class="equation-wrap">
    <span class="num-start">25</span>
    <span>+</span>
    <div class="num-split">
      <span>23</span>
      <div class="split-badge">
        <span class="tag-tens">+20</span>
        <span class="tag-ones">+3</span>
      </div>
    </div>
    <span>=</span>
    <span class="ans-box" id="ansVal">?</span>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 500 150">
      <defs>
        
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb" />
        </marker>
        <marker id="arrow-purple" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#8b5cf6" />
        </marker>
      </defs>

      
      <line x1="30" y1="105" x2="470" y2="105" class="base-line" />
      <polygon points="475,105 465,99 465,111" class="arrow-head" />
      <polygon points="25,105 35,99 35,111" class="arrow-head" />

      
      <g id="point25">
        <line x1="80" y1="95" x2="80" y2="115" class="tick-line" />
        <circle cx="80" cy="105" r="4.5" fill="#1e2945" />
        <text x="80" y="136" class="point-val">25</text>
      </g>

      
      <g id="jumpTens" opacity="0">
        <path d="M 80,95 Q 210,15 336,93" class="jump-arc arc-tens" marker-end="url(#arrow-blue)" />
        <text x="210" y="44" class="jump-label label-tens">+20</text>
        <line x1="340" y1="95" x2="340" y2="115" class="tick-line" />
        <circle cx="340" cy="105" r="4.5" fill="#2563eb" />
        <text x="340" y="136" class="point-val">45</text>
      </g>

      
      <g id="jumpOnes" opacity="0">
        <path d="M 340,95 Q 380,55 416,93" class="jump-arc arc-ones" marker-end="url(#arrow-purple)" />
        <text x="380" y="66" class="jump-label label-ones">+3</text>
        <line x1="420" y1="95" x2="420" y2="115" class="tick-line" stroke="#16a34a" />
        <circle cx="420" cy="105" r="5.5" fill="#16a34a" />
        <text x="420" y="137" class="point-val res">48</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" title="Play/Pause">⏸</button>
    <button class="step-btn active" data-step="0">1. Start 25</button>
    <button class="step-btn" data-step="1">2. Jump +20</button>
    <button class="step-btn" data-step="2">3. Hop +3</button>
  </div>
</div>

<script>
  const jumpTens = document.getElementById('jumpTens');
  const jumpOnes = document.getElementById('jumpOnes');
  const ansVal = document.getElementById('ansVal');
  const stepBtns = document.querySelectorAll('.step-btn');
  const playBtn = document.getElementById('playBtn');

  let currentStep = 0;
  let timer = null;
  let isPlaying = true;

  function renderStep(idx) {
    currentStep = idx;

    // Update buttons
    stepBtns.forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });

    // Update SVG elements with clean state transitions
    if (idx === 0) {
      jumpTens.style.opacity = '0';
      jumpOnes.style.opacity = '0';
      ansVal.textContent = '?';
      ansVal.style.color = '#94a3b8';
    } else if (idx === 1) {
      jumpTens.style.opacity = '1';
      jumpOnes.style.opacity = '0';
      ansVal.textContent = '?';
      ansVal.style.color = '#94a3b8';
    } else if (idx === 2) {
      jumpTens.style.opacity = '1';
      jumpOnes.style.opacity = '1';
      ansVal.textContent = '48';
      ansVal.style.color = '#16a34a';
    }
  }

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

  function startAutoplay() {
    stopAutoplay();
    isPlaying = true;
    playBtn.textContent = '⏸';
    timer = setInterval(nextStep, 3200);
  }

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

  playBtn.addEventListener('click', () => {
    if (isPlaying) {
      stopAutoplay();
    } else {
      nextStep();
      startAutoplay();
    }
  });

  stepBtns.forEach((btn) => {
    btn.addEventListener('click', () => {
      const step = parseInt(btn.getAttribute('data-step'), 10);
      renderStep(step);
      stopAutoplay();
    });
  });

  // Initialize
  renderStep(0);
  startAutoplay();
</script>

</body>
</html>

Which number should you write on the line first?

Always put the **bigger number** at the start of your line so you have fewer jumps to make.

For $4 + 52$, start at **52** and take 4 quick hops of 1 forward to land right on 56.

math

Using the Empty Number Line for Addition. Add numbers by jumping forward on an empty number line in jumps of tens and ones.

Using Number Lines and Mental Strategies for Addition - CfE First Level Maths

Models in Mind: Developing Mental Calculation on the Empty Number Line

Add 2-Digit Numbers by Breaking Apart into Tens and Ones

At Early/First Level transition (P1/P2 in CfE), concrete manipulatives (such as bead strings or tens/ones rods) should bridge directly into drawing open lines. Teachers should encourage children to verbalise their jottings ('I start at 35, leap 10 to 45, leap another 10 to 55, and hop 3 to 58') to build metacognition and number sense before introducing formal written algorithms.

Using the Empty Number Line for Addition

Big Jumps of Ten

Adding Tens and Ones