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 toy box packed with exactly 24 wooden blocks, but the top is closed so you cannot see how tall it is. If you only know the length and the width of the floor, can you still find the height?

The total amount of space inside a 3D box is called its **volume**. For a box packed with unit cubes, volume is just the total number of cubes 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>Finding Missing Dimensions</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
<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;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }

  .tab-btn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }

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

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

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

  .cube-top { fill: #67e8f9; stroke: #0284c7; stroke-width: 0.8; }
  .cube-left { fill: #38bdf8; stroke: #0284c7; stroke-width: 0.8; }
  .cube-right { fill: #0ea5e9; stroke: #0284c7; stroke-width: 0.8; }

  .cube-missing-top { fill: #fdba74; stroke: #ea580c; stroke-width: 0.8; stroke-dasharray: 2 2; fill-opacity: 0.35; }
  .cube-missing-left { fill: #fb923c; stroke: #ea580c; stroke-width: 0.8; stroke-dasharray: 2 2; fill-opacity: 0.35; }
  .cube-missing-right { fill: #f97316; stroke: #ea580c; stroke-width: 0.8; stroke-dasharray: 2 2; fill-opacity: 0.35; }

  .dim-line { stroke: #1e2945; stroke-width: 1.5; stroke-linecap: round; }
  .dim-text { font-size: 13px; font-weight: 700; fill: #1e2945; text-anchor: middle; dominant-baseline: middle; }
  .dim-text.highlight { fill: #ea580c; font-size: 15px; }

  .formula-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
  }

  .formula-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
  }

  .slider-control {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
  }

  input[type=range] {
    flex: 1;
    accent-color: #22b7ff;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="tabs">
  <button class="tab-btn active" id="tab1" onclick="setMode('build')">1. Build Layers</button>
  <button class="tab-btn" id="tab2" onclick="setMode('missing-h')">2. Find Height ?</button>
  <button class="tab-btn" id="tab3" onclick="setMode('missing-l')">3. Find Length ?</button>
</div>

<div class="canvas-wrap">
  <svg id="isoSvg" viewBox="-180 -120 360 240"></svg>
</div>

<div class="formula-card">
  <div class="formula-row" id="mathDisplay"></div>
  <div class="slider-control" id="controlBox">
    <span id="sliderLabel">Height:</span>
    <input type="range" id="layerSlider" min="1" max="4" value="3" oninput="onSliderChange(this.value)">
    <span id="sliderVal" style="width: 16px; text-align: center;">3</span>
  </div>
</div>

<script>
let mode = 'build';
let l = 4, w = 2, h = 3;

function renderMath() {
  const el = document.getElementById('mathDisplay');
  if (!window.katex) return;
  const vol = l * w * h;

  if (mode === 'build') {
    window.katex.render(`V = ${l} \\times ${w} \\times ${h} = \\mathbf{${vol}}`, el);
  } else if (mode === 'missing-h') {
    const baseArea = l * w;
    window.katex.render(`h = \\frac{V}{l \\times w} = \\frac{${vol}}{${baseArea}} = \\mathbf{${h}}`, el);
  } else if (mode === 'missing-l') {
    const faceArea = w * h;
    window.katex.render(`l = \\frac{V}{w \\times h} = \\frac{${vol}}{${faceArea}} = \\mathbf{${l}}`, el);
  }
}

function project(x, y, z) {
  const sizeX = 22;
  const sizeY = 12;
  const sizeZ = 20;
  return {
    px: (x - y) * sizeX,
    py: (x + y) * sizeY - z * sizeZ
  };
}

function drawCube(x, y, z, isGhost = false) {
  const p0 = project(x, y, z);
  const p1 = project(x + 1, y, z);
  const p2 = project(x + 1, y + 1, z);
  const p3 = project(x, y + 1, z);

  const t0 = project(x, y, z + 1);
  const t1 = project(x + 1, y, z + 1);
  const t2 = project(x + 1, y + 1, z + 1);
  const t3 = project(x, y + 1, z + 1);

  const topCls = isGhost ? 'cube-missing-top' : 'cube-top';
  const leftCls = isGhost ? 'cube-missing-left' : 'cube-left';
  const rightCls = isGhost ? 'cube-missing-right' : 'cube-right';

  return `
    <polygon points="${t0.px},${t0.py} ${t1.px},${t1.py} ${t2.px},${t2.py} ${t3.px},${t3.py}" class="${topCls}" />
    <polygon points="${p3.px},${p3.py} ${p2.px},${p2.py} ${t2.px},${t2.py} ${t3.px},${t3.py}" class="${leftCls}" />
    <polygon points="${p2.px},${p2.py} ${p1.px},${p1.py} ${t1.px},${t1.py} ${t2.px},${t2.py}" class="${rightCls}" />
  `;
}

function renderScene() {
  const svg = document.getElementById('isoSvg');
  let cubesHtml = '';

  const offX = -(l / 2);
  const offY = -(w / 2);
  const offZ = 0;

  for (let z = 0; z < h; z++) {
    for (let y = 0; y < w; y++) {
      for (let x = 0; x < l; x++) {
        const isGhost = (mode === 'missing-h' && z === h - 1 && h > 1) || (mode === 'missing-l' && x === l - 1 && l > 1);
        cubesHtml += drawCube(x + offX, y + offY, z + offZ, isGhost);
      }
    }
  }

  // Dimension lines & labels
  const pLenStart = project(offX, offY + w + 0.3, 0);
  const pLenEnd = project(offX + l, offY + w + 0.3, 0);

  const pWidStart = project(offX + l + 0.3, offY + w, 0);
  const pWidEnd = project(offX + l + 0.3, offY, 0);

  const pHgtStart = project(offX + l + 0.3, offY - 0.3, 0);
  const pHgtEnd = project(offX + l + 0.3, offY - 0.3, h);

  const lText = mode === 'missing-l' ? 'l = ?' : `l = ${l}`;
  const wText = `w = ${w}`;
  const hText = mode === 'missing-h' ? 'h = ?' : `h = ${h}`;

  const lClass = mode === 'missing-l' ? 'dim-text highlight' : 'dim-text';
  const hClass = mode === 'missing-h' ? 'dim-text highlight' : 'dim-text';

  const annotations = `
    
    <line x1="${pLenStart.px}" y1="${pLenStart.py}" x2="${pLenEnd.px}" y2="${pLenEnd.py}" class="dim-line" />
    <text x="${(pLenStart.px + pLenEnd.px)/2 - 10}" y="${(pLenStart.py + pLenEnd.py)/2 + 14}" class="${lClass}">${lText}</text>

    
    <line x1="${pWidStart.px}" y1="${pWidStart.py}" x2="${pWidEnd.px}" y2="${pWidEnd.py}" class="dim-line" />
    <text x="${(pWidStart.px + pWidEnd.px)/2 + 14}" y="${(pWidStart.py + pWidEnd.py)/2 + 10}" class="dim-text">${wText}</text>

    
    <line x1="${pHgtStart.px}" y1="${pHgtStart.py}" x2="${pHgtEnd.px}" y2="${pHgtEnd.py}" class="dim-line" />
    <text x="${pHgtStart.px + 18}" y="${(pHgtStart.py + pHgtEnd.py)/2}" class="${hClass}">${hText}</text>
  `;

  svg.innerHTML = cubesHtml + annotations;
  renderMath();
}

function setMode(newMode) {
  mode = newMode;
  document.getElementById('tab1').classList.toggle('active', mode === 'build');
  document.getElementById('tab2').classList.toggle('active', mode === 'missing-h');
  document.getElementById('tab3').classList.toggle('active', mode === 'missing-l');

  const slider = document.getElementById('layerSlider');
  const label = document.getElementById('sliderLabel');

  if (mode === 'build') {
    l = 4; w = 2; h = 3;
    slider.min = 1; slider.max = 4; slider.value = h;
    label.textContent = 'Height (Layers):';
  } else if (mode === 'missing-h') {
    l = 4; w = 2; h = 3;
    slider.min = 1; slider.max = 4; slider.value = h;
    label.textContent = 'Solve Height:';
  } else if (mode === 'missing-l') {
    l = 4; w = 2; h = 2;
    slider.min = 2; slider.max = 5; slider.value = l;
    label.textContent = 'Solve Length:';
  }

  document.getElementById('sliderVal').textContent = slider.value;
  renderScene();
}

function onSliderChange(val) {
  document.getElementById('sliderVal').textContent = val;
  if (mode === 'missing-l') {
    l = parseInt(val);
  } else {
    h = parseInt(val);
  }
  renderScene();
}

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

How do those cubes fit together inside the box to build up the total volume?

A cuboid is built by stacking identical flat layers. The surface of the bottom layer is the **Base Area**, found by multiplying length by width ($A_{\text{base}} = l \times w$).

The **volume** of a cuboid is calculated by multiplying its three dimensions: $\text{Volume} = \text{length} \times \text{width} \times \text{height}$ ($V = l \times w \times h$), or equivalently $\text{Volume} = \text{Base Area} \times \text{height}$ ($V = A_{\text{base}} \times h$).

The surface area of this bottom layer is called the **Base Area** ($A_{\text{base}} = l \times w$).

Multiplying all three dimensions gives the volume of the cuboid: $\text{Volume} = l \times w \times h$, or equivalently $\text{Volume} = A_{\text{base}} \times h$.

To find the unknown height, you simply divide the **total volume** by the number of cubes in that one layer.

<!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>Finding Missing Dimension of a Cuboid</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

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

    /* Selector tabs */
    .tab-bar {
      display: flex;
      background: #eef2f6;
      padding: 4px;
      border-radius: 10px;
      gap: 6px;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Main visual grid */
    .visual-container {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 12px;
      align-items: center;
    }
    @media (max-width: 440px) {
      .visual-container {
        grid-template-columns: 1fr;
      }
    }

    /* Cuboid SVG stage */
    .stage {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 210px;
      overflow: visible;
    }

    /* Step calculation card */
    .calc-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .step-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .step-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .math-line {
      font-size: 15px;
      min-height: 24px;
      display: flex;
      align-items: center;
    }
    .highlight-res {
      background: #e0f2fe;
      border-left: 3px solid #0284c7;
      padding: 6px 10px;
      border-radius: 0 8px 8px 0;
    }

    /* SVG isometric polygons & labels */
    .face-base {
      fill: #bae6fd;
      stroke: #0284c7;
      stroke-width: 1.5;
      stroke-linejoin: round;
    }
    .face-side {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 1.5;
      stroke-linejoin: round;
    }
    .face-front {
      fill: #f0f9ff;
      stroke: #0284c7;
      stroke-width: 1.5;
      stroke-linejoin: round;
    }
    .face-highlight {
      fill: #fed7aa !important;
      stroke: #ea580c !important;
    }
    .dim-label {
      font-size: 12px;
      font-family: inherit;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .dim-missing {
      fill: #dc2626;
      font-weight: 800;
      font-size: 14px;
    }
    .vol-badge {
      font-size: 13px;
      font-weight: 700;
      fill: #0369a1;
      text-anchor: middle;
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    
    <div class="tab-bar">
      <button class="tab-btn active" data-mode="h">Find Height (<span class="katex-tab">h</span>)</button>
      <button class="tab-btn" data-mode="w">Find Width (<span class="katex-tab">w</span>)</button>
      <button class="tab-btn" data-mode="l">Find Length (<span class="katex-tab">l</span>)</button>
    </div>

    
    <div class="visual-container">
      <div class="stage">
        <svg viewBox="0 0 240 180" id="cuboidSvg">
          
        </svg>
      </div>

      <div class="calc-card">
        <div class="step-row">
          <span class="step-label" id="step1-label">Step 1: Known Area</span>
          <div class="math-line" id="step1-math"></div>
        </div>

        <div class="step-row">
          <span class="step-label" id="step2-label">Step 2: Divide Volume</span>
          <div class="math-line" id="step2-math"></div>
        </div>

        <div class="step-row highlight-res">
          <span class="step-label" id="res-label">Missing Dimension</span>
          <div class="math-line" id="res-math"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const data = {
      h: {
        title: "Find Height",
        vol: 60,
        l: 5,
        w: 3,
        h: 4,
        missing: 'h',
        step1Label: "1. Base Area (l × w)",
        step1Tex: "5 \\times 3 = 15\\text{ cm}^2",
        step2Label: "2. Height = Volume ÷ Base Area",
        step2Tex: "h = \\frac{60}{15}",
        resLabel: "Unknown Height",
        resTex: "h = 4\\text{ cm}"
      },
      w: {
        title: "Find Width",
        vol: 60,
        l: 5,
        w: 3,
        h: 4,
        missing: 'w',
        step1Label: "1. Front Area (l × h)",
        step1Tex: "5 \\times 4 = 20\\text{ cm}^2",
        step2Label: "2. Width = Volume ÷ Front Area",
        step2Tex: "w = \\frac{60}{20}",
        resLabel: "Unknown Width",
        resTex: "w = 3\\text{ cm}"
      },
      l: {
        title: "Find Length",
        vol: 60,
        l: 5,
        w: 3,
        h: 4,
        missing: 'l',
        step1Label: "1. Side Area (w × h)",
        step1Tex: "3 \\times 4 = 12\\text{ cm}^2",
        step2Label: "2. Length = Volume ÷ Side Area",
        step2Tex: "l = \\frac{60}{12}",
        resLabel: "Unknown Length",
        resTex: "l = 5\\text{ cm}"
      }
    };

    function renderMath() {
      document.querySelectorAll('.katex-tab').forEach(el => {
        katex.render(el.textContent, el, { throwOnError: false });
      });
    }

    function renderDiagram(mode) {
      const d = data[mode];

      // Update calculations
      document.getElementById('step1-label').textContent = d.step1Label;
      katex.render(d.step1Tex, document.getElementById('step1-math'), { displayMode: false });

      document.getElementById('step2-label').textContent = d.step2Label;
      katex.render(d.step2Tex, document.getElementById('step2-math'), { displayMode: false });

      document.getElementById('res-label').textContent = d.resLabel;
      katex.render(d.resTex, document.getElementById('res-math'), { displayMode: false });

      // Isometric projection points
      // Origin front-bottom-left at (55, 130)
      // dx = 100 (length), dy = -55 (height), dz_x = 55, dz_y = -35 (width)
      const p0 = [55, 130];              // Front-Bottom-Left
      const p1 = [155, 130];             // Front-Bottom-Right
      const p2 = [155, 75];              // Front-Top-Right
      const p3 = [55, 75];               // Front-Top-Left
      const p4 = [110, 40];              // Back-Top-Left
      const p5 = [210, 40];              // Back-Top-Right
      const p6 = [210, 95];              // Back-Bottom-Right

      // Labels based on missing state
      const lLabel = d.missing === 'l' ? '? cm' : '5 cm';
      const wLabel = d.missing === 'w' ? '? cm' : '3 cm';
      const hLabel = d.missing === 'h' ? '? cm' : '4 cm';

      const lClass = d.missing === 'l' ? 'dim-label dim-missing' : 'dim-label';
      const wClass = d.missing === 'w' ? 'dim-label dim-missing' : 'dim-label';
      const hClass = d.missing === 'h' ? 'dim-label dim-missing' : 'dim-label';

      // Highlight the known base face
      const topFaceClass = d.missing === 'h' ? 'face-base face-highlight' : 'face-base';
      const frontFaceClass = d.missing === 'w' ? 'face-front face-highlight' : 'face-front';
      const sideFaceClass = d.missing === 'l' ? 'face-side face-highlight' : 'face-side';

      const svg = document.getElementById('cuboidSvg');
      svg.innerHTML = `
        
        <polygon points="${p3[0]},${p3[1]} ${p2[0]},${p2[1]} ${p5[0]},${p5[1]} ${p4[0]},${p4[1]}" class="${topFaceClass}" />

        
        <polygon points="${p1[0]},${p1[1]} ${p6[0]},${p6[1]} ${p5[0]},${p5[1]} ${p2[0]},${p2[1]}" class="${sideFaceClass}" />

        
        <polygon points="${p0[0]},${p0[1]} ${p1[0]},${p1[1]} ${p2[0]},${p2[1]} ${p3[0]},${p3[1]}" class="${frontFaceClass}" />

        
        <rect x="75" y="85" width="80" height="24" rx="6" fill="#ffffff" stroke="#0284c7" stroke-width="1.5" opacity="0.95" />
        <text x="115" y="98" class="vol-badge">V = 60 cm³</text>

        
        <line x1="${p0[0]}" y1="${p0[1]+12}" x2="${p1[0]}" y2="${p1[1]+12}" stroke="#1e2945" stroke-width="1.2" />
        <text x="105" y="${p0[1]+24}" class="${lClass}">l = ${lLabel}</text>

        
        <line x1="${p0[0]-10}" y1="${p0[1]}" x2="${p3[0]-10}" y2="${p3[1]}" stroke="#1e2945" stroke-width="1.2" />
        <text x="${p0[0]-24}" y="${(p0[1]+p3[1])/2}" class="${hClass}">h = ${hLabel}</text>

        
        <line x1="${p1[0]+8}" y1="${p1[1]+6}" x2="${p6[0]+8}" y2="${p6[1]+6}" stroke="#1e2945" stroke-width="1.2" />
        <text x="${(p1[0]+p6[0])/2 + 22}" y="${(p1[1]+p6[1])/2 + 16}" class="${wClass}">w = ${wLabel}</text>
      `;
    }

    // Tab event handlers
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        renderDiagram(btn.dataset.mode);
      });
    });

    // Init
    window.addEventListener('DOMContentLoaded', () => {
      renderMath();
      renderDiagram('h');
    });
  </script>
</body>
</html>

What if a different side is missing, like the width instead of the height?

The exact same rule works no matter which side is missing! Multiply the **two known sides** together first, then divide the **total volume** by that result.

For example, if a box has a volume of 30 cubes, a length of 5, and a height of 2, multiply $5 \times 2 = 10$. Then divide: $30 \div 10 = 3$, so the missing width is **3 cubes**.

<!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;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .main-view {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      max-width: 520px;
    }

    @media (max-width: 440px) {
      .main-view {
        flex-direction: column;
        gap: 10px;
      }
    }

    .svg-wrap {
      flex: 1;
      max-width: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .math-panel {
      flex: 1.1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .step-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .step-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
      background: #f0f9ff;
    }

    .step-card.done {
      border-color: #10b981;
      background: #f0fdf4;
    }

    .step-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .step-card.active .step-tag { color: #0284c7; }
    .step-card.done .step-tag { color: #059669; }

    .step-math {
      font-size: 16px;
      font-weight: 700;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .badge-vol {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      text-align: center;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-step:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

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

    .btn-play {
      background: #1e2945;
      color: #ffffff;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      margin-left: 4px;
    }

    /* SVG highlighting classes */
    .face-front { transition: fill 0.3s ease, stroke 0.3s ease; }
    .face-top { transition: fill 0.3s ease; }
    .face-side { transition: fill 0.3s ease; }
    .dim-label { font-weight: bold; font-size: 13px; fill: #1e2945; text-anchor: middle; }
    .dim-missing { fill: #dc2626; font-size: 15px; }
    .dim-found { fill: #059669; font-size: 15px; }
  </style>
</head>
<body>

  <div class="badge-vol" id="volBadge">Volume = 30 cm³</div>

  <div class="main-view">
    <div class="svg-wrap">
      <svg viewBox="0 0 200 170" id="cuboidSvg">
        
        
        
        
        

        
        <polygon id="faceSide" class="face-side" points="130,130 175,95 175,55 130,90" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5" stroke-linejoin="round" />
        
        
        <polygon id="faceTop" class="face-top" points="30,90 130,90 175,55 75,55" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" stroke-linejoin="round" />

        
        <polygon id="faceFront" class="face-front" points="30,130 130,130 130,90 30,90" fill="#38bdf8" stroke="#0284c7" stroke-width="2" stroke-linejoin="round" opacity="0.9" />

        
        
        <text x="80" y="148" class="dim-label">5 cm</text>
        <line x1="30" y1="136" x2="130" y2="136" stroke="#64748b" stroke-width="1.2" stroke-dasharray="2,2"/>

        
        <text x="18" y="114" class="dim-label">2 cm</text>
        <line x1="24" y1="130" x2="24" y2="90" stroke="#64748b" stroke-width="1.2" stroke-dasharray="2,2"/>

        
        <text id="dimW" x="165" y="123" class="dim-label dim-missing">? cm</text>
        <line x1="135" y1="134" x2="180" y2="99" stroke="#64748b" stroke-width="1.2" stroke-dasharray="2,2"/>

        
        <g id="areaTag" opacity="0" style="transition: opacity 0.3s ease;">
          <rect x="50" y="98" width="60" height="24" rx="4" fill="#ffffff" stroke="#0284c7" stroke-width="1.5"/>
          <text x="80" y="115" text-anchor="middle" font-size="12" font-weight="bold" fill="#0369a1">10 cm²</text>
        </g>
      </svg>
    </div>

    <div class="math-panel">
      
      <div class="step-card" id="card1">
        <div>
          <div class="step-tag">Step 1 · Multiply Known</div>
          <div class="step-math">5 × 2 = <span style="color:#0284c7;">10</span></div>
        </div>
        <span id="check1" style="color:#10b981; font-weight:bold; display:none;">✓</span>
      </div>

      
      <div class="step-card" id="card2">
        <div>
          <div class="step-tag">Step 2 · Divide Volume</div>
          <div class="step-math">30 ÷ <span style="color:#0284c7;">10</span> = <span id="resVal" style="color:#dc2626;">?</span></div>
        </div>
        <span id="check2" style="color:#10b981; font-weight:bold; display:none;">✓</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-step active" id="btn1" onclick="setStep(0)">1. Known Area</button>
    <button class="btn-step" id="btn2" onclick="setStep(1)">2. Find Missing</button>
    <button class="btn-play" id="btnPlay" onclick="togglePlay()" aria-label="Auto play">▶</button>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    let isPlaying = false;

    const card1 = document.getElementById('card1');
    const card2 = document.getElementById('card2');
    const check1 = document.getElementById('check1');
    const check2 = document.getElementById('check2');
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btnPlay = document.getElementById('btnPlay');
    const faceFront = document.getElementById('faceFront');
    const areaTag = document.getElementById('areaTag');
    const dimW = document.getElementById('dimW');
    const resVal = document.getElementById('resVal');

    function updateView() {
      if (currentStep === 0) {
        btn1.classList.add('active');
        btn2.classList.remove('active');

        card1.className = 'step-card active';
        check1.style.display = 'none';

        card2.className = 'step-card';
        check2.style.display = 'none';
        resVal.textContent = '?';
        resVal.style.color = '#dc2626';

        faceFront.setAttribute('fill', '#38bdf8');
        areaTag.setAttribute('opacity', '1');

        dimW.textContent = '? cm';
        dimW.className.baseVal = 'dim-label dim-missing';
      } else {
        btn1.classList.remove('active');
        btn2.classList.add('active');

        card1.className = 'step-card done';
        check1.style.display = 'inline';

        card2.className = 'step-card active done';
        check2.style.display = 'inline';
        resVal.textContent = '3';
        resVal.style.color = '#059669';

        faceFront.setAttribute('fill', '#bae6fd');
        areaTag.setAttribute('opacity', '0');

        dimW.textContent = '3 cm';
        dimW.className.baseVal = 'dim-label dim-found';
      }
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      btnPlay.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        timer = setInterval(() => {
          currentStep = (currentStep + 1) % 2;
          updateView();
        }, 3200);
      } else {
        clearInterval(timer);
      }
    }

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

What is the most common mistake students make when finding a missing side?

A common mistake is adding the two known sides together or subtracting them from the total volume. Because volume comes from **multiplying** three dimensions, you must always **divide** to find a missing side.

Whenever you need a hidden dimension, remember: multiply the two sides you know, and divide that number into the total volume!

math

Finding Missing Dimensions of a Cuboid Given Its Volume. Divide total volume by the product of two known dimensions to find the unknown third dimension.

Volume of a Rectangular Prism: Word Problem & Missing Dimensions

Volume of Cubes and Rectangular Prisms: Find the Missing Dimension

NRICH Primary & Lower Secondary: Visualising and Applying Cuboid Volumes

Although the prompt header references Early Level (P1), Curriculum for Excellence standard MNU 2-11c specifically targets Second Level (P5–P7 / ages 9–12), where multi-step inverse operations, 3D spatial properties, and formal algebraic reasoning are taught. When introducing this concept, use the Concrete-Representational-Abstract (CRA) approach: start with interlocking centimeter cubes to physically build a target volume in layers, transition to 2D bar models and isometric sketches, and finally generalize to the formulaic division $\text{missing dimension} = \frac{V}{d_1 \times d_2}$.

Finding Missing Dimensions of a Cuboid Given Its Volume

Building in Layers

Finding Any Missing Side