Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have a square floor made of 25 identical square tiles, but you need to know how many tiles fit along just one side.

To solve this puzzle, we use two operations that are opposites of each other: **squaring** and finding the **square root**.

<!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>Squares and Square Roots</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; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

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

    /* Operation Selector */
    .op-tabs {
      display: flex;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
      gap: 4px;
      width: 100%;
      max-width: 380px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Visual Grid Area */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 200px;
      position: relative;
    }

    .grid-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .side-label {
      font-weight: 700;
      color: #2563eb;
      font-size: 16px;
      transition: opacity 0.3s ease;
    }

    .side-label.top {
      margin-bottom: 6px;
    }

    .grid-container {
      display: grid;
      gap: 3px;
      background: #ffffff;
      padding: 6px;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .cell {
      background: #dbeafe;
      border-radius: 3px;
      transition: all 0.3s ease;
    }

    .cell.active {
      background: #3b82f6;
    }

    /* Flow Equation Display */
    .flow-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 380px;
      min-height: 52px;
      font-size: 18px;
    }

    .math-step {
      display: inline-flex;
      align-items: center;
    }

    .arrow-icon {
      color: #64748b;
      font-size: 18px;
      font-weight: bold;
    }

    /* Number Control Slider */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 340px;
      justify-content: center;
    }

    .val-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .val-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
  </style>
</head>
<body>

<div class="main-layout">
  
  <div class="op-tabs">
    <button class="tab-btn active" id="tabSquare" onclick="setMode('square')">
      <span>Square</span> <span id="lblSquare"></span>
    </button>
    <button class="tab-btn" id="tabRoot" onclick="setMode('root')">
      <span>Square Root</span> <span id="lblRoot"></span>
    </button>
  </div>

  
  <div class="stage">
    <div class="grid-wrapper">
      <div class="side-label top" id="labelTop">x = 3</div>
      <div class="grid-container" id="grid"></div>
    </div>
  </div>

  
  <div class="flow-card" id="flowEquation"></div>

  
  <div class="controls" id="btnGroup">
    <button class="val-btn" onclick="setSize(2)">2</button>
    <button class="val-btn active" onclick="setSize(3)">3</button>
    <button class="val-btn" onclick="setSize(4)">4</button>
    <button class="val-btn" onclick="setSize(5)">5</button>
  </div>
</div>

<script>
  let currentSize = 3;
  let currentMode = 'square'; // 'square' | 'root'

  function renderStaticLabels() {
    katex.render("x^2", document.getElementById('lblSquare'));
    katex.render("\\sqrt{x}", document.getElementById('lblRoot'));
  }

  function update() {
    const total = currentSize * currentSize;
    const gridEl = document.getElementById('grid');
    const labelTop = document.getElementById('labelTop');
    const flowEl = document.getElementById('flowEquation');

    // Update Tab UI
    document.getElementById('tabSquare').classList.toggle('active', currentMode === 'square');
    document.getElementById('tabRoot').classList.toggle('active', currentMode === 'root');

    // Update Value buttons
    document.querySelectorAll('.val-btn').forEach(btn => {
      btn.classList.toggle('active', parseInt(btn.textContent) === currentSize);
    });

    // Update Visual Dimensions
    const cellSize = Math.min(28, Math.floor(130 / currentSize));
    gridEl.style.gridTemplateColumns = `repeat(${currentSize}, ${cellSize}px)`;
    gridEl.style.gridTemplateRows = `repeat(${currentSize}, ${cellSize}px)`;

    gridEl.innerHTML = '';
    for (let i = 0; i < total; i++) {
      const cell = document.createElement('div');
      cell.className = 'cell active';
      gridEl.appendChild(cell);
    }

    // Update Side Label
    if (currentMode === 'square') {
      labelTop.textContent = `${currentSize} × ${currentSize}`;
    } else {
      labelTop.textContent = `Area = ${total}`;
    }

    // Update Equation
    flowEl.innerHTML = '';
    if (currentMode === 'square') {
      const mathSpan = document.createElement('span');
      mathSpan.className = 'math-step';
      katex.render(`${currentSize} \\xrightarrow{\\text{square}} ${currentSize}^2 = ${total}`, mathSpan);
      flowEl.appendChild(mathSpan);
    } else {
      const mathSpan = document.createElement('span');
      mathSpan.className = 'math-step';
      katex.render(`${total} \\xrightarrow{\\sqrt{\\phantom{x}}} \\sqrt{${total}} = ${currentSize}`, mathSpan);
      flowEl.appendChild(mathSpan);
    }
  }

  function setMode(mode) {
    currentMode = mode;
    update();
  }

  function setSize(size) {
    currentSize = size;
    update();
  }

  window.addEventListener('DOMContentLoaded', () => {
    renderStaticLabels();
    update();
  });
</script>

</body>
</html>

How do we undo a power of two when solving an equation with a mystery number?

When an equation has a variable multiplied by itself, like $x^2 = 49$, we undo the square by taking the **square root** of both sides.

