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 looking across a giant stadium packed with 35,000 cheering fans! How do we know what each digit in that huge number really means?

Every digit has a **place value**, which tells us how much that digit is worth based on where it sits.

How do we keep track of where each digit belongs?

A **place value chart** organizes numbers into columns. Moving one spot to the left always makes the value ten times larger.

<!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>Place Value Chart</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: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .chart-container {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Arrow curve row */
  .arrows-row {
    position: relative;
    width: 100%;
    height: 38px;
  }

  .arrows-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Grid of 5 columns */
  .columns-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
  }

  .col-card {
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .col-card.active {
    border-color: #22b7ff;
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    background: #f0f9ff;
    transform: translateY(-2px);
  }

  .col-abbr {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.5px;
  }

  .col-card.active .col-abbr {
    color: #0284c7;
  }

  .col-name {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    margin-top: 2px;
    line-height: 1.1;
  }

  .col-card.active .col-name {
    color: #0369a1;
  }

  .col-val {
    font-size: 15px;
    font-weight: 800;
    color: #1e2945;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
  }

  .col-card.active .col-val {
    color: #0284c7;
  }

  .token-box {
    margin-top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    font-weight: 700;
    font-size: 14px;
    color: #cbd5e1;
    transition: all 0.25s ease;
  }

  .col-card.active .token-box {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.4);
  }

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

  .nav-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #1e2945;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .nav-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
  }

  .nav-btn:active {
    background: #e5e7eb;
  }

  .nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .multiplier-tag {
    font-weight: 800;
    font-size: 14px;
    color: #0284c7;
    background: #e0f2fe;
    padding: 4px 10px;
    border-radius: 20px;
  }

  @media (max-width: 400px) {
    .col-name { font-size: 9px; }
    .col-abbr { font-size: 11px; }
    .col-val { font-size: 12px; }
    .token-box { width: 22px; height: 22px; font-size: 12px; }
    .nav-btn { padding: 6px 10px; font-size: 13px; }
  }
</style>
</head>
<body>

