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 folding a piece of paper in half again and again. Every single time you fold it, the number of layers doubles!

Instead of writing $2 \times 2 \times 2 \times 2$, we can use a handy math shortcut called a **power**.

How do we write down this multiplication shortcut so everyone can read it?

In a power like $2^3$, the big bottom number is the **base**, which is the number being multiplied.

The tiny number floating up top is the **exponent**, which tells you how many times to repeat the multiplication.

<!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>Understanding Powers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

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

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

    /* Selector Controls */
    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-exp {
      background: #f1f5f9;
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 16px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-exp:hover {
      background: #e2e8f0;
    }

    .btn-exp.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
    }

    /* Power Display Card */
    .power-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .power-notation {
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: flex-start;
    }

    .base-num {
      color: #0284c7;
    }

    .exp-num {
      color: #d97706;
      font-size: 24px;
      margin-left: 2px;
    }

    .badge-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .badge-base {
      background: #f0f9ff;
      color: #0369a1;
    }

    .badge-exp {
      background: #fef3c7;
      color: #b45309;
    }

    /* Expansion Chain */
    .expansion-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .chain-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 48px;
    }

    .factor-bubble {
      width: 42px;
      height: 42px;
      background: #f0f9ff;
      border: 2px solid #0284c7;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #0369a1;
      animation: popIn 0.3s ease forwards;
    }

    .op-mul {
      font-size: 18px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Dot Groups / Visual multiplication */
    .dot-grid-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      min-height: 42px;
    }

    .dot-group {
      display: flex;
      gap: 3px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      padding: 4px;
      border-radius: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #0284c7;
    }

    /* Result */
    .result-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 700;
      color: #0f172a;
      border-top: 1px solid #f1f5f9;
      padding-top: 10px;
      width: 100%;
    }

    .result-val {
      color: #059669;
      background: #ecfdf5;
      padding: 2px 12px;
      border-radius: 8px;
      border: 1px solid #a7f3d0;
    }

    @keyframes popIn {
      0% { opacity: 0; transform: scale(0.6); }
      100% { opacity: 1; transform: scale(1); }
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="controls" id="expControls">
    <button class="btn-exp" data-exp="1">2¹</button>
    <button class="btn-exp" data-exp="2">2²</button>
    <button class="btn-exp active" data-exp="3">2³</button>
    <button class="btn-exp" data-exp="4">2⁴</button>
    <button class="btn-exp" data-exp="5">2⁵</button>
  </div>

  
  <div class="power-box">
    <div class="power-notation">
      <span class="base-num" id="baseText">2</span><sup class="exp-num" id="expText">3</sup>
    </div>
    <div class="badge-group">
      <div class="badge badge-base">Base: <span id="badgeBase">2</span></div>
      <div class="badge badge-exp">Repeats: <span id="badgeExp">3</span>×</div>
    </div>
  </div>

  
  <div class="expansion-card">
    <div class="chain-container" id="chainContainer"></div>
    <div class="dot-grid-container" id="dotContainer"></div>
    <div class="result-row">
      <span>=</span>
      <span class="result-val" id="resultText">8</span>
    </div>
  </div>
</div>

<script>
  const base = 2;
  let currentExp = 3;

  const buttons = document.querySelectorAll('.btn-exp');
  const baseText = document.getElementById('baseText');
  const expText = document.getElementById('expText');
  const badgeBase = document.getElementById('badgeBase');
  const badgeExp = document.getElementById('badgeExp');
  const chainContainer = document.getElementById('chainContainer');
  const dotContainer = document.getElementById('dotContainer');
  const resultText = document.getElementById('resultText');

  function render(exp) {
    currentExp = exp;
    const value = Math.pow(base, exp);

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

    // Update notation
    baseText.textContent = base;
    expText.textContent = exp;
    badgeBase.textContent = base;
    badgeExp.textContent = exp;

    // Build multiplication chain
    chainContainer.innerHTML = '';
    for (let i = 0; i < exp; i++) {
      if (i > 0) {
        const mul = document.createElement('span');
        mul.className = 'op-mul';
        mul.textContent = '×';
        chainContainer.appendChild(mul);
      }
      const bubble = document.createElement('div');
      bubble.className = 'factor-bubble';
      bubble.textContent = base;
      chainContainer.appendChild(bubble);
    }

    // Build visual dot groups (pairs of dots)
    dotContainer.innerHTML = '';
    const numPairs = value / 2;
    for (let p = 0; p < numPairs; p++) {
      const group = document.createElement('div');
      group.className = 'dot-group';
      for (let d = 0; d < 2; d++) {
        const dot = document.createElement('div');
        dot.className = 'dot';
        group.appendChild(dot);
      }
      dotContainer.appendChild(group);
    }

    // Update result value
    resultText.textContent = value;
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      render(parseInt(btn.dataset.exp, 10));
    });
  });

  // Initial render
  render(3);
