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 tray with 100 delicious mini cupcakes, and you decorate some with blue sprinkles.

The word **cent** means 100, just like 100 cents in one dollar, so **percent** means "out of 100".

<!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>Parts Per Hundred</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .main-wrap {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .math-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      font-size: 22px;
      font-weight: 700;
      min-height: 52px;
    }

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

    .fraction .num {
      color: #2563eb;
      border-bottom: 2px solid #1e2945;
      padding-bottom: 2px;
      width: 100%;
      text-align: center;
    }

    .fraction .den {
      padding-top: 2px;
      color: #6b7280;
    }

    .eq-sign {
      color: #9ca3af;
      font-weight: 600;
    }

    .pct-val {
      color: #2563eb;
      font-size: 24px;
    }

    /* 10x10 Grid */
    .grid-container {
      background: #ffffff;
      padding: 8px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 280px;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 2px;
      touch-action: none;
    }

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

    .cell.active {
      background: #2563eb;
    }

    /* Controls */
    .controls {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .slider-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 4px;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      accent-color: #2563eb;
      cursor: pointer;
    }

    .preset-row {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .preset-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.15s ease;
      flex: 1;
      text-align: center;
    }

    .preset-btn:active, .preset-btn.selected {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <div class="math-display">
      <div class="fraction">
        <span class="num" id="numVal">35</span>
        <span class="den">100</span>
      </div>
      <span class="eq-sign">=</span>
      <span class="pct-val" id="pctVal">35%</span>
    </div>

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

    <div class="controls">
      <div class="slider-wrap">
        <input type="range" id="slider" min="0" max="100" value="35">
      </div>
      <div class="preset-row">
        <button class="preset-btn" data-val="10">10%</button>
        <button class="preset-btn" 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>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const slider = document.getElementById('slider');
    const numVal = document.getElementById('numVal');
    const pctVal = document.getElementById('pctVal');
    const presetBtns = document.querySelectorAll('.preset-btn');

    let cells = [];

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

    function updateValue(val) {
      val = Math.max(0, Math.min(100, parseInt(val) || 0));
      slider.value = val;
      numVal.textContent = val;
      pctVal.textContent = val + '%';

      cells.forEach((cell, idx) => {
        cell.classList.toggle('active', idx < val);
      });

      presetBtns.forEach(btn => {
        btn.classList.toggle('selected', parseInt(btn.dataset.val) === val);
      });
    }

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

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

    // Touch / Click & Drag on grid directly
    let isDragging = false;

    function handlePointer(e) {
      const rect = grid.getBoundingClientRect();
      const clientX = e.clientX || (e.touches && e.touches[0].clientX);
      const clientY = e.clientY || (e.touches && e.touches[0].clientY);
      if (clientX === undefined || clientY === undefined) return;

      const x = Math.min(Math.max(0, clientX - rect.left), rect.width);
      const y = Math.min(Math.max(0, clientY - rect.top), rect.height);

      const col = Math.min(9, Math.floor((x / rect.width) * 10));
      const row = Math.min(9, Math.floor((y / rect.height) * 10));
      const count = row * 10 + col + 1;

      updateValue(count);
    }

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

    window.addEventListener('pointermove', (e) => {
      if (isDragging) handlePointer(e);
    });

    window.addEventListener('pointerup', () => {
      isDragging = false;
    });

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

How do we show these parts of 100 so we can count them easily?

A **100-grid** is a big square made of 10 rows and 10 columns, giving us 100 little squares in total.

Every single square you color represents **1 percent**, which we write with the percent sign as **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="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .main-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
      max-width: 520px;
    }

    @media (max-width: 460px) {
      .main-layout {
        flex-direction: column;
        gap: 16px;
      }
    }

    /* 10x10 Grid */
    .grid-wrapper {
      background: #ffffff;
      padding: 8px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid #e2e8f0;
      flex-shrink: 0;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 2px;
      width: 200px;
      height: 200px;
    }

    @media (max-width: 360px) {
      .grid {
        width: 180px;
        height: 180px;
      }
    }

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

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

    .cell.active.first {
      background: #2563eb;
    }

    /* Control & Readout Panel */
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      flex: 1;
      width: 100%;
    }

    .readout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 20px;
      width: 100%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

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

    .fraction-top {
      color: #3b82f6;
      border-bottom: 2px solid #1e2945;
      padding: 0 4px 2px 4px;
      min-width: 32px;
      text-align: center;
    }

    .fraction-bottom {
      padding-top: 2px;
    }

    .equals {
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
    }

    .percent-block {
      font-size: 28px;
      font-weight: 800;
      color: #3b82f6;
      min-width: 72px;
      text-align: left;
    }

    /* Slider */
    .slider-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: #e2e8f0;
      outline: none;
      cursor: pointer;
    }

    .range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #3b82f6;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
      border: 2px solid #ffffff;
      transition: background 0.15s ease;
    }

    .range-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #3b82f6;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
      border: 2px solid #ffffff;
    }

    /* Preset Buttons */
    .presets {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .preset-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-weight: 600;
      font-size: 13px;
      padding: 6px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .preset-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .preset-btn.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="grid-wrapper">
      <div class="grid" id="grid"></div>
    </div>

    
    <div class="panel">
      <div class="readout">
        <div class="fraction-block">
          <span class="fraction-top" id="fracNum">1</span>
          <span class="fraction-bottom">100</span>
        </div>
        <span class="equals">=</span>
        <div class="percent-block" id="percentVal">1%</div>
      </div>

      <div class="slider-container">
        <input type="range" class="range-slider" id="slider" min="1" max="100" value="1">
      </div>

      <div class="presets">
        <button class="preset-btn active" data-val="1">1%</button>
        <button class="preset-btn" data-val="10">10%</button>
        <button class="preset-btn" data-val="25">25%</button>
        <button class="preset-btn" data-val="50">50%</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 fracNum = document.getElementById('fracNum');
    const percentVal = document.getElementById('percentVal');
    const buttons = document.querySelectorAll('.preset-btn');

    // Build 100 cells
    const cells = [];
    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.classList.add('cell');
      if (i === 0) cell.classList.add('first');
      grid.appendChild(cell);
      cells.push(cell);
    }

    function update(count) {
      count = Math.max(1, Math.min(100, parseInt(count, 10) || 1));
      slider.value = count;
      fracNum.textContent = count;
      percentVal.textContent = count + '%';

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

      buttons.forEach(btn => {
        if (parseInt(btn.getAttribute('data-val'), 10) === count) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

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

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        update(btn.getAttribute('data-val'));
      });
    });

    // Initial render: 1%
    update(1);
  </script>
