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

Have you ever noticed that measuring things works just like counting by tens?

In math, our numbers grow in groups of ten, and the **metric system** uses this exact same counting pattern.

What happens if we start right in the middle with our favorite measuring tool?

A **meter** is the base unit of length, and it is about as wide as an open doorway.

To measure things that are super tiny or super huge, we add special word clues called **prefixes** to the front of meter.

<!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>Base-10 Metric System</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;
    }

    .stepper-nav {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .unit-tab {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .unit-tab.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }

    /* Main Display Area */
    .scale-card {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 14px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .preview-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 110px;
      width: 100%;
    }

    .icon-display {
      font-size: 40px;
      line-height: 1;
    }

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

    .prefix-name {
      font-size: 14px;
      font-weight: 700;
      color: #0284c7;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Visual Staircase / Ladder */
    .ladder {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 100%;
      height: 90px;
      padding: 0 4px 6px;
      border-bottom: 2px solid #e2e8f0;
      position: relative;
    }

    .step-bar {
      flex: 1;
      margin: 0 3px;
      background: #f1f5f9;
      border-radius: 6px 6px 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: height 0.3s ease, background 0.2s, color 0.2s;
    }

    .step-bar.active {
      background: #22b7ff;
      color: #ffffff;
    }

    /* Jump Multipliers Indicator */
    .multiplier-bar {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 8px;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
    }

    .factor-tag {
      display: flex;
      align-items: center;
      gap: 2px;
    }

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

    .btn-ctrl {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn-ctrl:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="unit-tab" onclick="setStep(0)">kilo-</button>
    <button class="unit-tab" onclick="setStep(1)">meter</button>
    <button class="unit-tab" onclick="setStep(2)">centi-</button>
    <button class="unit-tab" onclick="setStep(3)">milli-</button>
  </div>

  <div class="scale-card">
    <div class="preview-box">
      <div class="icon-display" id="icon">🏃</div>
      <div class="value-display" id="value">1,000 m</div>
      <div class="prefix-name" id="name">Kilometer (km)</div>
    </div>

    <div class="ladder">
      <div class="step-bar" style="height: 100%;" onclick="setStep(0)">km</div>
      <div class="step-bar" style="height: 65%;" onclick="setStep(1)">m</div>
      <div class="step-bar" style="height: 40%;" onclick="setStep(2)">cm</div>
      <div class="step-bar" style="height: 22%;" onclick="setStep(3)">mm</div>
    </div>

    <div class="multiplier-bar">
      <span class="factor-tag">×1,000</span>
      <span class="factor-tag">Base (1)</span>
      <span class="factor-tag">÷100</span>
      <span class="factor-tag">÷1,000</span>
    </div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" onclick="stepDelta(-1)">← Larger</button>
    <button class="btn-ctrl" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="btn-ctrl" onclick="stepDelta(1)">Smaller →</button>
  </div>

  <script>
    const steps = [
      { prefix: 'Kilometer (km)', val: '1,000 m', icon: '🏃', tag: 'kilo- = ×1,000' },
      { prefix: 'Meter (m)', val: '1 m', icon: '📏', tag: 'base unit = 1' },
      { prefix: 'Centimeter (cm)', val: '0.01 m', icon: '🪙', tag: 'centi- = 1/100' },
      { prefix: 'Millimeter (mm)', val: '0.001 m', icon: '🐜', tag: 'milli- = 1/1,000' }
    ];

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

    const tabs = document.querySelectorAll('.unit-tab');
    const bars = document.querySelectorAll('.step-bar');
    const nameEl = document.getElementById('name');
    const valEl = document.getElementById('value');
    const iconEl = document.getElementById('icon');
    const playBtn = document.getElementById('playBtn');

    function render() {
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === current));
      bars.forEach((bar, i) => bar.classList.toggle('active', i === current));
      
      const item = steps[current];
      nameEl.textContent = item.prefix;
      valEl.textContent = item.val;
      iconEl.textContent = item.icon;
    }

    function setStep(idx) {
      current = (idx + steps.length) % steps.length;
      render();
    }

    function stepDelta(delta) {
      setStep(current + delta);
    }

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

    function startLoop() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (playing) {
          setStep(current + 1);
        }
      }, 3200);
    }

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

What if we want to measure something tiny, like an ant or a coin?

The prefix **centi-** means one hundredth ($1/100$), so it takes exactly $100$ centimeters to make $1$ whole meter.

The prefix **milli-** means one thousandth ($1/1000$), slicing that same meter into $1,000$ tiny pieces.

