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

What happens when you cut a square sandwich right down the middle from corner to corner?

You get two matching triangles! If you slide them back together along their longest sides, your sandwich is whole again.

<!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>Combining Two Triangles</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
  }
  .controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .btn {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e2945;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .btn.active {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
  }
  .stage-wrapper {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .slider-box {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-top: 10px;
  }
  .slider-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    user-select: none;
  }
  input[type="range"] {
    flex: 1;
    accent-color: #22b7ff;
    cursor: pointer;
  }
  .status-text {
    font-size: 16px;
    font-weight: 700;
    margin-top: 6px;
    min-height: 24px;
  }
</style>
</head>
<body>

<div class="controls">
  <button id="btnSquare" class="btn active">Square</button>
  <button id="btnRect" class="btn">Rectangle</button>
</div>

<div class="stage-wrapper">
  <svg viewBox="0 0 320 220" id="diagramSvg">
    
    <g id="t1" style="transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);">
      <polygon id="poly1" points="80,30 240,30 240,190" fill="rgba(34, 183, 255, 0.28)" stroke="#0284c7" stroke-width="2.5" stroke-linejoin="round" />
      <path id="ra1" d="M 226,30 L 226,44 L 240,44" fill="none" stroke="#0284c7" stroke-width="1.5" />
    </g>
    <g id="t2" style="transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);">
      <polygon id="poly2" points="80,30 80,190 240,190" fill="rgba(255, 159, 67, 0.28)" stroke="#ea580c" stroke-width="2.5" stroke-linejoin="round" />
      <path id="ra2" d="M 80,176 L 94,176 L 94,190" fill="none" stroke="#ea580c" stroke-width="1.5" />
    </g>
  </svg>
</div>

<div class="slider-box">
  <span class="slider-label">Separate</span>
  <input type="range" id="slider" min="0" max="100" value="0">
  <span class="slider-label">Join</span>
</div>

<div class="status-text" id="statusLabel">2 Triangles</div>

<script>
  const btnSquare = document.getElementById('btnSquare');
  const btnRect = document.getElementById('btnRect');
  const slider = document.getElementById('slider');
  const t1 = document.getElementById('t1');
  const t2 = document.getElementById('t2');
  const poly1 = document.getElementById('poly1');
  const poly2 = document.getElementById('poly2');
  const ra1 = document.getElementById('ra1');
  const ra2 = document.getElementById('ra2');
  const statusLabel = document.getElementById('statusLabel');

  let mode = 'square'; // 'square' | 'rect'

  const shapes = {
    square: {
      p1: "80,30 240,30 240,190",
      ra1: "M 226,30 L 226,44 L 240,44",
      p2: "80,30 80,190 240,190",
      ra2: "M 80,176 L 94,176 L 94,190",
      dx: 28,
      dy: 28,
      name: "1 Square"
    },
    rect: {
      p1: "50,50 270,50 270,170",
      ra1: "M 256,50 L 256,64 L 270,64",
      p2: "50,50 50,170 270,170",
      ra2: "M 50,156 L 64,156 L 64,170",
      dx: 28,
      dy: 18,
      name: "1 Rectangle"
    }
  };

  function update() {
    const s = shapes[mode];
    poly1.setAttribute('points', s.p1);
    ra1.setAttribute('d', s.ra1);
    poly2.setAttribute('points', s.p2);
    ra2.setAttribute('d', s.ra2);

    const progress = slider.value / 100; // 0 = fully separated, 1 = joined
    const sep = 1 - progress;

    const offX = s.dx * sep;
    const offY = s.dy * sep;

    t1.style.transform = `translate(${offX}px, ${-offY}px)`;
    t2.style.transform = `translate(${-offX}px, ${offY}px)`;

    if (progress >= 0.85) {
      statusLabel.textContent = s.name;
    } else {
      statusLabel.textContent = "2 Triangles";
    }
  }

  btnSquare.addEventListener('click', () => {
    mode = 'square';
    btnSquare.classList.add('active');
    btnRect.classList.remove('active');
    update();
  });

  btnRect.addEventListener('click', () => {
    mode = 'rect';
    btnRect.classList.add('active');
    btnSquare.classList.remove('active');
    update();
  });

  slider.addEventListener('input', update);

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

Can we use this sandwich trick to build our own shapes from scratch?

A **right triangle** is a special triangle that has one square corner, just like the corner of a book.

It has two straight sides that make that square corner, plus one **longest side** that slants across.

<!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>Combining Two Triangles</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: 440px;
  }

  .btn-group {
    display: flex;
    background: #e9ecef;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
  }

  button {
    border: none;
    background: transparent;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

  button.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }

  .canvas-container {
    width: 100%;
    max-width: 400px;
    height: 240px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .tri {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hypotenuse {
    stroke-dasharray: 4 3;
    stroke-width: 2.5;
    transition: stroke 0.3s;
  }

  .label-text {
    font-size: 13px;
    font-weight: 600;
    fill: #1e2945;
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .step-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }

  .step-btn {
    background: #ffffff;
    border: 1px solid #dee2e6;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    color: #1e2945;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  .step-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }
</style>
</head>
<body>

  <div class="controls">
    <div class="btn-group" role="tablist">
      <button id="modeRect" class="active" onclick="setMode('rect')">Rectangle</button>
      <button id="modeSquare" onclick="setMode('square')">Square</button>
    </div>
  </div>

  <div class="canvas-container">
    <svg viewBox="0 0 340 210">
      
      <g id="gTri1" class="tri">
        <polygon id="poly1" points="0,0 0,0 0,0" fill="rgba(34, 183, 255, 0.22)" stroke="#22b7ff" stroke-width="2" stroke-linejoin="round"/>
        <line id="hyp1" class="hypotenuse" stroke="#0284c7"/>
        <path id="corner1" fill="none" stroke="#22b7ff" stroke-width="1.5"/>
      </g>

      
      <g id="gTri2" class="tri">
        <polygon id="poly2" points="0,0 0,0 0,0" fill="rgba(255, 107, 107, 0.22)" stroke="#ff6b6b" stroke-width="2" stroke-linejoin="round"/>
        <line id="hyp2" class="hypotenuse" stroke="#e03131"/>
        <path id="corner2" fill="none" stroke="#ff6b6b" stroke-width="1.5"/>
      </g>

      
      <g id="resultTag" opacity="0" style="transition: opacity 0.4s ease;">
        <rect id="tagBg" x="120" y="93" width="100" height="26" rx="13" fill="#ffffff" stroke="#e6e6e6" stroke-width="1" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.08))"/>
        <text id="tagText" x="170" y="106" class="label-text">Rectangle</text>
      </g>
    </svg>
  </div>

  <div class="step-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Separate</button>
    <button class="step-btn" onclick="setStep(1)">2. Turn</button>
    <button class="step-btn" onclick="setStep(2)">3. Join</button>
  </div>

<script>
  let mode = 'rect'; // 'rect' | 'square'
  let step = 0; // 0: separate, 1: turn, 2: join

  const configs = {
    rect: {
      w: 160,
      h: 100,
      name: 'Rectangle',
      t1: {
        pos: [
          { x: 30, y: 55, r: 0 },
          { x: 50, y: 55, r: 0 },
          { x: 90, y: 55, r: 0 }
        ]
      },
      t2: {
        pos: [
          { x: 230, y: 55, r: 0 },
          { x: 250, y: 155, r: 180 },
          { x: 250, y: 155, r: 180 }
        ]
      }
    },
    square: {
      w: 130,
      h: 130,
      name: 'Square',
      t1: {
        pos: [
          { x: 35, y: 40, r: 0 },
          { x: 55, y: 40, r: 0 },
          { x: 105, y: 40, r: 0 }
        ]
      },
      t2: {
        pos: [
          { x: 215, y: 40, r: 0 },
          { x: 235, y: 170, r: 180 },
          { x: 235, y: 170, r: 180 }
        ]
      }
    }
  };

  function updateShapes() {
    const cfg = configs[mode];
    const w = cfg.w;
    const h = cfg.h;

    // Set Triangle 1 & 2 geometry
    const pts = `0,0 0,${h} ${w},${h}`;
    document.getElementById('poly1').setAttribute('points', pts);
    document.getElementById('poly2').setAttribute('points', pts);

    // Hypotenuse line
    document.getElementById('hyp1').setAttribute('x1', '0');
    document.getElementById('hyp1').setAttribute('y1', '0');
    document.getElementById('hyp1').setAttribute('x2', w);
    document.getElementById('hyp1').setAttribute('y2', h);

    document.getElementById('hyp2').setAttribute('x1', '0');
    document.getElementById('hyp2').setAttribute('y1', '0');
    document.getElementById('hyp2').setAttribute('x2', w);
    document.getElementById('hyp2').setAttribute('y2', h);

    // Square corner markers
    const s = 12;
    document.getElementById('corner1').setAttribute('d', `M 0,${h - s} L ${s},${h - s} L ${s},${h}`);
    document.getElementById('corner2').setAttribute('d', `M 0,${h - s} L ${s},${h - s} L ${s},${h}`);

    document.getElementById('tagText').textContent = cfg.name;
    applyTransform();
  }

  function applyTransform() {
    const cfg = configs[mode];
    const t1 = cfg.t1.pos[step];
    const t2 = cfg.t2.pos[step];

    const g1 = document.getElementById('gTri1');
    const g2 = document.getElementById('gTri2');
    const tag = document.getElementById('resultTag');

    g1.style.transform = `translate(${t1.x}px, ${t1.y}px) rotate(${t1.r}deg)`;
    g2.style.transform = `translate(${t2.x}px, ${t2.y}px) rotate(${t2.r}deg)`;

    tag.setAttribute('opacity', step === 2 ? '1' : '0');

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

  function setMode(newMode) {
    mode = newMode;
    document.getElementById('modeRect').classList.toggle('active', mode === 'rect');
    document.getElementById('modeSquare').classList.toggle('active', mode === 'square');
    updateShapes();
  }

  function setStep(newStep) {
    step = newStep;
    applyTransform();
  }

  // Initialize
  updateShapes();
</script>
</body>
</html>

What happens if we take two identical right triangles and press their longest sides together?

When both straight sides of the triangle are the exact same length, you can build a **square**.

Flip one triangle around and match their longest sides together edge-to-edge. All four outer sides are now equal!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .controls-top {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .stage {
      width: 100%;
      max-width: 420px;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 280px;
      overflow: visible;
    }

    .tri-a, .tri-b {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      transform-origin: center;
    }

    .result-badge {
      font-size: 15px;
      font-weight: 700;
      fill: #1e2945;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .result-badge.visible {
      opacity: 1;
    }

    .controls-bottom {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
      margin-top: 8px;
    }

    .step-btn {
      flex: 1;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

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

    .play-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      cursor: pointer;
      color: #475569;
    }
  </style>
</head>
<body>

  
  <div class="controls-top">
    <button class="tab-btn active" id="modeSquare" onclick="setMode('square')">Square</button>
    <button class="tab-btn" id="modeRect" onclick="setMode('rect')">Rectangle</button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 360 260">
      
      <line id="guideLine" x1="100" y1="210" x2="260" y2="50" stroke="#94a3b8" stroke-dasharray="4,4" stroke-width="1.5" opacity="0" style="transition: opacity 0.4s;" />

      
      <g id="groupA" class="tri-a">
        <polygon id="polyA" points="100,50 100,210 260,50" fill="#38bdf8" fill-opacity="0.85" stroke="#0284c7" stroke-width="2.5" stroke-linejoin="round" />
        
        <path id="raA" d="M 100,66 L 116,66 L 116,50" fill="none" stroke="#0284c7" stroke-width="2" />
      </g>

      
      <g id="groupB" class="tri-b">
        <polygon id="polyB" points="260,210 100,210 260,50" fill="#fbbf24" fill-opacity="0.85" stroke="#d97706" stroke-width="2.5" stroke-linejoin="round" />
        
        <path id="raB" d="M 260,194 L 244,194 L 244,210" fill="none" stroke="#d97706" stroke-width="2" />
      </g>

      
      <text id="badgeText" class="result-badge" x="180" y="248" text-anchor="middle">Square</text>
    </svg>
  </div>

  
  <div class="controls-bottom">
    <button class="play-btn" id="playBtn" onclick="togglePlay()">⏸</button>
    <button class="step-btn active" id="step0" onclick="goToStep(0)">1. Separate</button>
    <button class="step-btn" id="step1" onclick="goToStep(1)">2. Flip</button>
    <button class="step-btn" id="step2" onclick="goToStep(2)">3. Match</button>
  </div>

  <script>
    let mode = 'square'; // 'square' | 'rect'
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    // Coordinate configurations
    const configs = {
      square: {
        polyA: "100,50 100,210 260,50",
        raA: "M 100,66 L 116,66 L 116,50",
        polyB: "260,210 100,210 260,50",
        raB: "M 260,194 L 244,194 L 244,210",
        guide: { x1: 100, y1: 210, x2: 260, y2: 50 },
        // Step transforms [dxA, dyA, rotA, dxB, dyB, rotB]
        steps: [
          { a: "translate(-35, 0)", b: "translate(35, 0) rotate(180, 207, 157)" }, // separated & un-flipped
          { a: "translate(-18, 0)", b: "translate(18, 0) rotate(0, 207, 157)" },   // flipped/aligned
          { a: "translate(0, 0)", b: "translate(0, 0) rotate(0, 207, 157)" }       // joined
        ],
        label: "Square (4 equal sides)"
      },
      rect: {
        polyA: "70,65 70,195 290,65",
        raA: "M 70,81 L 86,81 L 86,65",
        polyB: "290,195 70,195 290,65",
        raB: "M 290,179 L 274,179 L 274,195",
        guide: { x1: 70, y1: 195, x2: 290, y2: 65 },
        steps: [
          { a: "translate(-35, 0)", b: "translate(35, 0) rotate(180, 217, 152)" },
          { a: "translate(-18, 0)", b: "translate(18, 0) rotate(0, 217, 152)" },
          { a: "translate(0, 0)", b: "translate(0, 0) rotate(0, 217, 152)" }
        ],
        label: "Rectangle (opposite sides equal)"
      }
    };

    function applyGeometry() {
      const cfg = configs[mode];
      document.getElementById('polyA').setAttribute('points', cfg.polyA);
      document.getElementById('raA').setAttribute('d', cfg.raA);
      document.getElementById('polyB').setAttribute('points', cfg.polyB);
      document.getElementById('raB').setAttribute('d', cfg.raB);

      const g = document.getElementById('guideLine');
      g.setAttribute('x1', cfg.guide.x1);
      g.setAttribute('y1', cfg.guide.y1);
      g.setAttribute('x2', cfg.guide.x2);
      g.setAttribute('y2', cfg.guide.y2);

      document.getElementById('badgeText').textContent = cfg.label;
    }

    function renderStep() {
      const cfg = configs[mode];
      const stepData = cfg.steps[currentStep];

      document.getElementById('groupA').style.transform = stepData.a;
      document.getElementById('groupB').style.transform = stepData.b;

      // Guide line visibility
      document.getElementById('guideLine').style.opacity = (currentStep === 1) ? "0.8" : "0";

      // Badge visibility
      const badge = document.getElementById('badgeText');
      if (currentStep === 2) {
        badge.classList.add('visible');
      } else {
        badge.classList.remove('visible');
      }

      // Update button states
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('step' + i);
        if (i === currentStep) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }
    }

    function setMode(newMode) {
      mode = newMode;
      document.getElementById('modeSquare').classList.toggle('active', mode === 'square');
      document.getElementById('modeRect').classList.toggle('active', mode === 'rect');
      applyGeometry();
      renderStep();
    }

    function goToStep(step) {
      currentStep = step;
      renderStep();
    }

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

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startLoop();
      } else {
        clearInterval(timer);
      }
    }

    function startLoop() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3000);
    }

    // Init
    applyGeometry();
    renderStep();
    startLoop();
  </script>
