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 have a giant waffle made of 100 tiny square bites.

If you put syrup on just a few bites, how do we describe how much of the waffle is sweet?

The word **percent** means parts out of one hundred. Just like 100 pennies make one whole dollar, a percent tells you how many pieces you have out of 100.

We write percent using the **% symbol**. If you have 1 square out of 100, you have $1\%$.

<!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="1:1">
  <title>Parts per Hundred</title>
  <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: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      line-height: 1.1;
    }
    .fraction .num {
      color: #ff6b6b;
      border-bottom: 2px solid #1e2945;
      padding: 0 4px;
      min-width: 28px;
      text-align: center;
    }
    .fraction .den {
      padding: 0 4px;
    }
    .percent-val {
      color: #ff6b6b;
      font-size: 26px;
      min-width: 60px;
    }
    .grid-wrap {
      width: min(240px, 68vw);
      height: min(240px, 68vw);
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 2px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
      touch-action: none;
      cursor: pointer;
    }
    .cell {
      background: #ffffff;
      border-radius: 2px;
      transition: background 0.15s ease;
    }
    .cell.filled {
      background: #ff6b6b;
    }
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: min(280px, 90vw);
      margin-top: 14px;
    }
    .slider {
      width: 100%;
      accent-color: #ff6b6b;
      cursor: pointer;
    }
    .btn-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .btn:active {
      background: #f1f5f9;
    }
    .btn.active {
      background: #ff6b6b;
      color: #ffffff;
      border-color: #ff6b6b;
    }
  </style>
</head>
<body>
  <div class="display">
    <div class="fraction">
      <span class="num" id="num">1</span>
      <span class="den">100</span>
    </div>
    <span>=</span>
    <span class="percent-val" id="percent">1%</span>
  </div>

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

  <div class="controls">
    <input type="range" id="slider" class="slider" min="1" max="100" value="1">
    <div class="btn-row">
      <button class="btn active" data-val="1">1%</button>
      <button class="btn" data-val="10">10%</button>
      <button class="btn" data-val="25">25%</button>
      <button class="btn" data-val="50">50%</button>
      <button class="btn" data-val="100">100%</button>
    </div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const numEl = document.getElementById('num');
    const percentEl = document.getElementById('percent');
    const slider = document.getElementById('slider');
    const buttons = document.querySelectorAll('.btn');
    const cells = [];

    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      grid.appendChild(cell);
      cells.push(cell);
    }

    function setValue(val) {
      val = Math.max(1, Math.min(100, parseInt(val, 10) || 1));
      slider.value = val;
      numEl.textContent = val;
      percentEl.textContent = val + '%';

      cells.forEach((cell, idx) => {
        if (idx < val) {
          cell.classList.add('filled');
        } else {
          cell.classList.remove('filled');
        }
      });

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

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

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

    let isPointerDown = false;
    function updateFromGrid(e) {
      const rect = grid.getBoundingClientRect();
      const x = Math.max(0, Math.min(rect.width - 1, e.clientX - rect.left));
      const y = Math.max(0, Math.min(rect.height - 1, e.clientY - rect.top));
      const col = Math.floor((x / rect.width) * 10);
      const row = Math.floor((y / rect.height) * 10);
      const count = row * 10 + col + 1;
      setValue(count);
    }

    grid.addEventListener('pointerdown', (e) => {
      isPointerDown = true;
      grid.setPointerCapture(e.pointerId);
      updateFromGrid(e);
    });

    grid.addEventListener('pointermove', (e) => {
      if (isPointerDown) updateFromGrid(e);
    });

    grid.addEventListener('pointerup', () => { isPointerDown = false; });
    grid.addEventListener('pointercancel', () => { isPointerDown = false; });

    setValue(1);
  </script>
</body>
</html>

What happens if we color in a whole bunch of squares at once?

A **hundred grid** is a big square made of 10 rows and 10 columns, which makes 100 equal little boxes in total.

If you color 25 boxes on the grid, you have 25 parts out of 100, which is **25%**.

<!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="1:1">
  <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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 14px;
    }

    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .preset-btn {
      background: #ffffff;
      border: 1px solid #d0d7de;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #495057;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .preset-btn.active {
      background: #20c997;
      border-color: #20c997;
      color: #ffffff;
    }

    .main-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 2px;
      width: 220px;
      height: 220px;
      background: #ffffff;
      padding: 4px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid #e9ecef;
      cursor: pointer;
    }

    .cell {
      background: #f1f3f5;
      border-radius: 2px;
      transition: background-color 0.1s ease;
    }

    .cell.filled {
      background: #20c997;
    }

    .display-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid #e9ecef;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.1;
      color: #20c997;
    }

    .fraction .num {
      border-bottom: 2px solid #20c997;
      padding: 0 4px;
      min-width: 24px;
      text-align: center;
    }

    .fraction .den {
      color: #868e96;
      padding: 0 4px;
    }

    .eq {
      font-size: 20px;
      font-weight: 600;
      color: #adb5bd;
    }

    .percent-val {
      font-size: 26px;
      font-weight: 800;
      color: #1e2945;
      min-width: 65px;
    }

    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 220px;
      gap: 6px;
    }

    .slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #e9ecef;
      outline: none;
      cursor: pointer;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #20c997;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

    .slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #20c997;
      cursor: pointer;
      border: none;
      box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

    .parts-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }
  </style>
