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 want to cover an **L-shaped** play rug with colorful square tiles. How can you find the total number of tiles without getting lost counting one by one?

The secret is to slice the big funny shape into smaller, easy rectangles that you already know how to count!

**Area** is the total amount of flat space inside a shape, measured in square units.

For a rectangle, you can count the rows and columns or multiply them to find how many squares fit inside.

<!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>Decomposing Polygons</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .controls-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .btn-group {
    display: flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 8px;
  }
  .btn-toggle {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-toggle.active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .stage {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 290px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  svg {
    width: 90%;
    height: 90%;
    overflow: visible;
  }
  .grid-line { stroke: #e2e8f0; stroke-width: 1; }
  .shape-part {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-width: 2;
  }
  .part-a { fill: #3b82f6; stroke: #2563eb; fill-opacity: 0.85; }
  .part-b { fill: #10b981; stroke: #059669; fill-opacity: 0.85; }
  .part-c { fill: #f59e0b; stroke: #d97706; fill-opacity: 0.85; }
  .part-solid { fill: #6366f1; stroke: #4f46e5; fill-opacity: 0.85; }
  .cut-line {
    stroke: #ef4444;
    stroke-width: 2.5;
    stroke-dasharray: 5, 4;
    stroke-linecap: round;
    animation: dash 1s linear infinite;
  }
  @keyframes dash {
    to { stroke-dashoffset: -9; }
  }
  .dim-text {
    font-size: 12px;
    font-weight: 700;
    fill: #475569;
    text-anchor: middle;
    dominant-baseline: central;
  }
  .area-badge-text {
    font-size: 13px;
    font-weight: 800;
    fill: #ffffff;
    text-anchor: middle;
    dominant-baseline: central;
  }
  .math-bar {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    min-height: 44px;
  }
  .pill {
    padding: 3px 8px;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
  }
  .pill-a { background: #2563eb; }
  .pill-b { background: #059669; }
  .pill-c { background: #d97706; }
  .pill-solid { background: #4f46e5; }
  .pill-total { background: #1e2945; }
</style>
</head>
<body>

<div class="app-container">
  <div class="controls-row">
    <div class="btn-group">
      <button class="btn-toggle active" id="btn-l" onclick="setShape('L')">L-Shape</button>
      <button class="btn-toggle" id="btn-t" onclick="setShape('T')">T-Shape</button>
    </div>
    <div class="btn-group">
      <button class="btn-toggle active" id="btn-split1" onclick="setCut(1)">Split 1</button>
      <button class="btn-toggle" id="btn-split2" onclick="setCut(2)">Split 2</button>
    </div>
  </div>

  <div class="stage">
    <svg id="svg-canvas" viewBox="0 0 280 280"></svg>
  </div>

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

<script>
  let currentShape = 'L';
  let currentCut = 1;

  function setShape(shape) {
    currentShape = shape;
    document.getElementById('btn-l').classList.toggle('active', shape === 'L');
    document.getElementById('btn-t').classList.toggle('active', shape === 'T');
    render();
  }

  function setCut(cut) {
    currentCut = cut;
    document.getElementById('btn-split1').classList.toggle('active', cut === 1);
    document.getElementById('btn-split2').classList.toggle('active', cut === 2);
    render();
  }

  function renderGrid(svg) {
    const size = 35;
    const offset = 35;
    for (let i = 0; i <= 6; i++) {
      const pos = offset + i * size;
      svg.innerHTML += `<line class="grid-line" x1="${pos}" y1="${offset}" x2="${pos}" y2="${offset + 210}" />`;
      svg.innerHTML += `<line class="grid-line" x1="${offset}" y1="${pos}" x2="${offset + 210}" y2="${pos}" />`;
    }
  }

  function render() {
    const svg = document.getElementById('svg-canvas');
    const math = document.getElementById('math-display');
    const u = 35;
    const ox = 35;
    const oy = 35;
    svg.innerHTML = '';
    renderGrid(svg);

    if (currentShape === 'L') {
      if (currentCut === 1) {
        // Vertical split: A = 2x6 (12), B = 4x2 (8)
        svg.innerHTML += `
          
          <rect class="shape-part part-a" x="${ox}" y="${oy}" width="${2*u}" height="${6*u}" rx="4" />
          <text class="area-badge-text" x="${ox + u}" y="${oy + 3*u}">A: 12</text>
          
          
          <rect class="shape-part part-b" x="${ox + 2*u}" y="${oy + 4*u}" width="${4*u}" height="${2*u}" rx="4" />
          <text class="area-badge-text" x="${ox + 4*u}" y="${oy + 5*u}">B: 8</text>

          
          <line class="cut-line" x1="${ox + 2*u}" y1="${oy}" x2="${ox + 2*u}" y2="${oy + 6*u}" />

          
          <text class="dim-text" x="${ox - 16}" y="${oy + 3*u}">6</text>
          <text class="dim-text" x="${ox + u}" y="${oy - 12}">2</text>
          <text class="dim-text" x="${ox + 4*u}" y="${oy + 4*u - 12}">4</text>
          <text class="dim-text" x="${ox + 6*u + 14}" y="${oy + 5*u}">2</text>
          <text class="dim-text" x="${ox + 3*u}" y="${oy + 6*u + 16}">6</text>
        `;
        math.innerHTML = `
          <span class="pill pill-a">2 × 6 = 12</span>
          <span>+</span>
          <span class="pill pill-b">4 × 2 = 8</span>
          <span>=</span>
          <span class="pill pill-total">20</span>
        `;
      } else {
        // Horizontal split: A = 2x4 (8), B = 6x2 (12)
        svg.innerHTML += `
          
          <rect class="shape-part part-a" x="${ox}" y="${oy}" width="${2*u}" height="${4*u}" rx="4" />
          <text class="area-badge-text" x="${ox + u}" y="${oy + 2*u}">A: 8</text>

          
          <rect class="shape-part part-b" x="${ox}" y="${oy + 4*u}" width="${6*u}" height="${2*u}" rx="4" />
          <text class="area-badge-text" x="${ox + 3*u}" y="${oy + 5*u}">B: 12</text>

          
          <line class="cut-line" x1="${ox}" y1="${oy + 4*u}" x2="${ox + 6*u}" y2="${oy + 4*u}" />

          
          <text class="dim-text" x="${ox - 16}" y="${oy + 2*u}">4</text>
          <text class="dim-text" x="${ox + u}" y="${oy - 12}">2</text>
          <text class="dim-text" x="${ox + 6*u + 14}" y="${oy + 5*u}">2</text>
          <text class="dim-text" x="${ox + 3*u}" y="${oy + 6*u + 16}">6</text>
          <text class="dim-text" x="${ox - 16}" y="${oy + 5*u}">2</text>
        `;
        math.innerHTML = `
          <span class="pill pill-a">2 × 4 = 8</span>
          <span>+</span>
          <span class="pill pill-b">6 × 2 = 12</span>
          <span>=</span>
          <span class="pill pill-total">20</span>
        `;
      }
    } else {
      // T-Shape
      if (currentCut === 1) {
        // Horizontal cut: Top bar (6x2 = 12) + Bottom stem (2x4 = 8)
        svg.innerHTML += `
          
          <rect class="shape-part part-a" x="${ox}" y="${oy}" width="${6*u}" height="${2*u}" rx="4" />
          <text class="area-badge-text" x="${ox + 3*u}" y="${oy + u}">A: 12</text>

          
          <rect class="shape-part part-b" x="${ox + 2*u}" y="${oy + 2*u}" width="${2*u}" height="${4*u}" rx="4" />
          <text class="area-badge-text" x="${ox + 3*u}" y="${oy + 4*u}">B: 8</text>

          
          <line class="cut-line" x1="${ox}" y1="${oy + 2*u}" x2="${ox + 6*u}" y2="${oy + 2*u}" />

          
          <text class="dim-text" x="${ox + 3*u}" y="${oy - 12}">6</text>
          <text class="dim-text" x="${ox - 14}" y="${oy + u}">2</text>
          <text class="dim-text" x="${ox + 4*u + 14}" y="${oy + 4*u}">4</text>
          <text class="dim-text" x="${ox + 3*u}" y="${oy + 6*u + 16}">2</text>
        `;
        math.innerHTML = `
          <span class="pill pill-a">6 × 2 = 12</span>
          <span>+</span>
          <span class="pill pill-b">2 × 4 = 8</span>
          <span>=</span>
          <span class="pill pill-total">20</span>
        `;
      } else {
        // Vertical cuts: 3 parts (2x2, 2x6, 2x2)
        svg.innerHTML += `
          
          <rect class="shape-part part-a" x="${ox}" y="${oy}" width="${2*u}" height="${2*u}" rx="4" />
          <text class="area-badge-text" x="${ox + u}" y="${oy + u}">A: 4</text>

          
          <rect class="shape-part part-b" x="${ox + 2*u}" y="${oy}" width="${2*u}" height="${6*u}" rx="4" />
          <text class="area-badge-text" x="${ox + 3*u}" y="${oy + 3*u}">B: 12</text>

          
          <rect class="shape-part part-c" x="${ox + 4*u}" y="${oy}" width="${2*u}" height="${2*u}" rx="4" />
          <text class="area-badge-text" x="${ox + 5*u}" y="${oy + u}">C: 4</text>

          
          <line class="cut-line" x1="${ox + 2*u}" y1="${oy}" x2="${ox + 2*u}" y2="${oy + 6*u}" />
          <line class="cut-line" x1="${ox + 4*u}" y1="${oy}" x2="${ox + 4*u}" y2="${oy + 6*u}" />

          
          <text class="dim-text" x="${ox + u}" y="${oy - 12}">2</text>
          <text class="dim-text" x="${ox + 3*u}" y="${oy - 12}">2</text>
          <text class="dim-text" x="${ox + 5*u}" y="${oy - 12}">2</text>
          <text class="dim-text" x="${ox - 14}" y="${oy + u}">2</text>
          <text class="dim-text" x="${ox + 4*u + 14}" y="${oy + 4*u}">4</text>
        `;
        math.innerHTML = `
          <span class="pill pill-a">4</span>
          <span>+</span>
          <span class="pill pill-b">12</span>
          <span>+</span>
          <span class="pill pill-c">4</span>
          <span>=</span>
          <span class="pill pill-total">20</span>
        `;
      }
    }
  }

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

</body>
</html>

What happens when a shape has an unusual corner, like the letter **L**?

An **L-shape** is made of two rectangles stuck together. We can draw one straight line to split it into two simple pieces.

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

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

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

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

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 400px;
      aspect-ratio: 1.25 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 6px 0;
    }

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

    .piece {
      transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1), fill 0.3s ease, stroke 0.3s ease;
      cursor: pointer;
    }

    .cut-line {
      stroke: #dc2626;
      stroke-width: 2.5;
      stroke-dasharray: 5 4;
      transition: opacity 0.3s ease;
    }

    .dim-label {
      font-size: 13px;
      font-weight: 700;
      fill: #64748b;
      text-anchor: middle;
      dominant-baseline: central;
      transition: opacity 0.3s ease;
    }

    .area-label {
      font-size: 15px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: central;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .area-label.visible {
      opacity: 1;
    }

    .calc-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      min-height: 42px;
    }

    .tag-a { color: #0284c7; }
    .tag-b { color: #d97706; }
    .tag-tot { color: #16a34a; }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button class="btn active" id="btn-v" onclick="setMode('v')">L-Cut 1</button>
    <button class="btn" id="btn-h" onclick="setMode('h')">L-Cut 2</button>
    <button class="btn" id="btn-t" onclick="setMode('t')">T-Shape</button>
    <button class="btn" id="btn-split" onclick="toggleSplit()" style="border-color: #0284c7; color: #0284c7;">✂ Split</button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 320 250">
      <defs>
        <pattern id="grid" width="25" height="25" patternUnits="userSpaceOnUse">
          <path d="M 25 0 L 0 0 0 25" fill="none" stroke="#f1f5f9" stroke-width="1.5" />
        </pattern>
      </defs>

      
      <rect x="50" y="20" width="200" height="200" fill="url(#grid)" rx="4" />

      
      <g id="grp-a" class="piece">
        <rect id="rect-a" x="60" y="30" width="60" height="180" rx="4"
              fill="#e0f2fe" stroke="#0284c7" stroke-width="2" />
        <text id="lbl-a" class="area-label tag-a" x="90" y="120" fill="#0284c7">A = 12</text>
      </g>

      
      <g id="grp-b" class="piece">
        <rect id="rect-b" x="120" y="150" width="120" height="60" rx="4"
              fill="#fef3c7" stroke="#d97706" stroke-width="2" />
        <text id="lbl-b" class="area-label tag-b" x="180" y="180" fill="#d97706">B = 8</text>
      </g>

      
      <line id="cut-line" class="cut-line" x1="120" y1="30" x2="120" y2="210" />

      
      <g id="dims">
        
        <text id="dim-top" class="dim-label" x="90" y="18">2</text>
        <text id="dim-left" class="dim-label" x="42" y="120">6</text>
        <text id="dim-bot" class="dim-label" x="180" y="226">4</text>
        <text id="dim-right" class="dim-label" x="256" y="180">2</text>
      </g>
    </svg>
  </div>

  
  <div class="calc-box" id="calc-box">
    <span class="tag-a">A (12)</span> + <span class="tag-b">B (8)</span> = <span class="tag-tot">Total 20</span>
  </div>

  <script>
    let currentMode = 'v';
    let isSplit = false;

    const data = {
      v: {
        a: { x: 60, y: 30, w: 60, h: 180, tx: -14, ty: 0, area: 12, lx: 90, ly: 120 },
        b: { x: 120, y: 150, w: 120, h: 60, tx: 16, ty: 0, area: 8, lx: 180, ly: 180 },
        cut: { x1: 120, y1: 30, x2: 120, y2: 210 },
        dims: [
          { id: 'dim-top', x: 90, y: 18, t: '2' },
          { id: 'dim-left', x: 42, y: 120, t: '6' },
          { id: 'dim-bot', x: 180, y: 226, t: '4' },
          { id: 'dim-right', x: 256, y: 180, t: '2' }
        ],
        calc: '<span class="tag-a">A (2×6 = 12)</span> + <span class="tag-b">B (4×2 = 8)</span> = <span class="tag-tot">20</span>'
      },
      h: {
        a: { x: 60, y: 30, w: 60, h: 120, tx: 0, ty: -14, area: 8, lx: 90, ly: 90 },
        b: { x: 60, y: 150, w: 180, h: 60, tx: 0, ty: 14, area: 12, lx: 150, ly: 180 },
        cut: { x1: 60, y1: 150, x2: 240, y2: 150 },
        dims: [
          { id: 'dim-top', x: 90, y: 18, t: '2' },
          { id: 'dim-left', x: 42, y: 90, t: '4' },
          { id: 'dim-bot', x: 150, y: 226, t: '6' },
          { id: 'dim-right', x: 256, y: 180, t: '2' }
        ],
        calc: '<span class="tag-a">A (2×4 = 8)</span> + <span class="tag-b">B (6×2 = 12)</span> = <span class="tag-tot">20</span>'
      },
      t: {
        a: { x: 60, y: 30, w: 180, h: 60, tx: 0, ty: -14, area: 12, lx: 150, ly: 60 },
        b: { x: 120, y: 90, w: 60, h: 120, tx: 0, ty: 14, area: 8, lx: 150, ly: 150 },
        cut: { x1: 60, y1: 90, x2: 240, y2: 90 },
        dims: [
          { id: 'dim-top', x: 150, y: 18, t: '6' },
          { id: 'dim-left', x: 42, y: 60, t: '2' },
          { id: 'dim-bot', x: 150, y: 226, t: '2' },
          { id: 'dim-right', x: 196, y: 150, t: '4' }
        ],
        calc: '<span class="tag-a">A (6×2 = 12)</span> + <span class="tag-b">B (2×4 = 8)</span> = <span class="tag-tot">20</span>'
      }
    };

    function setMode(mode) {
      currentMode = mode;
      document.querySelectorAll('.toolbar .btn').forEach(b => {
        if (b.id !== 'btn-split') b.classList.remove('active');
      });
      document.getElementById('btn-' + mode).classList.add('active');
      render();
    }

    function toggleSplit() {
      isSplit = !isSplit;
      const btn = document.getElementById('btn-split');
      btn.textContent = isSplit ? '✦ Joined' : '✂ Split';
      btn.style.background = isSplit ? '#0284c7' : '#ffffff';
      btn.style.color = isSplit ? '#ffffff' : '#0284c7';
      render();
    }

    function render() {
      const cfg = data[currentMode];

      // Piece A
      const rectA = document.getElementById('rect-a');
      rectA.setAttribute('x', cfg.a.x);
      rectA.setAttribute('y', cfg.a.y);
      rectA.setAttribute('width', cfg.a.w);
      rectA.setAttribute('height', cfg.a.h);

      const grpA = document.getElementById('grp-a');
      grpA.style.transform = isSplit ? `translate(${cfg.a.tx}px, ${cfg.a.ty}px)` : 'none';

      const lblA = document.getElementById('lbl-a');
      lblA.setAttribute('x', cfg.a.lx);
      lblA.setAttribute('y', cfg.a.ly);
      lblA.textContent = `A = ${cfg.a.area}`;
      lblA.classList.toggle('visible', isSplit);

      // Piece B
      const rectB = document.getElementById('rect-b');
      rectB.setAttribute('x', cfg.b.x);
      rectB.setAttribute('y', cfg.b.y);
      rectB.setAttribute('width', cfg.b.w);
      rectB.setAttribute('height', cfg.b.h);

      const grpB = document.getElementById('grp-b');
      grpB.style.transform = isSplit ? `translate(${cfg.b.tx}px, ${cfg.b.ty}px)` : 'none';

      const lblB = document.getElementById('lbl-b');
      lblB.setAttribute('x', cfg.b.lx);
      lblB.setAttribute('y', cfg.b.ly);
      lblB.textContent = `B = ${cfg.b.area}`;
      lblB.classList.toggle('visible', isSplit);

      // Cut Line
      const cut = document.getElementById('cut-line');
      cut.setAttribute('x1', cfg.cut.x1);
      cut.setAttribute('y1', cfg.cut.y1);
      cut.setAttribute('x2', cfg.cut.x2);
      cut.setAttribute('y2', cfg.cut.y2);
      cut.style.opacity = isSplit ? '0' : '1';

      // Dimensions
      cfg.dims.forEach(d => {
        const el = document.getElementById(d.id);
        el.setAttribute('x', d.x);
        el.setAttribute('y', d.y);
        el.textContent = d.t;
      });

      // Calculation text
      document.getElementById('calc-box').innerHTML = isSplit 
        ? cfg.calc 
        : 'Area = <span class="tag-a">Rectangle A</span> + <span class="tag-b">Rectangle B</span>';
    }

    // Auto animate on first load
    setTimeout(() => toggleSplit(), 700);
  </script>
</body>
</html>

Once you split the shape into non-overlapping pieces, you just add the two areas together.

Here, **Rectangle A** has 8 squares and **Rectangle B** has 10 squares, giving a total **area** of $8 + 10 = 18$ square units.

Can we use this same slicing trick on a shape that looks like the letter **T**?

A **T-shape** has a wide roof on top and a tall column standing underneath it.

<!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>Decomposing a T-Shape</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;
    }
    .diagram-area {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1;
      justify-content: center;
    }
    .grid-container {
      position: relative;
      width: 260px;
      height: 260px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 240px;
      height: 240px;
      overflow: visible;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .shape-part {
      transition: transform 0.4s ease, opacity 0.4s ease, fill 0.4s ease;
      cursor: pointer;
    }
    .roof {
      fill: #8b5cf6;
      stroke: #7c3aed;
      stroke-width: 2;
    }
    .column {
      fill: #f97316;
      stroke: #ea580c;
      stroke-width: 2;
    }
    .split-line {
      stroke: #ffffff;
      stroke-dasharray: 4 4;
      stroke-width: 2.5;
      transition: opacity 0.3s ease;
    }
    .dim-label {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .math-panel {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }
    .badge-roof {
      color: #7c3aed;
      border-color: #ddd6fe;
      background: #f5f3ff;
    }
    .badge-col {
      color: #ea580c;
      border-color: #fed7aa;
      background: #fff7ed;
    }
    .badge-total {
      color: #0f172a;
      border-color: #cbd5e1;
      background: #f1f5f9;
      font-weight: 700;
    }
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
    }
    .btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .btn.active {
      background: #8b5cf6;
      border-color: #8b5cf6;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <div class="grid-container">
      <svg viewBox="0 0 200 200">
        
        <g>
          <line class="grid-line" x1="20" y1="20" x2="180" y2="20" />
          <line class="grid-line" x1="20" y1="52" x2="180" y2="52" />
          <line class="grid-line" x1="20" y1="84" x2="180" y2="84" />
          <line class="grid-line" x1="20" y1="116" x2="180" y2="116" />
          <line class="grid-line" x1="20" y1="148" x2="180" y2="148" />
          <line class="grid-line" x1="20" y1="180" x2="180" y2="180" />

          <line class="grid-line" x1="20" y1="20" x2="20" y2="180" />
          <line class="grid-line" x1="52" y1="20" x2="52" y2="180" />
          <line class="grid-line" x1="84" y1="20" x2="84" y2="180" />
          <line class="grid-line" x1="116" y1="20" x2="116" y2="180" />
          <line class="grid-line" x1="148" y1="20" x2="148" y2="180" />
          <line class="grid-line" x1="180" y1="20" x2="180" y2="180" />
        </g>

        
        
        <g id="group-roof" class="shape-part" style="transform: translate(0px, 0px);">
          <rect class="roof" x="20" y="20" width="160" height="64" rx="3" />
          
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="52" y1="20" x2="52" y2="84" />
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="84" y1="20" x2="84" y2="84" />
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="116" y1="20" x2="116" y2="84" />
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="148" y1="20" x2="148" y2="84" />
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="20" y1="52" x2="180" y2="52" />

          
          <text class="dim-label" x="100" y="10">5</text>
          <text class="dim-label" x="10" y="52">2</text>
          <text id="roof-calc" class="dim-label" x="100" y="52" fill="#ffffff" style="font-size: 15px; fill: #ffffff; opacity: 0; transition: opacity 0.3s;">10</text>
        </g>

        
        <g id="group-col" class="shape-part" style="transform: translate(0px, 0px);">
          <rect class="column" x="68" y="84" width="64" height="96" rx="3" />
          
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="100" y1="84" x2="100" y2="180" />
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="68" y1="116" x2="132" y2="116" />
          <line stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" x1="68" y1="148" x2="132" y2="148" />

          
          <text class="dim-label" x="142" y="132">3</text>
          <text class="dim-label" x="100" y="192">2</text>
          <text id="col-calc" class="dim-label" x="100" y="132" fill="#ffffff" style="font-size: 15px; fill: #ffffff; opacity: 0; transition: opacity 0.3s;">6</text>
        </g>

        
        <line id="split-line" class="split-line" x1="68" y1="84" x2="132" y2="84" style="opacity: 0;" />
      </svg>
    </div>

    
    <div class="math-panel">
      <div id="badge-1" class="badge badge-roof" style="opacity: 0.4;">5 × 2 = 10</div>
      <div id="badge-2" class="badge badge-col" style="opacity: 0.4;">2 × 3 = 6</div>
      <div id="badge-total" class="badge badge-total" style="opacity: 0.4;">10 + 6 = 16</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" onclick="setStep(0)">1. T-Shape</button>
    <button class="btn" onclick="setStep(1)">2. Split</button>
    <button class="btn" onclick="setStep(2)">3. Total Area</button>
  </div>

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

    const roof = document.getElementById('group-roof');
    const col = document.getElementById('group-col');
    const splitLine = document.getElementById('split-line');
    const roofCalc = document.getElementById('roof-calc');
    const colCalc = document.getElementById('col-calc');
    const bRoof = document.getElementById('badge-1');
    const bCol = document.getElementById('badge-2');
    const bTotal = document.getElementById('badge-total');
    const btns = document.querySelectorAll('.btn');

    function setStep(step, manual = true) {
      if (manual && autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
      currentStep = step;

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

      if (step === 0) {
        // Together
        roof.style.transform = 'translate(0px, 0px)';
        col.style.transform = 'translate(0px, 0px)';
        splitLine.style.opacity = '0';
        roofCalc.style.opacity = '0';
        colCalc.style.opacity = '0';
        bRoof.style.opacity = '0.4';
        bCol.style.opacity = '0.4';
        bTotal.style.opacity = '0.4';
      } else if (step === 1) {
        // Separated / Split
        roof.style.transform = 'translate(0px, -6px)';
        col.style.transform = 'translate(0px, 6px)';
        splitLine.style.opacity = '1';
        roofCalc.style.opacity = '1';
        colCalc.style.opacity = '1';
        bRoof.style.opacity = '1';
        bCol.style.opacity = '1';
        bTotal.style.opacity = '0.4';
      } else if (step === 2) {
        // Total Sum
        roof.style.transform = 'translate(0px, -6px)';
        col.style.transform = 'translate(0px, 6px)';
        splitLine.style.opacity = '1';
        roofCalc.style.opacity = '1';
        colCalc.style.opacity = '1';
        bRoof.style.opacity = '1';
        bCol.style.opacity = '1';
        bTotal.style.opacity = '1';
      }
    }

    // Auto-advance loop with calm pedagogical pacing
    autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % 3;
      setStep(currentStep, false);
    }, 3600);
  </script>
</body>
</html>

The top roof has $5 \times 2 = 10$ squares, and the bottom column has $2 \times 3 = 6$ squares.

Add them together: $10 + 6 = 16$ total square units.

Be careful not to let your two rectangles **overlap** across the cut line. If you count the same square twice, your total area will be too big!

Next time you see a tricky block shape, look for where you can draw one straight cut to turn it into two friendly rectangles.

math

Decomposing L-Shaped and T-Shaped Polygons into Rectangles. Split composite orthogonal shapes into non-overlapping rectangles to find total area.

Decomposing Shapes to Find Area: Composite Figures

Third Level Maths: Area and Perimeter of 2D Compound Shapes (MTH 3-11b)

Area of Compound Rectilinear Figures by Decomposition

Curriculum for Excellence benchmark MTH 3-11b specifically emphasizes exploring 'different routes to a solution'. Pedagogically, teachers should structure tasks where learners split the exact same L- or T-shape using multiple methods (horizontal partition, vertical partition, and subtraction of negative space from a bounding rectangle) to prove that area is invariant. Concrete and visual representations (grid overlays, color-coded sub-regions) provide the necessary scaffolding before transitioning to algebraic deduction of missing edge lengths.

Decomposing L-Shaped and T-Shaped Polygons into Rectangles

What Is Area?

Slicing an L-Shape