</body>
</html>

What if one straight side of the triangle is longer than the other?

If a right triangle has one short side and one long side, joining two of them makes a **rectangle**.

Just like before, match their longest slanted sides together. You get a shape with two long sides, two short sides, and four square corners.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }
    .nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid transparent;
      border-radius: 8px;
      background: #e2e8f0;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      border-color: #8b5cf6;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .stage-box {
      width: 100%;
      max-width: 380px;
      height: 240px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .tri {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slanted-edge {
      stroke-dasharray: 5,4;
      stroke-width: 3;
      transition: opacity 0.3s ease;
    }
    .corner-mark {
      fill: none;
      stroke: #1e2945;
      stroke-width: 2;
      opacity: 0;
      transition: opacity 0.4s ease 0.4s;
    }
    .joined .corner-mark {
      opacity: 1;
    }
    .label {
      font-size: 14px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      opacity: 0;
      transition: opacity 0.4s ease 0.5s;
    }
    .joined .label {
      opacity: 1;
    }
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
      align-items: center;
    }
    .action-btn {
      padding: 10px 24px;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      background: #8b5cf6;
      color: #ffffff;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
      transition: background 0.2s ease, transform 0.1s ease;
    }
    .action-btn:active {
      transform: translateY(1px);
    }
  </style>
