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 6 toy blocks. Can you arrange them into a flat rectangle with no blocks left over?

You can make a straight line of 6, or you can make 2 neat rows of 3!

What tells us how many rectangles we can make?

A **factor** is a whole number that divides into another number evenly with nothing left over.

<!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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      padding: 16px;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .nav-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }
    .num-btn {
      flex: 1;
      padding: 8px 0;
      font-size: 15px;
      font-weight: 600;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      background: #f8f9fa;
      color: #6b7280;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .num-btn.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
    }

    .display-area {
      width: 100%;
      max-width: 480px;
      margin: 12px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      min-height: 220px;
      justify-content: center;
    }

    .arrays-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    .array-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      background: #f8f9fa;
      animation: fadeIn 0.3s ease;
    }

    .grid-box {
      display: grid;
      gap: 3px;
      background: #ffffff;
      padding: 6px;
      border-radius: 6px;
      border: 1px dashed #cbd5e1;
    }

    .tile {
      width: 24px;
      height: 24px;
      background: #3b82f6;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
    }

    .dim-label {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    .summary-card {
      width: 100%;
      max-width: 480px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      border-radius: 10px;
      border: 1px solid #e6e6e6;
      background: #f8f9fa;
    }

    .factor-text {
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
    }
    .factor-text span {
      color: #1e2945;
      font-weight: 700;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .badge-prime {
      background: #e0f2fe;
      color: #0284c7;
    }
    .badge-composite {
      background: #fef3c7;
      color: #d97706;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>

  <div class="nav-bar" id="numSelector">
    <button class="num-btn" data-n="4">4</button>
    <button class="num-btn active" data-n="6">6</button>
    <button class="num-btn" data-n="5">5</button>
    <button class="num-btn" data-n="7">7</button>
  </div>

  <div class="display-area">
    <div class="arrays-container" id="arraysBox"></div>
  </div>

  <div class="summary-card">
    <div class="factor-text">Factors: <span id="factorList">1, 2, 3, 6</span></div>
    <div class="badge" id="typeBadge">Composite</div>
  </div>

  <script>
    const data = {
      4: {
        arrays: [
          { r: 1, c: 4 },
          { r: 2, c: 2 }
        ],
        factors: "1, 2, 4",
        type: "Composite",
        badgeClass: "badge-composite"
      },
      5: {
        arrays: [
          { r: 1, c: 5 }
        ],
        factors: "1, 5",
        type: "Prime",
        badgeClass: "badge-prime"
      },
      6: {
        arrays: [
          { r: 1, c: 6 },
          { r: 2, c: 3 }
        ],
        factors: "1, 2, 3, 6",
        type: "Composite",
        badgeClass: "badge-composite"
      },
      7: {
        arrays: [
          { r: 1, c: 7 }
        ],
        factors: "1, 7",
        type: "Prime",
        badgeClass: "badge-prime"
      }
    };

    const arraysBox = document.getElementById('arraysBox');
    const factorList = document.getElementById('factorList');
    const typeBadge = document.getElementById('typeBadge');
    const buttons = document.querySelectorAll('.num-btn');

    function render(n) {
      const item = data[n];
      arraysBox.innerHTML = '';

      item.arrays.forEach(arr => {
        const card = document.createElement('div');
        card.className = 'array-card';

        const grid = document.createElement('div');
        grid.className = 'grid-box';
        grid.style.gridTemplateRows = `repeat(${arr.r}, 24px)`;
        grid.style.gridTemplateColumns = `repeat(${arr.c}, 24px)`;

        for (let i = 0; i < arr.r * arr.c; i++) {
          const tile = document.createElement('div');
          tile.className = 'tile';
          grid.appendChild(tile);
        }

        const label = document.createElement('div');
        label.className = 'dim-label';
        label.textContent = `${arr.r} × ${arr.c}`;

        card.appendChild(grid);
        card.appendChild(label);
        arraysBox.appendChild(card);
      });

      factorList.textContent = item.factors;
      typeBadge.textContent = item.type;
      typeBadge.className = `badge ${item.badgeClass}`;
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        render(btn.getAttribute('data-n'));
      });
    });

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

What happens if you try to make rectangles with 5 blocks instead?

A **prime number** is a whole number greater than 1 that has **exactly two factors**: 1 and itself.

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 14px;
  }
  .num-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
    font-size: 16px;
    font-weight: 700;
    color: #1e2945;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .num-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }
  .stage {
    width: 100%;
    max-width: 480px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 0 0 1px #e6e6e6;
  }
  .header-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
  }
  .badge.prime {
    background: #e8fdf4;
    color: #10b981;
    border: 1px solid #a7f3d0;
  }
  .badge.composite {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
  }
  .rects-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 14px 0;
  }
  .rect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
  }
  .grid-box {
    display: grid;
    gap: 3px;
  }
  .tile {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #22b7ff;
    transition: background-color 0.2s;
  }
  .tile.prime-color {
    background: #10b981;
  }
  .dim-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
  }
  .footer-factors {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
  }
  .footer-factors strong {
    color: #1e2945;
  }