</script>

</body>
</html>

To find the value of $2^3$, we multiply three 2s together: first $2 \times 2 = 4$, and then $4 \times 2 = 8$.

It is easy to mix this up with regular multiplication — do you see the trap?

A common mistake is multiplying the base by the exponent and thinking $2^3 = 6$.

Remember, $2 \times 3$ means repeated addition ($2 + 2 + 2 = 6$), but $2^3$ means repeated multiplication ($2 \times 2 \times 2 = 8$).

<!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>Powers as Repeated Multiplication</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 100%;
  }

  /* Controls */
  .controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-group {
    display: flex;
    background: #e2e8f0;
    padding: 2px;
    border-radius: 8px;
  }
  .btn-choice {
    border: none;
    background: transparent;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .btn-choice.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* Comparison Grid */
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 600px;
  }
  @media (max-width: 420px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }

  /* Panels */
  .panel-box {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .panel-box.power {
    border-color: #bae6fd;
    background: #f0f9ff;
  }
  .panel-box.mult {
    border-color: #fed7aa;
    background: #fffaf5;
  }

  .tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 999px;
  }
  .tag-mult { background: #ffedd5; color: #c2410c; }
  .tag-power { background: #e0f2fe; color: #0369a1; }

  .formula {
    font-size: 22px;
    font-weight: 700;
  }
  .formula sup {
    font-size: 15px;
    color: #0284c7;
  }

  .expansion {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    min-height: 20px;
    text-align: center;
  }
  .total {
    font-size: 20px;
    font-weight: 800;
  }
  .mult .total { color: #ea580c; }
  .power .total { color: #0284c7; }

  /* Visual Dot Containers */
  .visual-area {
    width: 100%;
    min-height: 120px;
    max-height: 140px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 6px;
    overflow-y: auto;
  }

  .group-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
  }
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .dot-mult { background: #f97316; }
  .dot-pow { background: #0284c7; }

  .power-grid {
    display: grid;
    gap: 4px;
  }
</style>
</head>
<body>

  
  <div class="controls">
    <div class="btn-group" id="baseBtns">
      <button class="btn-choice active" data-val="2">Base 2</button>
      <button class="btn-choice" data-val="3">Base 3</button>
    </div>
    <div class="btn-group" id="expBtns">
      <button class="btn-choice" data-val="1">× 1</button>
      <button class="btn-choice" data-val="2">× 2</button>
      <button class="btn-choice active" data-val="3">× 3</button>
      <button class="btn-choice" data-val="4">× 4</button>
    </div>
  </div>

  
  <div class="grid">
    
    <div class="panel-box mult">
      <span class="tag tag-mult">Repeated Addition</span>
      <div class="formula" id="multFormula">2 × 3</div>
      <div class="expansion" id="multExp">2 + 2 + 2</div>
      <div class="total" id="multTotal">= 6</div>
      <div class="visual-area" id="multVisual"></div>
    </div>

    
    <div class="panel-box power">
      <span class="tag tag-power">Repeated Multiplication</span>
      <div class="formula" id="powerFormula">2<sup>3</sup></div>
      <div class="expansion" id="powerExp">2 × 2 × 2</div>
      <div class="total" id="powerTotal">= 8</div>
      <div class="visual-area" id="powerVisual"></div>
    </div>
  </div>

<script>
  let base = 2;
  let count = 3;

  const multFormula = document.getElementById('multFormula');
  const multExp = document.getElementById('multExp');
  const multTotal = document.getElementById('multTotal');
  const multVisual = document.getElementById('multVisual');

  const powerFormula = document.getElementById('powerFormula');
  const powerExp = document.getElementById('powerExp');
  const powerTotal = document.getElementById('powerTotal');
  const powerVisual = document.getElementById('powerVisual');

  function update() {
    // 1. Repeated Addition (base * count)
    multFormula.innerHTML = `${base} × ${count}`;
    const addParts = Array(count).fill(base);
    multExp.textContent = addParts.join(' + ');
    const addResult = base * count;
    multTotal.textContent = `= ${addResult}`;

    // Render Addition Visual (count groups of base dots)
    multVisual.innerHTML = '';
    for (let i = 0; i < count; i++) {
      const pill = document.createElement('div');
      pill.className = 'group-pill';
      for (let d = 0; d < base; d++) {
        const dot = document.createElement('div');
        dot.className = 'dot dot-mult';
        pill.appendChild(dot);
      }
      multVisual.appendChild(pill);
    }

    // 2. Repeated Multiplication (base ^ count)
    powerFormula.innerHTML = `${base}<sup>${count}</sup>`;
    const mulParts = Array(count).fill(base);
    powerExp.textContent = mulParts.join(' × ');
    const powResult = Math.pow(base, count);
    powerTotal.textContent = `= ${powResult}`;

    // Render Power Visual (powResult dots)
    powerVisual.innerHTML = '';
    const cols = Math.min(Math.ceil(Math.sqrt(powResult)), 9);
    const grid = document.createElement('div');
    grid.className = 'power-grid';
    grid.style.gridTemplateColumns = `repeat(${cols}, 10px)`;

    for (let i = 0; i < powResult; i++) {
      const dot = document.createElement('div');
      dot.className = 'dot dot-pow';
      grid.appendChild(dot);
    }
    powerVisual.appendChild(grid);
  }

  // Event handlers
  document.querySelectorAll('#baseBtns .btn-choice').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('#baseBtns .btn-choice').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      base = parseInt(btn.dataset.val, 10);
      update();
    });
  });

  document.querySelectorAll('#expBtns .btn-choice').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('#expBtns .btn-choice').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      count = parseInt(btn.dataset.val, 10);
      update();
    });
  });

  update();
