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 box of magic square stickers to build a patio. Every time you stick one square down, you cover a flat space on your grid!

The amount of flat space a shape covers is called its **area**. When you count the squares inside a shape, you are measuring its area.

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      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: column;
      align-items: center;
      gap: 16px;
      width: 100%;
      max-width: 440px;
    }
    .grid-container {
      background: #ffffff;
      padding: 12px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1;
    }
    .cell {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .cell.filled {
      background: #22b7ff;
      border-color: #009ceb;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
    }
    .stats-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 320px;
      padding: 10px 16px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      font-size: 16px;
      font-weight: 600;
    }
    .area-badge {
      color: #0284c7;
      font-size: 18px;
      font-weight: 700;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 320px;
    }
    .btn {
      flex: 1;
      padding: 10px 12px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      border: 1px solid #e2e8f0;
      transition: background-color 0.15s ease, border-color 0.15s ease;
      text-align: center;
    }
    .btn:active {
      background: #e2e8f0;
    }
    .btn-primary {
      background: #22b7ff;
      color: #ffffff;
      border: 1px solid #009ceb;
    }
    .btn-primary:active {
      background: #009ceb;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    <div class="stats-bar">
      <span>Area:</span>
      <span class="area-badge" id="areaDisplay">1 square</span>
    </div>

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

    <div class="controls">
      <button class="btn" id="presetBtn">Shape Preset</button>
      <button class="btn" id="clearBtn">Clear</button>
    </div>
  </div>

  <script>
    const gridEl = document.getElementById('grid');
    const areaDisplay = document.getElementById('areaDisplay');
    const clearBtn = document.getElementById('clearBtn');
    const presetBtn = document.getElementById('presetBtn');

    const totalCells = 25;
    let gridState = new Array(totalCells).fill(false);
    
    // Preset: 1 unit square highlighted initially
    gridState[12] = true;

    const presets = [
      [12],                                // 1 square
      [11, 12, 13],                        // 3 squares (line)
      [6, 7, 11, 12],                      // 4 squares (2x2)
      [6, 7, 8, 11, 12, 13],               // 6 squares (2x3)
      [7, 11, 12, 13, 17]                  // 5 squares (cross)
    ];
    let presetIdx = 0;

    function renderGrid() {
      gridEl.innerHTML = '';
      let count = 0;

      gridState.forEach((isFilled, idx) => {
        const cell = document.createElement('div');
        cell.className = 'cell' + (isFilled ? ' filled' : '');
        if (isFilled) {
          count++;
          cell.textContent = count;
        }
        cell.addEventListener('click', () => toggleCell(idx));
        gridEl.appendChild(cell);
      });

      areaDisplay.textContent = count === 1 ? '1 square' : count + ' squares';
    }

    function toggleCell(idx) {
      gridState[idx] = !gridState[idx];
      renderGrid();
    }

    clearBtn.addEventListener('click', () => {
      gridState.fill(false);
      renderGrid();
    });

    presetBtn.addEventListener('click', () => {
      presetIdx = (presetIdx + 1) % presets.length;
      gridState.fill(false);
      presets[presetIdx].forEach(idx => gridState[idx] = true);
      renderGrid();
    });

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

What happens if we color in more than one square? Let's try coloring exactly 6 squares.

To make a shape with an **area of 6**, you color in exactly 6 square boxes on the grid.

You can arrange your 6 squares into a tidy rectangle or a tall tower shape. As long as you color 6 boxes, both shapes have the exact same area!

<!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;
      -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;
      gap: 12px;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

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

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .grid-container {
      background: #ffffff;
      padding: 10px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: inline-block;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(6, 38px);
      grid-template-rows: repeat(6, 38px);
      gap: 3px;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
    }

    @media (max-width: 360px) {
      .grid {
        grid-template-columns: repeat(6, 32px);
        grid-template-rows: repeat(6, 32px);
        gap: 2px;
        padding: 2px;
      }
    }

    .cell {
      background: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
      transition: background 0.2s;
    }

    .cell.filled {
      background: #22b7ff;
    }

    .status-badge {
      background: #ffffff;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-badge .count {
      color: #22b7ff;
    }

    .status-badge.exact {
      border: 1.5px solid #22b7ff;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" id="btn-rect">2 × 3</button>
    <button class="btn" id="btn-tower">1 × 6</button>
    <button class="btn" id="btn-stair">Stairs</button>
    <button class="btn" id="btn-clear">Clear</button>
  </div>

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

  <div class="status-badge exact" id="status">
    Area = <span class="count" id="count">6</span> squares
  </div>

  <script>
    const gridEl = document.getElementById('grid');
    const countEl = document.getElementById('count');
    const statusEl = document.getElementById('status');
    const btnRect = document.getElementById('btn-rect');
    const btnTower = document.getElementById('btn-tower');
    const btnStair = document.getElementById('btn-stair');
    const btnClear = document.getElementById('btn-clear');
    const btns = [btnRect, btnTower, btnStair, btnClear];

    const presets = {
      rect: [
        [2, 1], [2, 2], [2, 3],
        [3, 1], [3, 2], [3, 3]
      ],
      tower: [
        [0, 2], [1, 2], [2, 2],
        [3, 2], [4, 2], [5, 2]
      ],
      stair: [
        [1, 1],
        [2, 1], [2, 2],
        [3, 1], [3, 2], [3, 3]
      ]
    };

    let cells = [];

    for (let r = 0; r < 6; r++) {
      for (let c = 0; c < 6; c++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.dataset.r = r;
        cell.dataset.c = c;
        cell.addEventListener('click', () => {
          cell.classList.toggle('filled');
          setActiveBtn(null);
          updateCount();
        });
        gridEl.appendChild(cell);
        cells.push(cell);
      }
    }

    function setActiveBtn(activeBtn) {
      btns.forEach(b => b.classList.remove('active'));
      if (activeBtn) activeBtn.classList.add('active');
    }

    function setPreset(pattern, btn) {
      cells.forEach(cell => cell.classList.remove('filled'));
      pattern.forEach(([r, c]) => {
        const cell = cells.find(el => el.dataset.r == r && el.dataset.c == c);
        if (cell) cell.classList.add('filled');
      });
      setActiveBtn(btn);
      updateCount();
    }

    function updateCount() {
      let num = 1;
      let total = 0;
      cells.forEach(cell => {
        if (cell.classList.contains('filled')) {
          cell.textContent = num++;
          total++;
        } else {
          cell.textContent = '';
        }
      });
      countEl.textContent = total;
      if (total === 6) {
        statusEl.classList.add('exact');
      } else {
        statusEl.classList.remove('exact');
      }
    }

    btnRect.addEventListener('click', () => setPreset(presets.rect, btnRect));
    btnTower.addEventListener('click', () => setPreset(presets.tower, btnTower));
    btnStair.addEventListener('click', () => setPreset(presets.stair, btnStair));
    btnClear.addEventListener('click', () => {
      cells.forEach(cell => cell.classList.remove('filled'));
      setActiveBtn(btnClear);
      updateCount();
    });

    setPreset(presets.rect, btnRect);
  </script>
</body>
</html>

Can we make a shape that is even bigger? Let's add more squares to reach 8.

An **area of 8** means our shape covers exactly 8 grid squares.

<!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; }
  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;
    user-select: none;
    -webkit-user-select: none;
  }

  .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 340px;
    margin-bottom: 12px;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.25s ease;
  }

  .badge.target-met {
    background: #ecfdf5;
    color: #059669;
    box-shadow: 0 0 0 1.5px #10b981;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 340px;
    background: #ffffff;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    touch-action: manipulation;
  }

  .cell {
    aspect-ratio: 1;
    background: #f8fafc;
    border-radius: 8px;
    border: 1.5px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  }

  .cell:active {
    transform: scale(0.95);
  }

  .cell.active {
    background: #10b981;
    border: 1.5px solid #059669;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
  }

  .controls {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 340px;
    margin-top: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn {
    flex: 1;
    min-width: 70px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
  }

  .btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  .btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
  }
