Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

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

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine you have a small photo and decide to double both its width and its height. Will you need twice as much paper to print it, or much more?

Let's find out by laying out square tiles to build larger shapes.

<!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;
      user-select: none;
    }

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

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

    .scale-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 15px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      text-align: center;
    }

    .scale-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.35);
    }

    /* Stage */
    .stage {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 230px;
    }

    .grid-wrapper {
      position: relative;
      display: inline-block;
    }

    /* Dimension labels */
    .dim-top {
      position: absolute;
      top: -24px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #0284c7;
    }

    .dim-left {
      position: absolute;
      left: -28px;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #0284c7;
    }

    /* Tile Grid */
    .tile-grid {
      display: grid;
      gap: 3px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .tile {
      width: 44px;
      height: 44px;
      background: #38bdf8;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
    }

    .tile.visible {
      opacity: 1;
      transform: scale(1);
    }

    .tile.origin {
      background: #0284c7;
    }

    /* Comparison readout */
    .metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 360px;
    }

    .metric-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .metric-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 2px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .metric-val {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
    }

    .metric-val span {
      color: #0284c7;
      font-size: 14px;
      font-weight: 600;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="scale-btn active" data-scale="1">1×</button>
    <button class="scale-btn" data-scale="2">2×</button>
    <button class="scale-btn" data-scale="3">3×</button>
    <button class="scale-btn" data-scale="4">4×</button>
  </div>

  
  <div class="stage">
    <div class="grid-wrapper">
      <div class="dim-top" id="topDim">1</div>
      <div class="dim-left" id="leftDim">1</div>
      <div class="tile-grid" id="tileGrid" style="grid-template-columns: repeat(1, 44px);">
        
      </div>
    </div>
  </div>

  
  <div class="metrics">
    <div class="metric-card">
      <div class="metric-label">Length Scale</div>
      <div class="metric-val" id="lengthFactor">× 1</div>
    </div>
    <div class="metric-card">
      <div class="metric-label">Area Scale</div>
      <div class="metric-val" id="areaFactor">× 1 <span>(1²)</span></div>
    </div>
  </div>

  <script>
    const grid = document.getElementById('tileGrid');
    const topDim = document.getElementById('topDim');
    const leftDim = document.getElementById('leftDim');
    const lengthFactor = document.getElementById('lengthFactor');
    const areaFactor = document.getElementById('areaFactor');
    const buttons = document.querySelectorAll('.scale-btn');

    const MAX_K = 4;
    const tiles = [];

    // Create a 4x4 pool of tiles
    for (let r = 0; r < MAX_K; r++) {
      for (let c = 0; c < MAX_K; c++) {
        const tile = document.createElement('div');
        tile.className = 'tile';
        if (r === 0 && c === 0) tile.classList.add('origin');
        grid.appendChild(tile);
        tiles.push({ el: tile, r, c });
      }
    }

    function setScale(k) {
      grid.style.gridTemplateColumns = `repeat(${k}, 44px)`;
      topDim.textContent = `${k}`;
      leftDim.textContent = `${k}`;

      lengthFactor.textContent = `× ${k}`;
      areaFactor.innerHTML = `× ${k * k} <span>(${k}²)</span>`;

      let count = 1;
      tiles.forEach(({ el, r, c }) => {
        if (r < k && c < k) {
          el.style.display = 'flex';
          el.textContent = count++;
          setTimeout(() => el.classList.add('visible'), 20);
        } else {
          el.classList.remove('visible');
          el.style.display = 'none';
        }
      });

      buttons.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.scale, 10) === k);
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setScale(parseInt(btn.dataset.scale, 10));
      });
    });

    // Initial render
    setScale(1);
  </script>
</body>
</html>

What happens to the number of tiles as we make the sides even longer?

The **linear scale factor** ($k$) is the multiplier used to enlarge every side length of a shape.

When we double the side length ($k = 2$), the shape grows wider *and* taller at the same time.

Because both dimensions double, the total **area** does not just double—it multiplies by $2 \times 2 = 4$.