<div class="chart-container">
  
  <div class="arrows-row">
    <svg class="arrows-svg" viewBox="0 0 500 38" preserveAspectRatio="none">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 10 0 L 0 5 L 10 10 z" fill="#0284c7"/>
        </marker>
      </defs>
      
      
      <path d="M 440,24 Q 400,2 360,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" marker-end="url(#arrow)" />
      <text x="400" y="11" font-size="11" font-weight="700" fill="#0284c7" text-anchor="middle">×10</text>

      
      <path d="M 340,24 Q 300,2 260,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" marker-end="url(#arrow)" />
      <text x="300" y="11" font-size="11" font-weight="700" fill="#0284c7" text-anchor="middle">×10</text>

      
      <path d="M 240,24 Q 200,2 160,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" marker-end="url(#arrow)" />
      <text x="200" y="11" font-size="11" font-weight="700" fill="#0284c7" text-anchor="middle">×10</text>

      
      <path d="M 140,24 Q 100,2 60,24" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" marker-end="url(#arrow)" />
      <text x="100" y="11" font-size="11" font-weight="700" fill="#0284c7" text-anchor="middle">×10</text>
    </svg>
  </div>

  
  <div class="columns-grid">
    <div class="col-card" data-idx="0">
      <div class="col-abbr">TTh</div>
      <div class="col-name">Ten<br>Thousands</div>
      <div class="col-val">10,000</div>
      <div class="token-box">1</div>
    </div>
    <div class="col-card" data-idx="1">
      <div class="col-abbr">Th</div>
      <div class="col-name">Thousands</div>
      <div class="col-val">1,000</div>
      <div class="token-box">0</div>
    </div>
    <div class="col-card" data-idx="2">
      <div class="col-abbr">H</div>
      <div class="col-name">Hundreds</div>
      <div class="col-val">100</div>
      <div class="token-box">0</div>
    </div>
    <div class="col-card" data-idx="3">
      <div class="col-abbr">T</div>
      <div class="col-name">Tens</div>
      <div class="col-val">10</div>
      <div class="token-box">0</div>
    </div>
    <div class="col-card active" data-idx="4">
      <div class="col-abbr">O</div>
      <div class="col-name">Ones</div>
      <div class="col-val">1</div>
      <div class="token-box">1</div>
    </div>
  </div>

  
  <div class="controls-row">
    <button class="nav-btn" id="btnLeft">← Shift Left (×10)</button>
    <div class="multiplier-tag" id="currentValue">Value = 1</div>
    <button class="nav-btn" id="btnRight" disabled>Shift Right →</button>
  </div>
</div>

<script>
  const cards = document.querySelectorAll('.col-card');
  const btnLeft = document.getElementById('btnLeft');
  const btnRight = document.getElementById('btnRight');
  const valueDisplay = document.getElementById('currentValue');

  const values = ['10,000', '1,000', '100', '10', '1'];
  let activeIndex = 4; // Starts at Ones (rightmost)

  function updateView() {
    cards.forEach((card, idx) => {
      const token = card.querySelector('.token-box');
      if (idx === activeIndex) {
        card.classList.add('active');
        token.textContent = '1';
      } else {
        card.classList.remove('active');
        token.textContent = '0';
      }
    });

    valueDisplay.textContent = 'Value = ' + values[activeIndex];
    btnLeft.disabled = (activeIndex === 0);
    btnRight.disabled = (activeIndex === 4);
  }

  cards.forEach(card => {
    card.addEventListener('click', () => {
      activeIndex = parseInt(card.getAttribute('data-idx'), 10);
      updateView();
    });
  });

  btnLeft.addEventListener('click', () => {
    if (activeIndex > 0) {
      activeIndex--;
      updateView();
    }
  });

  btnRight.addEventListener('click', () => {
    if (activeIndex < 4) {
      activeIndex++;
      updateView();
    }
  });

  updateView();
</script>

</body>
</html>

What does a number like 43,285 look like inside this chart?

Let's place 43,285 into our chart starting from the right side.

<!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>Place Value Chart: 43,285</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: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

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

  /* Number Display */
  .number-banner {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 4px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
  }

  .num-d {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
    color: #94a3b8;
  }
  .num-d.active {
    background: #22b7ff;
    color: #ffffff;
  }
  .num-d.placed {
    color: #1e2945;
  }
  .num-comma {
    color: #64748b;
    padding: 0 1px;
  }

  /* Direction Indicator */
  .flow-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }

  /* Place Value Table Grid */
  .pv-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: 100%;
  }

  .pv-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 2px 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .pv-col.active {
    border-color: #22b7ff;
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
  }

  .col-title {
    font-size: 13px;
    font-weight: 800;
    color: #0284c7;
    line-height: 1.1;
    text-align: center;
  }

  .col-sub {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
  }

  .digit-cell {
    width: 44px;
    height: 48px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: transparent;
    transition: all 0.3s ease;
  }

  .digit-cell.filled {
    border-style: solid;
    border-color: #22b7ff;
    background: #e0f2fe;
    color: #0369a1;
  }

  .col-value {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .col-value.visible {
    opacity: 1;
  }

  /* Stepper / Controls */
  .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
  }

  .btn-nav {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e2945;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .btn-nav:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
  }

  .steps-pill {
    display: flex;
    gap: 6px;
  }

  .step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .step-dot.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
  }
  .step-dot.completed {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #0284c7;
  }

  @media (max-width: 420px) {
    .col-title { font-size: 11px; }
    .col-sub { font-size: 9px; }
    .col-value { font-size: 9px; }
    .digit-cell { width: 34px; height: 38px; font-size: 20px; }
    .number-banner { font-size: 26px; }
    .step-dot { width: 24px; height: 24px; font-size: 11px; }
  }
</style>
</head>
<body>