</head>
<body>

  <div class="presets">
    <button class="preset-btn" data-val="10">10%</button>
    <button class="preset-btn active" data-val="25">25%</button>
    <button class="preset-btn" data-val="50">50%</button>
    <button class="preset-btn" data-val="75">75%</button>
    <button class="preset-btn" data-val="100">100%</button>
  </div>

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

    <div class="display-card">
      <div class="fraction">
        <span class="num" id="num">25</span>
        <span class="den">100</span>
      </div>
      <span class="eq">=</span>
      <span class="percent-val" id="percent">25%</span>
    </div>
  </div>

  <div class="controls">
    <input type="range" min="0" max="100" value="25" class="slider" id="slider">
    <span class="parts-label"><span id="parts-text">25</span> parts per 100</span>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const slider = document.getElementById('slider');
    const numEl = document.getElementById('num');
    const percentEl = document.getElementById('percent');
    const partsText = document.getElementById('parts-text');
    const presetBtns = document.querySelectorAll('.preset-btn');

    // Create 100 cells
    const cells = [];
    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.addEventListener('click', () => updateValue(i + 1));
      grid.appendChild(cell);
      cells.push(cell);
    }

    function updateValue(val) {
      val = Math.max(0, Math.min(100, parseInt(val, 10) || 0));
      slider.value = val;
      numEl.textContent = val;
      percentEl.textContent = val + '%';
      partsText.textContent = val;

      cells.forEach((cell, idx) => {
        if (idx < val) {
          cell.classList.add('filled');
        } else {
          cell.classList.remove('filled');
        }
      });

      presetBtns.forEach(btn => {
        if (parseInt(btn.dataset.val, 10) === val) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    slider.addEventListener('input', (e) => {
      updateValue(e.target.value);
    });

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

    // Initialize with 25%
    updateValue(25);
  </script>
</body>
</html>

Is there a fast trick to count lots of boxes without counting them one by one?

Because each full row has 10 boxes, each full row is worth **10%**.

If you shade 4 full rows, you have 4 tens, which is 40 boxes out of 100, or **40%**.

<!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="1:1">
  <title>Percent as Parts per Hundred</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 380px;
    }

    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #e2e8f0;
    }

    .btn.active {
      background: #339af0;
      border-color: #228be6;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(51, 154, 240, 0.35);
    }

    .grid-container {
      width: 100%;
      max-width: 280px;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      padding: 6px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 3px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }

    .cell {
      background: #f1f5f9;
      border-radius: 2px;
      transition: background-color 0.15s ease;
      cursor: pointer;
    }

    .cell.shaded {
      background: #339af0;
    }

    .readout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      line-height: 1;
      vertical-align: middle;
    }

    .fraction .num {
      padding-bottom: 2px;
      border-bottom: 2px solid #1e2945;
      min-width: 24px;
      text-align: center;
      color: #1971c2;
    }

    .fraction .den {
      padding-top: 2px;
      min-width: 24px;
      text-align: center;
      color: #64748b;
    }

    .equals {
      font-size: 20px;
      color: #94a3b8;
    }

    .percent {
      font-size: 24px;
      color: #1971c2;
    }

    .slider-row {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 280px;
      gap: 8px;
    }

    input[type=range] {
      flex: 1;
      accent-color: #339af0;
      cursor: pointer;
      height: 6px;
    }
  </style>