<!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">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }
    .main-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
    }
    .tab-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border-radius: 10px;
      padding: 8px 4px;
      text-align: center;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      color: #0284c7;
      border-color: #22b7ff;
      background: #e0f2fe;
    }
    .stage {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .ruler-container {
      width: 100%;
      height: 48px;
      background: #f1f5f9;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      display: flex;
      border: 1px solid #cbd5e1;
    }
    .segment {
      flex: 1;
      height: 100%;
      border-right: 1px solid #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      transition: background 0.3s ease;
    }
    .segment:last-child { border-right: none; }
    .segment.highlight {
      background: #38bdf8;
      color: #ffffff;
    }
    .zoom-connector {
      width: 100%;
      height: 20px;
      position: relative;
    }
    .zoom-lines {
      width: 100%;
      height: 100%;
    }
    .micro-view {
      background: #f8fafc;
      border: 1px dashed #0284c7;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }
    .micro-bar {
      width: 100%;
      height: 36px;
      background: #e2e8f0;
      border-radius: 6px;
      display: flex;
      overflow: hidden;
      border: 1px solid #94a3b8;
    }
    .micro-tick {
      flex: 1;
      border-right: 1px solid #64748b;
      height: 100%;
      background: #bae6fd;
      position: relative;
    }
    .micro-tick:last-child { border-right: none; }
    .micro-tick.active-one {
      background: #0284c7;
    }
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0 4px;
      font-size: 14px;
      font-weight: 600;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #e0f2fe;
      color: #0369a1;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
    }
    .factor-badge {
      background: #f1f5f9;
      color: #475569;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="tabs">
      <button class="tab-btn active" data-idx="0">1 m</button>
      <button class="tab-btn" data-idx="1">dm</button>
      <button class="tab-btn" data-idx="2">cm</button>
      <button class="tab-btn" data-idx="3">mm</button>
    </div>

    <div class="stage">
      <div class="info-row">
        <div class="tag" id="unit-name">1 Meter (Base)</div>
        <div class="factor-badge" id="math-frac"></div>
      </div>

      <div class="ruler-container" id="main-ruler"></div>

      <div class="zoom-connector">
        <svg class="zoom-lines" preserveAspectRatio="none" viewBox="0 0 100 20">
          <polygon points="0,0 10,0 100,20 0,20" fill="rgba(34, 183, 255, 0.15)" stroke="#38bdf8" stroke-dasharray="2,2" stroke-width="0.5"></polygon>
        </svg>
      </div>

      <div class="micro-view">
        <div class="micro-bar" id="micro-bar"></div>
        <div class="info-row" style="margin-top: 4px;">
          <span style="font-size:12px; color:#64748b;" id="sub-desc">1 meter split into 10 equal parts</span>
          <span style="font-weight:700; color:#0284c7;" id="math-count"></span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const data = [
      {
        name: "1 Meter (Base)",
        frac: "1\\text{ m}",
        count: "10^0 = 1",
        desc: "1 whole meter",
        rulerSegments: 1,
        microTicks: 1,
        activeIdx: 0
      },
      {
        name: "Decimeter (dm)",
        frac: "\\frac{1}{10}\\text{ m} = 0.1\\text{ m}",
        count: "10\\text{ in }1\\text{ m}",
        desc: "1 meter split into 10 parts",
        rulerSegments: 10,
        microTicks: 10,
        activeIdx: 0
      },
      {
        name: "Centimeter (cm)",
        frac: "\\frac{1}{100}\\text{ m} = 0.01\\text{ m}",
        count: "100\\text{ in }1\\text{ m}",
        desc: "Each dm split into 10 cm",
        rulerSegments: 10,
        microTicks: 10,
        activeIdx: 0
      },
      {
        name: "Millimeter (mm)",
        frac: "\\frac{1}{1000}\\text{ m} = 0.001\\text{ m}",
        count: "1,000\\text{ in }1\\text{ m}",
        desc: "Each cm split into 10 mm",
        rulerSegments: 10,
        microTicks: 10,
        activeIdx: 0
      }
    ];

    let current = 0;
    const buttons = document.querySelectorAll('.tab-btn');
    const mainRuler = document.getElementById('main-ruler');
    const microBar = document.getElementById('micro-bar');
    const unitName = document.getElementById('unit-name');
    const mathFrac = document.getElementById('math-frac');
    const mathCount = document.getElementById('math-count');
    const subDesc = document.getElementById('sub-desc');

    function renderKatexSafe(expr, el) {
      if (window.katex) {
        katex.render(expr, el, { throwOnError: false });
      } else {
        el.textContent = expr;
      }
    }

    function update(idx) {
      current = idx;
      buttons.forEach((b, i) => b.classList.toggle('active', i === idx));
      const d = data[idx];
      unitName.textContent = d.name;
      subDesc.textContent = d.desc;
      renderKatexSafe(d.frac, mathFrac);
      renderKatexSafe(d.count, mathCount);

      // Main ruler segments
      mainRuler.innerHTML = '';
      if (idx === 0) {
        const seg = document.createElement('div');
        seg.className = 'segment highlight';
        seg.textContent = '1 m';
        mainRuler.appendChild(seg);
      } else {
        for (let i = 0; i < 10; i++) {
          const seg = document.createElement('div');
          seg.className = 'segment' + (i === 0 ? ' highlight' : '');
          seg.textContent = idx === 1 ? (i + 1) : '';
          mainRuler.appendChild(seg);
        }
      }

      // Micro zoom bar
      microBar.innerHTML = '';
      if (idx === 0) {
        const t = document.createElement('div');
        t.className = 'micro-tick active-one';
        microBar.appendChild(t);
      } else {
        for (let i = 0; i < 10; i++) {
          const t = document.createElement('div');
          t.className = 'micro-tick' + (i === 0 ? ' active-one' : '');
          microBar.appendChild(t);
        }
      }
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const idx = parseInt(btn.getAttribute('data-idx'), 10);
        update(idx);
      });
    });

    window.addEventListener('load', () => {
      update(0);
    });
  </script>