<div class="main-wrap">
  
  <div class="number-banner">
    <span class="num-d" id="d-4">4</span>
    <span class="num-d" id="d-3">3</span>
    <span class="num-comma">,</span>
    <span class="num-d" id="d-2">2</span>
    <span class="num-d" id="d-8">8</span>
    <span class="num-d active" id="d-5">5</span>
  </div>

  
  <div class="flow-hint">
    <span>⟵ Start from right side</span>
  </div>

  
  <div class="pv-grid">
    
    <div class="pv-col" id="col-0">
      <span class="col-title">TTh</span>
      <span class="col-sub">10,000</span>
      <div class="digit-cell" id="cell-0">4</div>
      <span class="col-value" id="val-0">40,000</span>
    </div>

    
    <div class="pv-col" id="col-1">
      <span class="col-title">Th</span>
      <span class="col-sub">1,000</span>
      <div class="digit-cell" id="cell-1">3</div>
      <span class="col-value" id="val-1">3,000</span>
    </div>

    
    <div class="pv-col" id="col-2">
      <span class="col-title">H</span>
      <span class="col-sub">100</span>
      <div class="digit-cell" id="cell-2">2</div>
      <span class="col-value" id="val-2">200</span>
    </div>

    
    <div class="pv-col" id="col-3">
      <span class="col-title">T</span>
      <span class="col-sub">10</span>
      <div class="digit-cell" id="cell-3">8</div>
      <span class="col-value" id="val-3">80</span>
    </div>

    
    <div class="pv-col" id="col-4">
      <span class="col-title">U</span>
      <span class="col-sub">1</span>
      <div class="digit-cell" id="cell-4">5</div>
      <span class="col-value" id="val-4">5</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-nav" id="prevBtn">← Prev</button>
    <div class="steps-pill">
      <div class="step-dot" data-step="0">1</div>
      <div class="step-dot" data-step="1">2</div>
      <div class="step-dot" data-step="2">3</div>
      <div class="step-dot" data-step="3">4</div>
      <div class="step-dot" data-step="4">5</div>
    </div>
    <button class="btn-nav" id="nextBtn">Next →</button>
  </div>
</div>

<script>
  // Right-to-left order of placement:
  // Step 0: Units (digit 5, column index 4)
  // Step 1: Tens (digit 8, column index 3)
  // Step 2: Hundreds (digit 2, column index 2)
  // Step 3: Thousands (digit 3, column index 1)
  // Step 4: Ten Thousands (digit 4, column index 0)

  const steps = [
    { colIdx: 4, digitId: 'd-5' },
    { colIdx: 3, digitId: 'd-8' },
    { colIdx: 2, digitId: 'd-2' },
    { colIdx: 1, digitId: 'd-3' },
    { colIdx: 0, digitId: 'd-4' }
  ];

  let currentStep = 0;
  let autoTimer = null;

  function renderStep(step) {
    currentStep = step;

    // Reset banner digits
    ['d-4', 'd-3', 'd-2', 'd-8', 'd-5'].forEach(id => {
      const el = document.getElementById(id);
      el.className = 'num-d';
    });

    // Update banner digits & grid cells
    steps.forEach((s, idx) => {
      const cell = document.getElementById(`cell-${s.colIdx}`);
      const val = document.getElementById(`val-${s.colIdx}`);
      const col = document.getElementById(`col-${s.colIdx}`);
      const digitEl = document.getElementById(s.digitId);

      if (idx < step) {
        // Completed step
        cell.classList.add('filled');
        val.classList.add('visible');
        col.classList.remove('active');
        digitEl.classList.add('placed');
      } else if (idx === step) {
        // Active step
        cell.classList.add('filled');
        val.classList.add('visible');
        col.classList.add('active');
        digitEl.classList.add('active');
      } else {
        // Future step
        cell.classList.remove('filled');
        val.classList.remove('visible');
        col.classList.remove('active');
      }
    });

    // Update step dots
    document.querySelectorAll('.step-dot').forEach((dot, idx) => {
      dot.className = 'step-dot';
      if (idx < step) dot.classList.add('completed');
      else if (idx === step) dot.classList.add('active');
    });
  }

  function nextStep() {
    renderStep((currentStep + 1) % steps.length);
  }

  function prevStep() {
    renderStep((currentStep - 1 + steps.length) % steps.length);
  }

  document.getElementById('nextBtn').addEventListener('click', () => {
    clearInterval(autoTimer);
    nextStep();
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    clearInterval(autoTimer);
    prevStep();
  });

  document.querySelectorAll('.step-dot').forEach(dot => {
    dot.addEventListener('click', (e) => {
      clearInterval(autoTimer);
      const stepIdx = parseInt(e.target.dataset.step, 10);
      renderStep(stepIdx);
    });
  });

  // Initial render & gentle auto-cycle
  renderStep(0);
  autoTimer = setInterval(nextStep, 3500);