<!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>Length vs Area Scale Factor</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    padding: 12px 10px;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Control Tabs */
  .controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
    max-width: 360px;
  }
  .scale-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .scale-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }

  /* Visual Stage */
  .stage {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .grid-wrapper {
    position: relative;
    display: grid;
    gap: 3px;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 8px;
    transition: all 0.35s ease;
  }

  .tile {
    border-radius: 4px;
    background: #e0f2fe;
    border: 1.5px solid #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #0284c7;
    transition: all 0.35s ease;
    opacity: 0;
    transform: scale(0.6);
  }
  .tile.visible {
    opacity: 1;
    transform: scale(1);
  }
  .tile.base {
    background: #0284c7;
    border-color: #0369a1;
    color: #ffffff;
  }

  /* Dimension Brackets & Labels */
  .dim-label {
    position: absolute;
    font-size: 13px;
    font-weight: 700;
    color: #0284c7;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  .dim-top {
    top: -24px;
    left: 0;
    width: 100%;
  }
  .dim-left {
    top: 0;
    left: -32px;
    height: 100%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  /* Mathematical Readout */
  .formula-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    font-size: 15px;
  }
  .stat-group {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .stat-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
  }
  .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #1e2945;
  }
  .stat-value.highlight {
    color: #0284c7;
  }
  .stat-arrow {
    color: #94a3b8;
    font-size: 18px;
    font-weight: 300;
  }
</style>
</head>
<body>

  
  <div class="controls">
    <button class="scale-btn active" data-scale="1">k = 1</button>
    <button class="scale-btn" data-scale="2">k = 2</button>
    <button class="scale-btn" data-scale="3">k = 3</button>
    <button class="scale-btn" data-scale="4">k = 4</button>
  </div>

  
  <div class="stage">
    <div id="gridWrapper" class="grid-wrapper">
      <div id="dimTop" class="dim-label dim-top">1×</div>
      <div id="dimLeft" class="dim-label dim-left">1×</div>
      
      <div class="tile base visible" id="t0">1</div>
      <div class="tile" id="t1">2</div>
      <div class="tile" id="t2">3</div>
      <div class="tile" id="t3">4</div>
      <div class="tile" id="t4">5</div>
      <div class="tile" id="t5">6</div>
      <div class="tile" id="t6">7</div>
      <div class="tile" id="t7">8</div>
      <div class="tile" id="t8">9</div>
      <div class="tile" id="t9">10</div>
      <div class="tile" id="t10">11</div>
      <div class="tile" id="t11">12</div>
      <div class="tile" id="t12">13</div>
      <div class="tile" id="t13">14</div>
      <div class="tile" id="t14">15</div>
      <div class="tile" id="t15">16</div>
    </div>
  </div>

  
  <div class="formula-card">
    <div class="stat-group">
      <span class="stat-title">Length</span>
      <span class="stat-value" id="lenVal">× 1</span>
    </div>
    <div class="stat-arrow">→</div>
    <div class="stat-group">
      <span class="stat-title">Calculation</span>
      <span class="stat-value" id="calcVal">1²</span>
    </div>
    <div class="stat-arrow">=</div>
    <div class="stat-group">
      <span class="stat-title">Area Scale</span>
      <span class="stat-value highlight" id="areaVal">× 1</span>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.scale-btn');
    const grid = document.getElementById('gridWrapper');
    const dimTop = document.getElementById('dimTop');
    const dimLeft = document.getElementById('dimLeft');
    const lenVal = document.getElementById('lenVal');
    const calcVal = document.getElementById('calcVal');
    const areaVal = document.getElementById('areaVal');
    const tiles = document.querySelectorAll('.tile');

    const unitSize = 48; // px per unit block

    function setScale(k) {
      // Button states
      buttons.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.scale, 10) === k);
      });

      // Grid dimensions
      const totalWidth = k * unitSize;
      grid.style.gridTemplateColumns = `repeat(${k}, ${unitSize}px)`;
      grid.style.gridTemplateRows = `repeat(${k}, ${unitSize}px)`;
      grid.style.width = `${totalWidth + (k - 1) * 3 + 6}px`;
      grid.style.height = `${totalWidth + (k - 1) * 3 + 6}px`;

      // Update visible tiles
      const count = k * k;
      tiles.forEach((t, i) => {
        if (i < count) {
          t.style.display = 'flex';
          setTimeout(() => t.classList.add('visible'), (i % k) * 30 + Math.floor(i / k) * 30);
        } else {
          t.classList.remove('visible');
          t.style.display = 'none';
        }
      });

      // Labels
      dimTop.textContent = `${k} × length`;
      dimLeft.textContent = `${k} × width`;

      // Values
      lenVal.textContent = `× ${k}`;
      calcVal.textContent = `${k} × ${k} = ${k}²`;
      areaVal.textContent = `× ${count}`;
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const k = parseInt(btn.dataset.scale, 10);
        setScale(k);
      });
    });

    // Initial setup
    setScale(1);
  </script>
