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 are bringing snacks for 50 kids at school. You have 19 apple boxes and 28 orange boxes, but you do not have time to count every single juice box.

An **estimate** is a quick, smart guess that is close to the real answer without doing hard math.

Numbers that end in zero, like 10, 20, and 30, are called **friendly numbers** because they are easy to add in your head.

To make a tricky number friendly, we find the multiple of 10 that sits closest to it on a number line.

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

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

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

    .btn-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .num-btn {
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 600;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

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

    .slider-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 8px;
    }

    .slider-wrap span {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      accent-color: #22b7ff;
      cursor: pointer;
    }

    .svg-container {
      width: 100%;
      aspect-ratio: 600 / 220;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      overflow: visible;
    }

    .result-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 20px;
      background: #f0fdf4;
      border: 1px solid #86efac;
      border-radius: 24px;
      font-size: 18px;
      font-weight: 700;
      color: #166534;
      transition: all 0.2s ease;
    }

    .result-badge .approx {
      color: #15803d;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="btn-group">
      <button class="num-btn active" data-val="19">19</button>
      <button class="num-btn" data-val="28">28</button>
      <button class="num-btn" data-val="13">13</button>
      <button class="num-btn" data-val="24">24</button>
    </div>

    <svg class="svg-container" viewBox="0 0 600 220">
      
      <line x1="40" y1="160" x2="560" y2="160" stroke="#cbd5e1" stroke-width="4" stroke-linecap="round" />

      
      <path id="leftArc" fill="none" stroke="#94a3b8" stroke-width="3" stroke-dasharray="6,4" />
      <path id="rightArc" fill="none" stroke="#94a3b8" stroke-width="3" stroke-dasharray="6,4" />

      
      <text id="leftDistText" y="0" text-anchor="middle" font-size="13" font-weight="700" fill="#64748b"></text>
      <text id="rightDistText" y="0" text-anchor="middle" font-size="13" font-weight="700" fill="#64748b"></text>

      
      <g id="ticksLayer"></g>

      
      <g id="targetGroup" style="transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);">
        <line x1="0" y1="130" x2="0" y2="160" stroke="#22b7ff" stroke-width="3" stroke-dasharray="3,3" />
        <circle cx="0" cy="160" r="7" fill="#22b7ff" />
        <rect x="-18" y="98" width="36" height="28" rx="8" fill="#22b7ff" />
        <polygon points="-6,126 6,126 0,133" fill="#22b7ff" />
        <text id="targetLabel" x="0" y="117" fill="#ffffff" font-size="14" font-weight="800" text-anchor="middle" dominant-baseline="middle">19</text>
      </g>
    </svg>

    <div class="slider-wrap">
      <span>10</span>
      <input type="range" id="slider" min="10" max="30" value="19" step="1">
      <span>30</span>
    </div>

    <div class="result-badge">
      <span id="badgeCurrent">19</span>
      <span class="approx">≈</span>
      <span id="badgeTarget">20</span>
    </div>
  </div>

  <script>
    const MIN = 10;
    const MAX = 30;
    const X_START = 50;
    const X_END = 550;
    const Y_AXIS = 160;

    function getX(val) {
      return X_START + ((val - MIN) / (MAX - MIN)) * (X_END - X_START);
    }

    const ticksLayer = document.getElementById('ticksLayer');
    
    // Draw static ticks
    for (let i = MIN; i <= MAX; i++) {
      const x = getX(i);
      const isMultiple10 = i % 10 === 0;
      
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', x);
      line.setAttribute('y1', isMultiple10 ? Y_AXIS - 14 : Y_AXIS - 6);
      line.setAttribute('x2', x);
      line.setAttribute('y2', isMultiple10 ? Y_AXIS + 14 : Y_AXIS + 6);
      line.setAttribute('stroke', isMultiple10 ? '#0f172a' : '#94a3b8');
      line.setAttribute('stroke-width', isMultiple10 ? '3' : '1.5');
      line.setAttribute('stroke-linecap', 'round');
      ticksLayer.appendChild(line);

      if (isMultiple10) {
        // Outer glow/circle behind landmark
        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', x);
        circle.setAttribute('cy', Y_AXIS);
        circle.setAttribute('r', '5');
        circle.setAttribute('fill', '#0f172a');
        ticksLayer.appendChild(circle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', x);
        text.setAttribute('y', Y_AXIS + 34);
        text.setAttribute('font-size', '16');
        text.setAttribute('font-weight', '800');
        text.setAttribute('fill', '#0f172a');
        text.setAttribute('text-anchor', 'middle');
        text.textContent = i;
        ticksLayer.appendChild(text);
      }
    }

    const targetGroup = document.getElementById('targetGroup');
    const targetLabel = document.getElementById('targetLabel');
    const leftArc = document.getElementById('leftArc');
    const rightArc = document.getElementById('rightArc');
    const leftDistText = document.getElementById('leftDistText');
    const rightDistText = document.getElementById('rightDistText');
    const badgeCurrent = document.getElementById('badgeCurrent');
    const badgeTarget = document.getElementById('badgeTarget');
    const slider = document.getElementById('slider');
    const buttons = document.querySelectorAll('.num-btn');

    function update(val) {
      val = parseInt(val, 10);
      const xTarget = getX(val);
      targetGroup.setAttribute('transform', `translate(${xTarget}, 0)`);
      targetLabel.textContent = val;

      const lower10 = Math.floor(val / 10) * 10;
      const upper10 = Math.ceil(val / 10) * 10 === lower10 ? lower10 + 10 : Math.ceil(val / 10) * 10;

      const leftBase = Math.max(MIN, lower10);
      const rightBase = Math.min(MAX, upper10);

      const dLeft = val - leftBase;
      const dRight = rightBase - val;

      const xLeft = getX(leftBase);
      const xRight = getX(rightBase);

      const isClosestRight = dRight <= dLeft;
      const roundedVal = isClosestRight ? rightBase : leftBase;

      // Update Left Arc
      if (dLeft > 0) {
        const midXLeft = (xLeft + xTarget) / 2;
        const heightLeft = Math.min(50, 18 + dLeft * 4);
        const arcY = Y_AXIS - heightLeft;
        leftArc.setAttribute('d', `M ${xLeft} ${Y_AXIS - 8} Q ${midXLeft} ${Y_AXIS - heightLeft * 2} ${xTarget} ${Y_AXIS - 8}`);
        leftArc.setAttribute('stroke', !isClosestRight ? '#16a34a' : '#cbd5e1');
        leftArc.setAttribute('stroke-width', !isClosestRight ? '3.5' : '2');
        leftArc.setAttribute('stroke-dasharray', !isClosestRight ? 'none' : '5,4');

        leftDistText.setAttribute('x', midXLeft);
        leftDistText.setAttribute('y', Y_AXIS - heightLeft * 0.95);
        leftDistText.setAttribute('fill', !isClosestRight ? '#15803d' : '#94a3b8');
        leftDistText.textContent = `${dLeft} step${dLeft > 1 ? 's' : ''}`;
        leftDistText.style.display = 'block';
        leftArc.style.display = 'block';
      } else {
        leftArc.style.display = 'none';
        leftDistText.style.display = 'none';
      }

      // Update Right Arc
      if (dRight > 0) {
        const midXRight = (xTarget + xRight) / 2;
        const heightRight = Math.min(50, 18 + dRight * 4);
        rightArc.setAttribute('d', `M ${xTarget} ${Y_AXIS - 8} Q ${midXRight} ${Y_AXIS - heightRight * 2} ${xRight} ${Y_AXIS - 8}`);
        rightArc.setAttribute('stroke', isClosestRight ? '#16a34a' : '#cbd5e1');
        rightArc.setAttribute('stroke-width', isClosestRight ? '3.5' : '2');
        rightArc.setAttribute('stroke-dasharray', isClosestRight ? 'none' : '5,4');

        rightDistText.setAttribute('x', midXRight);
        rightDistText.setAttribute('y', Y_AXIS - heightRight * 0.95);
        rightDistText.setAttribute('fill', isClosestRight ? '#15803d' : '#94a3b8');
        rightDistText.textContent = `${dRight} step${dRight > 1 ? 's' : ''}`;
        rightDistText.style.display = 'block';
        rightArc.style.display = 'block';
      } else {
        rightArc.style.display = 'none';
        rightDistText.style.display = 'none';
      }

      badgeCurrent.textContent = val;
      badgeTarget.textContent = roundedVal;

      slider.value = val;

      buttons.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.val, 10) === val);
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => update(btn.dataset.val));
    });

    slider.addEventListener('input', (e) => update(e.target.value));

    // Initialize
    update(19);
  </script>
