<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unit Cube Packing Prism</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 8px;
      overflow-x: hidden;
    }

    .main-layout {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      width: 100%;
      max-width: 660px;
      align-items: center;
      justify-content: center;
    }

    .viewport {
      position: relative;
      flex: 1 1 320px;
      max-width: 380px;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      user-select: none;
    }

    .panel {
      flex: 1 1 240px;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 13px;
    }

    .calc-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-bottom: 6px;
      border-bottom: 1px dashed #cbd5e1;
    }

    .highlight-val {
      font-weight: 700;
      color: #0284c7;
      font-size: 14px;
    }

    .cube-face {
      transition: fill 0.2s ease, opacity 0.2s ease;
      cursor: pointer;
    }

    .cube-face:hover {
      filter: brightness(1.08);
    }

    .cube-wire {
      stroke: #0284c7;
      stroke-width: 1.2;
      stroke-linejoin: round;
    }

    .prism-wire-back {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
      fill: none;
    }

    .prism-wire {
      stroke: #1e293b;
      stroke-width: 2;
      stroke-dasharray: 5 3;
      fill: none;
      pointer-events: none;
    }

    .dim-label {
      font-size: 11px;
      font-weight: 600;
      fill: #475569;
    }

    .dim-line {
      stroke: #64748b;
      stroke-width: 1.2;
      marker-end: url(#arrow);
      marker-start: url(#arrow-start);
    }

    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

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

    .btn {
      flex: 1;
      padding: 7px 10px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #ffffff;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

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

    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="viewport">
      <svg viewBox="0 0 375 225" aria-label="3D model of rectangular prism packed with 1/2 unit cubes">
        <defs>
          <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b"/>
          </marker>
          <marker id="arrow-start" viewBox="0 0 6 6" refX="1" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 6 0 L 0 3 L 6 6 z" fill="#64748b"/>
          </marker>
        </defs>

        
        <g class="prism-wire-back">
          
          <line x1="134" y1="85" x2="70" y2="121" />
          <line x1="134" y1="85" x2="230" y2="139" />
          
          <line x1="134" y1="85" x2="134" y2="53" />
        </g>

        
        
        <line x1="60" y1="139" x2="156" y2="193" class="dim-line" />
        <text x="96" y="177" class="dim-label" transform="rotate(29.35, 96, 177)">Length = 1 ½ (3 cubes)</text>

        
        <line x1="176" y1="193" x2="240" y2="157" class="dim-line" />
        <text x="214" y="186" class="dim-label" transform="rotate(-29.35, 214, 186)">Width = 1 (2 cubes)</text>

        
        <line x1="246" y1="139" x2="246" y2="107" class="dim-line" />
        <text x="254" y="127" class="dim-label">Height = ½ (1 cube)</text>

        
        <g id="cubesGroup"></g>

        
        <g class="prism-wire">
          
          <polygon points="134,53 230,107 166,143 70,89" />
          
          <polyline points="70,121 166,175 230,139" />
          
          <line x1="70" y1="89" x2="70" y2="121" />
          <line x1="166" y1="143" x2="166" y2="175" />
          <line x1="230" y1="107" x2="230" y2="139" />
        </g>
      </svg>
    </div>

    
    <div class="panel">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span class="badge">½-Unit Cube Packing</span>
        <span style="font-size:12px; font-weight: 600; color:#64748b;">Layer 1 of 1</span>
      </div>

      <div class="calc-row">
        <span>Unit Cube Volume:</span>
        <span class="highlight-val">½ × ½ × ½ = ⅛</span>
      </div>

      <div class="calc-row">
        <span>Total Mini Cubes:</span>
        <span class="highlight-val">3 × 2 × 1 = <span id="cubeCountText">6</span> cubes</span>
      </div>

      <div class="calc-row" style="border-bottom:none;">
        <span>Total Volume:</span>
        <span class="highlight-val">6 × ⅛ = ⁶⁄₈ = ¾ unit³</span>
      </div>

      <div class="controls">
        <button class="btn active" id="btnAll" onclick="setMode('all')">Packed (6)</button>
        <button class="btn" id="btnCount" onclick="startStepCount()">Count 1-by-1 ▶</button>
      </div>
    </div>
  </div>

  <script>
    // Isometric Projection aligned perfectly with outer wireframe
    const cx = 150;
    const cy = 130;
    const sX = 32;
    const sY = 18;
    const sZ = 32;

    function iso(x, y, z) {
      const px = Math.round((cx + (x - y) * sX) * 10) / 10;
      const py = Math.round((cy + (x + y) * sY - z * sZ) * 10) / 10;
      return [px, py];
    }

    // Cubes ordered back-to-front for painter's algorithm
    const cubesData = [
      { x: 0, y: 0, id: 1 },
      { x: 1, y: 0, id: 2 },
      { x: 0, y: 1, id: 3 },
      { x: 2, y: 0, id: 4 },
      { x: 1, y: 1, id: 5 },
      { x: 2, y: 1, id: 6 },
    ];

    const svgGroup = document.getElementById('cubesGroup');

    function drawCube(c, active, highlight) {
      const x0 = c.x - 1.5;
      const x1 = x0 + 1;
      const y0 = c.y - 1.0;
      const y1 = y0 + 1;
      const z0 = 0;
      const z1 = 1;

      const p000 = iso(x0, y0, z0);
      const p100 = iso(x1, y0, z0);
      const p010 = iso(x0, y1, z0);
      const p110 = iso(x1, y1, z0);
      const p001 = iso(x0, y0, z1);
      const p101 = iso(x1, y0, z1);
      const p011 = iso(x0, y1, z1);
      const p111 = iso(x1, y1, z1);

      const topColor = highlight ? '#38bdf8' : '#bae6fd';
      const leftColor = highlight ? '#0284c7' : '#38bdf8';
      const rightColor = highlight ? '#0369a1' : '#0284c7';
      const opacity = active ? 0.95 : 0.12;

      const centerX = (p001[0] + p101[0] + p111[0] + p011[0]) / 4;
      const centerY = (p001[1] + p101[1] + p111[1] + p011[1]) / 4 + 4;

      return `
        <g id="cube-${c.id}" opacity="${opacity}">
          
          <polygon points="${p001} ${p101} ${p111} ${p011}" 
            fill="${topColor}" class="cube-wire cube-face" onclick="toggleCube(${c.id})" />
          
          <polygon points="${p010} ${p110} ${p111} ${p011}" 
            fill="${leftColor}" class="cube-wire cube-face" onclick="toggleCube(${c.id})" />
          
          <polygon points="${p100} ${p110} ${p111} ${p101}" 
            fill="${rightColor}" class="cube-wire cube-face" onclick="toggleCube(${c.id})" />
          
          <text x="${centerX}" y="${centerY}" 
                text-anchor="middle" font-size="11" font-weight="700" fill="#0f172a" pointer-events="none">#${c.id}</text>
        </g>
      `;
    }

    let currentActiveCount = 6;
    let currentHighlightId = null;

    function renderCubes(activeCount = 6, highlightId = null) {
      currentActiveCount = activeCount;
      currentHighlightId = highlightId;
      let html = '';
      cubesData.forEach(c => {
        const isActive = c.id <= activeCount;
        const isHighlight = c.id === highlightId;
        html += drawCube(c, isActive, isHighlight);
      });
      svgGroup.innerHTML = html;
    }

    function toggleCube(id) {
      if (countTimer) clearInterval(countTimer);
      document.getElementById('btnCount').classList.remove('active');
      document.getElementById('btnAll').classList.remove('active');
      renderCubes(id, id);
      document.getElementById('cubeCountText').textContent = id;
    }

    let countTimer = null;

    function setMode(mode) {
      if (countTimer) clearInterval(countTimer);
      document.getElementById('btnAll').classList.toggle('active', mode === 'all');
      document.getElementById('btnCount').classList.toggle('active', mode === 'count');

      if (mode === 'all') {
        document.getElementById('cubeCountText').textContent = '6';
        renderCubes(6, null);
      }
    }

    function startStepCount() {
      if (countTimer) clearInterval(countTimer);
      document.getElementById('btnAll').classList.remove('active');
      document.getElementById('btnCount').classList.add('active');

      let step = 1;
      renderCubes(step, step);
      document.getElementById('cubeCountText').textContent = step;

      countTimer = setInterval(() => {
        step++;
        if (step > 6) {
          step = 6;
          clearInterval(countTimer);
          document.getElementById('btnCount').classList.remove('active');
          document.getElementById('btnAll').classList.add('active');
          renderCubes(6, null);
          return;
        }
        document.getElementById('cubeCountText').textContent = step;
        renderCubes(step, step);
      }, 700);
    }

    // Initial render
    renderCubes(6, null);
  </script>
</body>
</html>

Volume with Fractional Edge Lengths by Packing 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, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .top-section {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    svg.prism-svg {
      width: 100%;
      max-width: 380px;
      height: auto;
      overflow: visible;
    }

    /* Dimension tags */
    .dim-tag {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
    }
    .dim-sub {
      font-size: 11px;
      font-weight: 600;
      fill: #2563eb;
    }

    .tracks-container {
      width: 100%;
      max-width: 540px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 440px) {
      .tracks-container {
        grid-template-columns: 1fr;
      }
    }

    .track-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

    .track-card.active {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .track-title {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .track-a-title { color: #0284c7; }
    .track-b-title { color: #7c3aed; }

    .math-row {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.35;
    }

    .math-row .highlight {
      font-weight: 800;
      color: #2563eb;
    }

    .result-row {
      font-size: 14px;
      font-weight: 800;
      color: #0f172a;
      background: #ffffff;
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      text-align: center;
      margin-top: 2px;
    }

    .match-badge {
      width: 100%;
      max-width: 540px;
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      border-radius: 8px;
      padding: 8px 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #065f46;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    /* Interactive tabs */
    .nav-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 2px;
    }

    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .nav-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="nav-btn active" id="btn-all" onclick="setMode('all')">Compare Both</button>
    <button class="nav-btn" id="btn-packing" onclick="setMode('packing')">1. Packing Track</button>
    <button class="nav-btn" id="btn-formula" onclick="setMode('formula')">2. Formula Track</button>
  </div>

  
  <div class="top-section">
    <svg class="prism-svg" viewBox="0 0 420 180">
      <defs>
        
        <linearGradient id="topFace" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#bae6fd"/>
          <stop offset="100%" stop-color="#7dd3fc"/>
        </linearGradient>
        <linearGradient id="leftFace" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#38bdf8"/>
          <stop offset="100%" stop-color="#0284c7"/>
        </linearGradient>
        <linearGradient id="rightFace" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#0ea5e9"/>
          <stop offset="100%" stop-color="#0369a1"/>
        </linearGradient>

        <linearGradient id="unitCubeTop" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fef08a"/>
          <stop offset="100%" stop-color="#facc15"/>
        </linearGradient>
        <linearGradient id="unitCubeLeft" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#eab308"/>
          <stop offset="100%" stop-color="#ca8a04"/>
        </linearGradient>
        <linearGradient id="unitCubeRight" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#ca8a04"/>
          <stop offset="100%" stop-color="#a16207"/>
        </linearGradient>
      </defs>

      
      
      <g id="cubes-group" transform="translate(195, 105)">
        
        
      </g>

      
      
      <g transform="translate(195, 105)">
        
        <path d="M -44,48 L 68,104" fill="none" stroke="#1e2945" stroke-width="1.5" marker-end="url(#arrow)" />
        <text x="14" y="90" class="dim-tag" text-anchor="middle">Length = ⁴⁄₃</text>
        <text x="14" y="102" class="dim-sub" text-anchor="middle">(4 cubes of ⅓)</text>

        
        <text x="-80" y="24" class="dim-tag" text-anchor="middle">Width = ²⁄₃</text>
        <text x="-80" y="36" class="dim-sub" text-anchor="middle">(2 cubes)</text>

        
        <text x="126" y="-12" class="dim-tag" text-anchor="start">Height = ²⁄₃</text>
        <text x="126" y="0" class="dim-sub" text-anchor="start">(2 cubes)</text>
      </g>
    </svg>
  </div>

  
  <div class="tracks-container">
    
    <div class="track-card active" id="card-packing">
      <div class="track-title track-a-title">
        <span>📦</span> Track A: Packing
      </div>
      <div class="math-row">
        Cubes: 4 × 2 × 2 = <span class="highlight">16 cubes</span>
      </div>
      <div class="math-row">
        1 cube volume = (⅓)³ = <span class="highlight">¹⁄₂₇ unit³</span>
      </div>
      <div class="result-row">
        V = 16 × ¹⁄₂₇ = <strong>¹⁶⁄₂₇ unit³</strong>
      </div>
    </div>

    
    <div class="track-card active" id="card-formula">
      <div class="track-title track-b-title">
        <span>📐</span> Track B: Formula
      </div>
      <div class="math-row">
        V = length × width × height
      </div>
      <div class="math-row">
        V = <span class="highlight">⁴⁄₃</span> × <span class="highlight">²⁄₃</span> × <span class="highlight">²⁄₃</span>
      </div>
      <div class="result-row">
        V = (4×2×2) / (3×3×3) = <strong>¹⁶⁄₂₇ unit³</strong>
      </div>
    </div>
  </div>

  
  <div class="match-badge" id="matchBadge">
    <span>✓</span> Both methods match: <strong>16/27 unit³</strong>
  </div>

  <script>
    // Draw 3D Isometric Grid of 4 (X) x 2 (Y) x 2 (Z)
    const g = document.getElementById('cubes-group');
    const ux = 28, uy = 14;  // x axis vector (length)
    const vx = -24, vy = 12; // y axis vector (depth/width)
    const wz = -24;          // z axis vector (height)

    function isoPoint(x, y, z) {
      return {
        px: x * ux + y * vx,
        py: x * uy + y * vy + z * wz
      };
    }

    function createCube(x, y, z, isSpecial) {
      const p0 = isoPoint(x, y, z);
      const px = isoPoint(x + 1, y, z);
      const py = isoPoint(x, y + 1, z);
      const pxy = isoPoint(x + 1, y + 1, z);
      const pz = isoPoint(x, y, z + 1);
      const pxz = isoPoint(x + 1, y, z + 1);
      const pyz = isoPoint(x, y + 1, z + 1);
      const pxyz = isoPoint(x + 1, y + 1, z + 1);

      const topFill = isSpecial ? 'url(#unitCubeTop)' : 'url(#topFace)';
      const leftFill = isSpecial ? 'url(#unitCubeLeft)' : 'url(#leftFace)';
      const rightFill = isSpecial ? 'url(#unitCubeRight)' : 'url(#rightFace)';

      const cubeG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      cubeG.setAttribute('class', `cube cube-${x}-${y}-${z}`);

      // Left face (y+1 face)
      const left = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      left.setAttribute('points', `${py.px},${py.py} ${pxy.px},${pxy.py} ${pxyz.px},${pxyz.py} ${pyz.px},${pyz.py}`);
      left.setAttribute('fill', leftFill);
      left.setAttribute('stroke', '#0f172a');
      left.setAttribute('stroke-width', '0.8');
      cubeG.appendChild(left);

      // Right face (x+1 face)
      const right = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      right.setAttribute('points', `${px.px},${px.py} ${pxy.px},${pxy.py} ${pxyz.px},${pxyz.py} ${pxz.px},${pxz.py}`);
      right.setAttribute('fill', rightFill);
      right.setAttribute('stroke', '#0f172a');
      right.setAttribute('stroke-width', '0.8');
      cubeG.appendChild(right);

      // Top face (z+1 face)
      const top = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      top.setAttribute('points', `${pz.px},${pz.py} ${pxz.px},${pxz.py} ${pxyz.px},${pxyz.py} ${pyz.px},${pyz.py}`);
      top.setAttribute('fill', topFill);
      top.setAttribute('stroke', '#0f172a');
      top.setAttribute('stroke-width', '0.8');
      cubeG.appendChild(top);

      return cubeG;
    }

    // Render back-to-front sorting
    for (let y = 0; y <= 1; y++) {
      for (let z = 0; z <= 1; z++) {
        for (let x = 0; x <= 3; x++) {
          // Highlight single corner cube for unit illustration
          const isCorner = (x === 3 && y === 1 && z === 1);
          g.appendChild(createCube(x - 2, y - 1, z, isCorner));
        }
      }
    }

    // Interactive Mode Controls
    function setMode(mode) {
      document.getElementById('btn-all').classList.toggle('active', mode === 'all');
      document.getElementById('btn-packing').classList.toggle('active', mode === 'packing');
      document.getElementById('btn-formula').classList.toggle('active', mode === 'formula');

      const cardP = document.getElementById('card-packing');
      const cardF = document.getElementById('card-formula');

      if (mode === 'all') {
        cardP.classList.add('active');
        cardF.classList.add('active');
      } else if (mode === 'packing') {
        cardP.classList.add('active');
        cardF.classList.remove('active');
      } else if (mode === 'formula') {
        cardP.classList.remove('active');
        cardF.classList.add('active');
      }
    }
  </script>
</body>
</html>

<!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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      width: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 16px 16px;
      user-select: none;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      z-index: 10;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .stage {
      width: 100%;
      max-width: 420px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .cube-group {
      transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
      cursor: pointer;
    }
    .cube-face {
      transition: fill 0.2s ease, stroke 0.2s ease;
    }
    .dim-label {
      font-size: 14px;
      font-weight: 700;
      fill: #0284c7;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .card-container {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      margin-top: 4px;
    }
    .eq-card {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }
    .eq-card span.highlight {
      color: #0284c7;
      font-weight: 700;
    }
    .counter-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(34, 183, 255, 0.12);
      border: 1px solid rgba(34, 183, 255, 0.3);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active" id="btnExplode">Separate Cubes</button>
    <button class="btn" id="btnPack">Pack 1×1×1</button>
  </div>

  <div class="stage">
    <svg id="cubeSvg" viewBox="0 0 400 250"></svg>
  </div>

  <div class="card-container">
    <div class="eq-card">
      Volume of 1 mini cube = <span class="highlight">½ × ½ × ½</span> = <span class="highlight">⅛ unit³</span>
    </div>
    <div class="counter-badge">
      <span>8 mini cubes = 1 whole unit cube</span>
    </div>
  </div>

  <script>
    const svg = document.getElementById('cubeSvg');
    const btnExplode = document.getElementById('btnExplode');
    const btnPack = document.getElementById('btnPack');

    // Isometric projection math
    const cx = 200;
    const cy = 125;
    const S = 54; // size of 1/2 unit
    const cos30 = Math.cos(Math.PI / 6);
    const sin30 = Math.sin(Math.PI / 6);

    function iso(x, y, z) {
      return {
        u: cx + (x - y) * S * cos30,
        v: cy + (x + y) * S * sin30 - z * S
      };
    }

    function createPoly(pts, fill, stroke, strokeWidth, strokeDash) {
      const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      poly.setAttribute('points', pts.map(p => `${p.u.toFixed(2)},${p.v.toFixed(2)}`).join(' '));
      poly.setAttribute('fill', fill);
      poly.setAttribute('stroke', stroke);
      poly.setAttribute('stroke-width', strokeWidth || '1.5');
      if (strokeDash) poly.setAttribute('stroke-dasharray', strokeDash);
      poly.classList.add('cube-face');
      return poly;
    }

    // Outer bounding 1x1x1 box (dashed)
    const boundsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    boundsGroup.setAttribute('id', 'bounds');
    
    // Draw 1x1x1 wireframe
    const b0 = iso(-1, -1, -1), b1 = iso(1, -1, -1), b2 = iso(1, 1, -1), b3 = iso(-1, 1, -1);
    const t0 = iso(-1, -1, 1), t1 = iso(1, -1, 1), t2 = iso(1, 1, 1), t3 = iso(-1, 1, 1);
    
    // Top face
    boundsGroup.appendChild(createPoly([t0, t1, t2, t3], 'none', '#94a3b8', '1.5', '4,4'));
    // Front vertical edges
    function drawLine(p1, p2) {
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', p1.u); line.setAttribute('y1', p1.v);
      line.setAttribute('x2', p2.u); line.setAttribute('y2', p2.v);
      line.setAttribute('stroke', '#94a3b8');
      line.setAttribute('stroke-width', '1.5');
      line.setAttribute('stroke-dasharray', '4,4');
      return line;
    }
    boundsGroup.appendChild(drawLine(b1, t1));
    boundsGroup.appendChild(drawLine(b2, t2));
    boundsGroup.appendChild(drawLine(b3, t3));
    boundsGroup.appendChild(createPoly([b1, b2, t2, t1], 'none', '#94a3b8', '1.5', '4,4'));
    boundsGroup.appendChild(createPoly([b3, b2, t2, t3], 'none', '#94a3b8', '1.5', '4,4'));
    svg.appendChild(boundsGroup);

    // 8 Sub-cubes
    const cubes = [
      { id: 0, x: -1, y: -1, z: -1 }, // back-bottom
      { id: 1, x:  0, y: -1, z: -1 }, // right-back-bottom
      { id: 2, x: -1, y:  0, z: -1 }, // left-back-bottom
      { id: 3, x: -1, y: -1, z:  0 }, // back-top
      { id: 4, x:  0, y: -1, z:  0 }, // right-top
      { id: 5, x: -1, y:  0, z:  0 }, // left-top
      { id: 6, x:  0, y:  0, z: -1 }, // front-bottom
      { id: 7, x:  0, y:  0, z:  0, target: true } // front-top (highlighted)
    ];

    // Sort back to front for proper isometric layering
    cubes.sort((a, b) => (a.x + a.y - a.z) - (b.x + b.y - b.z));

    const cubeElements = [];

    cubes.forEach((c) => {
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.classList.add('cube-group');
      g.dataset.id = c.id;

      const isHl = c.target;
      const fTop = isHl ? '#38c5ff' : '#f1f5f9';
      const fRight = isHl ? '#22b7ff' : '#e2e8f0';
      const fLeft = isHl ? '#0ea5e9' : '#cbd5e1';
      const stroke = isHl ? '#0284c7' : '#94a3b8';
      const sWidth = isHl ? '2' : '1';

      const x0 = c.x, x1 = c.x + 1;
      const y0 = c.y, y1 = c.y + 1;
      const z0 = c.z, z1 = c.z + 1;

      const pTop = [iso(x0, y0, z1), iso(x1, y0, z1), iso(x1, y1, z1), iso(x0, y1, z1)];
      const pRight = [iso(x1, y0, z0), iso(x1, y1, z0), iso(x1, y1, z1), iso(x1, y0, z1)];
      const pLeft = [iso(x0, y1, z0), iso(x1, y1, z0), iso(x1, y1, z1), iso(x0, y1, z1)];

      g.appendChild(createPoly(pLeft, fLeft, stroke, sWidth));
      g.appendChild(createPoly(pRight, fRight, stroke, sWidth));
      g.appendChild(createPoly(pTop, fTop, stroke, sWidth));

      // Explode vector
      const ex = (c.x === 0 ? 1 : -1) * 16;
      const ey = (c.y === 0 ? 1 : -1) * 16;
      const ez = (c.z === 0 ? 1 : -1) * 14;
      const du = (ex - ey) * cos30;
      const dv = (ex + ey) * sin30 - ez;

      g.dataset.dx = du.toFixed(2);
      g.dataset.dy = dv.toFixed(2);

      svg.appendChild(g);
      cubeElements.push({ group: g, isHl: isHl, cube: c });
    });

    // Dimension labels for highlighted mini cube (front-top)
    const labelGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    labelGroup.setAttribute('id', 'dimLabels');
    labelGroup.style.transition = 'transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1)';

    function addLabel(txt, u, v) {
      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', u);
      text.setAttribute('y', v);
      text.textContent = txt;
      text.classList.add('dim-label');
      labelGroup.appendChild(text);
    }

    // Positions for length (X), width (Y), height (Z) on cube (0, 0, 0)
    const pLen = iso(0.5, 1.08, 0); // bottom right edge
    const pWid = iso(1.08, 0.5, 0); // bottom left edge
    const pHgt = iso(1.05, 1.05, 0.5); // vertical edge

    addLabel('½', pLen.u - 8, pLen.v + 12);
    addLabel('½', pWid.u + 12, pWid.v + 12);
    addLabel('½', pHgt.u + 14, pHgt.v - 2);

    svg.appendChild(labelGroup);

    // Initial state: Exploded
    let isExploded = true;

    function applyState(exploded) {
      isExploded = exploded;
      btnExplode.classList.toggle('active', isExploded);
      btnPack.classList.toggle('active', !isExploded);

      cubeElements.forEach(({ group, isHl }) => {
        if (isExploded) {
          group.style.transform = `translate(${group.dataset.dx}px, ${group.dataset.dy}px)`;
          if (isHl) {
            labelGroup.style.transform = `translate(${group.dataset.dx}px, ${group.dataset.dy}px)`;
          }
        } else {
          group.style.transform = 'translate(0px, 0px)';
          if (isHl) {
            labelGroup.style.transform = 'translate(0px, 0px)';
          }
        }
      });
    }

    applyState(true);

    btnExplode.addEventListener('click', () => applyState(true));
    btnPack.addEventListener('click', () => applyState(false));
  </script>
</body>
</html>

Understanding Metric Prefixes and Place Value in Length

Converting Millimetres to Centimetres with Decimals

Converting Centimetres to Millimetres with Decimals

Converting Centimetres to Metres with Two Decimal Places

Converting Metres to Centimetres with Decimals

Converting Millimetres to Metres with Three Decimal Places

Converting Metres to Millimetres with Decimals

Converting Metres to Kilometres with Three Decimal Places

Converting Kilometres to Metres with Decimals

Comparing and Ordering Mixed Metric Lengths

Solving Length Conversion Word Problems

math

Converting Metric Units of Length

Understanding Metric Mass Units and Decimal Notation

Converting Grams to Kilograms with Three Decimal Places

Converting Kilograms to Grams with Decimals

Converting Kilograms to Tonnes and Tonnes to Kilograms

Understanding Metric Capacity Units and Decimal Notation

Converting Millilitres to Litres with Three Decimal Places

Converting Litres to Millilitres with Decimals

Converting Between Centilitres, Millilitres and Litres

Comparing and Ordering Mass and Capacity Measurements

Solving Mass and Capacity Conversion Word Problems

Converting Metric Mass and Capacity

认识土地面积单位：公顷

认识平方千米与面积单位换算

平行四边形面积公式的割补推导

平行四边形面积计算中的底高对应

三角形面积公式的倍拼推导

三角形面积应用与等底等高模型

梯形面积公式的转化推导与计算

梯形面积的实际应用与钢管堆放问题

组合图形面积计算：分割法与添补法

估算不规则图形面积：数方格与近似图形法

平面多边形面积与大面积单位测量

Converting Seconds to Minutes and Minutes to Seconds

Converting Minutes to Hours and Hours to Minutes

Expressing Time Remainders as Fractions and Decimals

Converting Between Hours, Days, Weeks and Months

Converting Between 12-Hour and 24-Hour Clock Times

Reading and Interpreting Timetables and Schedules

Calculating Time Intervals Across Midnight and Days

Solving Multi-Step Word Problems Involving Time Conversions

Converting Units of Time and Calculating Durations

Concepto de número racional y representación fraccionaria

Fracciones propias, impropias y números mixtos

Fracciones equivalentes por amplificación y simplificación

Fracción irreducible y simplificación máxima

Ubicación de fracciones positivas y negativas en la recta

Comparación de fracciones con distinto denominador

Densidad de los números racionales

Fracciones como operadores de cantidades y medidas

Problemas de comparación y medición con fracciones

Números racionales: Fracciones y equivalencia

长方体和正方体的特征：面、棱、顶点

正方体与长方体的表面展开图识别

长方体和正方体表面积公式推导与计算

表面积的实际应用：粉刷教室与无盖容器

体积与容积的意义及度量单位（m³、dm³、cm³、L、mL）

体积与容积单位之间的进率与换算

长方体和正方体体积公式推导与计算（V=abh, V=a³, V=Sh）

切割与拼截问题中的表面积与体积变化规律

排水法测量不规则物体的体积

长方体和正方体的特征、表面积与体积

Concepto de inverso multiplicativo o recíproco

División de fracciones por el método del recíproco

División con fracciones y números mixtos

Operaciones combinadas con fracciones y jerarquía

Problemas verbales aditivos con fracciones en medidas

Problemas verbales multiplicativos y de división con fracciones

División, operaciones combinadas y problemas con fracciones

Solving Addition and Subtraction Problems with Three Decimal Places

Multiplying Decimal Measurements by Whole Numbers

Dividing Decimal Measurements by Whole Numbers

Converting Units Before Calculating in Multi-Step Problems

Solving Measurement Word Problems with Up to Three Decimal Places

Solving Money and Pricing Problems Per Unit Measure

Estimating and Rounding Answers in Measurement Problems

Solving Two-Step and Three-Step Measurement Word Problems

Solving Decimal Measurement Word Problems

认识圆柱和圆锥的特征与高

圆柱侧面展开图与侧面积公式推导

圆柱表面积计算及生活实际应用

圆柱体积公式的切拼转化推导

圆柱体积与容积的综合应用计算

等底等高倒水/倒沙实验探究圆锥体积公式

圆锥体积计算与沙堆、粮堆实际问题

圆柱与圆锥等底、等高、等体积的倍数关系辨析

旋转体问题：平面图形绕轴旋转形成立体图形

圆柱与圆锥的特征、表面积与体积

Distinguishing Between Perimeter and Area Concepts and Units

Rectangles with the Same Area but Different Perimeters

Rectangles with the Same Perimeter but Different Areas

Finding Rectangles with Maximum Area for a Given Perimeter

Finding Rectangles with Minimum Perimeter for a Given Area

Exploring Non-Rectangular Shapes with Equal Area and Different Perimeter

Recognising When to Use Formulae for Perimeter and Area

Reasoning About Changes in Dimensions on Area and Perimeter

Solving Problem-Solving Puzzles with Area and Perimeter Constraints

Investigating Area and Perimeter Relationships

Deriving the Area of a Right-Angled Triangle from a Rectangle

Calculating the Area of Right-Angled Triangles

Identifying the Perpendicular Height of Any Triangle

Deriving the General Formula for the Area of a Triangle

Calculating the Area of Acute and Obtuse Triangles

Deriving the Formula for the Area of a Parallelogram

Identifying the Base and Perpendicular Height of a Parallelogram

Calculating the Area of Parallelograms

Finding Missing Dimensions of Triangles and Parallelograms

Solving Word Problems Involving Triangle and Parallelogram Areas

Calculating the Area of Triangles and Parallelograms

Splitting Compound Shapes into Rectangles and Triangles

Calculating the Area of L-Shaped and T-Shaped Polygons

Calculating the Area of Composite Shapes with Triangles and Parallelograms

Calculating Shaded and Subtractive Areas

Writing and Using Algebraic Formulae for 2D Areas

Deriving the Area of a Trapezium by Decomposition

Solving Complex Area Word Problems with Mixed Units

Estimating Areas of Irregular 2D Shapes on Grids

Area of Compound Shapes and Algebraic Formulae

Understanding Volume as 3D Space and Cubic Units

Building Cuboids with Unit Cubes and Counting Layers

Deriving the Formula for Volume of a Cuboid

Calculating the Volume of Cubes in Cubic Centimetres

Calculating the Volume of Cuboids in Cubic Centimetres

Calculating Volume in Cubic Metres and Cubic Millimetres

Understanding and Calculating Volume of Cubes and Cuboids

Connecting Volume in Cubic Centimetres to Liquid Capacity in Millilitres

Estimating the Volume of Everyday 3D Objects

Comparing Volumes of Cuboids with Different Dimensions

Finding Missing Dimensions of Cubes and Cuboids

Calculating the Volume of Composite 3D Shapes

Solving Word Problems Involving Volume and Capacity

Applying Volume: Capacity, Composite Shapes, and Problem Solving

Concepto de razón y formas de representación

Razones equivalentes y tablas de razón

Concepto de tasa y tasa unitaria

Comparación de precios unitarios para la mejor compra

Concepto de proporcionalidad directa y constante k

Ecuaciones de proporcionalidad directa: y = kx

Gráficas de proporcionalidad directa en el plano

Regla de tres simple directa

Problemas de velocidad constante, distancia y tiempo

Factores de conversión unitarios con proporcionalidad

Razones, tasas y proporcionalidad directa

De lenguaje común a lenguaje algebraico

Partes de una expresión algebraica: términos, coeficientes y variables

Evaluación de expresiones algebraicas con enteros y racionales

Identificación y reducción de términos semejantes

Propiedad distributiva para expandir expresiones

Factorización por factor común monomio

Simplificación de expresiones con propiedad distributiva y términos semejantes

OGM.7.GEO.3

Aligned learning resources

Related diagrams