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 12 square tiles to build a rectangular floor. How many different rectangles can you make without breaking any tiles?

You can arrange the 12 tiles in rows and columns: 1 row of 12, 2 rows of 6, or 3 rows of 4.

<!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>Factor Pairs of 12</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    .nav-tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 420px;
    }

    .tab-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 15px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }

    .tab-btn.active {
      color: #0284c7;
      background: #e0f2fe;
      border-color: #22b7ff;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 220px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .grid-container {
      position: relative;
      transition: width 0.35s ease, height 0.35s ease;
    }

    .tile {
      position: absolute;
      background: #22b7ff;
      border-radius: 6px;
      color: #ffffff;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.25);
      transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
    }

    .dim-label {
      position: absolute;
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      transition: all 0.35s ease;
    }

    .dim-top {
      top: -24px;
      left: 0;
      width: 100%;
      height: 20px;
    }

    .dim-left {
      left: -28px;
      top: 0;
      width: 24px;
      height: 100%;
    }

    .math-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
      height: 32px;
    }

    .tag {
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 6px;
      color: #0284c7;
    }

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

    .play-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setPair(0)">1 × 12</button>
    <button class="tab-btn" onclick="setPair(1)">2 × 6</button>
    <button class="tab-btn" onclick="setPair(2)">3 × 4</button>
  </div>

  <div class="stage">
    <div id="gridBox" class="grid-container">
      <div id="dimTop" class="dim-label dim-top">12</div>
      <div id="dimLeft" class="dim-label dim-left">1</div>
      
      <div class="tile" id="t0">1</div>
      <div class="tile" id="t1">2</div>
      <div class="tile" id="t2">3</div>
      <div class="tile" id="t3">4</div>
      <div class="tile" id="t4">5</div>
      <div class="tile" id="t5">6</div>
      <div class="tile" id="t6">7</div>
      <div class="tile" id="t7">8</div>
      <div class="tile" id="t8">9</div>
      <div class="tile" id="t9">10</div>
      <div class="tile" id="t10">11</div>
      <div class="tile" id="t11">12</div>
    </div>
  </div>

  <div class="math-banner">
    <span id="eqRows" class="tag">1</span>
    <span>×</span>
    <span id="eqCols" class="tag">12</span>
    <span>=</span>
    <span>12</span>
  </div>

  <div class="controls">
    <button id="playBtn" class="play-btn" onclick="toggleAuto()">
      <span id="playIcon">⏸</span> Auto
    </button>
  </div>

  <script>
    const pairs = [
      { rows: 1, cols: 12, size: 24, gap: 3 },
      { rows: 2, cols: 6,  size: 38, gap: 6 },
      { rows: 3, cols: 4,  size: 46, gap: 8 }
    ];

    let currentIndex = 0;
    let autoInterval = null;

    function render(index) {
      currentIndex = index;
      const config = pairs[index];
      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === index));

      const totalW = config.cols * config.size + (config.cols - 1) * config.gap;
      const totalH = config.rows * config.size + (config.rows - 1) * config.gap;

      const gridBox = document.getElementById('gridBox');
      gridBox.style.width = totalW + 'px';
      gridBox.style.height = totalH + 'px';

      document.getElementById('dimTop').textContent = config.cols;
      document.getElementById('dimLeft').textContent = config.rows;
      document.getElementById('eqRows').textContent = config.rows;
      document.getElementById('eqCols').textContent = config.cols;

      for (let i = 0; i < 12; i++) {
        const r = Math.floor(i / config.cols);
        const c = i % config.cols;
        const tile = document.getElementById('t' + i);
        tile.style.width = config.size + 'px';
        tile.style.height = config.size + 'px';
        tile.style.left = (c * (config.size + config.gap)) + 'px';
        tile.style.top = (r * (config.size + config.gap)) + 'px';
        tile.style.fontSize = (config.size * 0.42) + 'px';
      }
    }

    function setPair(index) {
      render(index);
    }

    function toggleAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        document.getElementById('playIcon').textContent = '▶';
      } else {
        document.getElementById('playIcon').textContent = '⏸';
        startAuto();
      }
    }

    function startAuto() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(() => {
        const next = (currentIndex + 1) % pairs.length;
        render(next);
      }, 3000);
    }

    // Initialize
    render(0);
    startAuto();
  </script>