</style>
</head>
<body>

<div class="nav" id="btnGroup">
  <button class="num-btn" data-num="2">2</button>
  <button class="num-btn" data-num="3">3</button>
  <button class="num-btn" data-num="4">4</button>
  <button class="num-btn active" data-num="5">5</button>
  <button class="num-btn" data-num="6">6</button>
  <button class="num-btn" data-num="7">7</button>
</div>

<div class="stage">
  <div class="header-tag">
    <span id="labelTitle">Number 5</span>
    <span id="badge" class="badge prime">Prime</span>
  </div>

  <div class="rects-container" id="rectsBox"></div>

  <div class="footer-factors" id="factorInfo">
    Factors: <strong>1, 5</strong>
  </div>
</div>

<script>
  const data = {
    2: { type: 'Prime', rects: [[1, 2]], factors: '1, 2' },
    3: { type: 'Prime', rects: [[1, 3]], factors: '1, 3' },
    4: { type: 'Composite', rects: [[1, 4], [2, 2]], factors: '1, 2, 4' },
    5: { type: 'Prime', rects: [[1, 5]], factors: '1, 5' },
    6: { type: 'Composite', rects: [[1, 6], [2, 3]], factors: '1, 2, 3, 6' },
    7: { type: 'Prime', rects: [[1, 7]], factors: '1, 7' }
  };

  const btns = document.querySelectorAll('.num-btn');
  const labelTitle = document.getElementById('labelTitle');
  const badge = document.getElementById('badge');
  const rectsBox = document.getElementById('rectsBox');
  const factorInfo = document.getElementById('factorInfo');

  function render(num) {
    const item = data[num];
    const isPrime = item.type === 'Prime';

    labelTitle.textContent = num;
    badge.textContent = item.type;
    badge.className = 'badge ' + (isPrime ? 'prime' : 'composite');
    factorInfo.innerHTML = 'Factors: <strong>' + item.factors + '</strong>';

    rectsBox.innerHTML = '';

    item.rects.forEach(([rows, cols]) => {
      const card = document.createElement('div');
      card.className = 'rect-card';

      const grid = document.createElement('div');
      grid.className = 'grid-box';
      grid.style.gridTemplateColumns = `repeat(${cols}, 22px)`;
      grid.style.gridTemplateRows = `repeat(${rows}, 22px)`;

      for (let i = 0; i < rows * cols; i++) {
        const tile = document.createElement('div');
        tile.className = 'tile' + (isPrime ? ' prime-color' : '');
        grid.appendChild(tile);
      }

      const dim = document.createElement('div');
      dim.className = 'dim-label';
      dim.textContent = `${rows} × ${cols}`;

      card.appendChild(grid);
      card.appendChild(dim);
      rectsBox.appendChild(card);
    });
  }

  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      btns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      render(btn.dataset.num);
    });
  });

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

So what do we call numbers like 6 that make more than one rectangle?

A **composite number** is a whole number greater than 1 that has **more than two factors**.