</head>
<body>

  
  <div class="nav">
    <button class="tab-btn active" id="tab-rect" onclick="setMode('rect')">Rectangle</button>
    <button class="tab-btn" id="tab-sq" onclick="setMode('square')">Square</button>
    <button class="tab-btn" id="tab-other" onclick="setMode('other')">Wrong Side</button>
  </div>

  
  <div class="stage-box" id="stage">
    <svg viewBox="0 0 360 220" id="svg-stage">
      
      <g id="scene-group">
        
        <g id="tri1-group" class="tri">
          <polygon id="tri1-poly" points="40,170 200,170 40,50" fill="#8b5cf6" fill-opacity="0.85" stroke="#7c3aed" stroke-width="2" stroke-linejoin="round"/>
          <line id="tri1-edge" class="slanted-edge" x1="40" y1="50" x2="200" y2="170" stroke="#f59e0b" />
        </g>

        
        <g id="tri2-group" class="tri">
          <polygon id="tri2-poly" points="320,50 160,50 320,170" fill="#10b981" fill-opacity="0.85" stroke="#059669" stroke-width="2" stroke-linejoin="round"/>
          <line id="tri2-edge" class="slanted-edge" x1="160" y1="50" x2="320" y2="170" stroke="#f59e0b" />
        </g>

        
        <g id="corner-indicators">
          <polyline id="c1" class="corner-mark" points="40,62 52,62 52,50" />
          <polyline id="c2" class="corner-mark" points="188,50 188,62 200,62" />
          <polyline id="c3" class="corner-mark" points="200,158 188,158 188,170" />
          <polyline id="c4" class="corner-mark" points="52,170 52,158 40,158" />
        </g>

        
        <text id="result-label" class="label" x="120" y="115">Rectangle</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="action-btn" id="action-btn" onclick="toggleJoin()">Match Slanted Sides ✦</button>
  </div>

  <script>
    let mode = 'rect'; // 'rect' | 'square' | 'other'
    let isJoined = false;

    const tri1Group = document.getElementById('tri1-group');
    const tri2Group = document.getElementById('tri2-group');
    const tri1Poly = document.getElementById('tri1-poly');
    const tri2Poly = document.getElementById('tri2-poly');
    const tri1Edge = document.getElementById('tri1-edge');
    const tri2Edge = document.getElementById('tri2-edge');
    const resultLabel = document.getElementById('result-label');
    const stage = document.getElementById('stage');
    const actionBtn = document.getElementById('action-btn');

    const c1 = document.getElementById('c1');
    const c2 = document.getElementById('c2');
    const c3 = document.getElementById('c3');
    const c4 = document.getElementById('c4');

    function updateView() {
      if (mode === 'rect') {
        // Rectangle setup (width 160, height 120)
        tri1Poly.setAttribute('points', '40,170 200,170 40,50');
        tri2Poly.setAttribute('points', '320,50 160,50 320,170');
        tri1Edge.setAttribute('x1', '40'); tri1Edge.setAttribute('y1', '50');
        tri1Edge.setAttribute('x2', '200'); tri1Edge.setAttribute('y2', '170');
        tri2Edge.setAttribute('x1', '160'); tri2Edge.setAttribute('y1', '50');
        tri2Edge.setAttribute('x2', '320'); tri2Edge.setAttribute('y2', '170');
        tri1Edge.setAttribute('stroke', '#f59e0b');
        tri2Edge.setAttribute('stroke', '#f59e0b');

        // Corners for Rectangle (40,50 to 200,170)
        c1.setAttribute('points', '40,62 52,62 52,50');
        c2.setAttribute('points', '188,50 188,62 200,62');
        c3.setAttribute('points', '200,158 188,158 188,170');
        c4.setAttribute('points', '52,170 52,158 40,158');

        resultLabel.setAttribute('x', '120');
        resultLabel.setAttribute('y', '115');
        resultLabel.textContent = 'Rectangle';

        actionBtn.textContent = isJoined ? 'Separate Triangles' : 'Match Slanted Sides ✦';

        if (isJoined) {
          tri1Group.style.transform = 'translate(40px, 0px)';
          tri2Group.style.transform = 'translate(-120px, 0px)';
          stage.classList.add('joined');
        } else {
          tri1Group.style.transform = 'translate(0px, 0px)';
          tri2Group.style.transform = 'translate(0px, 0px)';
          stage.classList.remove('joined');
        }

      } else if (mode === 'square') {
        // Square setup (width 120, height 120)
        tri1Poly.setAttribute('points', '40,170 160,170 40,50');
        tri2Poly.setAttribute('points', '320,50 200,50 320,170');
        tri1Edge.setAttribute('x1', '40'); tri1Edge.setAttribute('y1', '50');
        tri1Edge.setAttribute('x2', '160'); tri1Edge.setAttribute('y2', '170');
        tri2Edge.setAttribute('x1', '200'); tri2Edge.setAttribute('y1', '50');
        tri2Edge.setAttribute('x2', '320'); tri2Edge.setAttribute('y2', '170');
        tri1Edge.setAttribute('stroke', '#f59e0b');
        tri2Edge.setAttribute('stroke', '#f59e0b');

        // Corners for Square (60,50 to 180,170)
        c1.setAttribute('points', '60,62 72,62 72,50');
        c2.setAttribute('points', '168,50 168,62 180,62');
        c3.setAttribute('points', '180,158 168,158 168,170');
        c4.setAttribute('points', '72,170 72,158 60,158');

        resultLabel.setAttribute('x', '120');
        resultLabel.setAttribute('y', '115');
        resultLabel.textContent = 'Square';

        actionBtn.textContent = isJoined ? 'Separate Triangles' : 'Match Slanted Sides ✦';

        if (isJoined) {
          tri1Group.style.transform = 'translate(20px, 0px)';
          tri2Group.style.transform = 'translate(-140px, 0px)';
          stage.classList.add('joined');
        } else {
          tri1Group.style.transform = 'translate(0px, 0px)';
          tri2Group.style.transform = 'translate(0px, 0px)';
          stage.classList.remove('joined');
        }

      } else if (mode === 'other') {
        // Wrong Side setup (gluing short vertical legs instead of slanted)
        tri1Poly.setAttribute('points', '50,170 190,170 50,50');
        tri2Poly.setAttribute('points', '310,170 170,170 310,50');
        // Mark the vertical legs
        tri1Edge.setAttribute('x1', '50'); tri1Edge.setAttribute('y1', '50');
        tri1Edge.setAttribute('x2', '50'); tri1Edge.setAttribute('y2', '170');
        tri2Edge.setAttribute('x1', '310'); tri2Edge.setAttribute('y1', '50');
        tri2Edge.setAttribute('x2', '310'); tri2Edge.setAttribute('y2', '170');
        tri1Edge.setAttribute('stroke', '#ef4444');
        tri2Edge.setAttribute('stroke', '#ef4444');

        // Clear square corners
        c1.setAttribute('points', '0,0 0,0');
        c2.setAttribute('points', '0,0 0,0');
        c3.setAttribute('points', '0,0 0,0');
        c4.setAttribute('points', '0,0 0,0');

        resultLabel.setAttribute('x', '180');
        resultLabel.setAttribute('y', '125');
        resultLabel.textContent = 'Big Triangle ✕';

        actionBtn.textContent = isJoined ? 'Separate Triangles' : 'Match Short Sides';

        if (isJoined) {
          tri1Group.style.transform = 'translate(130px, 0px)';
          tri2Group.style.transform = 'translate(-130px, 0px)';
          stage.classList.add('joined');
        } else {
          tri1Group.style.transform = 'translate(0px, 0px)';
          tri2Group.style.transform = 'translate(0px, 0px)';
          stage.classList.remove('joined');
        }
      }
    }

    function setMode(newMode) {
      mode = newMode;
      isJoined = false;
      document.getElementById('tab-rect').classList.toggle('active', mode === 'rect');
      document.getElementById('tab-sq').classList.toggle('active', mode === 'square');
      document.getElementById('tab-other').classList.toggle('active', mode === 'other');
      updateView();
    }

    function toggleJoin() {
      isJoined = !isJoined;
      updateView();
    }

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