</head>
<body>

  <div class="presets">
    <button class="btn active" id="btn40" onclick="setCount(40)">40% (4 rows)</button>
    <button class="btn" id="btn5" onclick="setCount(5)">5% (5 units)</button>
    <button class="btn" id="btn50" onclick="setCount(50)">50% (5 rows)</button>
  </div>

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

  <div class="readout">
    <div class="fraction">
      <span class="num" id="num">40</span>
      <span class="den">100</span>
    </div>
    <span class="equals">=</span>
    <span class="percent" id="pct">40%</span>
  </div>

  <div class="slider-row">
    <input type="range" id="slider" min="0" max="100" value="40" oninput="onSlide(this.value)">
  </div>

  <script>
    const grid = document.getElementById('grid');
    const numEl = document.getElementById('num');
    const pctEl = document.getElementById('pct');
    const slider = document.getElementById('slider');
    const cells = [];
    let currentVal = 40;

    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.addEventListener('click', () => {
        setCount(i + 1);
      });
      grid.appendChild(cell);
      cells.push(cell);
    }

    function updateView(n) {
      currentVal = n;
      slider.value = n;
      numEl.textContent = n;
      pctEl.textContent = n + '%';

      cells.forEach((c, idx) => {
        if (idx < n) {
          c.classList.add('shaded');
        } else {
          c.classList.remove('shaded');
        }
      });

      document.getElementById('btn40').classList.toggle('active', n === 40);
      document.getElementById('btn5').classList.toggle('active', n === 5);
      document.getElementById('btn50').classList.toggle('active', n === 50);
    }

    function setCount(n) {
      updateView(n);
    }

    function onSlide(val) {
      updateView(parseInt(val, 10));
    }

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

Be careful when counting single boxes! Shading 5 single little boxes gives you **5%**, not 50%.

To get 50%, you need 5 full rows of ten boxes. If you fill every single box on the entire grid, all 100 out of 100 boxes are colored, giving you **100%**!

How do percents connect to fractions and decimals we already know?

You can show the exact same amount using four equivalent forms: **Shaded Area** $\Leftrightarrow$ **Fraction** $\left(\frac{\text{part}}{100}\right)$ $\Leftrightarrow$ **Decimal** $\Leftrightarrow$ **Percentage** ($x\%$).

For example, if a **shaded area** covers 35 out of 100 boxes, it can be written as the fraction $\frac{35}{100}$, the decimal $0.35$, or $35\%$.

How can we connect the boxes we color to other math topics we already know?

Any portion of a hundred grid can be expressed in four equivalent forms: a visual **Shaded Area**, a **fraction** over 100, a **decimal**, and a **percentage**.

For example, coloring 35 squares gives a **Shaded Area** of 35 boxes $\Leftrightarrow$ the fraction $\frac{35}{100}$ $\Leftrightarrow$ the decimal $0.35$ $\Leftrightarrow$ the percentage $35\%$.

<!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>Hundred Grid Equivalences</title>
  <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: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    .content-row {
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: center;
      justify-content: center;
    }

    @media (max-width: 460px) {
      .content-row {
        flex-direction: column;
      }
    }

    /* 10x10 Grid */
    .grid-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .grid-100 {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      width: 190px;
      height: 190px;
      gap: 1.5px;
      padding: 3px;
      background: #e2e8f0;
      border-radius: 8px;
      touch-action: none;
      cursor: pointer;
    }

    .cell {
      background: #ffffff;
      border-radius: 1.5px;
      transition: background-color 0.15s ease;
    }

    .cell.shaded {
      background: #3b82f6;
    }

    /* Representations Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      flex: 1;
      width: 100%;
    }

    .rep-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 76px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      text-align: center;
    }

    .rep-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }

    .rep-value {
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
    }

    /* Math fraction formatting */
    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      line-height: 1;
      font-size: 16px;
      font-weight: 700;
    }

    .numerator {
      border-bottom: 1.5px solid #0f172a;
      padding-bottom: 2px;
      color: #2563eb;
    }

    .denominator {
      padding-top: 2px;
      color: #64748b;
    }

    .badge-pct {
      color: #7c3aed;
    }

    .badge-dec {
      color: #059669;
    }

    .badge-sq {
      color: #2563eb;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      background: #f8fafc;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid #edf2f7;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      -webkit-appearance: none;
      appearance: none;
      background: #cbd5e1;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #3b82f6;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #3b82f6;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    }

    .presets {
      display: flex;
      justify-content: space-between;
      gap: 6px;
    }

    .preset-btn {
      flex: 1;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 0;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
    }

    .preset-btn:active {
      background: #e2e8f0;
    }

    .preset-btn.active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
    }
  </style>
</head>
<body>

