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 19 blue marbles in one hand and 11 red marbles in the other. How can you tell your friend about how many you have in all without counting every single one?

You can make a quick guess using **friendly numbers**. Friendly numbers are tens like 10, 20, and 30 that end in zero and are super easy to add in your head!

<!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>Estimating Sums with Friendly Numbers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

    /* Tab switcher */
    .tabs {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 10px;
      width: 100%;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 600;
      background: transparent;
      border: none;
      border-radius: 8px;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      text-align: center;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    /* Transformation Stage */
    .stage {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    .row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .num-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 18px;
      font-size: 26px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      min-width: 76px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .num-card.tricky {
      border: 2px dashed #cbd5e1;
      color: #64748b;
    }

    .num-card.friendly {
      border: 2px solid #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
    }

    .zero {
      color: #22b7ff;
      font-weight: 800;
    }

    .sym {
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Arrows */
    .arrows-row {
      display: flex;
      justify-content: space-around;
      width: 100%;
      max-width: 280px;
      padding: 0 10px;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #22b7ff;
      font-size: 18px;
      font-weight: 700;
    }

    /* Result Box */
    .result-panel {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
    }

    .result-item {
      text-align: center;
    }

    .result-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .result-val {
      font-size: 22px;
      font-weight: 800;
    }

    .result-val.est {
      color: #0284c7;
    }

    .result-val.act {
      color: #475569;
    }

    .divider {
      width: 1px;
      height: 36px;
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="main">
    
    <div class="tabs">
      <button class="tab-btn active" onclick="setPair(0)">19 + 31</button>
      <button class="tab-btn" onclick="setPair(1)">28 + 42</button>
      <button class="tab-btn" onclick="setPair(2)">11 + 59</button>
    </div>

    
    <div class="stage">
      
      <div class="row">
        <div class="num-card tricky" id="t1">19</div>
        <div class="sym">+</div>
        <div class="num-card tricky" id="t2">31</div>
      </div>

      
      <div class="arrows-row">
        <div class="arrow-col">↓</div>
        <div class="arrow-col">↓</div>
      </div>

      
      <div class="row">
        <div class="num-card friendly" id="f1">2<span class="zero">0</span></div>
        <div class="sym">+</div>
        <div class="num-card friendly" id="f2">3<span class="zero">0</span></div>
      </div>
    </div>

    
    <div class="result-panel">
      <div class="result-item">
        <div class="result-label">Friendly Estimate</div>
        <div class="result-val est" id="estSum">50</div>
      </div>
      <div class="divider"></div>
      <div class="result-item">
        <div class="result-label">Exact Sum</div>
        <div class="result-val act" id="actSum">50</div>
      </div>
    </div>
  </div>

  <script>
    const data = [
      { t1: 19, t2: 31, f1: '2<span class="zero">0</span>', f2: '3<span class="zero">0</span>', est: 50, act: 50 },
      { t1: 28, t2: 42, f1: '3<span class="zero">0</span>', f2: '4<span class="zero">0</span>', est: 70, act: 70 },
      { t1: 11, t2: 59, f1: '1<span class="zero">0</span>', f2: '6<span class="zero">0</span>', est: 70, act: 70 }
    ];

    function setPair(idx) {
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === idx);
      });

      const d = data[idx];
      document.getElementById('t1').textContent = d.t1;
      document.getElementById('t2').textContent = d.t2;
      document.getElementById('f1').innerHTML = d.f1;
      document.getElementById('f2').innerHTML = d.f2;
      document.getElementById('estSum').textContent = d.est;
      document.getElementById('actSum').textContent = d.act;
    }
  </script>
</body>
</html>

How do we turn tricky numbers like 19 or 11 into easy friendly tens?

Look at a number line between 10 and 20. The number 19 is just one hop away from 20, so its closest friendly ten is 20!

<!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>Estimating Sums - Friendly Numbers</title>
<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;
    user-select: none;
    -webkit-user-select: none;
  }

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

  .number-line-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    padding: 24px 16px 16px;
    position: relative;
  }

  svg {
    width: 100%;
    height: 160px;
    overflow: visible;
  }

  .axis-line {
    stroke: #cbd5e1;
    stroke-width: 4;
    stroke-linecap: round;
  }

  .tick {
    stroke: #94a3b8;
    stroke-width: 2;
  }

  .tick-friendly {
    stroke: #10b981;
    stroke-width: 4;
  }

  .label {
    font-size: 15px;
    font-weight: 600;
    fill: #64748b;
    text-anchor: middle;
    dominant-baseline: hanging;
  }

  .label-friendly {
    font-size: 18px;
    font-weight: 800;
    fill: #059669;
  }

  .arc-path {
    fill: none;
    stroke-dasharray: 6 4;
    stroke-width: 2.5;
    transition: all 0.35s ease;
  }

  .arc-longer {
    stroke: #cbd5e1;
  }

  .arc-winner {
    stroke: #10b981;
    stroke-dasharray: none;
    stroke-width: 3.5;
  }

  .hop-badge {
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    transition: all 0.35s ease;
  }

  .hop-badge-winner {
    fill: #059669;
  }

  .hop-badge-longer {
    fill: #94a3b8;
  }

  .number-selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }

  .num-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .num-btn:active {
    transform: scale(0.95);
  }

  .num-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.35);
  }

  .result-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #f0fdf4;
    border: 2px solid #bbf7d0;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 800;
    font-size: 18px;
    color: #166534;
  }

  .result-banner span.highlight {
    color: #22b7ff;
    font-size: 22px;
  }

  .result-banner span.target {
    color: #10b981;
    font-size: 24px;
  }

  .result-banner .arrow {
    color: #94a3b8;
    font-weight: 400;
  }
