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 collecting stickers, and you finally fill up 99 spots in your sticker book. What happens when you get just **one more** sticker?

You get 100 stickers! That extra sticker turns your two-digit number into a brand new **three-digit number**.

<!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, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Place Value Header */
  .pv-table {
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 6px;
    margin-bottom: 8px;
  }
  .pv-col {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
    transition: all 0.3s ease;
  }
  .pv-col.h-col { border-color: #10b981; }
  .pv-col.t-col { border-color: #f59e0b; }
  .pv-col.o-col { border-color: #3b82f6; }

  .pv-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .h-col .pv-label { color: #059669; }
  .t-col .pv-label { color: #d97706; }
  .o-col .pv-label { color: #2563eb; }

  .pv-digit {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    color: #1e2945;
    transition: transform 0.25s ease, color 0.25s ease;
  }

  /* Stage Viewport */
  .stage-container {
    width: 100%;
    max-width: 380px;
    height: 180px;
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-view {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform: translateY(8px);
  }
  .step-view.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Base-10 Visuals */
  .rods-group {
    display: flex;
    gap: 3px;
    align-items: center;
  }
  .rod {
    width: 10px;
    height: 100px;
    background: #fbbf24;
    border: 1px solid #d97706;
    border-radius: 2px;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 9px, #d97706 9px, #d97706 10px);
  }
  .rod.new-rod {
    background-color: #6ee7b7;
    border-color: #059669;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 9px, #059669 9px, #059669 10px);
    animation: pulse 1s infinite alternate ease-in-out;
  }

  .units-grid {
    display: grid;
    grid-template-columns: repeat(2, 10px);
    grid-template-rows: repeat(5, 10px);
    gap: 3px;
  }
  .unit {
    width: 10px;
    height: 10px;
    background: #60a5fa;
    border: 1px solid #2563eb;
    border-radius: 2px;
  }
  .unit.add-unit {
    background: #34d399;
    border-color: #059669;
    box-shadow: 0 0 6px rgba(16,185,129,0.8);
    animation: pop 0.4s ease;
  }

  .flat-100 {
    width: 110px;
    height: 110px;
    background: #a7f3d0;
    border: 2px solid #059669;
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    padding: 1px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  }
  .flat-cell {
    background: #34d399;
    border-radius: 0.5px;
  }

  .plus-badge {
    font-size: 20px;
    font-weight: 800;
    color: #059669;
    background: #ecfdf5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a7f3d0;
  }

  /* Controls */
  .controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin-top: 8px;
  }
  .stepper-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
  }
  .step-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 2px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }
  .step-btn.active {
    background: #22b7ff;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
  }

  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .nav-btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .nav-btn:hover { background: #e5e7eb; }
  .play-toggle {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
  }

  @keyframes pop {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.04); }
  }
</style>
</head>
<body>

  
  <div class="pv-table">
    <div class="pv-col h-col">
      <div class="pv-label">H</div>
      <div class="pv-digit" id="dig-h">0</div>
    </div>
    <div class="pv-col t-col">
      <div class="pv-label">T</div>
      <div class="pv-digit" id="dig-t">9</div>
    </div>
    <div class="pv-col o-col">
      <div class="pv-label">O</div>
      <div class="pv-digit" id="dig-o">9</div>
    </div>
  </div>

  
  <div class="stage-container">
    
    <div class="step-view active" id="view-0">
      <div class="rods-group">
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
      </div>
      <div class="units-grid">
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div>
      </div>
    </div>

    
    <div class="step-view" id="view-1">
      <div class="rods-group">
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
      </div>
      <div class="plus-badge">+</div>
      <div class="units-grid">
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit"></div>
        <div class="unit"></div><div class="unit add-unit"></div>
      </div>
    </div>

    
    <div class="step-view" id="view-2">
      <div class="rods-group">
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod"></div><div class="rod"></div><div class="rod"></div>
        <div class="rod new-rod"></div>
      </div>
    </div>

    
    <div class="step-view" id="view-3">
      <div class="flat-100" id="hundredFlat"></div>
    </div>
  </div>

  
  <div class="controls">
    <div class="stepper-tabs">
      <button class="step-btn active" data-step="0">99</button>
      <button class="step-btn" data-step="1">+ 1</button>
      <button class="step-btn" data-step="2">10 Tens</button>
      <button class="step-btn" data-step="3">100</button>
    </div>

    <div class="nav-bar">
      <button class="nav-btn" id="prevBtn">← Back</button>
      <button class="play-toggle" id="playBtn">⏸ Pause</button>
      <button class="nav-btn" id="nextBtn">Next →</button>
    </div>
  </div>

<script>
  // Fill 100 flat cells
  const flat = document.getElementById('hundredFlat');
  for (let i = 0; i < 100; i++) {
    const c = document.createElement('div');
    c.className = 'flat-cell';
    flat.appendChild(c);
  }

  const digits = [
    { h: '0', t: '9', o: '9' },
    { h: '0', t: '9', o: '10' },
    { h: '0', t: '10', o: '0' },
    { h: '1', t: '0', o: '0' }
  ];

  const digH = document.getElementById('dig-h');
  const digT = document.getElementById('dig-t');
  const digO = document.getElementById('dig-o');
  const views = [0, 1, 2, 3].map(i => document.getElementById('view-' + i));
  const tabs = document.querySelectorAll('.step-btn');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  let current = 0;
  let playing = true;
  let timer = null;

  function render(idx) {
    current = (idx + 4) % 4;
    views.forEach((v, i) => v.classList.toggle('active', i === current));
    tabs.forEach((t, i) => t.classList.toggle('active', i === current));
    
    digH.textContent = digits[current].h;
    digT.textContent = digits[current].t;
    digO.textContent = digits[current].o;

    digH.style.color = current === 3 ? '#059669' : '#1e2945';
    digT.style.color = current === 2 ? '#d97706' : '#1e2945';
    digO.style.color = current === 1 ? '#2563eb' : '#1e2945';
  }

  function startTimer() {
    if (timer) clearInterval(timer);
    timer = setInterval(() => {
      render(current + 1);
    }, 3200);
  }

  function stopTimer() {
    if (timer) clearInterval(timer);
    timer = null;
  }

  tabs.forEach((tab, i) => {
    tab.addEventListener('click', () => {
      render(i);
      if (playing) startTimer();
    });
  });

  prevBtn.addEventListener('click', () => {
    render(current - 1);
    if (playing) startTimer();
  });

  nextBtn.addEventListener('click', () => {
    render(current + 1);
    if (playing) startTimer();
  });

  playBtn.addEventListener('click', () => {
    playing = !playing;
    playBtn.textContent = playing ? '⏸ Pause' : '▶ Play';
    if (playing) {
      startTimer();
    } else {
      stopTimer();
    }
  });

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

How do we build this big number using blocks we already know?

One tiny cube is worth **1 one**. When you stack 10 tiny cubes together, you get **1 ten** rod.

If you line up **ten tens** side by side, they snap together to form a big flat square called **one hundred**.

<!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>Ten Tens Make One Hundred</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    /* Top Badges / Readout */
    .header-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .badge {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }
    .badge.highlight {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.3);
    }

    /* Stage Container */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 250px;
      position: relative;
    }

    /* 10x10 Grid representation */
    .grid-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 220px;
      width: 100%;
      max-width: 320px;
      transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      gap: 8px; /* Separated rods */
    }

    .grid-container.snapped {
      gap: 0px; /* Snapped into 100 flat */
    }

    /* Individual 10-rod */
    .rod {
      display: flex;
      flex-direction: column;
      height: 220px;
      width: 22px;
      background: #ffffff;
      border: 1.5px solid #22b7ff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(34, 183, 255, 0.15);
      transition: transform 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
    }

    .grid-container.snapped .rod {
      border-radius: 0;
      border: 0.5px solid rgba(255, 255, 255, 0.7);
      box-shadow: none;
    }

    .grid-container.snapped .rod:first-child {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .grid-container.snapped .rod:last-child {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .grid-container.snapped {
      padding: 2px;
      background: #0284c7;
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(2, 132, 199, 0.25);
      width: 224px;
    }

    /* 10 unit blocks inside each rod */
    .unit {
      flex: 1;
      border-bottom: 1px solid rgba(34, 183, 255, 0.3);
      background: #e0f2fe;
    }
    .unit:last-child {
      border-bottom: none;
    }

    .grid-container.snapped .unit {
      background: #38bdf8;
      border-bottom: 0.5px solid rgba(255, 255, 255, 0.4);
    }

    /* Control Buttons */
    .controls {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }
    .btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div id="label-tens" class="badge highlight">10 Tens</div>
    <div style="font-size: 18px; font-weight: bold; color: #94a3b8;">=</div>
    <div id="label-hundred" class="badge">1 Hundred (100)</div>
  </div>

  <div class="stage">
    <div id="grid" class="grid-container">
      
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
      <div class="rod"><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div><div class="unit"></div></div>
    </div>
  </div>

  <div class="controls">
    <button id="btn-separate" class="btn active">10 Tens</button>
    <button id="btn-snap" class="btn">Snap into 100</button>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const labelTens = document.getElementById('label-tens');
    const labelHundred = document.getElementById('label-hundred');
    const btnSeparate = document.getElementById('btn-separate');
    const btnSnap = document.getElementById('btn-snap');

    let isSnapped = false;
    let autoTimer = null;

    function setSnapped(snap) {
      isSnapped = snap;
      if (snap) {
        grid.classList.add('snapped');
        labelTens.classList.remove('highlight');
        labelHundred.classList.add('highlight');
        btnSnap.classList.add('active');
        btnSeparate.classList.remove('active');
      } else {
        grid.classList.remove('snapped');
        labelTens.classList.add('highlight');
        labelHundred.classList.remove('highlight');
        btnSnap.classList.remove('active');
        btnSeparate.classList.add('active');
      }
    }

    function toggleState() {
      setSnapped(!isSnapped);
    }

    btnSeparate.addEventListener('click', () => {
      clearInterval(autoTimer);
      setSnapped(false);
    });

    btnSnap.addEventListener('click', () => {
      clearInterval(autoTimer);
      setSnapped(true);
    });

    grid.addEventListener('click', () => {
      clearInterval(autoTimer);
      toggleState();
    });

    // Slow auto-cycle for initial passive demonstration (every 3.5 seconds)
    autoTimer = setInterval(() => {
      toggleState();
    }, 3500);
  </script>
</body>
</html>

Now that we have this big hundred flat, how do we write numbers that are even bigger than 100?

Every **three-digit number** has three special places: the **hundreds** place on the left, the **tens** place in the middle, and the **ones** place on the right.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 8px;
      user-select: none;
    }
    
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .val-h { color: #3b82f6; }
    .val-t { color: #10b981; }
    .val-o { color: #f59e0b; }
    .val-total { color: #1e2945; font-size: 20px; }

    .places-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 540px;
      flex: 1;
    }

    .place-col {
      background: #ffffff;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border-top: 4px solid #ccc;
    }
    .place-col.col-h { border-top-color: #3b82f6; }
    .place-col.col-t { border-top-color: #10b981; }
    .place-col.col-o { border-top-color: #f59e0b; }

    .place-title {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }
    .col-h .place-title { color: #3b82f6; }
    .col-t .place-title { color: #10b981; }
    .col-o .place-title { color: #f59e0b; }

    .stepper {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }
    .step-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid #e5e7eb;
      background: #f8f9fa;
      color: #1e2945;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: background 0.15s, transform 0.1s;
    }
    .step-btn:active {
      background: #e5e7eb;
    }
    .digit-display {
      font-size: 22px;
      font-weight: 800;
      width: 22px;
      text-align: center;
    }

    .visual-area {
      flex: 1;
      width: 100%;
      min-height: 140px;
      background: #f8fafc;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      gap: 4px;
      overflow-y: auto;
    }

    /* Blocks */
    .block-hundred {
      width: 44px;
      height: 44px;
      background: #dbeafe;
      border: 1.5px solid #3b82f6;
      border-radius: 4px;
      background-image: 
        linear-gradient(to right, rgba(59, 130, 246, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(59, 130, 246, 0.4) 1px, transparent 1px);
      background-size: 4.4px 4.4px;
      box-shadow: 1px 1px 2px rgba(59, 130, 246, 0.2);
    }

    .block-ten {
      width: 10px;
      height: 44px;
      background: #d1fae5;
      border: 1.5px solid #10b981;
      border-radius: 3px;
      background-image: linear-gradient(to bottom, rgba(16, 185, 129, 0.5) 1px, transparent 1px);
      background-size: 10px 4.4px;
      box-shadow: 1px 1px 2px rgba(16, 185, 129, 0.2);
    }

    .block-one {
      width: 12px;
      height: 12px;
      background: #fef3c7;
      border: 1.5px solid #f59e0b;
      border-radius: 2px;
      box-shadow: 1px 1px 2px rgba(245, 158, 11, 0.2);
    }

    .preset-bar {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .preset-btn {
      padding: 4px 10px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.15s ease;
    }
    .preset-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="equation-bar">
    <span class="val-h" id="eq-h">200</span>
    <span>+</span>
    <span class="val-t" id="eq-t">40</span>
    <span>+</span>
    <span class="val-o" id="eq-o">3</span>
    <span>=</span>
    <span class="val-total" id="eq-total">243</span>
  </div>

  <div class="places-grid">
    
    <div class="place-col col-h">
      <div class="place-title">Hundreds</div>
      <div class="stepper">
        <button class="step-btn" id="h-minus">−</button>
        <span class="digit-display val-h" id="h-num">2</span>
        <button class="step-btn" id="h-plus">+</button>
      </div>
      <div class="visual-area" id="h-blocks"></div>
    </div>

    
    <div class="place-col col-t">
      <div class="place-title">Tens</div>
      <div class="stepper">
        <button class="step-btn" id="t-minus">−</button>
        <span class="digit-display val-t" id="t-num">4</span>
        <button class="step-btn" id="t-plus">+</button>
      </div>
      <div class="visual-area" id="t-blocks"></div>
    </div>

    
    <div class="place-col col-o">
      <div class="place-title">Ones</div>
      <div class="stepper">
        <button class="step-btn" id="o-minus">−</button>
        <span class="digit-display val-o" id="o-num">3</span>
        <button class="step-btn" id="o-plus">+</button>
      </div>
      <div class="visual-area" id="o-blocks"></div>
    </div>
  </div>

  <div class="preset-bar">
    <button class="preset-btn active" data-h="2" data-t="4" data-o="3">243</button>
    <button class="preset-btn" data-h="1" data-t="0" data-o="5">105</button>
    <button class="preset-btn" data-h="3" data-t="2" data-o="0">320</button>
    <button class="preset-btn" data-h="4" data-t="1" data-o="6">416</button>
  </div>

  <script>
    let state = { h: 2, t: 4, o: 3 };

    const hNum = document.getElementById('h-num');
    const tNum = document.getElementById('t-num');
    const oNum = document.getElementById('o-num');

    const eqH = document.getElementById('eq-h');
    const eqT = document.getElementById('eq-t');
    const eqO = document.getElementById('eq-o');
    const eqTotal = document.getElementById('eq-total');

    const hBlocks = document.getElementById('h-blocks');
    const tBlocks = document.getElementById('t-blocks');
    const oBlocks = document.getElementById('o-blocks');
    const presetBtns = document.querySelectorAll('.preset-btn');

    function update() {
      hNum.textContent = state.h;
      tNum.textContent = state.t;
      oNum.textContent = state.o;

      eqH.textContent = state.h * 100;
      eqT.textContent = state.t * 10;
      eqO.textContent = state.o;
      eqTotal.textContent = (state.h * 100) + (state.t * 10) + state.o;

      // Render Hundreds
      hBlocks.innerHTML = '';
      for (let i = 0; i < state.h; i++) {
        const el = document.createElement('div');
        el.className = 'block-hundred';
        hBlocks.appendChild(el);
      }

      // Render Tens
      tBlocks.innerHTML = '';
      for (let i = 0; i < state.t; i++) {
        const el = document.createElement('div');
        el.className = 'block-ten';
        tBlocks.appendChild(el);
      }

      // Render Ones
      oBlocks.innerHTML = '';
      for (let i = 0; i < state.o; i++) {
        const el = document.createElement('div');
        el.className = 'block-one';
        oBlocks.appendChild(el);
      }

      // Sync preset active state
      presetBtns.forEach(btn => {
        const bh = parseInt(btn.dataset.h, 10);
        const bt = parseInt(btn.dataset.t, 10);
        const bo = parseInt(btn.dataset.o, 10);
        if (bh === state.h && bt === state.t && bo === state.o) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    document.getElementById('h-minus').addEventListener('click', () => { if (state.h > 0) { state.h--; update(); } });
    document.getElementById('h-plus').addEventListener('click', () => { if (state.h < 9) { state.h++; update(); } });

    document.getElementById('t-minus').addEventListener('click', () => { if (state.t > 0) { state.t--; update(); } });
    document.getElementById('t-plus').addEventListener('click', () => { if (state.t < 9) { state.t++; update(); } });

    document.getElementById('o-minus').addEventListener('click', () => { if (state.o > 0) { state.o--; update(); } });
    document.getElementById('o-plus').addEventListener('click', () => { if (state.o < 9) { state.o++; update(); } });

    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        state.h = parseInt(btn.dataset.h, 10);
        state.t = parseInt(btn.dataset.t, 10);
        state.o = parseInt(btn.dataset.o, 10);
        update();
      });
    });

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

Let's read the number **243**. The 2 means 2 hundreds ($200$), the 4 means 4 tens ($40$), and the 3 means 3 ones ($3$).

Be careful: the digit **2** in 243 does not mean just 2 single cubes! Because it sits in the hundreds spot, it is worth **200**.

Next time you see a three-digit number like **135**, try picturing the blocks in your head: how many flats, rods, and cubes would you need?

math

Introducing Hundreds and Three-Digit Numbers. Understand that ten tens equal one hundred and explore place value in three-digit numbers.

Understanding Place Value: Hundreds, Tens and Ones (First Level / KS1 Maths)

Place Value: Hundreds, Tens, and Ones

Place Value and Grouping in Tens and Hundreds: Primary Tasks

Teaching this standard follows the Concrete-Pictorial-Abstract (CPA) pedagogical framework. Begin with tactile grouping (bundling 10 lolly sticks/straws into a bundle of 10, and bundling 10 tens into a group of 100, or using Dienes base-10 blocks). Move to pictorial representations (place value charts, 100-squares, ten-frames) before introducing abstract standard digits and expanded forms ($H + T + O$). Special pedagogical focus must be given to the role of zero as a placeholder through physical place value charts and arrow cards to eliminate concatenation errors.

Introducing Hundreds and Three-Digit Numbers

Making a Hundred

The Three-Digit House