<div class="main-layout">
  <div class="content-row">
    
    <div class="grid-container">
      <div class="grid-100" id="grid"></div>
    </div>

    
    <div class="cards-grid">
      <div class="rep-card">
        <span class="rep-label">Shaded Area</span>
        <span class="rep-value badge-sq" id="valArea">35 / 100</span>
      </div>

      <div class="rep-card">
        <span class="rep-label">Fraction</span>
        <div class="fraction">
          <span class="numerator" id="valNum">35</span>
          <span class="denominator">100</span>
        </div>
      </div>

      <div class="rep-card">
        <span class="rep-label">Decimal</span>
        <span class="rep-value badge-dec" id="valDec">0.35</span>
      </div>

      <div class="rep-card">
        <span class="rep-label">Percent</span>
        <span class="rep-value badge-pct" id="valPct">35%</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="slider-row">
      <input type="range" id="slider" min="0" max="100" value="35" aria-label="Shaded squares">
    </div>
    <div class="presets">
      <button class="preset-btn" data-val="10">10%</button>
      <button class="preset-btn" data-val="25">25%</button>
      <button class="preset-btn active" data-val="35">35%</button>
      <button class="preset-btn" data-val="50">50%</button>
      <button class="preset-btn" data-val="75">75%</button>
      <button class="preset-btn" data-val="100">100%</button>
    </div>
  </div>
</div>

<script>
  const grid = document.getElementById('grid');
  const slider = document.getElementById('slider');
  const valArea = document.getElementById('valArea');
  const valNum = document.getElementById('valNum');
  const valDec = document.getElementById('valDec');
  const valPct = document.getElementById('valPct');
  const presetBtns = document.querySelectorAll('.preset-btn');

  let cells = [];

  // Create 100 grid cells
  for (let i = 1; i <= 100; i++) {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.dataset.index = i;
    grid.appendChild(cell);
    cells.push(cell);
  }

  function update(val) {
    const count = parseInt(val, 10);
    slider.value = count;

    // Update cells
    cells.forEach((cell, idx) => {
      if (idx < count) {
        cell.classList.add('shaded');
      } else {
        cell.classList.remove('shaded');
      }
    });

    // Update representations
    valArea.textContent = count + " / 100";
    valNum.textContent = count;
    valDec.textContent = (count / 100).toFixed(2);
    valPct.textContent = count + "%";

    // Update preset active state
    presetBtns.forEach(btn => {
      if (parseInt(btn.dataset.val, 10) === count) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
  }

  // Slider input
  slider.addEventListener('input', (e) => {
    update(e.target.value);
  });

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

  // Grid interaction (click & drag)
  let isPointerDown = false;

  function handlePointer(e) {
    const rect = grid.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
      const col = Math.min(9, Math.max(0, Math.floor((x / rect.width) * 10)));
      const row = Math.min(9, Math.max(0, Math.floor((y / rect.height) * 10)));
      const index = row * 10 + col + 1;
      update(index);
    }
  }

  grid.addEventListener('pointerdown', (e) => {
    isPointerDown = true;
    grid.setPointerCapture(e.pointerId);
    handlePointer(e);
  });

  grid.addEventListener('pointermove', (e) => {
    if (isPointerDown) {
      handlePointer(e);
    }
  });

  grid.addEventListener('pointerup', (e) => {
    isPointerDown = false;
    try { grid.releasePointerCapture(e.pointerId); } catch (_) {}
  });

  grid.addEventListener('pointercancel', (e) => {
    isPointerDown = false;
    try { grid.releasePointerCapture(e.pointerId); } catch (_) {}
  });

  // Initial render (35 squares per lesson text context)
  update(35);
</script>

</body>
</html>

math

Understanding Percent as Parts per Hundred. Define percentage as parts out of 100 and model percentages using 10x10 grids.

Describing the Meaning of Percent & Modeling on 10x10 Grids

Understanding Percentages and Equivalence with Hundredths

Matching Fractions, Decimals and Percentages Activities

Curriculum for Excellence (CfE) benchmark MNU 2-07b focuses on establishing deep conceptual links among fractions, decimals, and percentages. Although foundation counting begins early, formal work with percentages and hundredth grids is explored at Second Level (P5–P7). Pedagogical best practice emphasizes the Concrete-Pictorial-Abstract (CPA) progression: using physical Base 10 hundred flats and ten-rods, progressing to coloring $10 \times 10$ paper grids, and concluding with abstract notation ($\frac{x}{100} = 0.xx = x\%$). Teachers should highlight the linguistic root 'cent' (connecting to century, centimeter, and cents) to reinforce the meaning of parts per hundred.

Understanding Percent as Parts per Hundred

What Does Percent Mean?

Shading a Hundred Grid

Counting by Tens