</body>
</html>

A **factor** is a whole number that divides evenly into another number with zero leftovers. Two factors that multiply together to make a number form a **factor pair**.

How do we find every factor pair for a number without guessing or missing any?

To find all factor pairs, start dividing by **1** and test each whole number in order.

If the division has no remainder, you found a pair. If there is a remainder, skip that number.

<!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>Factor Pairs of 12</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    user-select: none;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 480px;
  }

  .target-badge {
    background: #1e2945;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    padding: 4px 12px;
    border-radius: 20px;
  }

  .btn-group {
    display: flex;
    gap: 6px;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 10px;
  }

  .test-btn {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .test-btn.active {
    background: #ffffff;
    color: #22b7ff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .main-stage {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 230px;
  }

  .math-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
  }

  .status-tag {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
  }

  .status-valid {
    background: #dcfce7;
    color: #15803d;
  }

  .status-skip {
    background: #fee2e2;
    color: #b91c1c;
  }

  .grid-container {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .dot-array {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #f1f5f9;
    border-radius: 8px;
  }

  .dot-row {
    display: flex;
    gap: 6px;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22b7ff;
    transition: all 0.2s ease;
  }

  .remainder-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border: 2px dashed #f87171;
    border-radius: 8px;
    background: #fff5f5;
  }

  .remainder-box .dot {
    background: #ef4444;
  }

  .rem-label {
    font-size: 11px;
    font-weight: 700;
    color: #b91c1c;
  }

  .pairs-tray {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .pair-chip {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    transition: all 0.3s ease;
  }

  .pair-chip.found {
    border-color: #22b7ff;
    background: #f0f9ff;
    color: #0284c7;
  }

  .pair-chip.current {
    box-shadow: 0 0 0 2px #22b7ff;
  }
</style>
</head>
<body>

<div class="header">
  <div class="target-badge">12</div>
  <div class="btn-group">
    <button class="test-btn active" data-div="1">÷1</button>
    <button class="test-btn" data-div="2">÷2</button>
    <button class="test-btn" data-div="3">÷3</button>
    <button class="test-btn" data-div="4">÷4</button>
    <button class="test-btn" data-div="5">÷5</button>
  </div>
</div>

<div class="main-stage">
  <div class="math-display">
    <span id="equation">12 ÷ 1 = 12 (R 0)</span>
    <span id="status" class="status-tag status-valid">✓ Pair: 1 × 12</span>
  </div>

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

<div class="pairs-tray">
  <div class="pair-chip found" id="chip-1">1 × 12</div>
  <div class="pair-chip" id="chip-2">2 × 6</div>
  <div class="pair-chip" id="chip-3">3 × 4</div>
  <div class="pair-chip" id="chip-4">4 × 3 ↺</div>
</div>

<script>
  const tests = {
    1: { rows: 1, cols: 12, rem: 0, text: "12 ÷ 1 = 12 (R 0)", status: "✓ Pair: 1 × 12", valid: true, pairId: 'chip-1' },
    2: { rows: 2, cols: 6, rem: 0, text: "12 ÷ 2 = 6 (R 0)", status: "✓ Pair: 2 × 6", valid: true, pairId: 'chip-2' },
    3: { rows: 3, cols: 4, rem: 0, text: "12 ÷ 3 = 4 (R 0)", status: "✓ Pair: 3 × 4", valid: true, pairId: 'chip-3' },
    4: { rows: 4, cols: 3, rem: 0, text: "12 ÷ 4 = 3 (R 0)", status: "↺ Repeat (Stop)", valid: true, pairId: 'chip-4' },
    5: { rows: 2, cols: 5, rem: 2, text: "12 ÷ 5 = 2 (R 2)", status: "✗ Remainder: Skip", valid: false, pairId: null }
  };

  let currentDiv = 1;
  let autoTimer = null;

  function render(div) {
    currentDiv = div;
    const data = tests[div];

    // Buttons
    document.querySelectorAll('.test-btn').forEach(b => {
      b.classList.toggle('active', parseInt(b.dataset.div) === div);
    });

    // Math & status
    document.getElementById('equation').textContent = data.text;
    const statusEl = document.getElementById('status');
    statusEl.textContent = data.status;
    statusEl.className = 'status-tag ' + (data.valid ? 'status-valid' : 'status-skip');

    // Visual grid
    const area = document.getElementById('visualArea');
    area.innerHTML = '';

    const arrayBox = document.createElement('div');
    arrayBox.className = 'dot-array';

    for (let r = 0; r < data.rows; r++) {
      const row = document.createElement('div');
      row.className = 'dot-row';
      for (let c = 0; c < data.cols; c++) {
        const dot = document.createElement('div');
        dot.className = 'dot';
        row.appendChild(dot);
      }
      arrayBox.appendChild(row);
    }
    area.appendChild(arrayBox);

    if (data.rem > 0) {
      const remBox = document.createElement('div');
      remBox.className = 'remainder-box';
      const remRow = document.createElement('div');
      remRow.className = 'dot-row';
      for (let i = 0; i < data.rem; i++) {
        const dot = document.createElement('div');
        dot.className = 'dot';
        remRow.appendChild(dot);
      }
      remBox.appendChild(remRow);
      const remLabel = document.createElement('span');
      remLabel.className = 'rem-label';
      remLabel.textContent = '+ ' + data.rem;
      remBox.appendChild(remLabel);
      area.appendChild(remBox);
    }

    // Chips
    document.querySelectorAll('.pair-chip').forEach(chip => chip.classList.remove('current'));
    if (data.pairId) {
      const activeChip = document.getElementById(data.pairId);
      if (activeChip) {
        activeChip.classList.add('found', 'current');
      }
    }
  }

  function nextStep() {
    const keys = [1, 2, 3, 4, 5];
    let nextIdx = (keys.indexOf(currentDiv) + 1) % keys.length;
    render(keys[nextIdx]);
  }

  function startAuto() {
    clearInterval(autoTimer);
    autoTimer = setInterval(nextStep, 3500);
  }

  document.querySelectorAll('.test-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      render(parseInt(btn.dataset.div));
      startAuto();
    });
  });

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