</body>
</html>

What happens when we color in a whole bunch of squares together?

If you color in 25 squares out of 100, you have colored **25%** of the entire grid.

<!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>Parts Per Hundred</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

    .diagram {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    /* 10x10 Grid */
    .grid-container {
      width: 230px;
      height: 230px;
      flex-shrink: 0;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 2px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 12px;
      touch-action: none;
      user-select: none;
    }

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

    .cell.filled {
      background: #f97316;
    }

    /* Right Control & Math Panel */
    .control-panel {
      flex: 1;
      min-width: 220px;
      max-width: 280px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .math-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: #ffffff;
      padding: 12px 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      width: 100%;
    }

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

    .fraction .num {
      color: #f97316;
    }

    .fraction .bar {
      width: 100%;
      height: 2px;
      background: #1e2945;
      margin: 2px 0;
      border-radius: 1px;
    }

    .fraction .den {
      color: #64748b;
    }

    .equal-sign {
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
    }

    .pct-display {
      font-size: 28px;
      font-weight: 800;
      color: #f97316;
      display: flex;
      align-items: baseline;
    }

    .pct-unit {
      font-size: 20px;
      font-weight: 700;
      margin-left: 2px;
    }

    /* Slider */
    .slider-wrap {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: #e2e8f0;
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #f97316;
      box-shadow: 0 1px 4px rgba(249, 115, 22, 0.4);
      cursor: pointer;
      border: 2px solid #ffffff;
      transition: transform 0.1s ease;
    }

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

    /* Presets */
    .presets {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: space-between;
    }

    .preset-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      padding: 7px 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
    }

    .preset-btn.active {
      background: #f97316;
      color: #ffffff;
      border-color: #f97316;
      box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
    }
  </style>