</script>
</body>
</html>

What happens when we change the base to a different number, like 3?

Let's evaluate $3^3$. The base is 3 and the exponent is 3, so we write: $3 \times 3 \times 3$.

Multiply the first pair first: $3 \times 3 = 9$. Then multiply by the last 3: $9 \times 3 = 27$.

<!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>Understanding Powers</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    :root {
      --primary: #22b7ff;
      --primary-dark: #008ece;
      --accent: #f59e0b;
      --success: #10b981;
      --text: #1e2945;
      --muted: #6b7280;
      --bg: #f8fafc;
      --card-bg: #ffffff;
      --border: #e2e8f0;
    }
    body {
      background: transparent;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 8px;
    }
    .tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }
    .tab-btn {
      flex: 1;
      background: #f1f5f9;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 15px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .tab-btn.active {
      background: #ffffff;
      color: var(--primary-dark);
      border-color: var(--primary);
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }
    .display-area {
      width: 100%;
      max-width: 440px;
      height: 250px;
      position: relative;
      background: var(--card-bg);
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 16px;
    }
    .stage {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      padding: 16px;
    }
    .stage.active {
      opacity: 1;
      pointer-events: auto;
    }
    .pill-label {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .math-main {
      font-size: 32px;
      font-weight: bold;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .sub-math {
      margin-top: 14px;
      font-size: 20px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .highlight-box {
      background: #e0f2fe;
      color: var(--primary-dark);
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid #bae6fd;
    }
    .badge-accent {
      background: #fef3c7;
      color: #b45309;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }
    .step-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--muted);
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn.active {
      background: var(--primary);
      color: #ffffff;
      border-color: var(--primary);
    }
    .play-btn {
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--text);
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setPower(0)">3³</button>
    <button class="tab-btn" onclick="setPower(1)">2⁴</button>
    <button class="tab-btn" onclick="setPower(2)">5²</button>
  </div>

  <div class="display-area">
    
    <div class="stage step-card active" id="stage1">
      <div class="pill-label">1. Power</div>
      <div class="math-main" id="math1"></div>
      <div class="sub-math">
        <span class="highlight-box" id="baseLabel">Base: 3</span>
        <span class="badge-accent" id="expLabel">Repeats: 3×</span>
      </div>
    </div>

    
    <div class="stage step-card" id="stage2">
      <div class="pill-label">2. Expanded</div>
      <div class="math-main" id="math2"></div>
      <div class="sub-math" id="expCountLabel">3 factors</div>
    </div>

    
    <div class="stage step-card" id="stage3">
      <div class="pill-label">3. Multiply First Pair</div>
      <div class="math-main" id="math3"></div>
      <div class="sub-math" id="pairSub"></div>
    </div>

    
    <div class="stage step-card" id="stage4">
      <div class="pill-label">4. Result</div>
      <div class="math-main" id="math4"></div>
      <div class="sub-math">
        <span class="highlight-box" id="summaryEq"></span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="play-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span>
    </button>
    <button class="step-btn active" onclick="goToStep(0)">1</button>
    <button class="step-btn" onclick="goToStep(1)">2</button>
    <button class="step-btn" onclick="goToStep(2)">3</button>
    <button class="step-btn" onclick="goToStep(3)">4</button>
  </div>

  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script>
    const data = [
      {
        base: 3, exp: 3,
        katex1: "3^3",
        katex2: "3 \\times 3 \\times 3",
        katex3: "\\mathbf{9} \\times 3",
        pairSub: "3 \\times 3 = 9",
        katex4: "27",
        summary: "3^3 = 27",
        factors: "3 factors"
      },
      {
        base: 2, exp: 4,
        katex1: "2^4",
        katex2: "2 \\times 2 \\times 2 \\times 2",
        katex3: "\\mathbf{4} \\times 2 \\times 2",
        pairSub: "2 \\times 2 = 4",
        katex4: "16",
        summary: "2^4 = 16",
        factors: "4 factors"
      },
      {
        base: 5, exp: 2,
        katex1: "5^2",
        katex2: "5 \\times 5",
        katex3: "\\mathbf{25}",
        pairSub: "5 \\times 5 = 25",
        katex4: "25",
        summary: "5^2 = 25",
        factors: "2 factors"
      }
    ];

    let currentPower = 0;
    let currentStep = 0;
    let playing = true;
    let timer = null;

    function renderMath() {
      const d = data[currentPower];
      katex.render(d.katex1, document.getElementById('math1'), { throwOnError: false });
      document.getElementById('baseLabel').textContent = "Base: " + d.base;
      document.getElementById('expLabel').textContent = "Repeats: " + d.exp + "×";

      katex.render(d.katex2, document.getElementById('math2'), { throwOnError: false });
      document.getElementById('expCountLabel').textContent = d.factors;

      katex.render(d.katex3, document.getElementById('math3'), { throwOnError: false });
      katex.render(d.pairSub, document.getElementById('pairSub'), { throwOnError: false });

      katex.render(d.katex4, document.getElementById('math4'), { throwOnError: false });
      katex.render(d.summary, document.getElementById('summaryEq'), { throwOnError: false });
    }

    function showStep(idx) {
      currentStep = idx;
      document.querySelectorAll('.stage').forEach((st, i) => {
        st.classList.toggle('active', i === idx);
      });
      document.querySelectorAll('.step-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    function goToStep(idx) {
      showStep(idx);
    }

    function setPower(idx) {
      currentPower = idx;
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
      renderMath();
      showStep(0);
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      showStep(next);
    }

    function togglePlay() {
      playing = !playing;
      document.getElementById('playIcon').textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (playing) nextStep();
      }, 3000);
    }

    window.addEventListener('DOMContentLoaded', () => {
      renderMath();
      showStep(0);
      startTimer();
    });
  </script>
</body>
</html>

Whenever you see a power, just ask yourself: which number is repeating, and how many times do I multiply it?

math

Understanding Powers as Repeated Multiplication. Explain base and exponent terminology and evaluate whole-number powers.

Intro to Exponents: Understanding Exponents as Repeated Multiplication

Evaluate Powers with Whole Number Bases

Powers and Roots: Understanding Repeated Multiplication and Exponential Notation

Although the prompt header mentions Early Level (P1), standard MTH 4-06a is situated at CfE Fourth Level (broadly S1-S3/early secondary, ages 11-14). Instruction should build systematically from the familiar concept of multiplication as repeated addition to exponentiation as repeated multiplication. Always require students to write the 'expanded form' before calculating numerical values to prevent the universal $a \times b$ cognitive error.

Understanding Powers as Repeated Multiplication

Base and Exponent

A Common Trap