</style>
</head>
<body>

<div class="top-bar">
  <div id="statusBadge" class="badge">
    <span>Area:</span>
    <span id="countText">0</span>
  </div>
  <button id="clearBtn" class="btn" style="flex:0; min-width:auto; padding:6px 12px;">Clear</button>
</div>

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

<div class="controls">
  <button class="btn" id="shape1Btn">4 × 2</button>
  <button class="btn" id="shape2Btn">L-Shape</button>
  <button class="btn" id="shape3Btn">Steps</button>
</div>

<script>
  const COLS = 6;
  const ROWS = 4;
  const TOTAL_CELLS = COLS * ROWS;

  const presets = {
    shape1: [7, 8, 9, 10, 13, 14, 15, 16],
    shape2: [1, 7, 13, 19, 20, 21, 22, 23],
    shape3: [2, 3, 8, 9, 14, 15, 20, 21]
  };

  const gridEl = document.getElementById('grid');
  const badgeEl = document.getElementById('statusBadge');
  const countEl = document.getElementById('countText');
  const presetBtns = {
    shape1: document.getElementById('shape1Btn'),
    shape2: document.getElementById('shape2Btn'),
    shape3: document.getElementById('shape3Btn')
  };

  const cells = [];
  const activeIndices = new Set();

  for (let i = 0; i < TOTAL_CELLS; i++) {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.addEventListener('click', () => {
      clearActivePresetBtns();
      toggleCell(i);
    });
    gridEl.appendChild(cell);
    cells.push(cell);
  }

  function toggleCell(idx) {
    if (activeIndices.has(idx)) {
      activeIndices.delete(idx);
    } else {
      activeIndices.add(idx);
    }
    updateDisplay();
  }

  function updateDisplay() {
    let order = 1;
    cells.forEach((cell, idx) => {
      if (activeIndices.has(idx)) {
        cell.classList.add('active');
        cell.textContent = order++;
      } else {
        cell.classList.remove('active');
        cell.textContent = '';
      }
    });

    const count = activeIndices.size;
    countEl.textContent = count;

    if (count === 8) {
      badgeEl.classList.add('target-met');
      countEl.textContent = '8 ✓';
    } else {
      badgeEl.classList.remove('target-met');
    }
  }

  function clearActivePresetBtns() {
    Object.values(presetBtns).forEach(b => b.classList.remove('active'));
  }

  function applyPreset(key) {
    clearActivePresetBtns();
    presetBtns[key].classList.add('active');
    activeIndices.clear();
    presets[key].forEach(idx => activeIndices.add(idx));
    updateDisplay();
  }

  presetBtns.shape1.addEventListener('click', () => applyPreset('shape1'));
  presetBtns.shape2.addEventListener('click', () => applyPreset('shape2'));
  presetBtns.shape3.addEventListener('click', () => applyPreset('shape3'));

  document.getElementById('clearBtn').addEventListener('click', () => {
    clearActivePresetBtns();
    activeIndices.clear();
    updateDisplay();
  });

  // Start with default 4x2 shape (Area 8)
  applyPreset('shape1');