</body>
</html>

Because 19 is only 1 step away from 20, we round 19 up to 20. Since 28 is just 2 steps from 30, we round 28 up to 30.

What happens when we put these friendly numbers together in a story problem?

Let's solve the snack problem: Mia has 19 apple boxes and 28 orange boxes. About how many boxes does she have in total?

First, swap 19 for 20 and swap 28 for 30. Then, add your friendly numbers: $20 + 30 = 50$.

<!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 with 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;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .controls {
    display: flex;
    gap: 8px;
    background: #eef2f6;
    padding: 4px;
    border-radius: 999px;
  }
  .step-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .step-btn.active {
    background: #ffffff;
    color: #0f766e;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .stage-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    min-height: 250px;
    position: relative;
    overflow: hidden;
  }
  .math-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }
  .num-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 14px;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    font-size: 32px;
    font-weight: 700;
    color: #334155;
    transition: all 0.4s ease;
    position: relative;
  }
  .num-box.friendly {
    background: #ecfdf5;
    border-color: #10b981;
    color: #047857;
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.15);
  }
  .operator {
    font-size: 28px;
    font-weight: 700;
    color: #94a3b8;
  }
  .num-box.result {
    width: 96px;
    height: 86px;
    background: #f0fdf4;
    border-color: #059669;
    color: #059669;
  }
  .badge {
    position: absolute;
    top: -10px;
    background: #10b981;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.3s ease;
  }
  .badge.show {
    opacity: 1;
    transform: translateY(0);
  }
  .guide-track {
    width: 100%;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .guide-label {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    height: 20px;
    text-align: center;
  }
  .dots {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .dot.active {
    background: #10b981;
    width: 20px;
    border-radius: 4px;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="setStep(0)">1. Exact</button>
    <button class="step-btn" id="btn1" onclick="setStep(1)">2. Round</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">3. Estimate</button>
  </div>

  <div class="stage-card">
    <div class="math-row">
      <div class="num-box" id="boxA">
        <span class="badge" id="badgeA">ROUND</span>
        <span id="valA">19</span>
      </div>

      <div class="operator">+</div>

      <div class="num-box" id="boxB">
        <span class="badge" id="badgeB">ROUND</span>
        <span id="valB">28</span>
      </div>

      <div class="operator" id="eqSign" style="opacity:0; transition:0.3s;">=</div>

      <div class="num-box result" id="boxRes" style="opacity:0; transform: scale(0.9); transition:0.4s;">
        <span class="badge show" id="badgeRes">ABOUT</span>
        <span id="valRes">50</span>
      </div>
    </div>

    <div class="guide-track">
      <div class="guide-label" id="guideText">Exact problem</div>
      <div class="dots">
        <div class="dot active" onclick="setStep(0)"></div>
        <div class="dot" onclick="setStep(1)"></div>
        <div class="dot" onclick="setStep(2)"></div>
      </div>
    </div>
  </div>
</div>

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

  const stepsData = [
    {
      valA: '19',
      valB: '28',
      friendlyA: false,
      friendlyB: false,
      showResult: false,
      label: 'Exact problem'
    },
    {
      valA: '20',
      valB: '30',
      friendlyA: true,
      friendlyB: true,
      showResult: false,
      label: 'Swap for friendly numbers'
    },
    {
      valA: '20',
      valB: '30',
      friendlyA: true,
      friendlyB: true,
      showResult: true,
      label: '20 + 30 = 50 (Estimate)'
    }
  ];

  function updateView() {
    const data = stepsData[currentStep];

    // Buttons & Dots
    for (let i = 0; i < 3; i++) {
      document.getElementById(`btn${i}`).classList.toggle('active', i === currentStep);
      document.querySelectorAll('.dot')[i].classList.toggle('active', i === currentStep);
    }

    // Numbers & Boxes
    const boxA = document.getElementById('boxA');
    const boxB = document.getElementById('boxB');
    const valA = document.getElementById('valA');
    const valB = document.getElementById('valB');
    const badgeA = document.getElementById('badgeA');
    const badgeB = document.getElementById('badgeB');

    valA.textContent = data.valA;
    valB.textContent = data.valB;

    boxA.classList.toggle('friendly', data.friendlyA);
    boxB.classList.toggle('friendly', data.friendlyB);
    badgeA.classList.toggle('show', data.friendlyA);
    badgeB.classList.toggle('show', data.friendlyB);

    // Result Box & Equal Sign
    const eq = document.getElementById('eqSign');
    const res = document.getElementById('boxRes');

    if (data.showResult) {
      eq.style.opacity = '1';
      res.style.opacity = '1';
      res.style.transform = 'scale(1)';
    } else {
      eq.style.opacity = '0';
      res.style.opacity = '0';
      res.style.transform = 'scale(0.9)';
    }

    document.getElementById('guideText').textContent = data.label;
  }

  function setStep(index) {
    currentStep = index;
    updateView();
    resetAutoPlay();
  }

  function nextStep() {
    currentStep = (currentStep + 1) % stepsData.length;
    updateView();
  }

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

  updateView();
  resetAutoPlay();
</script>
</body>
</html>

Mia has **about 50** boxes, which means she has enough snacks for the whole class!

What if a story asks you to take things away instead?

Sam collects 39 toy cars. He gives 11 toy cars to his little brother. About how many toy cars does Sam have left?

We turn 39 into the friendly number 40, and we turn 11 into the friendly number 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 with 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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Controls / Stepper Header */
    .stepper {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 2px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Stage Area */
    .stage {
      position: relative;
      height: 240px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    /* Step Panels */
    .step-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .step-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Math Cards */
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .num-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 28px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      min-width: 72px;
      transition: all 0.3s ease;
    }
    .num-card.friendly {
      background: #e0f6ff;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.2);
    }
    .symbol {
      font-size: 26px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Number Line Mini Visualizer */
    .rounding-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 440px;
    }
    .round-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .round-track {
      width: 100%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      position: relative;
      margin: 14px 0 6px;
    }
    .track-bound {
      position: absolute;
      top: -18px;
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
    }
    .track-bound.left { left: 0; }
    .track-bound.right { right: 0; }
    .track-bound.target { color: #0284c7; font-weight: 700; }

    .track-dot {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
      transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .arrow-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 700;
    }
    .arrow-badge span.to {
      color: #0284c7;
    }

    /* Result Tag */
    .approx-tag {
      margin-top: 14px;
      background: #f0fdf4;
      border: 1px solid #86efac;
      color: #166534;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Footer Player Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }
    .btn-nav {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .btn-nav:hover {
      background: #f1f5f9;
    }
    .play-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: #22b7ff;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.4);
    }
  </style>
</head>
<body>
  <div class="container">
    
    <div class="stepper">
      <button class="step-btn active" onclick="goToStep(0)">1. Exact Problem</button>
      <button class="step-btn" onclick="goToStep(1)">2. Round Numbers</button>
      <button class="step-btn" onclick="goToStep(2)">3. Easy Estimate</button>
    </div>

    
    <div class="stage">
      
      <div class="step-panel active" id="panel-0">
        <div class="math-row">
          <div class="num-card">39</div>
          <div class="symbol">−</div>
          <div class="num-card">11</div>
          <div class="symbol">=</div>
          <div class="num-card" style="color:#94a3b8;">?</div>
        </div>
      </div>

      
      <div class="step-panel" id="panel-1">
        <div class="rounding-grid">
          
          <div class="round-card">
            <div class="arrow-badge">39 <span style="color:#94a3b8">→</span> <span class="to">40</span></div>
            <div class="round-track">
              <span class="track-bound left">30</span>
              <span class="track-bound right target">40</span>
              <div class="track-dot" id="dot-39" style="left: 90%;"></div>
            </div>
          </div>
          
          <div class="round-card">
            <div class="arrow-badge">11 <span style="color:#94a3b8">→</span> <span class="to">10</span></div>
            <div class="round-track">
              <span class="track-bound left target">10</span>
              <span class="track-bound right">20</span>
              <div class="track-dot" id="dot-11" style="left: 10%;"></div>
            </div>
          </div>
        </div>
      </div>

      
      <div class="step-panel" id="panel-2">
        <div class="math-row">
          <div class="num-card friendly">40</div>
          <div class="symbol">−</div>
          <div class="num-card friendly">10</div>
          <div class="symbol">=</div>
          <div class="num-card friendly" style="background:#22b7ff; color:#fff; border-color:#22b7ff;">30</div>
        </div>
        <div class="approx-tag">
          <span>≈ About 30 cars</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-nav" onclick="prevStep()">← Back</button>
      <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
      <button class="btn-nav" onclick="nextStep()">Next →</button>
    </div>
  </div>

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

    const stepBtns = document.querySelectorAll('.step-btn');
    const panels = document.querySelectorAll('.step-panel');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });
      panels.forEach((p, idx) => {
        p.classList.toggle('active', idx === currentStep);
      });

      // Animate dots slightly on entering step 1
      if (currentStep === 1) {
        const dot39 = document.getElementById('dot-39');
        const dot11 = document.getElementById('dot-11');
        dot39.style.left = '90%';
        dot11.style.left = '10%';
        setTimeout(() => {
          dot39.style.left = '100%';
          dot11.style.left = '0%';
        }, 300);
      }
    }

    function goToStep(idx) {
      currentStep = idx;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      updateView();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      updateView();
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(() => {
        nextStep();
      }, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    function togglePlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    }

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

Now subtract the friendly numbers: $40 - 10 = 30$. Sam has **about 30** cars left.

A common mistake is trying to find the exact count first. Remember, whenever a problem asks **about how many**, you change to friendly numbers right away to make math quick and easy!

math

Estimating Answers to Word Problems. Round values in word problems to one significant figure or friendly numbers to estimate outcomes before calculating.

Rounding and Estimating - Third Level CfE Mathematics and Numeracy

Significant Figures and Applied Estimation in Calculations

Estimate to Solve Word Problems Using Rounding and Compatible Numbers

Effective instruction for applied estimation under Curriculum for Excellence (MNU 3-01a & MNU 3-03a) emphasises developing number sense and strategic thinking over rote algorithmic rounding. Teachers should prompt students to construct an estimate *prior* to using calculators or detailed written algorithms. Discussion should explore boundary contexts—such as safety limits or budgeting—where rounding up is mandatory regardless of traditional rounding conventions.

Estimating Answers to Word Problems

Friendly Numbers

Estimating in Addition