You can stop testing as soon as the test numbers meet or repeat a factor you already wrote down.

What happens when we test a number that multiplies by itself, like 36?

Let us find all factor pairs of **36** by testing numbers from 1 upward: $36 \div 1 = 36$, $36 \div 2 = 18$, $36 \div 3 = 12$, and $36 \div 4 = 9$.

Next, $36 \div 5$ leaves a remainder of 1, but $36 \div 6 = 6$. When a number pairs with itself, like $6 \times 6$, we list **(6, 6)** as a factor pair and stop.

<!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>Factor Pairs of 36</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;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    user-select: none;
  }

  .nav-strip {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 440px;
    justify-content: center;
  }

  .step-btn {
    flex: 1;
    min-width: 44px;
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  .step-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
  }

  .stage {
    width: 100%;
    max-width: 440px;
    height: 200px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
  }

  .math-display {
    font-size: 20px;
    font-weight: 700;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .badge-status {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .badge-valid {
    background: #e0f2fe;
    color: #0284c7;
  }

  .badge-stop {
    background: #dcfce7;
    color: #15803d;
  }

  .badge-invalid {
    background: #fef2f2;
    color: #dc2626;
  }

  .visual-area {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .grid-rect {
    display: grid;
    gap: 2px;
    background: #f8fafc;
    padding: 4px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .grid-rect.valid {
    border-color: #22b7ff;
    background: #f0f9ff;
  }

  .grid-rect.square {
    border-color: #22c55e;
    background: #f0fdf4;
  }

  .grid-rect.remainder {
    border-color: #fca5a5;
    background: #fff5f5;
  }

  .cell {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #22b7ff;
    opacity: 0.85;
  }

  .square .cell {
    background: #22c55e;
  }

  .remainder .cell {
    background: #f87171;
  }

  .remainder-extra {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #fef2f2;
    border: 1px dashed #f87171;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
  }

  .dim-label {
    position: absolute;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
  }
  .dim-top { top: 0px; }
  .dim-left { left: 8px; top: 50%; transform: translateY(-50%); }

  .pairs-tray {
    width: 100%;
    max-width: 440px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 42px;
  }

  .tray-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-right: 4px;
    text-transform: uppercase;
  }

  .pair-pill {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #94a3b8;
    transition: all 0.25s ease;
  }

  .pair-pill.found {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 1px 4px rgba(34, 183, 255, 0.3);
  }

  .pair-pill.stop {
    background: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.3);
  }

  .controls {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .btn-ctrl {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-ctrl:active {
    background: #f1f5f9;
  }
</style>
</head>
<body>

  <div class="nav-strip">
    <button class="step-btn active" data-step="0">÷ 1</button>
    <button class="step-btn" data-step="1">÷ 2</button>
    <button class="step-btn" data-step="2">÷ 3</button>
    <button class="step-btn" data-step="3">÷ 4</button>
    <button class="step-btn" data-step="4">÷ 5</button>
    <button class="step-btn" data-step="5">÷ 6</button>
  </div>

  <div class="stage">
    <div class="math-display">
      <span id="math-text">36 ÷ 1 = 36</span>
      <span id="badge" class="badge-status badge-valid">Pair Found</span>
    </div>

    <div class="visual-area" id="visual-area">
      <span class="dim-label dim-top" id="dim-w">36</span>
      <span class="dim-label dim-left" id="dim-h">1</span>
      <div id="grid-container" class="grid-rect valid"></div>
      <div id="remainder-box" class="remainder-extra" style="display:none;">
        <span>+ 1 left</span>
      </div>
    </div>
  </div>

  <div class="pairs-tray">
    <span class="tray-title">Pairs:</span>
    <span class="pair-pill found" id="pair-0">(1, 36)</span>
    <span class="pair-pill" id="pair-1">(2, 18)</span>
    <span class="pair-pill" id="pair-2">(3, 12)</span>
    <span class="pair-pill" id="pair-3">(4, 9)</span>
    <span class="pair-pill" id="pair-5">(6, 6) ⏹</span>
  </div>

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

<script>
  const steps = [
    { d: 1, q: 36, rem: 0, r: 1, c: 36, badge: 'Pair Found', badgeCls: 'badge-valid', gridCls: 'valid', pairIdx: 0 },
    { d: 2, q: 18, rem: 0, r: 2, c: 18, badge: 'Pair Found', badgeCls: 'badge-valid', gridCls: 'valid', pairIdx: 1 },
    { d: 3, q: 12, rem: 0, r: 3, c: 12, badge: 'Pair Found', badgeCls: 'badge-valid', gridCls: 'valid', pairIdx: 2 },
    { d: 4, q: 9,  rem: 0, r: 4, c: 9,  badge: 'Pair Found', badgeCls: 'badge-valid', gridCls: 'valid', pairIdx: 3 },
    { d: 5, q: 7,  rem: 1, r: 5, c: 7,  badge: 'Remainder 1', badgeCls: 'badge-invalid', gridCls: 'remainder', pairIdx: null },
    { d: 6, q: 6,  rem: 0, r: 6, c: 6,  badge: 'Square · Stop', badgeCls: 'badge-stop', gridCls: 'square', pairIdx: 5 }
  ];

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

  const stepBtns = document.querySelectorAll('.step-btn');
  const mathText = document.getElementById('math-text');
  const badge = document.getElementById('badge');
  const gridContainer = document.getElementById('grid-container');
  const remainderBox = document.getElementById('remainder-box');
  const dimW = document.getElementById('dim-w');
  const dimH = document.getElementById('dim-h');
  const playBtn = document.getElementById('play-btn');

  function render(idx) {
    current = idx;
    const s = steps[idx];

    stepBtns.forEach((b, i) => b.classList.toggle('active', i === idx));

    mathText.textContent = s.rem === 0 
      ? `36 ÷ ${s.d} = ${s.q}`
      : `36 ÷ ${s.d} = ${s.q} R ${s.rem}`;

    badge.textContent = s.badge;
    badge.className = `badge-status ${s.badgeCls}`;

    dimW.textContent = s.c;
    dimH.textContent = s.r;

    // Grid rebuild
    gridContainer.className = `grid-rect ${s.gridCls}`;
    gridContainer.style.gridTemplateColumns = `repeat(${s.c}, 1fr)`;
    gridContainer.style.gridTemplateRows = `repeat(${s.r}, 1fr)`;

    // Cell size scaling so grid fits inside visually
    const cellW = Math.min(10, Math.floor(220 / s.c));
    const cellH = Math.min(10, Math.floor(80 / s.r));
    const cellSize = Math.max(3, Math.min(cellW, cellH));

    gridContainer.innerHTML = '';
    const totalCells = s.r * s.c;
    for (let i = 0; i < totalCells; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.style.width = cellSize + 'px';
      cell.style.height = cellSize + 'px';
      gridContainer.appendChild(cell);
    }

    remainderBox.style.display = s.rem > 0 ? 'flex' : 'none';

    // Update factor pair highlights up to current step
    steps.forEach((st) => {
      if (st.pairIdx !== null) {
        const pill = document.getElementById(`pair-${st.pairIdx}`);
        if (pill) {
          const isFound = st.d <= s.d;
          pill.className = `pair-pill ${isFound ? (st.d === 6 ? 'stop' : 'found') : ''}`;
        }
      }
    });
  }

  function next() {
    render((current + 1) % steps.length);
  }

  function prev() {
    render((current - 1 + steps.length) % steps.length);
  }

  function startAuto() {
    stopAuto();
    timer = setInterval(next, 3200);
    playBtn.textContent = '⏸ Pause';
    playing = true;
  }

  function stopAuto() {
    if (timer) clearInterval(timer);
    timer = null;
    playBtn.textContent = '▶ Play';
    playing = false;
  }

  stepBtns.forEach((btn, i) => {
    btn.addEventListener('click', () => {
      render(i);
      stopAuto();
    });
  });

  document.getElementById('next-btn').addEventListener('click', () => { next(); stopAuto(); });
  document.getElementById('prev-btn').addEventListener('click', () => { prev(); stopAuto(); });

  playBtn.addEventListener('click', () => {
    if (playing) stopAuto();
    else { next(); startAuto(); }
  });

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

A common mistake is skipping **1 and the number itself**. Remember that 1 divides into every whole number, so 1 is always part of your very first factor pair!

Try grabbing a piece of paper: pick the number 20 and test numbers from 1 to 5 to find all of its factor pairs.

math

Understanding Factors and Factor Pairs of Whole Numbers. List all factor pairs for whole numbers up to 100 systematically using arrays and division.

Finding Factors and Factor Pairs of a Number

Dicey Array: Exploring Factors and Rectangular Models

Understanding Factors, Multiples and Primes

Pedagogical strategy centers on the Concrete-Pictorial-Abstract (CPA) progression. Concrete manipulatives (tiles/counters) are arranged into full rectangles to establish the concept of factor pairs without remainders. This transitions to pictorial array sketches and systematic T-charts, and finally to abstract division and divisibility tests up to $\sqrt{n}$. Although Curriculum for Excellence benchmark code MTH 3-05a represents Third Level multiplicative reasoning, using tactile arrays ensures accessible scaffolding across varied learner readiness levels.

Understanding Factors and Factor Pairs of Whole Numbers

The Step-by-Step Division Search

Square Numbers and Factor Pairs