</script>

</body>
</html>

Make sure all your colored squares touch along their flat edges. If a square is floating off by itself, it is not part of the same shape!

Now, what is the biggest challenge of all? Let's count all the way to 10!

To create a shape with an **area of 10**, count out loud as you color each box until you reach 10.

<!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>Drawing Shapes with Given Area</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
      gap: 8px;
    }
    .badge {
      font-size: 14px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .badge-count {
      color: #8b5cf6;
      font-variant-numeric: tabular-nums;
    }
    .badge.success {
      background: #f5f3ff;
      border-color: #8b5cf6;
      color: #6d28d9;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .shape-btn {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .shape-btn.active {
      background: #8b5cf6;
      border-color: #8b5cf6;
      color: #ffffff;
    }
    .grid-container {
      background: #ffffff;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 5px;
      width: 100%;
      max-width: 380px;
      aspect-ratio: 6 / 4;
    }
    .cell {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }
    .cell:active {
      transform: scale(0.95);
    }
    .cell.filled {
      background: #8b5cf6;
      border: 1px solid #7c3aed;
      box-shadow: 0 2px 4px rgba(139, 92, 246, 0.25);
    }
    .cell.over {
      background: #f97316;
      border: 1px solid #ea580c;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 380px;
      font-size: 13px;
      color: #6b7280;
    }
    .clear-btn {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #6b7280;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div id="statusBadge" class="badge">
      <span>Area:</span>
      <span id="counter" class="badge-count">0</span>
      <span>/ 10</span>
    </div>
    <div class="btn-group">
      <button class="shape-btn active" data-preset="1">A</button>
      <button class="shape-btn" data-preset="2">B</button>
      <button class="shape-btn" data-preset="3">C</button>
      <button class="shape-btn" data-preset="draw">✏️</button>
    </div>
  </div>

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

  <div class="controls">
    <span>Tap squares to count</span>
    <button id="clearBtn" class="clear-btn">Clear</button>
  </div>

  <script>
    const TARGET = 10;
    const ROWS = 4;
    const COLS = 6;
    const TOTAL = ROWS * COLS;

    const PRESETS = {
      1: [6, 7, 8, 9, 10, 12, 13, 14, 15, 16],             // 2x5 rectangle
      2: [1, 2, 7, 8, 13, 14, 15, 16, 17, 18],            // L-shape
      3: [2, 3, 7, 8, 9, 10, 14, 15, 20, 21]              // Stepped/T-shape
    };

    let selectedIndices = [];
    const gridEl = document.getElementById('grid');
    const counterEl = document.getElementById('counter');
    const statusBadge = document.getElementById('statusBadge');
    const clearBtn = document.getElementById('clearBtn');
    const shapeBtns = document.querySelectorAll('.shape-btn');

    // Create grid cells
    for (let i = 0; i < TOTAL; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.dataset.index = i;
      cell.addEventListener('click', () => toggleCell(i));
      gridEl.appendChild(cell);
    }

    function updateGrid() {
      const cells = gridEl.querySelectorAll('.cell');
      cells.forEach(c => {
        c.className = 'cell';
        c.textContent = '';
      });

      selectedIndices.forEach((cellIdx, order) => {
        const cell = cells[cellIdx];
        if (cell) {
          const num = order + 1;
          cell.textContent = num;
          cell.classList.add('filled');
          if (num > TARGET) {
            cell.classList.add('over');
          }
        }
      });

      const count = selectedIndices.length;
      counterEl.textContent = count;

      if (count === TARGET) {
        statusBadge.classList.add('success');
      } else {
        statusBadge.classList.remove('success');
      }
    }

    function toggleCell(idx) {
      // Switch active tab to draw mode
      shapeBtns.forEach(b => b.classList.remove('active'));
      document.querySelector('[data-preset="draw"]').classList.add('active');

      const existingPos = selectedIndices.indexOf(idx);
      if (existingPos > -1) {
        selectedIndices.splice(existingPos, 1);
      } else {
        selectedIndices.push(idx);
      }
      updateGrid();
    }

    function loadPreset(presetKey) {
      shapeBtns.forEach(b => b.classList.remove('active'));
      const activeBtn = document.querySelector(`[data-preset="${presetKey}"]`);
      if (activeBtn) activeBtn.classList.add('active');

      if (PRESETS[presetKey]) {
        selectedIndices = [...PRESETS[presetKey]];
      } else {
        selectedIndices = [];
      }
      updateGrid();
    }

    shapeBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const preset = btn.dataset.preset;
        loadPreset(preset);
      });
    });

    clearBtn.addEventListener('click', () => {
      loadPreset('draw');
    });

    // Initialize with preset 1
    loadPreset(1);
  </script>
</body>
</html>

Whenever you design a new grid shape, point your finger and count the boxes one by one to double-check your total area!

math

Drawing Shapes with a Given Area in Squares. Color in exactly 6, 8, or 10 grid squares to create custom geometric shapes with a specified area.

Create Figures with a Given Area on a Grid

Curriculum for Excellence: First Level Maths - Measuring Area by Counting Squares (MNU 1-11b)

NRICH Primary: Exploring Shapes, Tiles, and Grid Area

In Early Level / P1 (bridging into First Level CfE MNU 1-11b), instruction should transition through the Concrete-Pictorial-Abstract (CPA) framework. Start with concrete square unit tiles (plastic or foam mathlink cubes) where children physically assemble figures of 6, 8, or 10 tiles. Next, transition to pictorial representations using squared paper where learners place counters first before coloring. Emphasize that rotating or rearranging the squares changes the look/perimeter of the shape but conserves the exact area.

Drawing Shapes with a Given Area in Squares

Making Shapes with Area 6

Building Area 8