Because both $7 \times 7 = 49$ and $(-7) \times (-7) = 49$, the pure math equation gives two answers: $x = 7$ or $x = -7$ (written as $x = \pm 7$).

<!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>Two Roots vs Real-World Length</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -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;
  }
  .app-wrap {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .toggle-bar {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
    gap: 4px;
  }
  .toggle-btn {
    border: none;
    background: transparent;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .toggle-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .view-container {
    width: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .view-panel {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: fadeIn 0.3s ease forwards;
  }
  .view-panel.active {
    display: flex;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .eq-header {
    font-size: 24px;
    color: #1e2945;
  }
  .branches {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
  .branch-card {
    flex: 1;
    max-width: 220px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  .branch-card.pos {
    border-color: #3b82f6;
    background: #eff6ff;
  }
  .branch-card.neg {
    border-color: #8b5cf6;
    background: #f5f3ff;
  }
  .branch-card.rejected {
    opacity: 0.45;
    border-color: #cbd5e1;
    background: #f8fafc;
  }
  .strike-badge {
    position: absolute;
    top: -9px;
    right: 8px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
  }
  .geo-box {
    width: 130px;
    height: 130px;
    background: #dcfce7;
    border: 2.5px solid #10b981;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .geo-label-top {
    position: absolute;
    top: -24px;
    font-weight: 600;
    color: #10b981;
  }
  .geo-label-left {
    position: absolute;
    left: -26px;
    font-weight: 600;
    color: #10b981;
  }
  .geo-area {
    font-size: 15px;
    font-weight: 700;
    color: #047857;
  }
  .val-row {
    font-size: 18px;
    font-weight: 600;
  }
  .calc-row {
    font-size: 14px;
    color: #64748b;
  }
</style>
</head>
<body>

<div class="app-wrap">
  <div class="toggle-bar">
    <button class="toggle-btn active" id="btn-math" onclick="showView('math')">Pure Math</button>
    <button class="toggle-btn" id="btn-geo" onclick="showView('geo')">Geometry / Length</button>
  </div>

  <div class="view-container">
    
    <div class="view-panel active" id="panel-math">
      <div class="eq-header" id="math-root-eq"></div>
      <div class="branches">
        <div class="branch-card pos">
          <div class="val-row" id="math-pos-val"></div>
          <div class="calc-row" id="math-pos-calc"></div>
        </div>
        <div class="branch-card neg">
          <div class="val-row" id="math-neg-val"></div>
          <div class="calc-row" id="math-neg-calc"></div>
        </div>
      </div>
    </div>

    
    <div class="view-panel" id="panel-geo">
      <div class="geo-box">
        <div class="geo-label-top" id="geo-side-top"></div>
        <div class="geo-label-left" id="geo-side-left"></div>
        <div class="geo-area" id="geo-area-val"></div>
      </div>
      <div class="branches">
        <div class="branch-card pos" style="max-width: 170px;">
          <div class="val-row" id="geo-pos-val"></div>
        </div>
        <div class="branch-card rejected" style="max-width: 170px;">
          <span class="strike-badge">✕ No Negative</span>
          <div class="val-row" id="geo-neg-val"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  function renderKaTeX() {
    if (typeof katex === 'undefined') return;
    katex.render("x^2 = 49 \\implies x = \\pm 7", document.getElementById('math-root-eq'));
    katex.render("x = +7", document.getElementById('math-pos-val'));
    katex.render("7 \\times 7 = 49", document.getElementById('math-pos-calc'));
    katex.render("x = -7", document.getElementById('math-neg-val'));
    katex.render("(-7) \\times (-7) = 49", document.getElementById('math-neg-calc'));

    katex.render("7", document.getElementById('geo-side-top'));
    katex.render("7", document.getElementById('geo-side-left'));
    katex.render("\\text{Area} = 49", document.getElementById('geo-area-val'));
    katex.render("x = 7", document.getElementById('geo-pos-val'));
    katex.render("x = -7", document.getElementById('geo-neg-val'));
  }

  function showView(mode) {
    document.getElementById('btn-math').classList.toggle('active', mode === 'math');
    document.getElementById('btn-geo').classList.toggle('active', mode === 'geo');
    document.getElementById('panel-math').classList.toggle('active', mode === 'math');
    document.getElementById('panel-geo').classList.toggle('active', mode === 'geo');
  }

  window.addEventListener('DOMContentLoaded', renderKaTeX);
</script>
</body>
</html>

In geometry and real-life measurements like side lengths, distance cannot be negative, so we only keep the **positive root**.

What if the square root is already wrapping our mystery number?

To undo a square root sign, we perform its inverse operation by **squaring both sides** of the equation.

For example, if $\sqrt{x} = 6$, squaring both sides gives $(\sqrt{x})^2 = 6^2$, which simplifies directly to $x = 36$.

<!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>Solving Square Root Equations</title>
  <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; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

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

    .btn.active {
      background: #f59e0b;
      border-color: #d97706;
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
    }

    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: stretch;
    }

    @media (max-width: 440px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
    }

    .panel-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 170px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .step-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 17px;
      padding: 4px 8px;
      border-radius: 6px;
      transition: background 0.3s;
    }

    .step-row.highlight {
      background: #fef3c7;
    }

    .op-badge {
      font-size: 12px;
      font-weight: 700;
      color: #d97706;
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 6px;
      padding: 2px 6px;
    }

    .arrow {
      color: #94a3b8;
      font-size: 14px;
    }

    .grid-container {
      width: 100%;
      max-width: 120px;
      aspect-ratio: 1;
      display: grid;
      gap: 2px;
      padding: 4px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
    }

    .grid-cell {
      background: #f59e0b;
      border-radius: 2px;
      opacity: 0.85;
      transition: opacity 0.2s;
    }

    .comparison {
      display: flex;
      justify-content: space-around;
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .tag-correct {
      color: #059669;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tag-wrong {
      color: #dc2626;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="nav-bar">
      <div class="btn-group" id="val-selector">
        <button class="btn" data-val="4">&radic;x = 4</button>
        <button class="btn" data-val="5">&radic;x = 5</button>
        <button class="btn active" data-val="6">&radic;x = 6</button>
      </div>
      <div class="op-badge">(&radic;x)&sup2; = x</div>
    </div>

    <div class="content-grid">
      
      <div class="panel-box">
        <div class="step-row" id="math-1"></div>
        <div class="arrow">&darr;</div>
        <div class="step-row highlight" id="math-2"></div>
        <div class="arrow">&darr;</div>
        <div class="step-row" id="math-3"></div>
      </div>

      
      <div class="panel-box">
        <div id="grid" class="grid-container"></div>
        <div id="math-area" style="font-size: 15px;"></div>
      </div>
    </div>

    
    <div class="comparison">
      <div class="tag-correct">
        <span id="cmp-correct"></span>
        <span>&check;</span>
      </div>
      <div class="tag-wrong">
        <span id="cmp-wrong"></span>
        <span>&cross;</span>
      </div>
    </div>
  </div>

  <script>
    let currentVal = 6;

    function renderMath(val) {
      const sq = val * val;
      const dbl = val * 2;

      // Render Equation Steps
      katex.render(`\\sqrt{x} = ${val}`, document.getElementById('math-1'));
      katex.render(`(\\sqrt{x})^2 = ${val}^2`, document.getElementById('math-2'));
      katex.render(`x = ${sq}`, document.getElementById('math-3'));

      // Render Area Label
      katex.render(`\\text{Area} = ${val} \\times ${val} = ${sq}`, document.getElementById('math-area'));

      // Render Comparison
      katex.render(`${val}^2 = ${sq}`, document.getElementById('cmp-correct'));
      katex.render(`${val} \\times 2 = ${dbl}`, document.getElementById('cmp-wrong'));

      // Render Dynamic Grid
      const grid = document.getElementById('grid');
      grid.style.gridTemplateColumns = `repeat(${val}, 1fr)`;
      grid.style.gridTemplateRows = `repeat(${val}, 1fr)`;
      grid.innerHTML = '';
      for (let i = 0; i < sq; i++) {
        const cell = document.createElement('div');
        cell.className = 'grid-cell';
        grid.appendChild(cell);
      }
    }

    document.querySelectorAll('#val-selector .btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('#val-selector .btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentVal = parseInt(btn.dataset.val, 10);
        renderMath(currentVal);
      });
    });

    // Initial load
    renderMath(currentVal);
  </script>
</body>
</html>

A common mistake is multiplying by 2 instead of squaring — remember that $6^2$ means $6 \times 6 = 36$, not $6 \times 2 = 12$.

How do we put these tools to work in real-world word problems?

A square garden has an area of $81\text{ m}^2$. Let $s$ be the length of one side, so $s^2 = 81$.

Taking the square root gives $s = \sqrt{81} = 9\text{ meters}$, because a physical fence length must always be positive.

math

Solving Equations Involving Squares and Square Roots. Solve equations in the form x^2 = a and sqrt(x) = b in abstract and real-life contexts.

Solving Equations with Square Roots and Cube Roots

Solve Equations Using Square Roots

Corbettmaths: Equations Involving $x^2$ and Square Roots (Video 116a & 228)

Although labeled 'Early Level (P1)' in text prompts, the learning objective ($x^2 = a$ and $\sqrt{x} = b$) and benchmark standards (MTH 4-06a, MNU 4-03a) belong to Fourth Level (Broad General Education / S1–S3 secondary math) in Scotland's Curriculum for Excellence. Pedagogical best practice emphasizes teaching squares and roots through geometric models (area of squares vs. side lengths) before transitioning to abstract algebraic inverses, ensuring students consistently remember the $\pm$ symbol for $x^2 = a$ while understanding why the principal root $\sqrt{x}$ is strictly non-negative.

Solving Equations Involving Squares and Square Roots

Solving $x^2 = a$

Solving $\sqrt{x} = b$

Solving Equations Involving Squares and Square Roots

Solving x2=ax^2 = ax2=a

Solving x=b\sqrt{x} = bx​=b

Solving $x^2 = a$

Solving $\sqrt{x} = b$