</style>
</head>
<body>

<div class="main-stage">
  <div class="number-line-box">
    <svg id="nlSvg" viewBox="0 0 500 160">
      
      <line x1="30" y1="120" x2="470" y2="120" class="axis-line" />

      
      <g id="arcsLayer"></g>
      <g id="ticksLayer"></g>
      <g id="currentPin"></g>
    </svg>
  </div>

  
  <div class="number-selector" id="btnGroup">
    <button class="num-btn" data-val="11">11</button>
    <button class="num-btn" data-val="12">12</button>
    <button class="num-btn" data-val="13">13</button>
    <button class="num-btn" data-val="14">14</button>
    <button class="num-btn" data-val="15">15</button>
    <button class="num-btn" data-val="16">16</button>
    <button class="num-btn" data-val="17">17</button>
    <button class="num-btn" data-val="18">18</button>
    <button class="num-btn active" data-val="19">19</button>
  </div>

  
  <div class="result-banner">
    <span class="highlight" id="resCur">19</span>
    <span class="arrow">→</span>
    <span class="target" id="resTarget">20</span>
    <span style="font-size:14px; font-weight:600; color:#15803d; margin-left:4px;" id="resHops">(1 hop)</span>
  </div>
</div>

<script>
  const svg = document.getElementById('nlSvg');
  const arcsLayer = document.getElementById('arcsLayer');
  const ticksLayer = document.getElementById('ticksLayer');
  const currentPin = document.getElementById('currentPin');
  const btnGroup = document.getElementById('btnGroup');
  const resCur = document.getElementById('resCur');
  const resTarget = document.getElementById('resTarget');
  const resHops = document.getElementById('resHops');

  const xMin = 45;
  const xMax = 455;
  const yAxis = 120;

  function getX(n) {
    return xMin + ((n - 10) / 10) * (xMax - xMin);
  }

  // Render static axis ticks
  function drawTicks() {
    let html = '';
    for (let i = 10; i <= 20; i++) {
      const x = getX(i);
      const isFriendly = (i === 10 || i === 20);
      const tickHeight = isFriendly ? 16 : 8;
      
      html += `
        <line x1="${x}" y1="${yAxis - tickHeight}" x2="${x}" y2="${yAxis + tickHeight}" 
              class="${isFriendly ? 'tick-friendly' : 'tick'}" />
        <text x="${x}" y="${yAxis + 14}" 
              class="label ${isFriendly ? 'label-friendly' : ''}">${i}</text>
      `;

      if (isFriendly) {
        html += `
          <circle cx="${x}" cy="${yAxis}" r="6" fill="#10b981" />
        `;
      }
    }
    ticksLayer.innerHTML = html;
  }

  function setNumber(val) {
    const curX = getX(val);
    const leftDist = val - 10;
    const rightDist = 20 - val;

    const leftWinner = leftDist < rightDist;
    const rightWinner = rightDist <= leftDist; // default 15 rounds to 20

    const targetTen = rightWinner ? 20 : 10;
    const minHops = rightWinner ? rightDist : leftDist;

    // Update banner
    resCur.textContent = val;
    resTarget.textContent = targetTen;
    resHops.textContent = `(${minHops} hop${minHops === 1 ? '' : 's'})`;

    // Draw Jump Arcs
    const x10 = getX(10);
    const x20 = getX(20);

    // Arch to 10
    const hLeft = Math.max(25, leftDist * 9);
    const midLeftX = (curX + x10) / 2;
    const pathLeft = `M ${curX} ${yAxis - 8} Q ${midLeftX} ${yAxis - 8 - hLeft} ${x10} ${yAxis - 8}`;

    // Arch to 20
    const hRight = Math.max(25, rightDist * 9);
    const midRightX = (curX + x20) / 2;
    const pathRight = `M ${curX} ${yAxis - 8} Q ${midRightX} ${yAxis - 8 - hRight} ${x20} ${yAxis - 8}`;

    let arcsHtml = `
      
      <path d="${pathLeft}" class="arc-path ${leftWinner ? 'arc-winner' : 'arc-longer'}" />
      <rect x="${midLeftX - 32}" y="${yAxis - 18 - hLeft}" width="64" height="20" rx="10" 
            fill="${leftWinner ? '#dcfce7' : '#f1f5f9'}" />
      <text x="${midLeftX}" y="${yAxis - 7 - hLeft}" 
            class="hop-badge ${leftWinner ? 'hop-badge-winner' : 'hop-badge-longer'}">
        ${leftDist} hop${leftDist === 1 ? '' : 's'}
      </text>

      
      <path d="${pathRight}" class="arc-path ${rightWinner ? 'arc-winner' : 'arc-longer'}" />
      <rect x="${midRightX - 32}" y="${yAxis - 18 - hRight}" width="64" height="20" rx="10" 
            fill="${rightWinner ? '#dcfce7' : '#f1f5f9'}" />
      <text x="${midRightX}" y="${yAxis - 7 - hRight}" 
            class="hop-badge ${rightWinner ? 'hop-badge-winner' : 'hop-badge-longer'}">
        ${rightDist} hop${rightDist === 1 ? '' : 's'}
      </text>
    `;
    arcsLayer.innerHTML = arcsHtml;

    // Draw active pin
    currentPin.innerHTML = `
      <circle cx="${curX}" cy="${yAxis}" r="9" fill="#22b7ff" stroke="#ffffff" stroke-width="2.5" />
    `;

    // Update buttons
    const buttons = btnGroup.querySelectorAll('.num-btn');
    buttons.forEach(btn => {
      if (parseInt(btn.dataset.val, 10) === val) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
  }

  // Initial draw
  drawTicks();
  setNumber(19);

  // Click handling
  btnGroup.addEventListener('click', (e) => {
    const btn = e.target.closest('.num-btn');
    if (!btn) return;
    const val = parseInt(btn.dataset.val, 10);
    setNumber(val);
  });
</script>

</body>
</html>

Now that we know how to find the closest ten, how do we put them together to add fast?

An **estimate** is a quick, close guess of the real answer. When you estimate, you swap hard numbers for friendly tens first.

Let's find the estimated sum of $19 + 11$. Swap 19 for 20, and swap 11 for 10.

<!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>Estimating Sums with Friendly Numbers</title>
<link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8fafc;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
  }
  .stage {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .board {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }
  .num-box {
    width: 80px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    transition: all 0.4s ease;
    position: relative;
  }
  .box-a {
    background: #e0f2fe;
    color: #0284c7;
    border: 2px solid #bae6fd;
  }
  .box-b {
    background: #ede9fe;
    color: #6366f1;
    border: 2px solid #ddd6fe;
  }
  .box-res {
    background: #dcfce7;
    color: #15803d;
    border: 2px solid #bbf7d0;
    width: 90px;
  }
  .op {
    font-size: 24px;
    font-weight: 700;
    color: #94a3b8;
  }
  .delta {
    font-size: 13px;
    font-weight: 600;
    margin-top: -2px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .show-delta .delta {
    opacity: 1;
  }
  .delta-up { color: #0284c7; }
  .delta-down { color: #6366f1; }

  .estimate-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 10px;
    background: #f1f5f9;
    font-size: 20px;
    font-weight: 700;
    color: #334155;
    transition: all 0.4s ease;
    min-height: 48px;
  }
  .estimate-bar.highlight {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .step-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .step-btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34,183,255,0.35);
  }
  .play-toggle {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
  }
</style>
</head>
<body>

<div class="stage">
  <div class="board">
    
    <div class="row" id="mathRow">
      <div class="num-box box-a" id="boxA">
        <span id="valA">19</span>
        <span class="delta delta-up" id="deltaA">+1 → 20</span>
      </div>
      <div class="op">+</div>
      <div class="num-box box-b" id="boxB">
        <span id="valB">11</span>
        <span class="delta delta-down" id="deltaB">-1 → 10</span>
      </div>
      <div class="op">=</div>
      <div class="num-box box-res" id="boxRes">
        <span id="valRes">?</span>
      </div>
    </div>

    
    <div class="estimate-bar" id="summary">
      19 + 11
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Exact</button>
    <button class="step-btn" onclick="setStep(1)">2. Friendly</button>
    <button class="step-btn" onclick="setStep(2)">3. Estimate</button>
    <button class="play-toggle" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
  </div>
</div>

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

  const valA = document.getElementById('valA');
  const valB = document.getElementById('valB');
  const valRes = document.getElementById('valRes');
  const deltaA = document.getElementById('deltaA');
  const deltaB = document.getElementById('deltaB');
  const boxA = document.getElementById('boxA');
  const boxB = document.getElementById('boxB');
  const summary = document.getElementById('summary');
  const btns = document.querySelectorAll('.step-btn');
  const playBtn = document.getElementById('playBtn');

  function render() {
    btns.forEach((b, i) => b.classList.toggle('active', i === currentStep));

    if (currentStep === 0) {
      valA.textContent = '19';
      valB.textContent = '11';
      valRes.textContent = '?';
      deltaA.style.opacity = '0';
      deltaB.style.opacity = '0';
      summary.textContent = '19 + 11';
      summary.classList.remove('highlight');
    } else if (currentStep === 1) {
      valA.textContent = '20';
      valB.textContent = '10';
      valRes.textContent = '?';
      deltaA.style.opacity = '1';
      deltaB.style.opacity = '1';
      summary.textContent = '20 + 10';
      summary.classList.remove('highlight');
    } else if (currentStep === 2) {
      valA.textContent = '20';
      valB.textContent = '10';
      valRes.textContent = '30';
      deltaA.style.opacity = '1';
      deltaB.style.opacity = '1';
      summary.textContent = '19 + 11 ≈ 30';
      summary.classList.add('highlight');
    }
  }

  function setStep(idx) {
    currentStep = idx;
    render();
  }

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

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

  function startLoop() {
    clearInterval(timer);
    timer = setInterval(nextStep, 3200);
  }

  render();
  startLoop();
</script>
</body>
</html>

Because $20 + 10 = 30$, we know that $19 + 11$ is about 30!

Remember, an **estimate** is not meant to be exact. It gives you a fast and smart answer that is very close to the real count.

What if you have bigger numbers like 28 and 21?

For $28 + 21$, 28 is very close to 30, and 21 is very close to 20.

<!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>Estimating Sums Using Friendly Numbers</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 6px;
    }
    .step-btn {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
    /* Cards Layout */
    .cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .num-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .val-exact {
      font-size: 24px;
      font-weight: 700;
      color: #64748b;
      transition: all 0.3s ease;
    }
    .arrow-icon {
      font-size: 16px;
      color: #94a3b8;
      transition: all 0.3s ease;
    }
    .val-friendly {
      font-size: 28px;
      font-weight: 800;
      color: #22b7ff;
      background: #f0f9ff;
      padding: 2px 14px;
      border-radius: 8px;
      border: 1px dashed #22b7ff;
      transition: all 0.3s ease;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .badge-plus { background: #dcfce7; color: #15803d; }
    .badge-minus { background: #fee2e2; color: #b91c1c; }

    /* Number line visual */
    .mini-line {
      width: 100%;
      height: 24px;
      position: relative;
      margin-top: 4px;
    }

    /* Sum Panel */
    .sum-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }
    .sum-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 600;
    }
    .sum-label {
      color: #64748b;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .sum-math {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
    }
    .sum-math.estimate {
      color: #0284c7;
    }
    .sum-math.exact {
      color: #64748b;
    }
    .diff-pill {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .highlight-glow {
      box-shadow: 0 0 0 2px #22b7ff;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    
    <div class="controls">
      <button class="step-btn active" id="btn-1" onclick="setStep(1)">1. Round</button>
      <button class="step-btn" id="btn-2" onclick="setStep(2)">2. Add Friendly</button>
      <button class="step-btn" id="btn-3" onclick="setStep(3)">3. Compare</button>
    </div>

    
    <div class="cards-row">
      
      <div class="num-card" id="card-left">
        <div class="val-exact" id="exact-1">28</div>
        <div class="arrow-icon">↓ <span class="badge badge-plus">+2</span></div>
        <div class="val-friendly" id="friend-1">30</div>
        <svg class="mini-line" viewBox="0 0 140 24">
          <line x1="10" y1="12" x2="130" y2="12" stroke="#e2e8f0" stroke-width="3" stroke-linecap="round" />
          <circle cx="20" cy="12" r="3" fill="#cbd5e1" />
          <circle cx="95" cy="12" r="4" fill="#64748b" />
          <circle cx="120" cy="12" r="5" fill="#22b7ff" />
          <path d="M 95 9 Q 107.5 2 120 9" fill="none" stroke="#22b7ff" stroke-width="2" stroke-dasharray="2,2" />
        </svg>
      </div>

      
      <div class="num-card" id="card-right">
        <div class="val-exact" id="exact-2">21</div>
        <div class="arrow-icon">↓ <span class="badge badge-minus">-1</span></div>
        <div class="val-friendly" id="friend-2">20</div>
        <svg class="mini-line" viewBox="0 0 140 24">
          <line x1="10" y1="12" x2="130" y2="12" stroke="#e2e8f0" stroke-width="3" stroke-linecap="round" />
          <circle cx="20" cy="12" r="5" fill="#22b7ff" />
          <circle cx="45" cy="12" r="4" fill="#64748b" />
          <circle cx="120" cy="12" r="3" fill="#cbd5e1" />
          <path d="M 45 9 Q 32.5 2 20 9" fill="none" stroke="#22b7ff" stroke-width="2" stroke-dasharray="2,2" />
        </svg>
      </div>
    </div>

    
    <div class="sum-panel" id="sum-panel">
      
      <div class="sum-row" id="row-friendly">
        <span class="sum-label">Estimate</span>
        <span class="sum-math estimate">30 + 20 = 50</span>
      </div>
      <div style="height: 1px; background: #f1f5f9; width: 100%;"></div>
      
      <div class="sum-row" id="row-exact">
        <span class="sum-label">Exact</span>
        <div style="display:flex; align-items:center; gap:8px;">
          <span class="sum-math exact">28 + 21 = 49</span>
          <span class="diff-pill" id="diff-tag">Diff: 1</span>
        </div>
      </div>
    </div>
  </div>

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

    function setStep(step) {
      currentStep = step;
      document.querySelectorAll('.step-btn').forEach((b, i) => {
        b.classList.toggle('active', i + 1 === step);
      });

      const f1 = document.getElementById('friend-1');
      const f2 = document.getElementById('friend-2');
      const rowF = document.getElementById('row-friendly');
      const rowE = document.getElementById('row-exact');
      const diff = document.getElementById('diff-tag');

      if (step === 1) {
        f1.style.opacity = '1';
        f2.style.opacity = '1';
        rowF.style.opacity = '0.4';
        rowE.style.opacity = '0.4';
        diff.style.opacity = '0';
      } else if (step === 2) {
        f1.style.opacity = '1';
        f2.style.opacity = '1';
        rowF.style.opacity = '1';
        rowE.style.opacity = '0.4';
        diff.style.opacity = '0';
      } else if (step === 3) {
        f1.style.opacity = '1';
        f2.style.opacity = '1';
        rowF.style.opacity = '1';
        rowE.style.opacity = '1';
        diff.style.opacity = '1';
      }
    }

    function autoPlay() {
      autoTimer = setInterval(() => {
        let next = currentStep >= 3 ? 1 : currentStep + 1;
        setStep(next);
      }, 3500);
    }

    setStep(1);
    autoPlay();

    document.querySelectorAll('.step-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        clearInterval(autoTimer);
      });
    });
  </script>
</body>
</html>

Adding $30 + 20$ gives us 50, which is just one away from the exact answer of 49!

Under Curriculum for Excellence ($MNU	ext{ }1	ext{-}01a$), estimating serves as a handy **checking tool**.

You can calculate the actual sum and compare it to your estimate to check whether your answer is **reasonable**.

Under Curriculum for Excellence ($MNU\text{ }1\text{-}01a$), estimating serves as a great **checking tool**.

After you calculate the actual sum, compare it to your estimate to check whether your answer is **reasonable**.

math

Estimating Sums Using Friendly Numbers. Estimate addition totals by replacing addends with nearby tens.

Estimating and Rounding - First Level Maths (CfE MNU 1-01a)

Estimate Addition Problems Using Friendly Numbers

Estimate Sums by Rounding to the Nearest Ten

When introducing computational estimation to young learners transitioning from concrete Early Level numeracy into First Level CfE concepts ($MNU\text{ }1\text{-}01a$), anchor the strategy in physical and visual representations like structured bead strings and labelled 0–100 number lines. Emphasise math talk: prompt pupils to explain *why* a number is friendly (e.g., 'adding tens is easy because we only change the tens place') and celebrate close estimates rather than perfection.

Estimating Sums Using Friendly Numbers

Finding the Closest Ten

Estimating the Total