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

You already know that $x^2 - 9$ easily splits into $(x - 3)(x + 3)$, but what happens when you see $x^2 + 9$?

For centuries, mathematicians called the sum of two squares "prime" or unfactorable — until they unlocked the world of **complex numbers**.

The **difference of squares** is an algebraic identity stating that $a^2 - b^2 = (a - b)(a + b)$ because the middle terms cancel out when you multiply.

Here is a quick look at why the standard difference of squares formula works with real numbers.

<!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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 440px;
      height: 250px;
      position: relative;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .geo-view {
      position: relative;
      width: 220px;
      height: 220px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Pieces */
    .piece {
      position: absolute;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 15px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Large main piece A: top-left (a-b) x a */
    .piece-a {
      background: #e0f2fe;
      border: 2px solid #38bdf8;
      color: #0369a1;
      left: 10px;
      top: 10px;
      width: 130px;
      height: 200px;
    }

    /* Small piece B: bottom-right (a-b) x b */
    .piece-b {
      background: #fef3c7;
      border: 2px solid #fbbf24;
      color: #b45309;
      left: 145px;
      top: 80px;
      width: 65px;
      height: 130px;
    }

    /* Cutout square: b x b */
    .piece-cut {
      background: #fee2e2;
      border: 2px dashed #f87171;
      color: #dc2626;
      left: 145px;
      top: 10px;
      width: 65px;
      height: 65px;
      opacity: 0;
      transform: scale(0.9);
    }

    /* States */
    /* Step 0: Full a^2 */
    .state-0 .piece-a { width: 200px; height: 200px; }
    .state-0 .piece-b { opacity: 0; pointer-events: none; }
    .state-0 .piece-cut { opacity: 0; }

    /* Step 1: Cut b^2 */
    .state-1 .piece-a { width: 130px; height: 200px; }
    .state-1 .piece-b { left: 145px; top: 80px; width: 65px; height: 130px; opacity: 1; }
    .state-1 .piece-cut { opacity: 1; transform: scale(1); }

    /* Step 2: Remove b^2 */
    .state-2 .piece-a { width: 130px; height: 200px; }
    .state-2 .piece-b { left: 145px; top: 80px; width: 65px; height: 130px; opacity: 1; }
    .state-2 .piece-cut { opacity: 0; transform: scale(0.5); }

    /* Step 3: Rearrange into (a+b) x (a-b) rectangle */
    .state-3 .piece-a {
      left: 15px;
      top: 45px;
      width: 130px;
      height: 130px;
    }
    .state-3 .piece-b {
      left: 150px;
      top: 45px;
      width: 65px;
      height: 130px;
    }
    .state-3 .piece-cut { opacity: 0; }

    /* Math Expression Area */
    .math-bar {
      width: 100%;
      max-width: 440px;
      min-height: 48px;
      margin-top: 10px;
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }

    .term-cancel {
      position: relative;
      display: inline-block;
      color: #94a3b8;
    }
    .term-cancel::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 2px;
      background: #ef4444;
      transform: rotate(-15deg);
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s;
    }
    .btn:active { background: #f1f5f9; }
    .btn-primary {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .dots {
      display: flex;
      gap: 6px;
      margin: 0 8px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }

    /* Dimension labels */
    .dim-label {
      position: absolute;
      font-size: 12px;
      color: #64748b;
      font-weight: bold;
      pointer-events: none;
      transition: all 0.5s;
    }
  </style>
</head>
<body>

  <div class="main-stage" id="stage">
    <div class="geo-view state-0" id="geoView">
      <div class="piece piece-a" id="labelA"></div>
      <div class="piece piece-b" id="labelB"></div>
      <div class="piece piece-cut" id="labelCut"></div>
    </div>
  </div>

  <div class="math-bar" id="mathDisplay"></div>

  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <div class="dots" id="dotsContainer">
      <div class="dot active"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <button class="btn" id="nextBtn">→</button>
    <button class="btn btn-primary" id="playBtn">▶</button>
  </div>

  <script>
    const steps = [
      {
        stateClass: 'state-0',
        labelA: 'a^2',
        labelB: '',
        labelCut: '',
        math: 'a^2'
      },
      {
        stateClass: 'state-1',
        labelA: '',
        labelB: '',
        labelCut: 'b^2',
        math: 'a^2 - b^2'
      },
      {
        stateClass: 'state-2',
        labelA: '',
        labelB: '',
        labelCut: '',
        math: 'a^2 - b^2'
      },
      {
        stateClass: 'state-3',
        labelA: 'a',
        labelB: 'b',
        math: '(a + b)(a - b) = a^2 - b^2'
      }
    ];

    let currentStep = 0;
    let timer = null;

    const geoView = document.getElementById('geoView');
    const labelA = document.getElementById('labelA');
    const labelB = document.getElementById('labelB');
    const labelCut = document.getElementById('labelCut');
    const mathDisplay = document.getElementById('mathDisplay');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');

    function renderMath(element, tex) {
      if (!tex) {
        element.innerHTML = '';
        return;
      }
      try {
        katex.render(tex, element, { throwOnError: false });
      } catch (e) {
        element.textContent = tex;
      }
    }

    function updateStep(index) {
      currentStep = (index + steps.length) % steps.length;
      const s = steps[currentStep];

      geoView.className = 'geo-view ' + s.stateClass;

      renderMath(labelA, s.labelA);
      renderMath(labelB, s.labelB);
      renderMath(labelCut, s.labelCut);
      renderMath(mathDisplay, s.math);

      dots.forEach((d, i) => {
        d.classList.toggle('active', i === currentStep);
      });
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶';
      } else {
        playBtn.textContent = '⏸';
        timer = setInterval(() => {
          updateStep(currentStep + 1);
        }, 3200);
      }
    }

    document.getElementById('prevBtn').addEventListener('click', () => {
      if (timer) togglePlay();
      updateStep(currentStep - 1);
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      if (timer) togglePlay();
      updateStep(currentStep + 1);
    });

    playBtn.addEventListener('click', togglePlay);

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        if (timer) togglePlay();
        updateStep(idx);
      });
    });

    // Initialize
    updateStep(0);
  </script>