</head>
<body>
  <div class="diagram">
    
    <div class="grid-container" id="grid"></div>

    
    <div class="control-panel">
      <div class="math-display">
        <div class="fraction">
          <span class="num" id="numVal">25</span>
          <span class="bar"></span>
          <span class="den">100</span>
        </div>
        <span class="equal-sign">=</span>
        <div class="pct-display">
          <span id="pctVal">25</span><span class="pct-unit">%</span>
        </div>
      </div>

      <div class="slider-wrap">
        <input type="range" id="rangeInput" min="0" max="100" value="25" aria-label="Shaded squares out of 100">
      </div>

      <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>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const rangeInput = document.getElementById('rangeInput');
    const numVal = document.getElementById('numVal');
    const pctVal = document.getElementById('pctVal');
    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.dataset.index = i;
      grid.appendChild(cell);
      cells.push(cell);

      cell.addEventListener('click', () => {
        setValue(i + 1);
      });
    }

    function setValue(val) {
      val = Math.max(0, Math.min(100, parseInt(val, 10) || 0));
      rangeInput.value = val;
      numVal.textContent = val;
      pctVal.textContent = val;

      // Update grid cells
      for (let i = 0; i < 100; i++) {
        if (i < val) {
          cells[i].classList.add('filled');
        } else {
          cells[i].classList.remove('filled');
        }
      }

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

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

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

    // Initialize at 25%
    setValue(25);
  </script>
</body>
</html>

What if we keep coloring until half of the grid—or even the entire grid—is full?

Coloring 50 squares fills exactly half the grid, which makes **50%**.

If you color all 100 squares, you have colored **100%**, which means the whole thing!

<!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>Parts Per Hundred</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

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

    .display-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: #ffffff;
      padding: 8px 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      min-height: 64px;
    }

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

    .fraction-line {
      width: 100%;
      min-width: 32px;
      height: 2px;
      background: #8b5cf6;
      margin: 2px 0;
      border-radius: 1px;
    }

    .denominator {
      color: #6b7280;
    }

    .eq-sign {
      font-size: 24px;
      font-weight: 700;
      color: #9ca3af;
    }

    .percent-val {
      font-size: 32px;
      font-weight: 800;
      color: #8b5cf6;
      min-width: 80px;
      text-align: left;
    }

    .content-area {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }

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

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

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

    .cell.active {
      background: #8b5cf6;
    }

    .controls-panel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
      max-width: 240px;
      width: 100%;
    }

    .slider-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #ffffff;
      padding: 10px 14px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: #ede9fe;
      outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #8b5cf6;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4);
    }

    input[type="range"]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #8b5cf6;
      cursor: pointer;
      border: none;
      box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4);
    }

    .preset-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .preset-btn {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      color: #1e2945;
      padding: 8px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
      text-align: center;
    }

    .preset-btn:active, .preset-btn.active {
      background: #8b5cf6;
      border-color: #8b5cf6;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="display-row">
      <div class="fraction-wrap">
        <span id="numVal">35</span>
        <span class="fraction-line"></span>
        <span class="denominator">100</span>
      </div>
      <span class="eq-sign">=</span>
      <span class="percent-val" id="percentVal">35%</span>
    </div>

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

      <div class="controls-panel">
        <div class="slider-wrap">
          <input type="range" id="slider" min="0" max="100" value="35">
        </div>

        <div class="preset-group">
          <button class="preset-btn" data-val="1">1%</button>
          <button class="preset-btn" data-val="10">10%</button>
          <button class="preset-btn" 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>
    </div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const slider = document.getElementById('slider');
    const numVal = document.getElementById('numVal');
    const percentVal = document.getElementById('percentVal');
    const presetBtns = document.querySelectorAll('.preset-btn');

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

    function setValue(val) {
      val = Math.max(0, Math.min(100, parseInt(val, 10) || 0));
      slider.value = val;
      numVal.textContent = val;
      percentVal.textContent = val + '%';

      for (let i = 0; i < 100; i++) {
        cells[i].classList.toggle('active', i < val);
      }

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

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

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

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

Be careful: percent always means out of **100**, so 7 colored squares on a 10-grid is not 7%—it has to be out of 100 equal parts.

Whenever you see the **%** sign, count how many parts are chosen out of 100!

math

Understanding Percentage as Parts Per Hundred. Define percent as parts per hundred and represent percentages using 100-grid visual models.

Describing the Meaning of Percent & Hundred Grid Visualizations

Third Level Maths: Understanding Fractions, Decimals, and Percentages

What Percentage is Illustrated? Model Percents with 100-Grids

Pedagogical strategy for mastering MNU 3-07a and parts-per-hundred models begins with explicit visual-concrete grounding. By using the 100-grid (10x10 area model), students establish that percent is a standardized ratio where the reference whole is partitioned into 100 equal pieces. Progress from unit counts (1 square = 1%) to tens structure (1 row = 10%) before bridging into fractional notation (n/100) and decimal fractions (0.01n). Addressing place value distinctions (e.g., distinguishing 7% from 70%) visually prevents foundational misconceptions before progressing to calculating percentage discounts, increases, and real-world problem-solving contexts.

Understanding Percentage as Parts Per Hundred

The 100-Grid

Counting by Tens and Fives