</body>
</html>

Remember, a **millimeter** is much smaller than a centimeter because one whole meter is split into way more pieces!

What if we need to measure a really long race or the drive to school?

The prefix **kilo-** means one thousand ($1,000$), making a **kilometer** $1,000$ times longer than a single meter stick.

<!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>Base-10 Structure of Metric Units</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
<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;
  }
  .app-wrap {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .unit-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .unit-btn {
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .unit-btn .prefix {
    font-weight: 700;
    font-size: 15px;
    color: #1e2945;
  }
  .unit-btn .sym {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
  }
  .unit-btn.active {
    border-color: #22b7ff;
    background: #f0f9ff;
    box-shadow: 0 0 0 1px #22b7ff;
  }
  .unit-btn.active .prefix {
    color: #0284c7;
  }

  .chart-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eef2f6;
  }

  .chain-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
  }
  .node {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
  }
  .node-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f8f9fa;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
  }
  .node.active .node-bubble {
    background: #22b7ff;
    color: #ffffff;
    border-color: #0284c7;
    transform: scale(1.08);
  }
  .hop-arrow {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2px;
    position: relative;
  }
  .hop-line {
    width: 100%;
    height: 2px;
    background: #cbd5e1;
    position: relative;
  }
  .hop-label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 3px;
    white-space: nowrap;
  }

  .display-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .math-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 38px;
  }
  .math-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 15px;
  }

  .meter-bar-track {
    width: 100%;
    height: 20px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  .meter-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22b7ff, #0284c7);
    border-radius: 10px;
    transition: width 0.4s ease;
  }

  .controls {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .ctrl-btn:hover {
    background: #f1f5f9;
  }
</style>
</head>
<body>
<div class="app-wrap">
  <div class="unit-nav" role="tablist">
    <div class="unit-btn active" data-idx="0" role="tab">
      <div class="prefix">kilo-</div>
      <div class="sym">km</div>
    </div>
    <div class="unit-btn" data-idx="1" role="tab">
      <div class="prefix">base</div>
      <div class="sym">m</div>
    </div>
    <div class="unit-btn" data-idx="2" role="tab">
      <div class="prefix">centi-</div>
      <div class="sym">cm</div>
    </div>
    <div class="unit-btn" data-idx="3" role="tab">
      <div class="prefix">milli-</div>
      <div class="sym">mm</div>
    </div>
  </div>

  <div class="chart-card">
    <div class="chain-view">
      <div class="node active" id="node-0">
        <div class="node-bubble">km</div>
      </div>
      <div class="hop-arrow">
        <div class="hop-label" id="katex-hop1"></div>
        <div class="hop-line"></div>
      </div>
      <div class="node" id="node-1">
        <div class="node-bubble">m</div>
      </div>
      <div class="hop-arrow">
        <div class="hop-label" id="katex-hop2"></div>
        <div class="hop-line"></div>
      </div>
      <div class="node" id="node-2">
        <div class="node-bubble">cm</div>
      </div>
      <div class="hop-arrow">
        <div class="hop-label" id="katex-hop3"></div>
        <div class="hop-line"></div>
      </div>
      <div class="node" id="node-3">
        <div class="node-bubble">mm</div>
      </div>
    </div>

    <div class="display-box">
      <div class="math-row">
        <div class="math-pill" id="val-meters"></div>
        <div class="math-pill" id="val-power"></div>
      </div>
      <div class="meter-bar-track">
        <div class="meter-bar-fill" id="bar-fill" style="width: 100%;"></div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="prev-btn">◀</button>
    <button class="ctrl-btn" id="play-btn">⏸</button>
    <button class="ctrl-btn" id="next-btn">▶</button>
  </div>
</div>

<script>
  const data = [
    { name: 'kilometer', sym: 'km', eq: '1\\text{ km} = 1000\\text{ m}', pow: '10^3\\text{ m}', bar: '100%' },
    { name: 'meter', sym: 'm', eq: '1\\text{ m} = 1\\text{ m}', pow: '10^0\\text{ m}', bar: '60%' },
    { name: 'centimeter', sym: 'cm', eq: '1\\text{ cm} = 0.01\\text{ m}', pow: '10^{-2}\\text{ m}', bar: '30%' },
    { name: 'millimeter', sym: 'mm', eq: '1\\text{ mm} = 0.001\\text{ m}', pow: '10^{-3}\\text{ m}', bar: '10%' }
  ];

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

  function renderMath() {
    if (typeof katex !== 'undefined') {
      katex.render('\\times 1000', document.getElementById('katex-hop1'));
      katex.render('\\times 100', document.getElementById('katex-hop2'));
      katex.render('\\times 10', document.getElementById('katex-hop3'));
      katex.render(data[currentIdx].eq, document.getElementById('val-meters'));
      katex.render(data[currentIdx].pow, document.getElementById('val-power'));
    } else {
      document.getElementById('katex-hop1').textContent = '× 1000';
      document.getElementById('katex-hop2').textContent = '× 100';
      document.getElementById('katex-hop3').textContent = '× 10';
      document.getElementById('val-meters').textContent = data[currentIdx].eq;
      document.getElementById('val-power').textContent = data[currentIdx].pow;
    }
  }

  function setIndex(idx) {
    currentIdx = (idx + data.length) % data.length;
    document.querySelectorAll('.unit-btn').forEach((btn, i) => {
      btn.classList.toggle('active', i === currentIdx);
    });
    document.querySelectorAll('.node').forEach((node, i) => {
      node.classList.toggle('active', i === currentIdx);
    });
    document.getElementById('bar-fill').style.width = data[currentIdx].bar;
    renderMath();
  }

  function startCycle() {
    stopCycle();
    timer = setInterval(() => {
      setIndex(currentIdx + 1);
    }, 3200);
    isPlaying = true;
    document.getElementById('play-btn').textContent = '⏸';
  }

  function stopCycle() {
    if (timer) clearInterval(timer);
    timer = null;
    isPlaying = false;
    document.getElementById('play-btn').textContent = '▶';
  }

  document.querySelectorAll('.unit-btn').forEach((btn) => {
    btn.addEventListener('click', () => {
      stopCycle();
      setIndex(parseInt(btn.getAttribute('data-idx'), 10));
    });
  });

  document.getElementById('prev-btn').addEventListener('click', () => {
    stopCycle();
    setIndex(currentIdx - 1);
  });

  document.getElementById('next-btn').addEventListener('click', () => {
    stopCycle();
    setIndex(currentIdx + 1);
  });

  document.getElementById('play-btn').addEventListener('click', () => {
    if (isPlaying) {
      stopCycle();
    } else {
      setIndex(currentIdx + 1);
      startCycle();
    }
  });

  window.addEventListener('DOMContentLoaded', () => {
    renderMath();
    startCycle();
  });
</script>
</body>
</html>

Whenever you hear milli, centi, or kilo, you are just moving across your familiar place-value chart of tens, hundreds, and thousands!

While measuring begins with concrete non-standard objects at CfE **Early Level**, mastering standard metric conversions with powers of $10$ corresponds to **Second Level** (MNU 2-11b / P5–P7).

Students progress toward this mastery using **Concrete-Pictorial-Abstract (CPA)** representations to connect physical models directly to place-value math.

While measuring begins with concrete non-standard tools at **Early Level**, mastering metric conversions using powers of 10 is targeted at **Second Level** (MNU 2-11b / P5–P7).

This learning progression is developed through **Concrete-Pictorial-Abstract (CPA)** representations to ensure deep understanding.

math

Understanding the Base-10 Structure of the Metric System. Explain how metric prefixes milli-, centi-, and kilo- relate to powers of 10 in the place value system.

Converting Metric Units of Length - Second Level Maths and Numeracy (MNU 2-11b)

Converting Units: Metric Distance & Powers of 10

Place Value and Metric Measurement Explorations

To achieve conceptual mastery, educators should anchor instruction in the Concrete-Pictorial-Abstract (CPA) approach. Begin with physical metre sticks, base-10 Dienes blocks, and tactile sliders before transitioning to place value grid charts and numerical calculations. Emphasize that 'converting units' is a process of renaming the same physical quantity rather than altering its actual length. While CfE Early Level (P1) develops preliminary notions of length through hands-on comparison, this lesson directly satisfies CfE Second Level benchmark MNU 2-11b by linking place value arithmetic directly to SI metric conversions.

Understanding the Base-10 Structure of the Metric System

The Meter Stick

Tiny Parts: Centi and Milli