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 trying to measure a tiny ant using a giant road sign! It is much easier when we pick the right measurement size for the job.

We use **length** to see how long, tall, or far something is.

We have four main units for length, going from tiny to super long: **millimeter** (mm), **centimeter** (cm), **meter** (m), and **kilometer** (km).

<!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>Metric Length Units</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .diagram-root {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    /* Scale Track */
    .scale-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 0 8px;
    }
    .scale-line {
      position: absolute;
      left: 24px;
      right: 24px;
      top: 50%;
      height: 4px;
      background: #e2e8f0;
      z-index: 1;
      transform: translateY(-50%);
    }
    .scale-fill {
      position: absolute;
      left: 24px;
      top: 50%;
      height: 4px;
      background: #22b7ff;
      z-index: 1;
      transform: translateY(-50%);
      transition: width 0.3s ease;
      width: 0%;
    }
    .unit-btn {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }
    .unit-btn.active {
      border-color: #22b7ff;
      color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
    }
    /* Active Display Card */
    .display-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      min-height: 180px;
      text-align: center;
      position: relative;
    }
    .emoji-icon {
      font-size: 56px;
      line-height: 1;
    }
    .unit-title {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
    }
    .symbol-badge {
      display: inline-block;
      background: #e0f2fe;
      color: #0284c7;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 700;
    }
    /* Visual Size Benchmark Ruler */
    .rel-scale-container {
      width: 100%;
      max-width: 280px;
      height: 12px;
      background: #f1f5f9;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .rel-scale-bar {
      height: 100%;
      background: #22b7ff;
      border-radius: 6px;
      transition: width 0.3s ease;
    }
    /* Stepper Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }
    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s;
    }
    .nav-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="diagram-root">
    
    <div class="scale-bar">
      <div class="scale-line"></div>
      <div class="scale-fill" id="scaleFill"></div>

      <button class="unit-btn active" data-index="0">
        <span>mm</span>
      </button>
      <button class="unit-btn" data-index="1">
        <span>cm</span>
      </button>
      <button class="unit-btn" data-index="2">
        <span>m</span>
      </button>
      <button class="unit-btn" data-index="3">
        <span>km</span>
      </button>
    </div>

    
    <div class="display-card">
      <div class="emoji-icon" id="unitEmoji">💳</div>
      <div>
        <span class="unit-title" id="unitName">Millimeter</span>
        <span class="symbol-badge" id="unitSymbol">mm</span>
      </div>
      <div class="rel-scale-container">
        <div class="rel-scale-bar" id="relBar" style="width: 5%;"></div>
      </div>
    </div>

    
    <div class="controls">
      <button class="nav-btn" id="prevBtn">◀</button>
      <button class="nav-btn" id="playBtn">⏸</button>
      <button class="nav-btn" id="nextBtn">▶</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const units = [
      { name: "Millimeter", symbol: "mm", emoji: "💳", width: "5%", fill: "0%" },
      { name: "Centimeter", symbol: "cm", emoji: "☝️", width: "25%", fill: "33%" },
      { name: "Meter", symbol: "m", emoji: "🎸", width: "65%", fill: "66%" },
      { name: "Kilometer", symbol: "km", emoji: "🛣️", width: "100%", fill: "100%" }
    ];

    let currentIndex = 0;
    let autoPlaying = true;
    let timer = null;

    const buttons = $$('.unit-btn');
    const nameEl = $('#unitName');
    const symbolEl = $('#unitSymbol');
    const emojiEl = $('#unitEmoji');
    const relBar = $('#relBar');
    const scaleFill = $('#scaleFill');
    const playBtn = $('#playBtn');

    function render(index) {
      currentIndex = index;
      const data = units[index];

      buttons.forEach((btn, i) => {
        if (i === index) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      nameEl.textContent = data.name;
      symbolEl.textContent = data.symbol;
      emojiEl.textContent = data.emoji;
      relBar.style.width = data.width;
      scaleFill.style.width = data.fill;
    }

    function next() {
      render((currentIndex + 1) % units.length);
    }

    function prev() {
      render((currentIndex - 1 + units.length) % units.length);
    }

    function startAuto() {
      autoPlaying = true;
      playBtn.textContent = "⏸";
      clearInterval(timer);
      timer = setInterval(next, 3000);
    }

    function stopAuto() {
      autoPlaying = false;
      playBtn.textContent = "▶";
      clearInterval(timer);
    }

    // Interactive button taps
    buttons.forEach((btn, idx) => {
      onTap(btn, () => {
        stopAuto();
        render(idx);
      });
    });

    onTap($('#nextBtn'), () => {
      stopAuto();
      next();
    });

    onTap($('#prevBtn'), () => {
      stopAuto();
      prev();
    });

    onTap(playBtn, () => {
      if (autoPlaying) {
        stopAuto();
      } else {
        startAuto();
      }
    });

    // Start auto cycle on load
    startAuto();
  </script>
</body>
</html>

A tiny **millimeter** (mm) is about as thick as an ID card, while a **centimeter** (cm) is about the width of your pinky finger.

A **meter** (m) is about the width of a big doorway, and a **kilometer** (km) is a long walk between neighborhoods.

How do you pick? If you measure a pencil, use **cm**. If you measure the school hallway, use **m**!

Length tells us how long something is, but what if we want to know how heavy something feels?

We use **mass** to find out how heavy an object is.

For light things, we use **grams** (g). For heavy things, we use **kilograms** (kg).

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    /* Unit Category Cards */
    .units-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .unit-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 14px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.3s ease;
      opacity: 0.45;
    }

    .unit-card.active {
      opacity: 1;
      border-color: #22b7ff;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.18);
      transform: translateY(-2px);
    }

    .unit-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 20px;
      margin-bottom: 6px;
      background: #f1f5f9;
      color: #64748b;
    }

    .unit-card.active .unit-badge.light {
      background: #e0f2fe;
      color: #0284c7;
    }

    .unit-card.active .unit-badge.heavy {
      background: #f3e8ff;
      color: #7e22ce;
    }

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

    .unit-symbol {
      font-size: 13px;
      color: #6b7280;
      font-weight: 600;
    }

    /* Scale Stage */
    .scale-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 480px;
      height: 140px;
      position: relative;
    }

    .display-screen {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 8px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .display-emoji {
      font-size: 44px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

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

    .scale-base {
      width: 130px;
      height: 8px;
      background: #cbd5e1;
      border-radius: 4px;
      margin-top: 8px;
    }

    /* Interactive Item Selector */
    .items-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .item-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .item-btn:hover {
      border-color: #94a3b8;
    }

    .item-btn.selected {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

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

    .item-weight {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
    }
  </style>
</head>
<body>

  
  <div class="units-row">
    <div class="unit-card active" id="card-g">
      <span class="unit-badge light">Light 🪶</span>
      <div class="unit-title">Grams</div>
      <div class="unit-symbol">(g)</div>
    </div>
    <div class="unit-card" id="card-kg">
      <span class="unit-badge heavy">Heavy 🏋️</span>
      <div class="unit-title">Kilograms</div>
      <div class="unit-symbol">(kg)</div>
    </div>
  </div>

  
  <div class="scale-stage">
    <div class="display-screen">
      <div class="display-emoji" id="scale-icon">📎</div>
      <div class="display-value" id="scale-value">1 g</div>
    </div>
    <div class="scale-base"></div>
  </div>

  
  <div class="items-grid">
    <button class="item-btn selected" data-emoji="📎" data-val="1 g" data-type="g">
      <span class="item-icon">📎</span>
      <span class="item-weight">1 g</span>
    </button>
    <button class="item-btn" data-emoji="✏️" data-val="6 g" data-type="g">
      <span class="item-icon">✏️</span>
      <span class="item-weight">6 g</span>
    </button>
    <button class="item-btn" data-emoji="🎒" data-val="3 kg" data-type="kg">
      <span class="item-icon">🎒</span>
      <span class="item-weight">3 kg</span>
    </button>
    <button class="item-btn" data-emoji="🚲" data-val="12 kg" data-type="kg">
      <span class="item-icon">🚲</span>
      <span class="item-weight">12 kg</span>
    </button>
  </div>

  <script>
    const buttons = document.querySelectorAll('.item-btn');
    const cardG = document.getElementById('card-g');
    const cardKg = document.getElementById('card-kg');
    const scaleIcon = document.getElementById('scale-icon');
    const scaleValue = document.getElementById('scale-value');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');

        const emoji = btn.getAttribute('data-emoji');
        const val = btn.getAttribute('data-val');
        const type = btn.getAttribute('data-type');

        scaleIcon.textContent = emoji;
        scaleValue.textContent = val;

        if (type === 'g') {
          cardG.classList.add('active');
          cardKg.classList.remove('active');
        } else {
          cardKg.classList.add('active');
          cardG.classList.remove('active');
        }
      });
    });
  </script>