</body>
</html>

What if we could turn an addition sign into a subtraction sign so we can use this exact same pattern on a sum?

The **imaginary unit**, written as $i$, is defined by the property $i^2 = -1$.

In 1572, Italian mathematician Rafael Bombelli published rules for working with $\sqrt{-1}$, showing that imaginary numbers could solve equations previously thought impossible.

Since $-(-1) = +1$, we can rewrite any positive value $+b^2$ as $-(-b^2)$, which is identical to $-(b^2 \cdot -1) = -(bi)^2$.

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <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: space-between;
      min-height: 100%;
      background: transparent;
      color: #1e2945;
    }
    .main-stage {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .step-pills {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .pill {
      flex: 1;
      max-width: 110px;
      padding: 8px 4px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .pill.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(34,183,255,0.3);
    }
    .display-area {
      position: relative;
      width: 100%;
      height: 150px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    .step-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .step-card.active {
      opacity: 1;
      pointer-events: auto;
    }
    .math-main {
      font-size: 26px;
      color: #1e2945;
      text-align: center;
    }
    .math-sub {
      font-size: 15px;
      color: #0284c7;
      background: #f0f9ff;
      padding: 4px 14px;
      border-radius: 12px;
      border: 1px solid #bae6fd;
      text-align: center;
    }
    .identity-bridge {
      width: 100%;
      max-width: 540px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 14px;
      color: #475569;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
    }
    .btn-ctrl {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .btn-ctrl:active {
      background: #f1f5f9;
    }
    .highlight {
      color: #0284c7;
      font-weight: bold;
    }
    .highlight-purple {
      color: #7c3aed;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    <div class="step-pills">
      <div class="pill active" data-step="0">1. Sum</div>
      <div class="pill" data-step="1">2. Rewrite</div>
      <div class="pill" data-step="2">3. Insert <i>i</i></div>
      <div class="pill" data-step="3">4. Factor</div>
    </div>

    <div class="display-area">
      
      <div class="step-card active" id="card-0">
        <div class="math-main" id="m0-main"></div>
        <div class="math-sub" id="m0-sub"></div>
      </div>

      
      <div class="step-card" id="card-1">
        <div class="math-main" id="m1-main"></div>
        <div class="math-sub" id="m1-sub"></div>
      </div>

      
      <div class="step-card" id="card-2">
        <div class="math-main" id="m2-main"></div>
        <div class="math-sub" id="m2-sub"></div>
      </div>

      
      <div class="step-card" id="card-3">
        <div class="math-main" id="m3-main"></div>
        <div class="math-sub" id="m3-sub"></div>
      </div>
    </div>

    <div class="identity-bridge" id="bridge-math"></div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" id="prevBtn" aria-label="Previous">◀</button>
    <button class="btn-ctrl" id="playBtn" aria-label="Play / Pause">⏸</button>
    <button class="btn-ctrl" id="nextBtn" aria-label="Next">▶</button>
  </div>

  <script>
    const renderKaTeX = () => {
      if (typeof katex === 'undefined') return;

      katex.render("a^2 + b^2", $('#m0-main'));
      katex.render("\\text{Sum of squares (cannot factor with real numbers)}", $('#m0-sub'));

      katex.render("a^2 - (-b^2)", $('#m1-main'));
      katex.render("+b^2 = -(-b^2)", $('#m1-sub'));

      katex.render("a^2 - (bi)^2", $('#m2-main'));
      katex.render("-b^2 = b^2(-1) = (bi)^2", $('#m2-sub'));

      katex.render("(a + bi)(a - bi)", $('#m3-main'));
      katex.render("u^2 - v^2 = (u + v)(u - v) \\quad [u=a,\\, v=bi]", $('#m3-sub'));

      katex.render("u^2 - v^2 = (u+v)(u-v) \\;\\implies\\; a^2 - (bi)^2 = (a+bi)(a-bi)", $('#bridge-math'));
    };

    renderKaTeX();

    const pills = $$('.pill');
    const cards = $$('.step-card');
    const playBtn = $('#playBtn');

    const player = new StepPlayer(cards, {
      interval: 4000,
      onChange: (idx) => {
        pills.forEach((p, i) => {
          if (i === idx) {
            p.classList.add('active');
          } else {
            p.classList.remove('active');
          }
        });
      }
    });

    pills.forEach((pill, i) => {
      onTap(pill, () => {
        player.pause();
        playBtn.textContent = '▶';
        player.goTo(i);
      });
    });

    onTap($('#prevBtn'), () => {
      player.pause();
      playBtn.textContent = '▶';
      player.prev();
    });

    onTap($('#nextBtn'), () => {
      player.pause();
      playBtn.textContent = '▶';
      player.next();
    });

    onTap(playBtn, () => {
      player.toggle();
      playBtn.textContent = player.playing ? '⏸' : '▶';
    });

    player.start();
  </script>
</body>
</html>

Now that $a^2 + b^2$ is written as $a^2 - (bi)^2$, it matches the difference of squares identity perfectly: $a^2 + b^2 = (a + bi)(a - bi)$.

Let's test this identity on a concrete example: factoring $x^2 + 4$.

To factor $x^2 + 4$, identify $a$ and $b$: here $a = x$ and $b = 2$, since $2^2 = 4$.

Rewrite $+4$ as $-(2i)^2$, giving $x^2 - (2i)^2$, which factors directly into **$(x + 2i)(x - 2i)$**.

<!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>Difference of Squares with Complex Numbers</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

    /* Example selector */
    .tabs {
      display: flex;
      gap: 8px;
      background: #e9ecef;
      padding: 4px;
      border-radius: 10px;
    }

    .tab-btn {
      background: none;
      border: none;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    /* Identity formula reference badge */
    .rule-box {
      background: #eef8ff;
      border: 1px solid #cce7ff;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 14px;
      color: #0077b6;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Step transformation flow */
    .flow-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #eef2f6;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
      position: relative;
    }

    .step-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.12);
    }

    .step-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #e5e7eb;
      color: #6b7280;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
      transition: background 0.3s, color 0.3s;
    }

    .step-card.active .step-num {
      background: #22b7ff;
      color: #ffffff;
    }

    .math-content {
      font-size: 19px;
      flex-grow: 1;
      text-align: center;
      padding: 0 8px;
    }

    .step-note {
      font-size: 13px;
      color: #6b7280;
      min-width: 90px;
      text-align: right;
      font-weight: 600;
    }

    .step-card.active .step-note {
      color: #0284c7;
    }

    /* Stepper controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }

    .ctrl-btn:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }

    .dots-container {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="tabs">
      <button class="tab-btn active" onclick="setPreset(2)">k = 2 &nbsp;(x² + 4)</button>
      <button class="tab-btn" onclick="setPreset(3)">k = 3 &nbsp;(x² + 9)</button>
      <button class="tab-btn" onclick="setPreset(5)">k = 5 &nbsp;(x² + 25)</button>
    </div>

    
    <div class="rule-box" id="ruleBox"></div>

    
    <div class="flow-container">
      <div class="step-card" id="card0" onclick="goToStep(0)">
        <div class="step-num">1</div>
        <div class="math-content" id="step0"></div>
        <div class="step-note">Sum of Squares</div>
      </div>

      <div class="step-card" id="card1" onclick="goToStep(1)">
        <div class="step-num">2</div>
        <div class="math-content" id="step1"></div>
        <div class="step-note" id="note1"></div>
      </div>

      <div class="step-card" id="card2" onclick="goToStep(2)">
        <div class="step-num">3</div>
        <div class="math-content" id="step2"></div>
        <div class="step-note">a² − b² form</div>
      </div>

      <div class="step-card" id="card3" onclick="goToStep(3)">
        <div class="step-num">4</div>
        <div class="math-content" id="step3"></div>
        <div class="step-note">(a + b)(a − b)</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" onclick="prevStep()">← Prev</button>
      <div class="dots-container">
        <div class="dot active" onclick="goToStep(0)"></div>
        <div class="dot" onclick="goToStep(1)"></div>
        <div class="dot" onclick="goToStep(2)"></div>
        <div class="dot" onclick="goToStep(3)"></div>
      </div>
      <button class="ctrl-btn" onclick="nextStep()">Next →</button>
    </div>
  </div>

  <script>
    let currentK = 2;
    let currentStep = 0;
    let autoTimer = null;

    function renderMath() {
      const k = currentK;
      const k2 = k * k;

      // Identity rule badge
      katex.render("a^2 - b^2 = (a+b)(a-b) \\quad | \\quad i^2 = -1", document.getElementById('ruleBox'), { throwOnError: false });

      // Step 1: Initial sum
      katex.render(`x^2 + ${k2}`, document.getElementById('step0'), { throwOnError: false });

      // Step 2: Negative rewrite
      katex.render(`x^2 - (-${k2})`, document.getElementById('step1'), { throwOnError: false });
      katex.render(`-${k2} = ${k2}i^2`, document.getElementById('note1'), { throwOnError: false });

      // Step 3: Difference of squares form
      katex.render(`x^2 - (${k}i)^2`, document.getElementById('step2'), { throwOnError: false });

      // Step 4: Factored form
      katex.render(`(x + ${k}i)(x - ${k}i)`, document.getElementById('step3'), { throwOnError: false });

      updateHighlights();
    }

    function updateHighlights() {
      for (let i = 0; i < 4; i++) {
        const card = document.getElementById('card' + i);
        const dot = document.querySelectorAll('.dot')[i];
        if (i === currentStep) {
          card.classList.add('active');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          dot.classList.remove('active');
        }
      }
    }

    function goToStep(idx) {
      currentStep = (idx + 4) % 4;
      updateHighlights();
      resetTimer();
    }

    function nextStep() {
      goToStep(currentStep + 1);
    }

    function prevStep() {
      goToStep(currentStep - 1);
    }

    function setPreset(k) {
      currentK = k;
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.includes(`k = ${k}`));
      });
      renderMath();
      resetTimer();
    }

    function resetTimer() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        currentStep = (currentStep + 1) % 4;
        updateHighlights();
      }, 3500);
    }

    // Initialize
    window.addEventListener('DOMContentLoaded', () => {
      renderMath();
      resetTimer();
    });
  </script>
</body>
</html>

A common mistake is guessing $(x + 2)(x + 2)$, but expanding that gives $x^2 + 4x + 4$ with an unwanted middle term.

What happens when both terms have coefficients in front of them? Let's take on a tougher expression.

First, write each part as a perfect square: $9x^2 = (3x)^2$ and $25 = 5^2$.

Replace $+25$ with $-(5i)^2$ to get $(3x)^2 - (5i)^2$, which factors into **$(3x + 5i)(3x - 5i)$**.

<!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>Extending Difference of Squares to Complex Numbers</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .step-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .step-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }
    .display-area {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      padding: 24px 20px;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    }
    .stage {
      display: none;
      flex-direction: column;
      align-items: center;
      width: 100%;
      text-align: center;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .stage.active {
      display: flex;
      opacity: 1;
    }
    .math-main {
      font-size: 26px;
      color: #0f172a;
      margin-bottom: 16px;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .transform-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 17px;
    }
    .highlight-blue {
      color: #0284c7;
      font-weight: 700;
    }
    .highlight-purple {
      color: #7c3aed;
      font-weight: 700;
    }
    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }
    .nav-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #1e2945;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .nav-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }
    .play-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      color: #475569;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .play-btn.playing {
      color: #22b7ff;
      border-color: #22b7ff;
    }
    .identity-tag {
      font-size: 14px;
      color: #64748b;
      margin-top: 8px;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="controls">
      <button class="step-btn active" data-step="0">1. Sum</button>
      <button class="step-btn" data-step="1">2. Insert <span id="btn-i">i</span></button>
      <button class="step-btn" data-step="2">3. Difference</button>
      <button class="step-btn" data-step="3">4. Factored</button>
    </div>

    <div class="display-area">
      
      <div class="stage active" id="stage-0">
        <div class="math-main" id="m1"></div>
        <div class="transform-box">
          <span id="t1"></span>
        </div>
      </div>

      
      <div class="stage" id="stage-1">
        <div class="math-main" id="m2"></div>
        <div class="transform-box">
          <span id="t2"></span>
        </div>
        <div class="identity-tag" id="tag2"></div>
      </div>

      
      <div class="stage" id="stage-2">
        <div class="math-main" id="m3"></div>
        <div class="transform-box">
          <span id="t3"></span>
        </div>
      </div>

      
      <div class="stage" id="stage-3">
        <div class="math-main" id="m4"></div>
        <div class="transform-box">
          <span id="t4"></span>
        </div>
      </div>
    </div>

    <div class="nav-bar">
      <button class="nav-btn" id="prevBtn">←</button>
      <button class="play-btn" id="playBtn">▶ Auto</button>
      <button class="nav-btn" id="nextBtn">→</button>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      // Render KaTeX expressions
      katex.render("i^2 = -1", document.getElementById("btn-i"));
      
      // Step 1
      katex.render("9x^2 + 25", document.getElementById("m1"));
      katex.render("a^2 + b^2", document.getElementById("t1"));

      // Step 2
      katex.render("9x^2 - (-25)", document.getElementById("m2"));
      katex.render("+25 \\;\\longrightarrow\\; -25i^2", document.getElementById("t2"));
      katex.render("i^2 = -1", document.getElementById("tag2"));

      // Step 3
      katex.render("(3x)^2 - (5i)^2", document.getElementById("m3"));
      katex.render("A^2 - B^2", document.getElementById("t3"));

      // Step 4
      katex.render("(3x + 5i)(3x - 5i)", document.getElementById("m4"));
      katex.render("(A + B)(A - B)", document.getElementById("t4"));

      let currentStep = 0;
      let timer = null;
      const totalSteps = 4;
      const stepBtns = document.querySelectorAll(".step-btn");
      const stages = document.querySelectorAll(".stage");
      const playBtn = document.getElementById("playBtn");
      const prevBtn = document.getElementById("prevBtn");
      const nextBtn = document.getElementById("nextBtn");

      function setStep(idx) {
        currentStep = (idx + totalSteps) % totalSteps;
        stepBtns.forEach((btn, i) => {
          btn.classList.toggle("active", i === currentStep);
        });
        stages.forEach((st, i) => {
          st.classList.toggle("active", i === currentStep);
        });
      }

      stepBtns.forEach(btn => {
        btn.addEventListener("click", () => {
          stopAuto();
          setStep(parseInt(btn.getAttribute("data-step"), 10));
        });
      });

      prevBtn.addEventListener("click", () => {
        stopAuto();
        setStep(currentStep - 1);
      });

      nextBtn.addEventListener("click", () => {
        stopAuto();
        setStep(currentStep + 1);
      });

      function stopAuto() {
        if (timer) {
          clearInterval(timer);
          timer = null;
          playBtn.classList.remove("playing");
          playBtn.textContent = "▶ Auto";
        }
      }

      function startAuto() {
        playBtn.classList.add("playing");
        playBtn.textContent = "⏸ Pause";
        timer = setInterval(() => {
          setStep(currentStep + 1);
        }, 3200);
      }

      playBtn.addEventListener("click", () => {
        if (timer) {
          stopAuto();
        } else {
          startAuto();
        }
      });
    });
  </script>
</body>
</html>

Whenever you see a sum of squares $a^2 + b^2$, remember that inserting $i$ into the factors turns an impossible factoring problem into a standard difference of squares.

When a quadratic expression has a negative discriminant ($b^2 - 4ac < 0$), it produces no real roots and cannot be factored using real numbers.

Extending the difference of squares identity guarantees that every quadratic with no real roots can be completely factored into linear factors over the set of **complex numbers** $\mathbb{C}$.

This directly supports the **Fundamental Theorem of Algebra**, which establishes that every polynomial of degree $n$ splits into exactly $n$ linear factors over $\mathbb{C}$.

In real arithmetic, quadratic expressions with a negative discriminant ($b^2 - 4ac < 0$) have no real roots and cannot be factored.

This identity guarantees that such quadratics can be completely factored into linear factors over the set of complex numbers $\mathbb{C}$.

This principle directly supports the **Fundamental Theorem of Algebra**, which proves that every $n^{\text{th}}$-degree polynomial has exactly $n$ roots over $\mathbb{C}$.

math

Extending the Difference of Squares Identity to Complex Numbers. Rewrite expressions like x² + 4 as (x + 2i)(x - 2i) using the difference of squares identity.

Factoring Sums of Squares with Complex Numbers

Extending Polynomial Identities to Complex Numbers (Task HSN-CN.C.8)

Factor Sums of Squares Using Complex Conjugates

Effective instruction begins by reviewing the standard difference of squares with real numbers, then introduces the cognitive pivot of rewriting $+k$ as $-(-k)$. Scaffolding with the area/box multiplication model allows students to self-verify that the imaginary cross-terms cancel and that $-b^2 i^2 = +b^2$. Connecting this identity to the roots of quadratic equations (where $x^2 + 4 = 0 \implies x = \pm 2i$) reinforces the link between polynomial factors and zeros.

Extending the Difference of Squares Identity to Complex Numbers

The Real Difference of Squares

The Imaginary Unit Trick