</script>
</body>
</html>

A **digit** is just the single number symbol you see, but the **value** is what that digit is actually worth.

In 43,285, the digit 4 sits in the ten thousands place, so its value is **40,000**.

What happens when we collect 10 full groups of ten thousand?

When you count ten groups of 10,000, you reach **100,000**, which we call one hundred thousand.

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

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

    .pv-table {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 540px;
      margin-bottom: 12px;
    }

    .col-header {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      padding: 6px 2px;
      text-align: center;
      transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
    }

    .col-header.active {
      border-color: #f59e0b;
      background: #fffbeb;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
    }

    .col-name {
      font-size: 11px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .col-header.active .col-name {
      color: #b45309;
    }

    .col-val {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
    }

    .col-header.active .col-val {
      color: #d97706;
    }

    .display-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 16px;
      width: 100%;
      max-width: 540px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-height: 150px;
      justify-content: center;
    }

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

    .pill {
      background: #f3f4f6;
      border-radius: 6px;
      padding: 4px 10px;
      color: #4b5563;
    }

    .pill.target {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .arrow {
      color: #f59e0b;
      font-size: 22px;
    }

    .visual-blocks {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex-wrap: wrap;
      max-width: 320px;
      min-height: 42px;
    }

    .unit-icon {
      font-size: 24px;
      line-height: 1;
    }

    .nav-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 540px;
      margin-top: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s, border-color 0.2s;
    }

    .nav-btn:hover {
      background: #f3f4f6;
    }

    .nav-btn.active {
      background: #f59e0b;
      border-color: #d97706;
      color: #ffffff;
    }

    @media (max-width: 420px) {
      .col-name {
        font-size: 9px;
      }
      .col-val {
        font-size: 14px;
      }
      .math-row {
        font-size: 16px;
      }
      .nav-btn {
        padding: 5px 8px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="pv-table">
    <div class="col-header" id="col-5">
      <div class="col-name">100k</div>
      <div class="col-val" id="val-5">0</div>
    </div>
    <div class="col-header" id="col-4">
      <div class="col-name">10k</div>
      <div class="col-val" id="val-4">0</div>
    </div>
    <div class="col-header" id="col-3">
      <div class="col-name">1k</div>
      <div class="col-val" id="val-3">0</div>
    </div>
    <div class="col-header" id="col-2">
      <div class="col-name">100</div>
      <div class="col-val" id="val-2">0</div>
    </div>
    <div class="col-header" id="col-1">
      <div class="col-name">10</div>
      <div class="col-val" id="val-1">0</div>
    </div>
    <div class="col-header" id="col-0">
      <div class="col-name">1</div>
      <div class="col-val" id="val-0">1</div>
    </div>
  </div>

  <div class="display-card">
    <div class="visual-blocks" id="visualGroup">
      <span class="unit-icon">🟧</span>
    </div>
    <div class="math-row" id="mathText">
      <span class="pill">1</span>
    </div>
  </div>

  <div class="nav-bar">
    <button class="nav-btn active" data-step="0">1</button>
    <button class="nav-btn" data-step="1">10</button>
    <button class="nav-btn" data-step="2">100</button>
    <button class="nav-btn" data-step="3">1,000</button>
    <button class="nav-btn" data-step="4">10,000</button>
    <button class="nav-btn" data-step="5">100,000</button>
  </div>

  <script>
    const steps = [
      {
        idx: 0,
        valText: '1',
        digits: ['0','0','0','0','0','1'],
        math: '<span class="pill target">1 Ones = 1</span>',
        icons: '🟧'
      },
      {
        idx: 1,
        valText: '10',
        digits: ['0','0','0','0','1','0'],
        math: '<span class="pill">10 × 1</span> <span class="arrow">→</span> <span class="pill target">10</span>',
        icons: '🟧🟧🟧🟧🟧🟧🟧🟧🟧🟧'
      },
      {
        idx: 2,
        valText: '100',
        digits: ['0','0','0','1','0','0'],
        math: '<span class="pill">10 × 10</span> <span class="arrow">→</span> <span class="pill target">100</span>',
        icons: '🟨🟨🟨🟨🟨🟨🟨🟨🟨🟨'
      },
      {
        idx: 3,
        valText: '1,000',
        digits: ['0','0','1','0','0','0'],
        math: '<span class="pill">10 × 100</span> <span class="arrow">→</span> <span class="pill target">1,000</span>',
        icons: '📦📦📦📦📦📦📦📦📦📦'
      },
      {
        idx: 4,
        valText: '10,000',
        digits: ['0','1','0','0','0','0'],
        math: '<span class="pill">10 × 1,000</span> <span class="arrow">→</span> <span class="pill target">10,000</span>',
        icons: '🏛️🏛️🏛️🏛️🏛️🏛️🏛️🏛️🏛️🏛️'
      },
      {
        idx: 5,
        valText: '100,000',
        digits: ['1','0','0','0','0','0'],
        math: '<span class="pill">10 × 10,000</span> <span class="arrow">→</span> <span class="pill target">100,000</span>',
        icons: '💎💎💎💎💎💎💎💎💎💎'
      }
    ];

    let current = 0;
    const btns = document.querySelectorAll('.nav-btn');
    const visualGroup = document.getElementById('visualGroup');
    const mathText = document.getElementById('mathText');

    function update(stepIdx) {
      current = stepIdx;
      const data = steps[stepIdx];

      // Update table headers
      for (let i = 0; i < 6; i++) {
        const col = document.getElementById('col-' + i);
        const val = document.getElementById('val-' + i);
        if (i === stepIdx) {
          col.classList.add('active');
        } else {
          col.classList.remove('active');
        }
        val.textContent = data.digits[5 - i];
      }

      // Update buttons
      btns.forEach((btn, idx) => {
        if (idx === stepIdx) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Update display
      visualGroup.innerHTML = `<span class="unit-icon">${data.icons}</span>`;
      mathText.innerHTML = data.math;
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        update(idx);
      });
    });

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

Whenever you see a five-digit number, look at the column it sits in to find its true value!

math

Understanding Thousands and Ten Thousands. Identify the value of digits in numbers up to 100,000 using place value charts.

Place Value Tables to 100,000

Value of a Digit: Up to Ten Thousands

Understanding Place Value: Second Level Curriculum for Excellence (MNU 2-02a)

Pedagogical Note: While standard MNU 2-02a spans Second Level (P5–P7) within the Scottish Curriculum for Excellence framework, teaching numbers up to 100,000 should follow the Concrete-Pictorial-Abstract (CPA) model. Begin with physical/virtual multi-base ten discs and place value grids, progress to visual expanded arrow cards and place value charts, and consolidate with standard and expanded notation. Emphasize the role of zero as a placeholder to prevent place-omission errors.

Understanding Thousands and Ten Thousands

The Place Value Chart

Finding the Value of Each Digit