Be careful — the sides you choose to glue together change the whole shape!

If you join two triangles along their short sides instead of their longest sides, you will not get a square or rectangle.

Instead, you might make a bigger triangle or a slanted shape called a parallelogram.

<!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>Combining Triangles</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -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: 100%;
    padding: 12px 8px;
    gap: 12px;
  }

  .grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 580px;
  }

  .shape-card {
    flex: 1;
    background: #f8f9fa;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .shape-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    color: #1e2945;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .svg-wrap {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  svg {
    width: 100%;
    max-width: 170px;
    height: 150px;
    overflow: visible;
  }

  .tri-a, .tri-b {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Square movement */
  .split #sq-a { transform: translate(-14px, -14px); }
  .split #sq-b { transform: translate(14px, 14px); }

  /* Rectangle movement */
  .split #rect-a { transform: translate(-14px, -14px); }
  .split #rect-b { transform: translate(14px, 14px); }

  .status-badge {
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
  }

  .split .status-badge {
    color: #0284c7;
  }

  .controls {
    display: flex;
    gap: 8px;
  }

  .btn {
    border: none;
    outline: none;
    background: #1e2945;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
  }

  .btn:hover {
    opacity: 0.9;
  }

  @media (max-width: 400px) {
    .title { font-size: 15px; }
    .svg-wrap { height: 130px; }
    svg { height: 125px; }
  }
</style>
</head>
<body>

  <div class="grid">
    
    <div class="shape-card" id="card-square">
      <div class="title">Square</div>
      <div class="svg-wrap">
        <svg viewBox="-20 -20 160 160">
          
          <g id="sq-a" class="tri-a">
            <polygon points="0,0 120,0 0,120" fill="#38bdf8" stroke="#0284c7" stroke-width="2" stroke-linejoin="round" />
            <rect x="0" y="0" width="14" height="14" fill="none" stroke="#0284c7" stroke-width="1.5" opacity="0.6"/>
          </g>
          
          <g id="sq-b" class="tri-b">
            <polygon points="120,120 0,120 120,0" fill="#a855f7" stroke="#7e22ce" stroke-width="2" stroke-linejoin="round" />
            <rect x="106" y="106" width="14" height="14" fill="none" stroke="#7e22ce" stroke-width="1.5" opacity="0.6"/>
          </g>
        </svg>
      </div>
      <div class="status-badge" id="badge-sq">✓ Combined</div>
    </div>

    
    <div class="shape-card" id="card-rect">
      <div class="title">Rectangle</div>
      <div class="svg-wrap">
        <svg viewBox="-20 -20 180 140">
          
          <g id="rect-a" class="tri-a">
            <polygon points="0,0 140,0 0,100" fill="#38bdf8" stroke="#0284c7" stroke-width="2" stroke-linejoin="round" />
            <rect x="0" y="0" width="14" height="14" fill="none" stroke="#0284c7" stroke-width="1.5" opacity="0.6"/>
          </g>
          
          <g id="rect-b" class="tri-b">
            <polygon points="140,100 0,100 140,0" fill="#a855f7" stroke="#7e22ce" stroke-width="2" stroke-linejoin="round" />
            <rect x="126" y="86" width="14" height="14" fill="none" stroke="#7e22ce" stroke-width="1.5" opacity="0.6"/>
          </g>
        </svg>
      </div>
      <div class="status-badge" id="badge-rect">✓ Combined</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="toggleBtn">✦ Split Triangles</button>
  </div>

  <script>
    const cardSq = document.getElementById('card-square');
    const cardRect = document.getElementById('card-rect');
    const badgeSq = document.getElementById('badge-sq');
    const badgeRect = document.getElementById('badge-rect');
    const toggleBtn = document.getElementById('toggleBtn');

    let isSplit = false;

    function setSplit(split) {
      isSplit = split;
      if (isSplit) {
        cardSq.classList.add('split');
        cardRect.classList.add('split');
        badgeSq.textContent = '2 Matching Triangles';
        badgeRect.textContent = '2 Matching Triangles';
        toggleBtn.textContent = '✓ Join Triangles';
      } else {
        cardSq.classList.remove('split');
        cardRect.classList.remove('split');
        badgeSq.textContent = '✓ Combined';
        badgeRect.textContent = '✓ Combined';
        toggleBtn.textContent = '✦ Split Triangles';
      }
    }

    toggleBtn.addEventListener('click', () => setSplit(!isSplit));
    cardSq.addEventListener('click', () => setSplit(!isSplit));
    cardRect.addEventListener('click', () => setSplit(!isSplit));
  </script>
</body>
</html>

Look around your room — how many squares or rectangles can you imagine splitting into two matching triangles?

math

Combining Two Triangles to Make a Square or Rectangle. Join two matching right triangles along their longest sides to compose squares and rectangles.

BBC Bitesize Early Level Maths: Exploring 2D Shapes and Tiling Patterns

NRICH: Triangle Transformation & Composing Shapes

IXL: Compose 2-Dimensional Shapes to Make Squares and Rectangles

At Early Level / P1 (ages 4-6), instruction should follow the Concrete-Pictorial-Abstract (CPA) pedagogical framework. Begin with tactile materials such as plastic pattern blocks, tangram pieces, or paper folding/cutting activities where children physically feel and match the 'longest edge' and 'square corner'. Encourage exploratory play, prompting learners with questions such as: 'What happens if we flip or turn this piece?' and 'How do the edges fit without leaving a hole?' Bridge to pictorial representations on dot grids or interactive touchscreens, and anchor spatial language (e.g., sides, corners, fit, turn, match) before formal geometric terminology.

Combining Two Triangles to Make a Square or Rectangle

Meet the Right Triangle

Making a Square