<!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: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .num-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
    }

    .num-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #1e2945;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .num-btn:hover {
      background: #ede9fe;
    }
    .num-btn.active-prime {
      background: #8b5cf6;
      color: #ffffff;
      border-color: #8b5cf6;
      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }
    .num-btn.active-comp {
      background: #f97316;
      color: #ffffff;
      border-color: #f97316;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35);
    }

    .status-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 10px 0 6px;
    }

    .badge {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      letter-spacing: 0.5px;
      transition: background 0.2s, color 0.2s;
    }
    .badge-prime {
      background: #f5f3ff;
      color: #8b5cf6;
      border: 1px solid #ddd6fe;
    }
    .badge-comp {
      background: #fff7ed;
      color: #f97316;
      border: 1px solid #ffedd5;
    }

    .factors-text {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    .arrays-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      min-height: 190px;
      padding: 8px;
    }

    .array-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      transition: border-color 0.2s, background 0.2s;
    }

    .array-grid {
      display: grid;
      gap: 3px;
    }

    .tile {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .tile-prime {
      background: #8b5cf6;
    }
    .tile-comp {
      background: #f97316;
    }

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

  <div class="num-bar" id="numBar"></div>

  <div class="status-row">
    <span class="badge" id="typeBadge"></span>
    <span class="factors-text" id="factorsList"></span>
  </div>

  <div class="arrays-container" id="arraysContainer"></div>

  <script>
    const numbers = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    let currentNum = 6;

    function isPrime(n) {
      if (n <= 1) return false;
      for (let i = 2; i * i <= n; i++) {
        if (n % i === 0) return false;
      }
      return true;
    }

    function getFactors(n) {
      const factors = [];
      for (let i = 1; i <= n; i++) {
        if (n % i === 0) factors.push(i);
      }
      return factors;
    }

    function getFactorPairs(n) {
      const pairs = [];
      for (let r = 1; r * r <= n; r++) {
        if (n % r === 0) {
          pairs.push([r, n / r]);
        }
      }
      return pairs;
    }

    const numBar = document.getElementById('numBar');
    const typeBadge = document.getElementById('typeBadge');
    const factorsList = document.getElementById('factorsList');
    const arraysContainer = document.getElementById('arraysContainer');

    function renderButtons() {
      numBar.innerHTML = '';
      numbers.forEach(n => {
        const btn = document.createElement('button');
        btn.className = 'num-btn';
        btn.textContent = n;
        const prime = isPrime(n);
        if (n === currentNum) {
          btn.classList.add(prime ? 'active-prime' : 'active-comp');
        }
        btn.addEventListener('click', () => {
          currentNum = n;
          updateView();
        });
        numBar.appendChild(btn);
      });
    }

    function updateView() {
      const prime = isPrime(currentNum);
      const factors = getFactors(currentNum);
      const pairs = getFactorPairs(currentNum);

      // Buttons
      Array.from(numBar.children).forEach((btn, idx) => {
        const n = numbers[idx];
        btn.className = 'num-btn';
        if (n === currentNum) {
          btn.classList.add(prime ? 'active-prime' : 'active-comp');
        }
      });

      // Status
      typeBadge.textContent = prime ? 'Prime' : 'Composite';
      typeBadge.className = 'badge ' + (prime ? 'badge-prime' : 'badge-comp');
      factorsList.textContent = `${factors.length} factors: ${factors.join(', ')}`;

      // Arrays
      arraysContainer.innerHTML = '';
      pairs.forEach(([r, c]) => {
        const card = document.createElement('div');
        card.className = 'array-card';

        const grid = document.createElement('div');
        grid.className = 'array-grid';
        grid.style.gridTemplateColumns = `repeat(${c}, 16px)`;
        grid.style.gridTemplateRows = `repeat(${r}, 16px)`;

        for (let i = 0; i < r * c; i++) {
          const tile = document.createElement('div');
          tile.className = 'tile ' + (prime ? 'tile-prime' : 'tile-comp');
          grid.appendChild(tile);
        }

        const label = document.createElement('div');
        label.className = 'array-label';
        label.textContent = `${r} × ${c}`;

        card.appendChild(grid);
        card.appendChild(label);
        arraysContainer.appendChild(card);
      });
    }

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

Is the number 1 a prime number or a composite number?

The number 1 has **only one factor** (just 1), so it is **neither prime nor composite**!

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

  .nav-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 480px;
    margin-bottom: 12px;
  }

  .num-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    background: #f8f9fa;
    color: #1e2945;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
  }

  .num-btn.active {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
    box-shadow: 0 2px 8px rgba(30, 41, 69, 0.25);
  }

  .stage {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 220px;
  }

  .status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .badge-tag {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .tag-neither { background: #f1f5f9; color: #64748b; }
  .tag-prime { background: #e0f2fe; color: #0284c7; }
  .tag-comp { background: #f3e8ff; color: #7c3aed; }

  .factors-count {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
  }

  .factor-list {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .factor-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    font-weight: 700;
    color: #1e2945;
  }

  .arrays-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 90px;
    padding: 8px 4px;
  }

  .array-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .array-grid {
    display: grid;
    gap: 3px;
    padding: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transition: background-color 0.2s;
  }

  .dot-neither { background: #94a3b8; }
  .dot-prime { background: #0284c7; }
  .dot-comp { background: #8b5cf6; }

  .array-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
  }

  .guide-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }

  .guide-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .indicator-sq {
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
</style>
</head>
<body>

<div class="nav-row" id="numNav"></div>

<div class="stage">
  <div class="status-row">
    <span class="badge-tag" id="typeTag">Prime</span>
    <div class="factor-list" id="factorChips"></div>
    <span class="factors-count" id="factorCount">2 factors</span>
  </div>

  <div class="arrays-box" id="arraysContainer"></div>
</div>

<div class="guide-row">
  <div class="guide-item"><div class="indicator-sq" style="background:#94a3b8"></div> 1 factor</div>
  <div class="guide-item"><div class="indicator-sq" style="background:#0284c7"></div> 2 factors</div>
  <div class="guide-item"><div class="indicator-sq" style="background:#8b5cf6"></div> 3+ factors</div>
</div>

<script>
const data = [
  { n: 1, factors: [1], pairs: [[1, 1]], type: 'neither', tag: 'Neither' },
  { n: 2, factors: [1, 2], pairs: [[1, 2]], type: 'prime', tag: 'Prime' },
  { n: 3, factors: [1, 3], pairs: [[1, 3]], type: 'prime', tag: 'Prime' },
  { n: 4, factors: [1, 2, 4], pairs: [[1, 4], [2, 2]], type: 'comp', tag: 'Composite' },
  { n: 5, factors: [1, 5], pairs: [[1, 5]], type: 'prime', tag: 'Prime' },
  { n: 6, factors: [1, 2, 3, 6], pairs: [[1, 6], [2, 3]], type: 'comp', tag: 'Composite' },
  { n: 7, factors: [1, 7], pairs: [[1, 7]], type: 'prime', tag: 'Prime' },
  { n: 8, factors: [1, 2, 4, 8], pairs: [[1, 8], [2, 4]], type: 'comp', tag: 'Composite' },
  { n: 9, factors: [1, 3, 9], pairs: [[1, 9], [3, 3]], type: 'comp', tag: 'Composite' },
  { n: 10, factors: [1, 2, 5, 10], pairs: [[1, 10], [2, 5]], type: 'comp', tag: 'Composite' },
  { n: 11, factors: [1, 11], pairs: [[1, 11]], type: 'prime', tag: 'Prime' },
  { n: 12, factors: [1, 2, 3, 4, 6, 12], pairs: [[1, 12], [2, 6], [3, 4]], type: 'comp', tag: 'Composite' }
];

let currentIdx = 5; // Start on 6 (clear composite example)

const nav = document.getElementById('numNav');
const typeTag = document.getElementById('typeTag');
const factorChips = document.getElementById('factorChips');
const factorCount = document.getElementById('factorCount');
const arraysContainer = document.getElementById('arraysContainer');

data.forEach((item, idx) => {
  const btn = document.createElement('button');
  btn.className = 'num-btn' + (idx === currentIdx ? ' active' : '');
  btn.textContent = item.n;
  btn.onclick = () => render(idx);
  nav.appendChild(btn);
});

function render(idx) {
  currentIdx = idx;
  const item = data[idx];

  // Update button states
  Array.from(nav.children).forEach((btn, i) => {
    btn.classList.toggle('active', i === idx);
  });

  // Tag & count
  typeTag.textContent = item.tag;
  typeTag.className = 'badge-tag tag-' + item.type;
  factorCount.textContent = item.factors.length === 1 ? '1 factor' : `${item.factors.length} factors`;

  // Factor chips
  factorChips.innerHTML = '';
  item.factors.forEach(f => {
    const chip = document.createElement('span');
    chip.className = 'factor-chip';
    chip.textContent = f;
    factorChips.appendChild(chip);
  });

  // Visual Rectangles / Arrays
  arraysContainer.innerHTML = '';
  item.pairs.forEach(([r, c]) => {
    const grp = document.createElement('div');
    grp.className = 'array-group';

    const grid = document.createElement('div');
    grid.className = 'array-grid';
    grid.style.gridTemplateRows = `repeat(${r}, 12px)`;
    grid.style.gridTemplateColumns = `repeat(${c}, 12px)`;

    for (let i = 0; i < r * c; i++) {
      const dot = document.createElement('div');
      dot.className = 'dot dot-' + item.type;
      grid.appendChild(dot);
    }

    const lbl = document.createElement('span');
    lbl.className = 'array-label';
    lbl.textContent = `${r} × ${c}`;

    grp.appendChild(grid);
    grp.appendChild(lbl);
    arraysContainer.appendChild(grp);
  });
}

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

Next time you see a number, count its factors to see if it belongs to team prime or team composite!

math

Defining Prime and Composite Numbers. Differentiate between prime and composite numbers based on their exact number of unique factors.

Prime and Composite Numbers: Introduction and Practice

Curriculum for Excellence Third Level Maths: Multiples, Factors, and Prime Numbers (MTH 3-05b)

Factors, Multiples, and Prime Arrays Investigation

Although the prompt references Early Level (P1), Curriculum for Excellence standard MTH 3-05b explicitly belongs to Third Level (approx. ages 11-14 / S1-S3). Effective pedagogical delivery begins with Concrete-Representational-Abstract (CRA) approaches: students physically build rectangular tile arrays to discover that prime numbers can only form single-row strips ($1 \times n$). Instruction then transitions to systematic listing of factor pairs (e.g., rainbow diagrams, T-charts) and divisibility rules, explicitly reinforcing the rigorous definition based on the exact count of unique positive factors ($1$ unique factor = neither; $2$ unique factors = prime; $>2$ unique factors = composite) to permanently resolve the persistent misconception regarding the number $1$ and odd composite numbers.

Defining Prime and Composite Numbers

Factors and Rectangles

Prime Numbers

Composite Numbers