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

If you walk 30 meters east and then 40 meters north across a park, you have walked 70 meters in total.

Cutting straight across diagonally gets you to the exact same spot in just 50 meters, saving you 20 meters of walking.

How can we calculate that exact diagonal shortcut without walking it out with a tape measure?

A **right-angled triangle** is any three-sided shape containing one 90-degree corner, usually marked with a small square.

The two shorter sides meeting at the right angle are called **legs**, while the longest side directly across from the 90-degree corner is the **hypotenuse**.

<!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="1:1">
<title>Pythagoras' Theorem</title>
<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; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px 10px;
    user-select: none;
    -webkit-user-select: none;
  }

  .nav-bar {
    display: flex;
    gap: 6px;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 8px;
    width: 100%;
    max-width: 340px;
  }

  .nav-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }

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

  .svg-container {
    width: 100%;
    max-width: 340px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 4px 0;
  }

  svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .grid-line {
    stroke: rgba(255,255,255,0.45);
    stroke-width: 1;
  }

  .square {
    transition: opacity 0.35s ease, transform 0.35s ease;
    transform-origin: center;
  }

  .sq-a { fill: #3b82f6; }
  .sq-b { fill: #6366f1; }
  .sq-c { fill: #0d9488; }

  .side-line {
    stroke-linecap: round;
    transition: stroke-width 0.25s ease;
  }

  .label-text {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    fill: #1e293b;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
  }

  .white-text {
    fill: #ffffff;
  }

  .formula-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 16px;
    width: 100%;
    max-width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }

  .eq-item {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
  }

  .c-blue { color: #2563eb; }
  .c-indigo { color: #4f46e5; }
  .c-teal { color: #0d9488; }
</style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" onclick="setStep(0)">1. Sides</button>
    <button class="nav-btn" onclick="setStep(1)">2. Squares</button>
    <button class="nav-btn" onclick="setStep(2)">3. Theorem</button>
  </div>

  <div class="svg-container">
    <svg viewBox="20 10 300 310" aria-hidden="true">
      <defs>
        
        <pattern id="gridA" width="23" height="23" patternUnits="userSpaceOnUse">
          <path d="M 23 0 L 0 0 0 23" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/>
        </pattern>
        
        <pattern id="gridB" width="23" height="23" patternUnits="userSpaceOnUse">
          <path d="M 23 0 L 0 0 0 23" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/>
        </pattern>
      </defs>

      
      
      <g id="group-sqA" class="square" opacity="0">
        <rect x="51" y="131" width="69" height="69" class="sq-a" rx="4"/>
        
        <line x1="74" y1="131" x2="74" y2="200" class="grid-line"/>
        <line x1="97" y1="131" x2="97" y2="200" class="grid-line"/>
        <line x1="51" y1="154" x2="120" y2="154" class="grid-line"/>
        <line x1="51" y1="177" x2="120" y2="177" class="grid-line"/>
        <text x="85.5" y="165.5" class="label-text white-text" id="tex-sqA">9</text>
      </g>

      
      <g id="group-sqB" class="square" opacity="0">
        <rect x="120" y="200" width="92" height="92" class="sq-b" rx="4"/>
        
        <line x1="143" y1="200" x2="143" y2="292" class="grid-line"/>
        <line x1="166" y1="200" x2="166" y2="292" class="grid-line"/>
        <line x1="189" y1="200" x2="189" y2="292" class="grid-line"/>
        <line x1="120" y1="223" x2="212" y2="223" class="grid-line"/>
        <line x1="120" y1="246" x2="212" y2="246" class="grid-line"/>
        <line x1="120" y1="269" x2="212" y2="269" class="grid-line"/>
        <text x="166" y="246" class="label-text white-text" id="tex-sqB">16</text>
      </g>

      
      <g id="group-sqC" class="square" opacity="0">
        
        <polygon points="120,131 212,200 281,108 189,39" class="sq-c"/>
        
        
        <line x1="133.8" y1="112.6" x2="225.8" y2="181.6" class="grid-line"/>
        <line x1="147.6" y1="94.2" x2="239.6" y2="163.2" class="grid-line"/>
        <line x1="161.4" y1="75.8" x2="253.4" y2="144.8" class="grid-line"/>
        <line x1="175.2" y1="57.4" x2="267.2" y2="126.4" class="grid-line"/>
        
        <line x1="138.4" y1="144.8" x2="207.4" y2="52.8" class="grid-line"/>
        <line x1="156.8" y1="158.6" x2="225.8" y2="66.6" class="grid-line"/>
        <line x1="175.2" y1="172.4" x2="244.2" y2="80.4" class="grid-line"/>
        <line x1="193.6" y1="186.2" x2="262.6" y2="94.2" class="grid-line"/>
        <text x="200.5" y="119.5" class="label-text white-text" id="tex-sqC">25</text>
      </g>

      
      <polygon points="120,131 212,200 120,200" fill="#f1f5f9" stroke="#334155" stroke-width="2.5" stroke-linejoin="round"/>

      
      <path d="M 120 188 L 132 188 L 132 200" fill="none" stroke="#0f172a" stroke-width="2"/>
      <circle cx="126" cy="194" r="1.5" fill="#0f172a"/>

      
      
      <line x1="120" y1="131" x2="120" y2="200" stroke="#3b82f6" stroke-width="4" class="side-line"/>
      <g id="lbl-sideA">
        <rect x="18" y="154" width="94" height="22" rx="5" fill="#ffffff" stroke="#bfdbfe" id="bg-lblA"/>
        <text x="65" y="165" class="label-text c-blue" id="tex-lblA">Leg a (3)</text>
      </g>

      
      <line x1="120" y1="200" x2="212" y2="200" stroke="#6366f1" stroke-width="4" class="side-line"/>
      <g id="lbl-sideB">
        <rect x="119" y="210" width="94" height="22" rx="5" fill="#ffffff" stroke="#c7d2fe" id="bg-lblB"/>
        <text x="166" y="221" class="label-text c-indigo" id="tex-lblB">Leg b (4)</text>
      </g>

      
      <line x1="120" y1="131" x2="212" y2="200" stroke="#0d9488" stroke-width="4" class="side-line"/>
      <g id="lbl-sideC">
        <rect x="172" y="138" width="128" height="22" rx="5" fill="#ffffff" stroke="#99f6e4" id="bg-lblC"/>
        <text x="236" y="149" class="label-text c-teal" id="tex-lblC">Hypotenuse c (5)</text>
      </g>

      
      <g id="across-guide" opacity="1" style="transition: opacity 0.3s ease;">
        <path d="M 132 188 Q 155 175 162 169" fill="none" stroke="#0d9488" stroke-width="1.5" stroke-dasharray="3,3"/>
        <polygon points="166,166 160,172 157,166" fill="#0d9488"/>
      </g>
    </svg>
  </div>

  <div class="formula-card" id="formulaBox">
    
  </div>

  <script>
    let currentStep = 0;

    function renderMath(latex, container) {
      if (window.katex) {
        katex.render(latex, container, { throwOnError: false });
      } else {
        container.textContent = latex;
      }
    }

    function setStep(step) {
      currentStep = step;
      
      // Update nav buttons
      document.querySelectorAll('.nav-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      const sqA = document.getElementById('group-sqA');
      const sqB = document.getElementById('group-sqB');
      const sqC = document.getElementById('group-sqC');
      const lblA = document.getElementById('lbl-sideA');
      const lblB = document.getElementById('lbl-sideB');
      const lblC = document.getElementById('lbl-sideC');
      const across = document.getElementById('across-guide');
      const formulaBox = document.getElementById('formulaBox');

      if (step === 0) {
        // Step 1: Anatomy / Sides
        sqA.setAttribute('opacity', '0');
        sqB.setAttribute('opacity', '0');
        sqC.setAttribute('opacity', '0');
        lblA.style.display = 'block';
        lblB.style.display = 'block';
        lblC.style.display = 'block';
        across.setAttribute('opacity', '1');

        renderMath('\\text{Leg } a \\perp \\text{Leg } b \\quad\\longrightarrow\\quad \\text{Hypotenuse } c', formulaBox);
      } else if (step === 1) {
        // Step 2: Squares
        sqA.setAttribute('opacity', '0.92');
        sqB.setAttribute('opacity', '0.92');
        sqC.setAttribute('opacity', '0.92');
        lblA.style.display = 'none';
        lblB.style.display = 'none';
        lblC.style.display = 'none';
        across.setAttribute('opacity', '0');

        renderMath('a^2 = 9, \\quad b^2 = 16, \\quad c^2 = 25', formulaBox);
      } else {
        // Step 3: Theorem
        sqA.setAttribute('opacity', '1');
        sqB.setAttribute('opacity', '1');
        sqC.setAttribute('opacity', '1');
        lblA.style.display = 'none';
        lblB.style.display = 'none';
        lblC.style.display = 'none';
        across.setAttribute('opacity', '0');

        renderMath('{\\color{#2563eb}a^2} + {\\color{#4f46e5}b^2} = {\\color{#0d9488}c^2} \\implies {\\color{#2563eb}9} + {\\color{#4f46e5}16} = {\\color{#0d9488}25}', formulaBox);
      }
    }

    // Initialize
    window.addEventListener('load', () => {
      setStep(0);
    });
  </script>
</body>
</html>

Over 2,500 years ago, Greek mathematician Pythagoras—and Babylonian builders before him—noticed an exact pattern connecting the geometric squares built on each side.

**Pythagoras' theorem** states that in any right-angled triangle, the area of the square on the hypotenuse equals the sum of the areas of the squares on the other two sides: $$a^2 + b^2 = c^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="1:1">
<title>Pythagoras' Theorem</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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #ffffff;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 10px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  .nav-btn {
    flex: 1;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;
  }

  .nav-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }

  .svg-container {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 0.88;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .cell {
    transition: fill 0.4s ease, opacity 0.4s ease;
  }

  .lbl {
    font-size: 14px;
    font-weight: 700;
    fill: #1e293b;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
  }

  .math-bar {
    width: 100%;
    max-width: 440px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-top: 4px;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="nav-btn active" id="btn-0">1. Squares</button>
  <button class="nav-btn" id="btn-1">2. Unit Grids</button>
  <button class="nav-btn" id="btn-2">3. 9 + 16 = 25</button>
</div>

<div class="svg-container">
  <svg viewBox="40 30 310 275" id="diagram">
    
    <g id="hyp-cells"></g>
    
    <g id="leg-b-cells"></g>
    
    <g id="leg-a-cells"></g>

    
    <polygon points="160,124 232,220 160,220" fill="#ffffff" stroke="#1e293b" stroke-width="2.5" />
    
    
    <polyline points="160,208 172,208 172,220" fill="none" stroke="#1e293b" stroke-width="1.5" />

    
    <text x="146" y="172" class="lbl" fill="#10b981">b = 4</text>
    <text x="196" y="234" class="lbl" fill="#3b82f6">a = 3</text>
    <text x="208" y="162" class="lbl" fill="#8b5cf6">c = 5</text>

    <text x="112" y="172" id="lbl-b2" class="lbl" style="opacity:0;" fill="#047857">b² = 16</text>
    <text x="196" y="260" id="lbl-a2" class="lbl" style="opacity:0;" fill="#1d4ed8">a² = 9</text>
    <text x="244" y="136" id="lbl-c2" class="lbl" style="opacity:0;" fill="#6d28d9">c² = 25</text>
  </svg>
</div>

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

<script>
  const A = { x: 160, y: 124 };
  const B = { x: 232, y: 220 };
  const C = { x: 160, y: 220 };

  const u = { x: (B.x - A.x) / 5, y: (B.y - A.y) / 5 };
  const v = { x: (B.y - A.y) / 5, y: -(B.x - A.x) / 5 };

  const hypG = document.getElementById('hyp-cells');
  const bG = document.getElementById('leg-b-cells');
  const aG = document.getElementById('leg-a-cells');
  const eqEl = document.getElementById('equation');

  const hypCells = [];
  const bCells = [];
  const aCells = [];

  // Create 5x5 Hypotenuse Cells
  for (let j = 0; j < 5; j++) {
    for (let i = 0; i < 5; i++) {
      const p1 = { x: A.x + i * u.x + j * v.x, y: A.y + i * u.y + j * v.y };
      const p2 = { x: A.x + (i + 1) * u.x + j * v.x, y: A.y + (i + 1) * u.y + j * v.y };
      const p3 = { x: A.x + (i + 1) * u.x + (j + 1) * v.x, y: A.y + (i + 1) * u.y + (j + 1) * v.y };
      const p4 = { x: A.x + i * u.x + (j + 1) * v.x, y: A.y + i * u.y + (j + 1) * v.y };

      const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      poly.setAttribute('points', `${p1.x},${p1.y} ${p2.x},${p2.y} ${p3.x},${p3.y} ${p4.x},${p4.y}`);
      poly.setAttribute('class', 'cell');
      poly.setAttribute('stroke', '#a855f7');
      poly.setAttribute('stroke-width', '1');
      poly.setAttribute('fill', '#f5f3ff');
      hypG.appendChild(poly);
      hypCells.push(poly);
    }
  }

  // Create 4x4 Leg b Cells (16 total)
  for (let j = 0; j < 4; j++) {
    for (let i = 0; i < 4; i++) {
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('x', 64 + i * 24);
      rect.setAttribute('y', 124 + j * 24);
      rect.setAttribute('width', 24);
      rect.setAttribute('height', 24);
      rect.setAttribute('class', 'cell');
      rect.setAttribute('stroke', '#10b981');
      rect.setAttribute('stroke-width', '1');
      rect.setAttribute('fill', '#ecfdf5');
      bG.appendChild(rect);
      bCells.push(rect);
    }
  }

  // Create 3x3 Leg a Cells (9 total)
  for (let j = 0; j < 3; j++) {
    for (let i = 0; i < 3; i++) {
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('x', 160 + i * 24);
      rect.setAttribute('y', 220 + j * 24);
      rect.setAttribute('width', 24);
      rect.setAttribute('height', 24);
      rect.setAttribute('class', 'cell');
      rect.setAttribute('stroke', '#3b82f6');
      rect.setAttribute('stroke-width', '1');
      rect.setAttribute('fill', '#eff6ff');
      aG.appendChild(rect);
      aCells.push(rect);
    }
  }

  const lblA2 = document.getElementById('lbl-a2');
  const lblB2 = document.getElementById('lbl-b2');
  const lblC2 = document.getElementById('lbl-c2');

  const formulas = [
    "a^2 + b^2 = c^2",
    "3^2 + 4^2 = 5^2",
    "\\mathbf{\\color{#2563eb}{9}} + \\mathbf{\\color{#059669}{16}} = \\mathbf{\\color{#7c3aed}{25}}"
  ];

  function renderStep(idx) {
    [0, 1, 2].forEach(i => {
      document.getElementById('btn-' + i).classList.toggle('active', i === idx);
    });

    if (window.katex) {
      katex.render(formulas[idx], eqEl, { throwOnError: false });
    } else {
      eqEl.textContent = formulas[idx];
    }

    if (idx === 0) {
      // Step 1: Plain squares
      aCells.forEach(c => { c.setAttribute('fill', '#eff6ff'); c.setAttribute('stroke', '#93c5fd'); });
      bCells.forEach(c => { c.setAttribute('fill', '#ecfdf5'); c.setAttribute('stroke', '#a7f3d0'); });
      hypCells.forEach(c => { c.setAttribute('fill', '#f5f3ff'); c.setAttribute('stroke', '#ddd6fe'); });
      lblA2.style.opacity = "0";
      lblB2.style.opacity = "0";
      lblC2.style.opacity = "0";
    } else if (idx === 1) {
      // Step 2: Highlight unit grids with counts
      aCells.forEach(c => { c.setAttribute('fill', '#bfdbfe'); c.setAttribute('stroke', '#3b82f6'); });
      bCells.forEach(c => { c.setAttribute('fill', '#a7f3d0'); c.setAttribute('stroke', '#10b981'); });
      hypCells.forEach(c => { c.setAttribute('fill', '#f5f3ff'); c.setAttribute('stroke', '#8b5cf6'); });
      lblA2.style.opacity = "1";
      lblB2.style.opacity = "1";
      lblC2.style.opacity = "1";
    } else if (idx === 2) {
      // Step 3: Fill hyp square with 9 blue + 16 green
      aCells.forEach(c => { c.setAttribute('fill', '#bfdbfe'); c.setAttribute('stroke', '#3b82f6'); });
      bCells.forEach(c => { c.setAttribute('fill', '#a7f3d0'); c.setAttribute('stroke', '#10b981'); });
      lblA2.style.opacity = "1";
      lblB2.style.opacity = "1";
      lblC2.style.opacity = "1";

      hypCells.forEach((c, i) => {
        if (i < 9) {
          c.setAttribute('fill', '#60a5fa');
          c.setAttribute('stroke', '#2563eb');
        } else {
          c.setAttribute('fill', '#34d399');
          c.setAttribute('stroke', '#059669');
        }
      });
    }
  }

  let currentStep = 0;
  let autoTimer = null;

  function setStep(idx) {
    currentStep = idx;
    renderStep(currentStep);
    restartTimer();
  }

  function nextStep() {
    currentStep = (currentStep + 1) % 3;
    renderStep(currentStep);
  }

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

  [0, 1, 2].forEach(i => {
    document.getElementById('btn-' + i).addEventListener('click', () => setStep(i));
  });

  renderStep(0);
  restartTimer();
</script>
</body>
</html>

What happens when we need to find an unknown hypotenuse from two known leg lengths?

To find $c$, square both legs, add the results, and then take the **square root** (the operation $\sqrt{x}$ that reverses squaring by finding what number multiplied by itself equals $x$).

For our park walk with legs $a = 30\text{ m}$ and $b = 40\text{ m}$, we write: $$c^2 = 30^2 + 40^2 = 900 + 1600 = 2500$$.

Taking the square root of both sides gives the straight-line distance: $$c = \sqrt{2500} = 50\text{ m}$$.

<!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>Pythagoras in 2D Problems</title>
  <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; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .svg-container {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .step-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      padding: 8px 4px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0ea5e9;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .calc-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      text-align: center;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }
    .highlight-a { stroke: #3b82f6; fill: #3b82f6; color: #1d4ed8; }
    .highlight-b { stroke: #10b981; fill: #10b981; color: #047857; }
    .highlight-c { stroke: #8b5cf6; fill: #8b5cf6; color: #6d28d9; }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="svg-container">
      <svg viewBox="0 0 400 280" aria-label="2D Pythagoras right-angled triangle">
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" stroke-width="1"/>
          </pattern>
        </defs>
        <rect width="400" height="280" fill="url(#grid)" />
        
        
        <path d="M 290 210 L 290 190 L 310 190" fill="none" stroke="#94a3b8" stroke-width="2" />
        <circle cx="300" cy="200" r="2" fill="#94a3b8" />

        
        <line id="legA" x1="70" y1="210" x2="310" y2="210" stroke="#3b82f6" stroke-width="4" stroke-linecap="round" />
        <line id="legB" x1="310" y1="210" x2="310" y2="50" stroke="#10b981" stroke-width="4" stroke-linecap="round" />
        
        
        <line id="hypC" x1="70" y1="210" x2="310" y2="50" stroke="#cbd5e1" stroke-width="4" stroke-dasharray="6 6" stroke-linecap="round" />

        
        <rect id="sqA" x="70" y="215" width="240" height="24" fill="#3b82f6" opacity="0.12" rx="4" style="display:none;" />
        <rect id="sqB" x="315" y="50" width="24" height="160" fill="#10b981" opacity="0.12" rx="4" style="display:none;" />

        
        <circle cx="70" cy="210" r="6" fill="#0f172a" />
        <circle cx="310" cy="210" r="5" fill="#64748b" />
        <circle cx="310" cy="50" r="6" fill="#0f172a" />

        
        <text x="50" y="235" font-size="13" font-weight="bold" fill="#0f172a">Start</text>
        <text x="320" y="45" font-size="13" font-weight="bold" fill="#0f172a">End</text>

        <text id="labelA" x="190" y="235" text-anchor="middle" font-size="14" font-weight="600" fill="#1d4ed8">40 m (East)</text>
        <text id="labelB" x="355" y="135" text-anchor="middle" font-size="14" font-weight="600" fill="#047857">30 m (North)</text>
        <text id="labelC" x="170" y="115" text-anchor="middle" font-size="15" font-weight="bold" fill="#6d28d9">c = ?</text>
      </svg>
    </div>

    <div class="step-nav">
      <button class="step-btn active" onclick="setStep(0)">1. Legs</button>
      <button class="step-btn" onclick="setStep(1)">2. Squares</button>
      <button class="step-btn" onclick="setStep(2)">3. Distance</button>
    </div>

    <div class="calc-box" id="mathOutput"></div>
  </div>

  <script>
    const steps = [
      {
        katex: "a = 40\\text{ m},\\quad b = 30\\text{ m}",
        hypStroke: "#cbd5e1",
        hypDash: "6 6",
        hypLabel: "c = ?",
        hypWidth: 4,
        sqVisible: false
      },
      {
        katex: "c^2 = 40^2 + 30^2 = 1600 + 900 = 2500",
        hypStroke: "#a78bfa",
        hypDash: "4 4",
        hypLabel: "c^2 = 2500",
        hypWidth: 4,
        sqVisible: true
      },
      {
        katex: "c = \\sqrt{2500} = 50\\text{ m}",
        hypStroke: "#8b5cf6",
        hypDash: "none",
        hypLabel: "c = 50 m",
        hypWidth: 5,
        sqVisible: true
      }
    ];

    let current = 0;

    function renderMath(expr) {
      const el = document.getElementById('mathOutput');
      if (window.katex) {
        katex.render(expr, el, { throwOnError: false });
      } else {
        el.textContent = expr;
      }
    }

    function setStep(idx) {
      current = idx;
      const data = steps[idx];

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

      const hyp = document.getElementById('hypC');
      hyp.setAttribute('stroke', data.hypStroke);
      hyp.setAttribute('stroke-dasharray', data.hypDash);
      hyp.setAttribute('stroke-width', data.hypWidth);

      document.getElementById('labelC').textContent = data.hypLabel;
      
      const sqDisplay = data.sqVisible ? 'block' : 'none';
      document.getElementById('sqA').style.display = sqDisplay;
      document.getElementById('sqB').style.display = sqDisplay;

      renderMath(data.katex);
    }

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

What if you already know the hypotenuse and need to find one of the shorter legs instead?

When the hypotenuse is known, rearrange the formula by subtracting the known leg's square from the hypotenuse's square: $$a^2 = c^2 - b^2$$.

Suppose a $13\text{ ft}$ ladder rests against a wall with its base $5\text{ ft}$ from the building, and we need the wall height $h$.

Substitute the values: $$h^2 = 13^2 - 5^2 = 169 - 25 = 144$$, which gives $$h = \sqrt{144} = 12\text{ ft}$$.

<!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>Pythagoras Theorem in 2D</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, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 8px;
  }
  .app-container {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .stage-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 440px) {
    .stage-row {
      flex-direction: column;
    }
  }
  .svg-wrap {
    flex: 1;
    max-width: 270px;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e8f0;
  }
  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .panel-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
  }
  .step-box {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 12px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background 0.3s ease;
  }
  .math-display {
    font-size: 17px;
    color: #1e3a8a;
  }
  .controls {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
  }
  .btn-step {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-step.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }
  .btn-play {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    width: 32px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ladder-line {
    stroke: #b45309;
    stroke-width: 7;
    stroke-linecap: round;
  }
  .rung {
    stroke: #d97706;
    stroke-width: 2.5;
    stroke-linecap: round;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="stage-row">
    
    <div class="svg-wrap">
      <svg viewBox="0 0 240 240">
        
        <rect x="0" y="20" width="70" height="180" fill="#e2e8f0"/>
        
        <line x1="15" y1="50" x2="45" y2="50" stroke="#cbd5e1" stroke-width="2"/>
        <line x1="30" y1="80" x2="60" y2="80" stroke="#cbd5e1" stroke-width="2"/>
        <line x1="10" y1="110" x2="40" y2="110" stroke="#cbd5e1" stroke-width="2"/>
        <line x1="25" y1="140" x2="55" y2="140" stroke="#cbd5e1" stroke-width="2"/>
        <line x1="15" y1="170" x2="45" y2="170" stroke="#cbd5e1" stroke-width="2"/>

        
        <rect x="0" y="200" width="240" height="40" fill="#94a3b8"/>
        <line x1="0" y1="200" x2="240" y2="200" stroke="#64748b" stroke-width="3"/>

        
        <rect x="70" y="186" width="14" height="14" fill="none" stroke="#2563eb" stroke-width="2"/>

        
        <line id="height-guide" x1="70" y1="45" x2="70" y2="200" stroke="#2563eb" stroke-dasharray="4,3" stroke-width="2.5"/>

        
        <line x1="70" y1="200" x2="185" y2="200" stroke="#059669" stroke-width="3"/>

        
        
        <g id="ladder-group">
          
          <line x1="185" y1="200" x2="70" y2="45" stroke="#92400e" stroke-width="8" opacity="0.3"/>
          <line x1="185" y1="200" x2="70" y2="45" stroke="#b45309" stroke-width="6" stroke-linecap="round"/>
          
          <line x1="173" y1="184" x2="178" y2="188" class="rung"/>
          <line x1="150" y1="153" x2="155" y2="157" class="rung"/>
          <line x1="127" y1="122" x2="132" y2="126" class="rung"/>
          <line x1="104" y1="91" x2="109" y2="95" class="rung"/>
          <line x1="81" y1="60" x2="86" y2="64" class="rung"/>
        </g>

        
        
        <g transform="translate(142, 114) rotate(-53.4)">
          <rect x="-24" y="-12" width="48" height="18" rx="4" fill="#ffffff" stroke="#b45309" stroke-width="1.5"/>
          <text x="0" y="1" font-size="11" font-weight="bold" fill="#b45309" text-anchor="middle" dominant-baseline="middle">13 ft</text>
        </g>

        
        <g transform="translate(127, 218)">
          <rect x="-18" y="-9" width="36" height="18" rx="4" fill="#ffffff" stroke="#059669" stroke-width="1.5"/>
          <text x="0" y="1" font-size="11" font-weight="bold" fill="#059669" text-anchor="middle" dominant-baseline="middle">5 ft</text>
        </g>

        
        <g id="height-tag" transform="translate(42, 122)">
          <rect x="-26" y="-10" width="52" height="20" rx="4" fill="#ffffff" stroke="#2563eb" stroke-width="1.5"/>
          <text id="height-text" x="0" y="1" font-size="11" font-weight="bold" fill="#2563eb" text-anchor="middle" dominant-baseline="middle">h = ?</text>
        </g>
      </svg>
    </div>

    
    <div class="panel-col">
      <div class="step-box">
        <div id="math-target" class="math-display"></div>
      </div>

      
      <div class="controls">
        <button id="step-0" class="btn-step active">1. Setup</button>
        <button id="step-1" class="btn-step">2. Subtract</button>
        <button id="step-2" class="btn-step">3. Solve</button>
        <button id="play-btn" class="btn-play" title="Auto Play">▶</button>
      </div>
    </div>
  </div>
</div>

<script>
  const mathSteps = [
    "h^2 + 5^2 = 13^2",
    "h^2 = 13^2 - 5^2",
    "h = \\sqrt{144} = 12\\text{ ft}"
  ];

  const heightLabels = ["h = ?", "h^2 = 144", "h = 12 ft"];

  let currentStep = 0;
  let timer = null;

  function renderMath(latex) {
    const el = document.getElementById('math-target');
    if (window.katex) {
      katex.render(latex, el, { displayMode: true, throwOnError: false });
    } else {
      el.textContent = latex;
    }
  }

  function setStep(idx) {
    currentStep = idx;
    
    // Update step buttons
    for (let i = 0; i < 3; i++) {
      const btn = document.getElementById(`step-${i}`);
      if (btn) {
        if (i === idx) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    }

    // Update diagram visual
    document.getElementById('height-text').textContent = heightLabels[idx];
    
    // Update Math formula
    renderMath(mathSteps[idx]);
  }

  function nextStep() {
    setStep((currentStep + 1) % 3);
  }

  function togglePlay() {
    const pBtn = document.getElementById('play-btn');
    if (timer) {
      clearInterval(timer);
      timer = null;
      pBtn.textContent = "▶";
    } else {
      pBtn.textContent = "⏸";
      timer = setInterval(nextStep, 3200);
    }
  }

  // Bind step buttons
  for (let i = 0; i < 3; i++) {
    const btn = document.getElementById(`step-${i}`);
    btn.addEventListener('click', () => {
      if (timer) togglePlay();
      setStep(i);
    });
  }

  document.getElementById('play-btn').addEventListener('click', togglePlay);

  // Initialize
  setStep(0);
</script>

</body>
</html>

A common mistake is adding the squares instead of subtracting when finding a leg—always double-check that your calculated leg is strictly shorter than the hypotenuse.

How do we apply this rule when the problem doesn't give us an obvious right triangle?

Many 2D geometric problems hide right triangles inside rectangles, parallelograms, or triangles that you can reveal by adding a perpendicular construction line.

An **isosceles triangle** has two equal sides; drawing an altitude from the top vertex down to the base splits it into two identical right triangles and cuts the base in half.

<!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>Pythagoras in Isosceles Triangle</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 420px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* SVG transitions */
    .tri-right {
      transition: opacity 0.4s ease, fill 0.4s ease;
    }
    .tri-left {
      transition: fill 0.4s ease, stroke 0.4s ease;
    }
    .altitude-line {
      transition: stroke-dashoffset 0.5s ease, opacity 0.4s ease;
    }
    .fade-el {
      transition: opacity 0.4s ease;
    }

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

    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 1px 2px rgba(59, 130, 246, 0.1);
    }

    .math-bar {
      min-height: 28px;
      margin-top: 6px;
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .math-pill {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      padding: 2px 10px;
      border-radius: 6px;
      font-family: "Courier New", Courier, monospace;
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <svg viewBox="0 0 360 220" aria-label="Isosceles Triangle Altitude Diagram">
      <defs>
        
        <path id="tick" d="M -4,-4 L 4,4" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/>
      </defs>

      
      <polygon id="triRight" class="tri-right" points="180,30 300,180 180,180" 
               fill="#dbeafe" stroke="#3b82f6" stroke-width="2.5" stroke-linejoin="round"/>

      
      <polygon id="triLeft" class="tri-left" points="180,30 60,180 180,180" 
               fill="#dbeafe" stroke="#3b82f6" stroke-width="2.5" stroke-linejoin="round"/>

      
      <line id="baseFull" class="fade-el" x1="60" y1="180" x2="300" y2="180" 
            stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round"/>

      
      <g id="ticks" class="fade-el">
        <use href="#tick" x="117" y="102" transform="rotate(-15 117 102)"/>
        <use href="#tick" x="243" y="102" transform="rotate(15 243 102)"/>
      </g>

      
      <line id="altLine" class="altitude-line" x1="180" y1="30" x2="180" y2="180" 
            stroke="#ef4444" stroke-width="2.5" stroke-dasharray="6,4" stroke-linecap="round"/>

      
      <path id="rightAngle" class="fade-el" d="M 164,180 L 164,164 L 180,164" 
            fill="none" stroke="#ef4444" stroke-width="2"/>

      
      
      <text id="lblLeft" x="105" y="95" fill="#1e293b" font-size="15" font-weight="700" text-anchor="end">10</text>
      <text id="lblRight" class="fade-el" x="255" y="95" fill="#1e293b" font-size="15" font-weight="700" text-anchor="start">10</text>

      
      <text id="lblBase12" class="fade-el" x="180" y="204" fill="#1e293b" font-size="15" font-weight="700" text-anchor="middle">12</text>
      
      <g id="lblBaseSplit" class="fade-el" opacity="0">
        <text x="120" y="204" fill="#2563eb" font-size="15" font-weight="700" text-anchor="middle">6</text>
        <text x="240" y="204" fill="#64748b" font-size="15" font-weight="700" text-anchor="middle">6</text>
        
        <circle cx="180" cy="180" r="3.5" fill="#ef4444"/>
      </g>

      
      <text id="lblH" class="fade-el" x="168" y="112" fill="#ef4444" font-size="16" font-weight="800" text-anchor="end" opacity="0">h</text>
    </svg>

    
    <div class="math-bar">
      <div id="mathText" class="math-pill" style="opacity: 0;">h² + 6² = 10² → h = 8</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Isosceles</button>
    <button class="step-btn" onclick="setStep(1)">2. Drop Altitude</button>
    <button class="step-btn" onclick="setStep(2)">3. Pythagoras</button>
  </div>

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

    const els = {
      triRight: document.getElementById('triRight'),
      triLeft: document.getElementById('triLeft'),
      baseFull: document.getElementById('baseFull'),
      ticks: document.getElementById('ticks'),
      altLine: document.getElementById('altLine'),
      rightAngle: document.getElementById('rightAngle'),
      lblRight: document.getElementById('lblRight'),
      lblBase12: document.getElementById('lblBase12'),
      lblBaseSplit: document.getElementById('lblBaseSplit'),
      lblH: document.getElementById('lblH'),
      mathText: document.getElementById('mathText'),
      btns: document.querySelectorAll('.step-btn')
    };

    function updateView(step) {
      currentStep = step;
      els.btns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      if (step === 0) {
        // Step 1: Base Isosceles
        els.triLeft.setAttribute('fill', '#dbeafe');
        els.triLeft.setAttribute('stroke', '#3b82f6');
        els.triRight.setAttribute('fill', '#dbeafe');
        els.triRight.setAttribute('stroke', '#3b82f6');
        els.triRight.style.opacity = '1';
        els.ticks.style.opacity = '1';
        els.lblRight.style.opacity = '1';
        els.altLine.style.opacity = '0';
        els.rightAngle.style.opacity = '0';
        els.lblBase12.style.opacity = '1';
        els.lblBaseSplit.style.opacity = '0';
        els.lblH.style.opacity = '0';
        els.mathText.style.opacity = '0';
      } 
      else if (step === 1) {
        // Step 2: Drop altitude & bisect base
        els.triLeft.setAttribute('fill', '#dbeafe');
        els.triLeft.setAttribute('stroke', '#3b82f6');
        els.triRight.setAttribute('fill', '#dbeafe');
        els.triRight.setAttribute('stroke', '#3b82f6');
        els.triRight.style.opacity = '1';
        els.ticks.style.opacity = '0.3';
        els.lblRight.style.opacity = '1';
        els.altLine.style.opacity = '1';
        els.rightAngle.style.opacity = '1';
        els.lblBase12.style.opacity = '0';
        els.lblBaseSplit.style.opacity = '1';
        els.lblH.style.opacity = '1';
        els.lblH.textContent = 'h';
        els.lblH.setAttribute('fill', '#ef4444');
        els.mathText.style.opacity = '0';
      } 
      else if (step === 2) {
        // Step 3: Highlight right triangle & solve
        els.triLeft.setAttribute('fill', '#bfdbfe');
        els.triLeft.setAttribute('stroke', '#2563eb');
        els.triRight.setAttribute('fill', '#f1f5f9');
        els.triRight.setAttribute('stroke', '#cbd5e1');
        els.triRight.style.opacity = '0.35';
        els.ticks.style.opacity = '0';
        els.lblRight.style.opacity = '0.2';
        els.altLine.style.opacity = '1';
        els.rightAngle.style.opacity = '1';
        els.lblBase12.style.opacity = '0';
        els.lblBaseSplit.style.opacity = '1';
        els.lblH.style.opacity = '1';
        els.lblH.textContent = 'h = 8';
        els.lblH.setAttribute('fill', '#1d4ed8');
        els.mathText.style.opacity = '1';
      }
    }

    function setStep(idx) {
      clearInterval(autoTimer);
      updateView(idx);
      startAutoPlay();
    }

    function startAutoPlay() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (currentStep + 1) % 3;
        updateView(next);
      }, 4000);
    }

    // Initialize
    updateView(0);
    startAutoPlay();
  </script>
</body>
</html>

Whenever you face an unfamiliar 2D shape, look for ways to drop a perpendicular line to uncover right-angled triangles.

math

Pythagoras' Theorem in 2D Problems. Apply Pythagoras' theorem to find unknown side lengths in right-angled triangles in 2D problems.

Pythagorean Theorem in 2D Figures and Real-World Contexts

Pythagoras' Theorem - Calculating Sides and Solving 2D Problems

Year 9 Pythagoras and Trigonometry Planning Tool (AC9M9M03)

Effective instruction for Years 9-10 under AC9M9M03 emphasizes spatial reasoning over rote memorisation of $a^2 + b^2 = c^2$. Teachers should employ a three-step pedagogical routine: (1) Explicit identification of the right angle and hypotenuse prior to any algebra; (2) Spatial decomposition (drawing construction lines/altitudes in 2D shapes); (3) Formulating equations based on context (adding for hypotenuse, subtracting for shorter sides). Emphasise precision when switching between exact surd notation and contextual decimal approximations.

Pythagoras' Theorem in 2D Problems

Anatomy of a Right Triangle

The Theorem and Why It Works

Finding the Hypotenuse