</body>
</html>

A single paperclip weighs about one **gram** (g).

A big bag of apples or a textbook weighs about one **kilogram** (kg). It takes 1,000 grams to make just one kilogram!

What about things that can pour, like water, milk, or juice?

**Capacity** is the amount of liquid a container can hold.

We measure small amounts of liquid in **milliliters** (mL) and large amounts in **liters** (L).

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

  .diagram {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }

  /* Unit Toggle */
  .switch-bar {
    display: flex;
    width: 100%;
    background: #e9ecef;
    border-radius: 10px;
    padding: 3px;
    gap: 4px;
  }
  .unit-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 8px;
    font-size: 15px;
    font-weight: 700;
    color: #6b7280;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .unit-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  /* Main Visual Stage */
  .stage {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 230px;
    justify-content: space-between;
  }

  .examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
  }

  .example-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .example-card:hover {
    border-color: #38bdf8;
  }

  .emoji {
    font-size: 32px;
    line-height: 1.1;
  }
  .value {
    font-size: 14px;
    font-weight: 700;
    color: #0369a1;
  }
  .subtext {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
  }

  /* Proportional Fill Graphic */
  .gauge-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
  }
  .gauge-bar-bg {
    flex: 1;
    height: 14px;
    background: #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
  }
  .gauge-bar-fill {
    height: 100%;
    width: 5%;
    background: linear-gradient(90deg, #38bdf8, #0284c7);
    border-radius: 7px;
    transition: width 0.4s ease;
  }
  .gauge-label {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
  }

  /* Bottom Equivalence */
  .footer-badge {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
</style>
</head>
<body>

<div class="diagram">
  
  <div class="switch-bar">
    <button class="unit-btn active" id="btnML" onclick="showUnit('ml')">
      💧 Milliliters (mL)
    </button>
    <button class="unit-btn" id="btnL" onclick="showUnit('l')">
      🪣 Liters (L)
    </button>
  </div>

  
  <div class="stage">
    <div class="examples-grid" id="grid">
      
    </div>

    
    <div class="gauge-wrap">
      <span class="gauge-label" id="scaleName">Small Amount</span>
      <div class="gauge-bar-bg">
        <div class="gauge-bar-fill" id="fillBar"></div>
      </div>
      <span class="gauge-label" id="scaleVal">mL</span>
    </div>
  </div>

  
  <div class="footer-badge">
    <span>1,000 mL</span>
    <span>=</span>
    <span>1 L</span>
  </div>
</div>

<script>
  const data = {
    ml: {
      name: "Small amounts",
      fill: "8%",
      badge: "mL",
      cards: [
        { emoji: "💧", value: "1 mL", label: "Drop" },
        { emoji: "🥄", value: "5 mL", label: "Spoon" },
        { emoji: "🧃", value: "200 mL", label: "Juice" }
      ]
    },
    l: {
      name: "Large amounts",
      fill: "92%",
      badge: "L",
      cards: [
        { emoji: "🧴", value: "1 L", label: "Bottle" },
        { emoji: "🪣", value: "10 L", label: "Bucket" },
        { emoji: "🛁", value: "150 L", label: "Bath" }
      ]
    }
  };

  function showUnit(unit) {
    const isML = unit === 'ml';
    document.getElementById('btnML').classList.toggle('active', isML);
    document.getElementById('btnL').classList.toggle('active', !isML);

    const info = data[unit];
    document.getElementById('scaleName').textContent = info.name;
    document.getElementById('fillBar').style.width = info.fill;
    document.getElementById('scaleVal').textContent = info.badge;

    const grid = document.getElementById('grid');
    grid.innerHTML = info.cards.map(c => `
      <div class="example-card">
        <div class="emoji">${c.emoji}</div>
        <div class="value">${c.value}</div>
        <div class="subtext">${c.label}</div>
      </div>
    `).join('');
  }

  // Initialize
  showUnit('ml');
</script>

</body>
</html>

A tiny medicine spoon holds about 5 **milliliters** (mL).

A big reusable water bottle holds about 1 **liter** (L).

Let's put everything together and see which unit fits best!

Always ask yourself two simple questions before picking a unit: Is it length, weight, or liquid? And is it tiny or big?

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 16px;
    }

    .tab-btn {
      flex: 1;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 10px 4px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

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

    .scale-bar {
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px 6px;
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .grid-container {
      width: 100%;
      max-width: 480px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .grid-container.three-cols {
      grid-template-columns: repeat(3, 1fr);
    }

    .unit-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .unit-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }

    .unit-emoji {
      font-size: 26px;
      line-height: 1;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .unit-badge {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .unit-anchor {
      font-size: 12px;
      color: #64748b;
      line-height: 1.2;
    }

    .focus-panel {
      width: 100%;
      max-width: 480px;
      margin-top: 14px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .focus-icon {
      font-size: 32px;
    }

    .focus-text {
      font-size: 16px;
      font-weight: 600;
      color: #1e2945;
    }

    .focus-text span {
      color: #22b7ff;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setCategory('length')">📏 Length</button>
    <button class="tab-btn" onclick="setCategory('mass')">⚖️ Mass</button>
    <button class="tab-btn" onclick="setCategory('capacity')">🧪 Capacity</button>
  </div>

  <div class="scale-bar">
    <span>Tiny 🐜</span>
    <span>→</span>
    <span>Huge 🏔️</span>
  </div>

  <div id="grid" class="grid-container"></div>

  <div id="focus" class="focus-panel">
    <div id="focusEmoji" class="focus-icon">📏</div>
    <div id="focusText" class="focus-text">1 <span>cm</span> ≈ 🖍️ Crayon</div>
  </div>

  <script>
    const data = {
      length: [
        { unit: 'mm', emoji: '💳', label: 'Card' },
        { unit: 'cm', emoji: '🖍️', label: 'Crayon' },
        { unit: 'm',  emoji: '🚪', label: 'Door' },
        { unit: 'km', emoji: '🛣️', label: 'Road' }
      ],
      mass: [
        { unit: 'mg', emoji: '🐜', label: 'Ant' },
        { unit: 'g',  emoji: '📎', label: 'Clip' },
        { unit: 'kg', emoji: '🎒', label: 'Bag' },
        { unit: 't',  emoji: '🐘', label: 'Elephant' }
      ],
      capacity: [
        { unit: 'ml', emoji: '💧', label: 'Drop' },
        { unit: 'cl', emoji: '🥄', label: 'Spoon' },
        { unit: 'l',  emoji: '🥛', label: 'Bottle' },
        { unit: 'kl', emoji: '🏊', label: 'Pool' }
      ]
    };

    let currentCat = 'length';
    let currentIndex = 1;

    function render() {
      const items = data[currentCat];
      const grid = document.getElementById('grid');
      grid.className = 'grid-container';
      grid.innerHTML = '';

      items.forEach((item, idx) => {
        const card = document.createElement('div');
        card.className = 'unit-card' + (idx === currentIndex ? ' active' : '');
        card.innerHTML = `
          <div class="unit-emoji">${item.emoji}</div>
          <div class="unit-badge">${item.unit}</div>
          <div class="unit-anchor">${item.label}</div>
        `;
        card.onclick = () => selectItem(idx);
        grid.appendChild(card);
      });

      const activeItem = items[currentIndex];
      document.getElementById('focusEmoji').textContent = activeItem.emoji;
      document.getElementById('focusText').innerHTML = `1 <span>${activeItem.unit}</span> ≈ ${activeItem.label}`;
    }

    function setCategory(cat) {
      currentCat = cat;
      currentIndex = 1;
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', ['length', 'mass', 'capacity'][i] === cat);
      });
      render();
    }

    function selectItem(idx) {
      currentIndex = idx;
      render();
    }

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

Look around your room right now. Would you measure your shoe in **centimeters** or **kilometers**?

math

Choosing Appropriate Metric Units for Length, Mass, and Capacity. Select mm, cm, m, km, g, kg, mL, and L based on the physical scale of everyday items.

Finding Reasonable Units of Measurement

Choose the Appropriate Metric Unit of Measure

Curriculum for Excellence: Units of Measure and Estimation

Effective instruction for unit selection relies on concrete body-part and everyday environmental anchors before transitioning to abstract unit conversions. Scaffold learning by first requiring students to categorize the dimension (Length vs. Mass vs. Capacity), then choosing between micro-scale ($\text{mm}, \text{g}, \text{mL}$) and macro-scale ($\text{km}, \text{kg}, \text{L}$) benchmarks before refining to intermediate units.

Choosing Appropriate Metric Units for Length, Mass, and Capacity

Measuring Length

Measuring Mass