</body>
</html>

Why does this pattern of squaring work for every rectangle, no matter the size?

Over 2,300 years ago in ancient Greece, Euclid proved in his *Elements* that similar flat figures always scale by the square of their corresponding sides.

<!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>Length vs Area Scale Factor</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .k-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .k-btn:hover {
      border-color: #22b7ff;
    }

    .k-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .stage {
      width: 100%;
      max-width: 440px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 16px;
      position: relative;
    }

    .shape-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
    }

    .grid-box {
      display: grid;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      background: #bae6fd;
      transition: width 0.35s ease, height 0.35s ease;
    }

    .original-box {
      width: 44px;
      height: 44px;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      border: 2px solid #0284c7;
      background: #0284c7;
    }

    .scaled-box {
      border: 2px solid #0284c7;
      gap: 2px;
      padding: 2px;
      background: #0284c7;
    }

    .tile {
      background: #38bdf8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      border-radius: 2px;
      transition: opacity 0.25s ease, transform 0.25s ease;
      opacity: 0;
      transform: scale(0.6);
    }

    .tile.visible {
      opacity: 1;
      transform: scale(1);
    }

    .arrow-divider {
      font-size: 22px;
      color: #94a3b8;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .scale-pill {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .summary-card {
      margin-top: 14px;
      display: flex;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
    }

    .tag {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .tag span {
      color: #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="k-btn" onclick="setScale(1)">k = 1</button>
    <button class="k-btn active" onclick="setScale(2)">k = 2</button>
    <button class="k-btn" onclick="setScale(3)">k = 3</button>
    <button class="k-btn" onclick="setScale(4)">k = 4</button>
  </div>

  <div class="stage">
    <div class="shape-container">
      <div class="original-box grid-box">
        <div class="tile visible" style="background:#0284c7;">1</div>
      </div>
      <span style="font-size: 13px; font-weight: 600; color: #64748b;">1 × 1</span>
    </div>

    <div class="arrow-divider">
      <span>→</span>
      <span class="scale-pill" id="kPill">× 2</span>
    </div>

    <div class="shape-container">
      <div class="scaled-box grid-box" id="scaledGrid"></div>
      <span style="font-size: 13px; font-weight: 600; color: #0284c7;" id="dimLabel">2 × 2</span>
    </div>
  </div>

  <div class="summary-card">
    <div class="tag">Length: <span id="lenTag">× 2</span></div>
    <div class="tag">Area: <span id="areaTag">2² = 4</span></div>
  </div>

  <script>
    const UNIT_SIZE = 40;

    function setScale(k) {
      document.querySelectorAll('.k-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === k);
      });

      document.getElementById('kPill').textContent = `× ${k}`;
      document.getElementById('dimLabel').textContent = `${k} × ${k}`;
      document.getElementById('lenTag').textContent = `× ${k}`;
      document.getElementById('areaTag').textContent = `${k}² = ${k * k}`;

      const grid = document.getElementById('scaledGrid');
      const boxSize = k * UNIT_SIZE + (k - 1) * 2 + 4;
      
      grid.style.width = `${boxSize}px`;
      grid.style.height = `${boxSize}px`;
      grid.style.gridTemplateColumns = `repeat(${k}, 1fr)`;
      grid.style.gridTemplateRows = `repeat(${k}, 1fr)`;

      grid.innerHTML = '';
      const total = k * k;

      for (let i = 1; i <= total; i++) {
        const tile = document.createElement('div');
        tile.className = 'tile';
        tile.textContent = i;
        grid.appendChild(tile);

        setTimeout(() => {
          tile.classList.add('visible');
        }, i * 25);
      }
    }

    setScale(2);
  </script>
</body>
</html>

Since area is base multiplied by height, scaling both sides by $k$ gives an **area scale factor** of $k \times k = k^2$.

If two shapes are similar and lengths scale by $k$, the new area is always $\text{Area}_{\text{new}} = k^2 \times \text{Area}_{\text{old}}$.

How do we use this rule to solve practical design problems?

A small triangular sign has an area of $6\text{ m}^2$. A designer makes an enlarged, similar sign by multiplying all side lengths by $3$ ($k = 3$).

<!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>Length vs Area Scale Factor</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }
    body {
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: #1e2945;
      min-height: 100%;
    }
    .main-wrap {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .controls {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
    }
    .btn-k {
      border: none;
      background: transparent;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-k.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .stage {
      width: 100%;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .tri-unit {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 2;
      stroke-linejoin: round;
      transition: all 0.3s ease;
    }
    .tri-unit:hover {
      fill: #bae6fd;
    }
    .tri-label {
      font-size: 11px;
      font-weight: 600;
      fill: #0369a1;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .dimension-line {
      stroke: #64748b;
      stroke-dasharray: 3,3;
      stroke-width: 1.5;
    }
    .stat-card {
      display: flex;
      justify-content: space-around;
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
    }
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .stat-title {
      font-size: 12px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .stat-val {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  <div class="controls" id="btn-group">
    <button class="btn-k" data-k="1">k = 1</button>
    <button class="btn-k" data-k="2">k = 2</button>
    <button class="btn-k active" data-k="3">k = 3</button>
  </div>

  <div class="stage">
    <svg id="viz" viewBox="0 0 300 210"></svg>
  </div>

  <div class="stat-card">
    <div class="stat-item">
      <span class="stat-title">Length</span>
      <span class="stat-val" id="len-factor"><span class="katex-render" data-expr="\times 3"></span></span>
    </div>
    <div class="stat-item">
      <span class="stat-title">Count</span>
      <span class="stat-val" id="tri-count"><span class="katex-render" data-expr="3^2 = 9"></span></span>
    </div>
    <div class="stat-item">
      <span class="stat-title">Total Area</span>
      <span class="stat-val" id="area-total"><span class="katex-render" data-expr="54\text{ m}^2"></span></span>
    </div>
  </div>
</div>

<script>
  function renderMath() {
    document.querySelectorAll('.katex-render').forEach(el => {
      katex.render(el.getAttribute('data-expr'), el, { throwOnError: false });
    });
  }

  const svg = document.getElementById('viz');
  const lenEl = document.getElementById('len-factor');
  const countEl = document.getElementById('tri-count');
  const areaEl = document.getElementById('area-total');

  function drawTriangles(k) {
    svg.innerHTML = '';
    const hTotal = 160;
    const bTotal = 200;
    const topY = 25;
    const bottomY = topY + hTotal;
    const centerX = 150;

    const rowHeight = hTotal / k;
    const unitBase = bTotal / k;

    // Generate upward and downward sub-triangles
    for (let r = 0; r < k; r++) {
      const y0 = topY + r * rowHeight;
      const y1 = topY + (r + 1) * rowHeight;
      const rowLeftX = centerX - (r + 1) * (unitBase / 2);

      // Upward pointing triangles in row r (r + 1 count)
      for (let c = 0; c <= r; c++) {
        const x0 = rowLeftX + c * unitBase;
        const x1 = x0 + unitBase;
        const xPeak = x0 + unitBase / 2;

        const p = `${xPeak},${y0} ${x0},${y1} ${x1},${y1}`;
        const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        poly.setAttribute('points', p);
        poly.setAttribute('class', 'tri-unit');
        svg.appendChild(poly);

        const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        lbl.setAttribute('x', xPeak);
        lbl.setAttribute('y', y0 + rowHeight * 0.65);
        lbl.setAttribute('class', 'tri-label');
        lbl.textContent = '6m²';
        svg.appendChild(lbl);
      }

      // Inverted triangles between upright ones (r count)
      for (let c = 0; c < r; c++) {
        const x0 = rowLeftX + unitBase / 2 + c * unitBase;
        const x1 = x0 + unitBase;
        const xValley = x0 + unitBase / 2;

        const p = `${x0},${y0} ${x1},${y0} ${xValley},${y1}`;
        const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
        poly.setAttribute('points', p);
        poly.setAttribute('class', 'tri-unit');
        svg.appendChild(poly);

        const lbl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        lbl.setAttribute('x', xValley);
        lbl.setAttribute('y', y0 + rowHeight * 0.35);
        lbl.setAttribute('class', 'tri-label');
        lbl.textContent = '6m²';
        svg.appendChild(lbl);
      }
    }

    // Side dimension guide
    const leftX = centerX - (bTotal / 2);
    const sideDim = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    sideDim.setAttribute('x', leftX - 10);
    sideDim.setAttribute('y', bottomY);
    sideDim.setAttribute('font-size', '12px');
    sideDim.setAttribute('font-weight', '600');
    sideDim.setAttribute('fill', '#64748b');
    sideDim.setAttribute('text-anchor', 'end');
    sideDim.textContent = `Side × ${k}`;
    svg.appendChild(sideDim);
  }

  function setScale(k) {
    document.querySelectorAll('.btn-k').forEach(b => {
      b.classList.toggle('active', parseInt(b.dataset.k) === k);
    });

    drawTriangles(k);

    const totalCount = k * k;
    const totalArea = totalCount * 6;

    lenEl.innerHTML = `<span class="katex-render" data-expr="\\times ${k}"></span>`;
    countEl.innerHTML = `<span class="katex-render" data-expr="${k}^2 = ${totalCount}"></span>`;
    areaEl.innerHTML = `<span class="katex-render" data-expr="${totalArea}\\text{ m}^2"></span>`;
    renderMath();
  }

  document.querySelectorAll('.btn-k').forEach(btn => {
    btn.addEventListener('click', () => {
      setScale(parseInt(btn.dataset.k));
    });
  });

  // Initial setup at k=3
  setScale(3);
</script>

</body>
</html>

First, square the linear scale factor to get $k^2 = 3^2 = 9$. Then, multiply the original area: $6\text{ m}^2 \times 9 = 54\text{ m}^2$.

A common mistake is multiplying the original area by $3$ instead of $3^2$, which would give $18\text{ m}^2$—missing two-thirds of the actual surface!

Whenever an object grows in two dimensions, length scales by $k$, but area always scales by $k^2$.

math

Investigating the Relationship Between Length and Area Scale Factors. Discover and prove that the area scale factor is the square of the linear scale factor (k^2).

Similar Shapes - Area and Volume Scale Factors (CfE Fourth Level / National 5)

Geometry: Scaling and Area of Similar Figures

Similar Shapes: Area and Volume Scale Factors Video & Practice Questions

Instruction should follow a Concrete-Representational-Abstract (CRA) sequence. Begin with concrete tiling and grid drawing where students count unit squares inside scaled figures ($1 \times 1$, $2 \times 2$, $3 \times 3$) to empirically notice the square relationship ($1, 4, 9, \dots$). Progress to algebraic proofs with rectangles ($k \cdot l \times k \cdot w$) and triangles. Emphasize bidirectional problem-solving: forward (finding area via $k^2$) and reverse (finding lengths via $\sqrt{\text{ASF}}$). Note: Standard MTH 4-17b is part of Scotland's Curriculum for Excellence Fourth Level (typically S1–S3 secondary mathematics).

Investigating the Relationship Between Length and Area Scale Factors

Stretching Lengths vs. Covering Area

The Area Scale Factor Rule