<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px;
      overflow-x: hidden;
    }

    .diagram-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    /* SVG Canvas */
    .net-svg {
      width: 100%;
      height: auto;
      max-height: 250px;
      overflow: visible;
      user-select: none;
      display: block;
    }

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

    .face:hover {
      filter: brightness(0.95);
    }

    .face-title {
      font-size: 11px;
      font-weight: 800;
      text-anchor: middle;
      pointer-events: none;
      fill: #1e2945;
    }

    .face-sub {
      font-size: 9.5px;
      font-weight: 600;
      text-anchor: middle;
      pointer-events: none;
      fill: #475569;
    }

    .dim-label {
      font-size: 11px;
      font-weight: 800;
      fill: #334155;
      text-anchor: middle;
      dominant-baseline: central;
      font-style: italic;
    }

    .dim-line {
      stroke: #64748b;
      stroke-width: 1.2;
    }

    .flow-arrow {
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 4, 3;
      transition: opacity 0.25s ease, stroke-width 0.25s ease;
    }

    /* Interactive Pair Cards */
    .terms-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      width: 100%;
    }

    .term-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 3px;
      border-radius: 8px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .term-btn .pair-name {
      font-size: 10.5px;
      font-weight: 700;
      margin-bottom: 2px;
      white-space: nowrap;
    }

    .term-btn .math {
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    /* Themes */
    .blue-theme {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1e40af;
    }
    .blue-theme .pair-name { color: #2563eb; }
    .blue-theme.active {
      border-color: #2563eb;
      background: #dbeafe;
      box-shadow: 0 0 0 1px #2563eb;
    }

    .orange-theme {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #9a3412;
    }
    .orange-theme .pair-name { color: #ea580c; }
    .orange-theme.active {
      border-color: #ea580c;
      background: #ffedd5;
      box-shadow: 0 0 0 1px #ea580c;
    }

    .green-theme {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #166534;
    }
    .green-theme .pair-name { color: #16a34a; }
    .green-theme.active {
      border-color: #16a34a;
      background: #dcfce7;
      box-shadow: 0 0 0 1px #16a34a;
    }

    /* Formula Banner */
    .formula-box {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 14px;
      font-weight: 800;
      color: #1e2945;
      flex-wrap: wrap;
    }

    .formula-tag {
      padding: 3px 7px;
      border-radius: 6px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
    }

    .formula-tag.blue {
      background: #dbeafe;
      color: #1d4ed8;
      border-color: #93c5fd;
    }
    .formula-tag.orange {
      background: #ffedd5;
      color: #c2410c;
      border-color: #fdba74;
    }
    .formula-tag.green {
      background: #dcfce7;
      color: #15803d;
      border-color: #86efac;
    }

    .instruction {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
      margin-top: -2px;
    }

    /* Dimmed state */
    .dimmed {
      opacity: 0.22 !important;
    }

    @media (max-width: 360px) {
      .term-btn .pair-name { font-size: 9.5px; }
      .term-btn .math { font-size: 11px; }
      .formula-box { font-size: 13px; gap: 3px; padding: 6px 8px; }
      .formula-tag { padding: 2px 5px; }
    }
  </style>
</head>
<body>

  <div class="diagram-container">
    
    <svg class="net-svg" viewBox="0 0 380 238">
      <defs>
        
        <marker id="arrow-blue" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4.5" markerHeight="4.5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb" />
        </marker>
        <marker id="arrow-orange" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4.5" markerHeight="4.5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#ea580c" />
        </marker>
        <marker id="arrow-green" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4.5" markerHeight="4.5" orient="auto">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#16a34a" />
        </marker>
      </defs>

      
      
      <g>
        <line x1="105" y1="12" x2="195" y2="12" class="dim-line" />
        <line x1="105" y1="8" x2="105" y2="16" class="dim-line" />
        <line x1="195" y1="8" x2="195" y2="16" class="dim-line" />
        <rect x="142" y="4" width="16" height="16" fill="#f8fafc" rx="3" />
        <text x="150" y="12" class="dim-label">l</text>
      </g>

      
      <g>
        <line x1="97" y1="23" x2="97" y2="65" class="dim-line" />
        <line x1="93" y1="23" x2="101" y2="23" class="dim-line" />
        <line x1="93" y1="65" x2="101" y2="65" class="dim-line" />
        <rect x="83" y="36" width="16" height="16" fill="#f8fafc" rx="3" />
        <text x="91" y="44" class="dim-label">w</text>
      </g>

      
      <g>
        <line x1="45" y1="71" x2="45" y2="135" class="dim-line" />
        <line x1="41" y1="71" x2="49" y2="71" class="dim-line" />
        <line x1="41" y1="135" x2="49" y2="135" class="dim-line" />
        <rect x="31" y="95" width="16" height="16" fill="#f8fafc" rx="3" />
        <text x="39" y="103" class="dim-label">h</text>
      </g>

      
      <g>
        <line x1="53" y1="145" x2="97" y2="145" class="dim-line" />
        <line x1="53" y1="141" x2="53" y2="149" class="dim-line" />
        <line x1="97" y1="141" x2="97" y2="149" class="dim-line" />
        <rect x="67" y="137" width="16" height="16" fill="#f8fafc" rx="3" />
        <text x="75" y="145" class="dim-label">w</text>
      </g>

      
      
      <g class="face-group group-blue" onclick="selectGroup('blue')">
        <rect class="face" x="102" y="21" width="96" height="46" rx="3"
              fill="#dbeafe" stroke="#2563eb" stroke-width="2" />
        <text x="150" y="38" class="face-title">Top</text>
        <text x="150" y="52" class="face-sub">l × w</text>
      </g>

      
      <g class="face-group group-green" onclick="selectGroup('green')">
        <rect class="face" x="52" y="69" width="48" height="68" rx="3"
              fill="#dcfce7" stroke="#16a34a" stroke-width="2" />
        <text x="76" y="97" class="face-title">Left</text>
        <text x="76" y="111" class="face-sub">w × h</text>
      </g>

      
      <g class="face-group group-orange" onclick="selectGroup('orange')">
        <rect class="face" x="102" y="69" width="96" height="68" rx="3"
              fill="#ffedd5" stroke="#ea580c" stroke-width="2" />
        <text x="150" y="97" class="face-title">Front</text>
        <text x="150" y="111" class="face-sub">l × h</text>
      </g>

      
      <g class="face-group group-green" onclick="selectGroup('green')">
        <rect class="face" x="200" y="69" width="48" height="68" rx="3"
              fill="#dcfce7" stroke="#16a34a" stroke-width="2" />
        <text x="224" y="97" class="face-title">Right</text>
        <text x="224" y="111" class="face-sub">w × h</text>
      </g>

      
      <g class="face-group group-orange" onclick="selectGroup('orange')">
        <rect class="face" x="250" y="69" width="96" height="68" rx="3"
              fill="#ffedd5" stroke="#ea580c" stroke-width="2" />
        <text x="298" y="97" class="face-title">Back</text>
        <text x="298" y="111" class="face-sub">l × h</text>
      </g>

      
      <g class="face-group group-blue" onclick="selectGroup('blue')">
        <rect class="face" x="102" y="139" width="96" height="46" rx="3"
              fill="#dbeafe" stroke="#2563eb" stroke-width="2" />
        <text x="150" y="156" class="face-title">Bottom</text>
        <text x="150" y="170" class="face-sub">l × w</text>
      </g>

      
      
      <g class="face-group group-blue">
        <path d="M 130 185 C 130 212, 64 202, 64 230"
              class="flow-arrow" stroke="#2563eb" marker-end="url(#arrow-blue)" />
      </g>

      
      <g class="face-group group-orange">
        <path d="M 198 137 C 198 172, 190 195, 190 230"
              class="flow-arrow" stroke="#ea580c" marker-end="url(#arrow-orange)" />
      </g>

      
      <g class="face-group group-green">
        <path d="M 224 137 C 224 180, 316 182, 316 230"
              class="flow-arrow" stroke="#16a34a" marker-end="url(#arrow-green)" />
      </g>
    </svg>

    
    <div class="terms-row">
      <div id="btn-blue" class="term-btn blue-theme active" onclick="selectGroup('blue')">
        <span class="pair-name">Top + Bottom</span>
        <span class="math">2 × (l × w)</span>
      </div>
      <div id="btn-orange" class="term-btn orange-theme active" onclick="selectGroup('orange')">
        <span class="pair-name">Front + Back</span>
        <span class="math">2 × (l × h)</span>
      </div>
      <div id="btn-green" class="term-btn green-theme active" onclick="selectGroup('green')">
        <span class="pair-name">Left + Right</span>
        <span class="math">2 × (w × h)</span>
      </div>
    </div>

    
    <div class="formula-box">
      <span>SA =</span>
      <span id="tag-blue" class="formula-tag blue" onclick="selectGroup('blue')">2lw</span>
      <span>+</span>
      <span id="tag-orange" class="formula-tag orange" onclick="selectGroup('orange')">2lh</span>
      <span>+</span>
      <span id="tag-green" class="formula-tag green" onclick="selectGroup('green')">2wh</span>
    </div>

    <div class="instruction">Tap any face pair or term to highlight matching components</div>
  </div>

  <script>
    let activeGroup = 'all';

    function selectGroup(group) {
      activeGroup = (activeGroup === group) ? 'all' : group;
      updateUI();
    }

    function updateUI() {
      const groups = ['blue', 'orange', 'green'];
      
      groups.forEach(g => {
        const isCurrent = (activeGroup === 'all' || activeGroup === g);
        
        // Update SVG face groups and flow arrows
        document.querySelectorAll('.group-' + g).forEach(el => {
          if (isCurrent) {
            el.classList.remove('dimmed');
          } else {
            el.classList.add('dimmed');
          }
        });

        // Highlight stroke weight on selected rectangles
        document.querySelectorAll('.group-' + g + ' rect.face').forEach(rect => {
          rect.setAttribute('stroke-width', activeGroup === g ? '3' : '2');
        });

        // Update term buttons
        const btn = document.getElementById('btn-' + g);
        if (activeGroup === 'all' || activeGroup === g) {
          btn.classList.remove('dimmed');
          if (activeGroup === g) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        } else {
          btn.classList.remove('active');
          btn.classList.add('dimmed');
        }

        // Update formula tags
        const tag = document.getElementById('tag-' + g);
        if (isCurrent) {
          tag.classList.remove('dimmed');
          tag.style.boxShadow = (activeGroup === g) ? '0 0 0 1.5px currentColor' : 'none';
        } else {
          tag.classList.add('dimmed');
          tag.style.boxShadow = 'none';
        }
      });
    }
  </script>
</body>
</html>

Surface Area from Nets: Rectangular Prisms

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      min-height: 100vh;
      max-height: 520px;
      padding: 12px 16px;
      overflow: hidden;
      margin: 0 auto;
    }

    /* Controls Bar */
    .controls-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      max-width: 360px;
      z-index: 20;
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 30px;
      transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    }

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

    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .slider-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      padding: 0 2px;
    }

    input[type="range"] {
      width: 100%;
      height: 6px;
      accent-color: #2563eb;
      cursor: pointer;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
    }

    /* 3D Scene Viewport */
    .scene-container {
      position: relative;
      width: 100%;
      max-width: 380px;
      height: 270px;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1000px;
      perspective-origin: 50% 50%;
    }

    .world {
      position: relative;
      width: 0;
      height: 0;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
    }

    /* Face styling */
    .face {
      position: absolute;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      border-radius: 2px;
    }

    /* Double-sided face surfaces to prevent backface bleed-through & mirroring */
    .face-surface {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      border: 1.5px solid rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.12);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      pointer-events: none;
    }

    .surface-front {
      transform: rotateY(0deg);
    }

    .surface-back {
      transform: rotateY(180deg);
    }

    /* Color pairs */
    .top-bottom .face-surface {
      background: #3b82f6; /* Blue */
    }

    .front-back .face-surface {
      background: #f97316; /* Coral / Orange */
    }

    .left-right .face-surface {
      background: #10b981; /* Green */
    }

    /* Legend */
    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      z-index: 20;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background: #f8fafc;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }

    .swatch {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
  </style>
</head>
<body>

  
  <div class="controls-panel">
    <div class="controls-row">
      <button id="playBtn" class="btn active" aria-label="Pause animation">⏸ Pause</button>
      <button id="boxBtn" class="btn" aria-label="View 3D Box">3D Box</button>
      <button id="netBtn" class="btn" aria-label="View 2D Net">2D Net</button>
    </div>
    <div class="controls-row">
      <div class="slider-container">
        <input type="range" id="progressSlider" min="0" max="1" step="0.002" value="0" aria-label="Fold progress slider">
        <div class="slider-labels">
          <span>Folded (3D)</span>
          <span>Unfolded (2D Net)</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="scene-container">
    <div class="world" id="world">
      
      <div id="faceBottom" class="face top-bottom">
        <div class="face-surface surface-front">Bottom</div>
        <div class="face-surface surface-back">Bottom</div>

        
        <div id="faceLeft" class="face left-right">
          <div class="face-surface surface-front">Left</div>
          <div class="face-surface surface-back">Left</div>
        </div>

        
        <div id="faceRight" class="face left-right">
          <div class="face-surface surface-front">Right</div>
          <div class="face-surface surface-back">Right</div>
        </div>

        
        <div id="faceFront" class="face front-back">
          <div class="face-surface surface-front">Front</div>
          <div class="face-surface surface-back">Front</div>
        </div>

        
        <div id="faceBack" class="face front-back">
          <div class="face-surface surface-front">Back</div>
          <div class="face-surface surface-back">Back</div>

          
          <div id="faceTop" class="face top-bottom">
            <div class="face-surface surface-front">Top</div>
            <div class="face-surface surface-back">Top</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="legend">
    <div class="legend-item">
      <div class="swatch" style="background: #3b82f6;"></div>
      <span>Top &amp; Bottom</span>
    </div>
    <div class="legend-item">
      <div class="swatch" style="background: #f97316;"></div>
      <span>Front &amp; Back</span>
    </div>
    <div class="legend-item">
      <div class="swatch" style="background: #10b981;"></div>
      <span>Left &amp; Right</span>
    </div>
  </div>

  <script>
    // Prism Dimensions: Width (W), Depth (D), Height (H)
    const W = 104;
    const D = 70;
    const H = 56;

    const world = document.getElementById('world');
    const faceBottom = document.getElementById('faceBottom');
    const faceLeft = document.getElementById('faceLeft');
    const faceRight = document.getElementById('faceRight');
    const faceFront = document.getElementById('faceFront');
    const faceBack = document.getElementById('faceBack');
    const faceTop = document.getElementById('faceTop');
    const slider = document.getElementById('progressSlider');
    const playBtn = document.getElementById('playBtn');
    const boxBtn = document.getElementById('boxBtn');
    const netBtn = document.getElementById('netBtn');

    // Setup hierarchy geometry & transform origins
    faceBottom.style.width = W + 'px';
    faceBottom.style.height = D + 'px';
    faceBottom.style.left = (-W / 2) + 'px';
    faceBottom.style.top = (-D / 2) + 'px';

    // Left face (width: H, height: D) attached to left edge of Bottom
    faceLeft.style.width = H + 'px';
    faceLeft.style.height = D + 'px';
    faceLeft.style.left = (-H) + 'px';
    faceLeft.style.top = '0px';
    faceLeft.style.transformOrigin = 'right center';

    // Right face (width: H, height: D) attached to right edge of Bottom
    faceRight.style.width = H + 'px';
    faceRight.style.height = D + 'px';
    faceRight.style.left = W + 'px';
    faceRight.style.top = '0px';
    faceRight.style.transformOrigin = 'left center';

    // Front face (width: W, height: H) attached to bottom edge of Bottom
    faceFront.style.width = W + 'px';
    faceFront.style.height = H + 'px';
    faceFront.style.left = '0px';
    faceFront.style.top = D + 'px';
    faceFront.style.transformOrigin = 'center top';

    // Back face (width: W, height: H) attached to top edge of Bottom
    faceBack.style.width = W + 'px';
    faceBack.style.height = H + 'px';
    faceBack.style.left = '0px';
    faceBack.style.top = (-H) + 'px';
    faceBack.style.transformOrigin = 'center bottom';

    // Top face (width: W, height: D) attached to top edge of Back
    faceTop.style.width = W + 'px';
    faceTop.style.height = D + 'px';
    faceTop.style.left = '0px';
    faceTop.style.top = (-D) + 'px';
    faceTop.style.transformOrigin = 'center bottom';

    // Update 3D transformation based on progress (0 = 3D solid box, 1 = flat 2D net)
    function updateFold(t) {
      // Camera transitions smoothly from isometric 3D view to flat 2D top-down view
      const rotX = 56 * (1 - t);
      const rotZ = -34 * (1 - t);
      world.style.transform = `rotateX(${rotX}deg) rotateZ(${rotZ}deg)`;

      // Flaps fold angles: 90deg when folded (t=0) -> 0deg when unfolded (t=1)
      const angle = 90 * (1 - t);

      faceLeft.style.transform = `rotateY(${angle}deg)`;
      faceRight.style.transform = `rotateY(${-angle}deg)`;
      faceFront.style.transform = `rotateX(${-angle}deg)`;
      faceBack.style.transform = `rotateX(${angle}deg)`;
      faceTop.style.transform = `rotateX(${angle}deg)`;
    }

    // Animation Loop (4-second cycle with clear pauses)
    let isPlaying = true;
    let animProgress = 0;
    let lastTime = performance.now();
    const cycleDuration = 4200; // ms

    function animate(now) {
      if (isPlaying) {
        const dt = now - lastTime;
        animProgress = (animProgress + dt / cycleDuration) % 1;

        // Smooth cosine ease with pauses at extremes
        let t;
        const p = animProgress;
        if (p < 0.16) {
          t = 0; // Pause at 3D solid box
        } else if (p < 0.50) {
          const u = (p - 0.16) / 0.34;
          t = 0.5 - 0.5 * Math.cos(Math.PI * u); // Smooth unfold
        } else if (p < 0.66) {
          t = 1; // Pause at flat 2D net
        } else {
          const u = (p - 0.66) / 0.34;
          t = 0.5 + 0.5 * Math.cos(Math.PI * u); // Smooth fold
        }

        slider.value = t;
        updateFold(t);
      }
      lastTime = now;
      requestAnimationFrame(animate);
    }

    function setPlayingState(playing) {
      isPlaying = playing;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        playBtn.classList.add('active');
        lastTime = performance.now();
      } else {
        playBtn.textContent = '▶ Play';
        playBtn.classList.remove('active');
      }
    }

    // Manual slider interaction
    slider.addEventListener('input', (e) => {
      setPlayingState(false);
      updateFold(parseFloat(e.target.value));
    });

    // Play/Pause toggle
    playBtn.addEventListener('click', () => {
      setPlayingState(!isPlaying);
    });

    // Quick snap buttons
    boxBtn.addEventListener('click', () => {
      setPlayingState(false);
      slider.value = 0;
      updateFold(0);
    });

    netBtn.addEventListener('click', () => {
      setPlayingState(false);
      slider.value = 1;
      updateFold(1);
    });

    // Initial render
    updateFold(0);
    requestAnimationFrame(animate);
  </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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    /* Top interactive controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 10;
    }
    .btn-toggle {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .btn-toggle.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .play-btn {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    /* Main visual SVG stage */
    .stage-wrapper {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* 3D Prism styling */
    .prism-a {
      transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
      transform: translate(0px, 0px);
    }
    .prism-b {
      transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
      transform: translate(0px, 0px);
    }

    .split .prism-a {
      transform: translate(-18px, -36px);
    }
    .split .prism-b {
      transform: translate(12px, 16px);
    }

    /* Cut indicator */
    .cut-plane {
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .split .cut-plane {
      opacity: 1;
    }

    /* Separation arrow & line */
    .split-arrow {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .split .split-arrow {
      opacity: 1;
    }

    /* Equation formula banner */
    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      padding: 8px 14px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    .tag-total {
      color: #0f172a;
    }
    .tag-a {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #bae6fd;
    }
    .tag-b {
      background: #fef3c7;
      color: #b45309;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #fde68a;
    }
    .op {
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-toggle" id="btnCombined">Combined</button>
    <button class="btn-toggle active" id="btnSeparate">Separate</button>
    <button class="play-btn" id="btnPlay" title="Auto Play">⏸</button>
  </div>

  
  <div class="stage-wrapper">
    <svg id="scene" class="split" viewBox="0 0 400 240">
      <defs>
        
        <marker id="arr-up" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
        </marker>
        <marker id="arr-down" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#d97706" />
        </marker>
        
        <filter id="drop-shadow" x="-10%" y="-10%" width="130%" height="130%">
          <feDropShadow dx="0" dy="8" stdDeviation="6" flood-color="#0f172a" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <polygon points="120,210 260,140 330,175 190,245" fill="#e2e8f0" opacity="0.6" />

      
      <g class="prism-b" filter="url(#drop-shadow)">
        
        
        <polygon points="140,155 260,215 260,170 140,110" fill="#fbbf24" stroke="#d97706" stroke-width="1.5" stroke-linejoin="round" />
        
        <polygon points="260,215 330,180 330,135 260,170" fill="#d97706" stroke="#b45309" stroke-width="1.5" stroke-linejoin="round" />
        
        <polygon points="140,110 260,170 330,135 210,75" fill="#fde68a" stroke="#d97706" stroke-width="1.5" stroke-linejoin="round" />
        
        
        <text x="255" y="165" fill="#78350f" font-size="14" font-weight="800" text-anchor="middle">Prism B</text>
      </g>

      
      
      <g class="cut-plane">
        <polygon points="140,110 190,135 260,100 210,75" fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,4" />
      </g>

      
      <g class="prism-a" filter="url(#drop-shadow)">
        
        <polygon points="140,110 190,135 260,100 210,75" fill="#0284c7" opacity="0.4" stroke="#0284c7" stroke-width="1" />
        
        
        <polygon points="140,110 190,135 190,65 140,40" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5" stroke-linejoin="round" />
        
        <polygon points="190,135 260,100 260,30 190,65" fill="#0284c7" stroke="#0369a1" stroke-width="1.5" stroke-linejoin="round" />
        
        <polygon points="140,40 190,65 260,30 210,5" fill="#7dd3fc" stroke="#0284c7" stroke-width="1.5" stroke-linejoin="round" />

        
        <text x="195" y="80" fill="#0c4a6e" font-size="14" font-weight="800" text-anchor="middle">Prism A</text>
      </g>

      
      <g class="split-arrow">
        <line x1="115" y1="90" x2="95" y2="55" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr-up)" />
        <line x1="285" y1="180" x2="300" y2="202" stroke="#d97706" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr-down)" />
      </g>
    </svg>
  </div>

  
  <div class="formula-bar">
    <span class="tag-total">Total Volume</span>
    <span class="op">=</span>
    <span class="tag-a">Volume of A</span>
    <span class="op">+</span>
    <span class="tag-b">Volume of B</span>
  </div>

  <script>
    const scene = document.getElementById('scene');
    const btnCombined = document.getElementById('btnCombined');
    const btnSeparate = document.getElementById('btnSeparate');
    const btnPlay = document.getElementById('btnPlay');

    let isSplit = true;
    let isPlaying = true;
    let timer = null;

    function setSplit(split) {
      isSplit = split;
      if (isSplit) {
        scene.classList.add('split');
        btnSeparate.classList.add('active');
        btnCombined.classList.remove('active');
      } else {
        scene.classList.remove('split');
        btnCombined.classList.add('active');
        btnSeparate.classList.remove('active');
      }
    }

    function toggleAuto() {
      setSplit(!isSplit);
    }

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(toggleAuto, 3200);
      btnPlay.textContent = '⏸';
      isPlaying = true;
    }

    function stopLoop() {
      if (timer) clearInterval(timer);
      btnPlay.textContent = '▶';
      isPlaying = false;
    }

    btnCombined.addEventListener('click', () => {
      stopLoop();
      setSplit(false);
    });

    btnSeparate.addEventListener('click', () => {
      stopLoop();
      setSplit(true);
    });

    btnPlay.addEventListener('click', () => {
      if (isPlaying) {
        stopLoop();
      } else {
        toggleAuto();
        startLoop();
      }
    });

    // Start pedagogical slow loop
    startLoop();
  </script>
</body>
</html>

Understanding Volume by Adding Parts

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .main-layout {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 18px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 520px) {
      .main-layout {
        flex-direction: column;
        gap: 12px;
      }
    }

    /* 3D SVG container */
    .iso-container {
      flex: 1 1 270px;
      max-width: 310px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

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

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

    .dim-line {
      stroke: #64748b;
      stroke-width: 1.25;
      stroke-linecap: round;
    }

    .dim-text {
      font-size: 11px;
      font-weight: 700;
      fill: #334155;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Computation Stack */
    .stack-container {
      flex: 1 1 250px;
      max-width: 290px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-row {
      padding: 9px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .card-row.prism-a {
      border-left: 5px solid #0d9488;
    }

    .card-row.prism-b {
      border-left: 5px solid #6366f1;
    }

    .card-row.active-a {
      background: #f0fdfa;
      border-color: #0d9488;
      box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
    }

    .card-row.active-b {
      background: #eef2ff;
      border-color: #6366f1;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
    }

    .row-title {
      font-size: 12px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }

    .tag-a { color: #0d9488; }
    .tag-b { color: #6366f1; }

    .formula {
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
      letter-spacing: -0.2px;
    }

    .formula span {
      font-weight: 700;
    }

    .divider {
      height: 1px;
      background: #cbd5e1;
      margin: 2px 0;
    }

    .total-card {
      padding: 10px 12px;
      border-radius: 8px;
      background: #0f172a;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .total-label {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
    }

    .total-value {
      font-size: 15px;
      font-weight: 700;
      color: #38bdf8;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="iso-container">
      <svg viewBox="0 0 280 230">
        <defs>
          
          <linearGradient id="aTop" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#14b8a6"/>
            <stop offset="1%" stop-color="#0d9488"/>
          </linearGradient>
          
          <linearGradient id="bTop" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#818cf8"/>
            <stop offset="1%" stop-color="#6366f1"/>
          </linearGradient>
        </defs>

        
        
        <g id="groupA" class="shape-group" onclick="selectPrism('a')">
          
          
          
          <polygon id="aLeft" class="face" points="82,172 47,192 47,96 82,76" fill="#0f766e"/>
          
          
          
          
          <polygon id="aFront" class="face" points="47,192 99.5,222 99.5,126 47,96" fill="#0d9488"/>
          
          
          
          
          <polygon id="aTopFace" class="face" points="82,76 47,96 99.5,126 134.5,106" fill="url(#aTop)"/>

          
          <circle cx="91" cy="100" r="10" fill="#ffffff" filter="drop-shadow(0 1px 2px rgba(0,0,0,0.15))"/>
          <text x="91" y="100" class="dim-text" fill="#0f766e" font-size="11">A</text>
        </g>

        
        <g id="groupB" class="shape-group" onclick="selectPrism('b')">
          
          
          
          <polygon id="aStepFace" class="face" points="134.5,154 99.5,174 99.5,126 134.5,106" fill="#0b5e56"/>

          
          
          
          
          
          
          <polygon id="bFront" class="face" points="99.5,174 187,224 187,176 99.5,126" fill="#6366f1"/>

          
          
          
          <polygon id="bTopFace" class="face" points="134.5,154 99.5,174 187,224 222,204" fill="url(#bTop)"/>

          
          
          
          <polygon id="bRight" class="face" points="187,224 222,204 222,156 187,176" fill="#4338ca"/>

          
          <circle cx="160" cy="180" r="10" fill="#ffffff" filter="drop-shadow(0 1px 2px rgba(0,0,0,0.15))"/>
          <text x="160" y="180" class="dim-text" fill="#4338ca" font-size="11">B</text>
        </g>

        
        
        <line x1="39" y1="94" x2="39" y2="190" class="dim-line"/>
        <line x1="35" y1="94" x2="43" y2="94" class="dim-line"/>
        <line x1="35" y1="190" x2="43" y2="190" class="dim-line"/>
        <text x="24" y="142" class="dim-text">4 cm</text>

        
        <line x1="47" y1="202" x2="97" y2="231" class="dim-line"/>
        <line x1="44" y1="197" x2="50" y2="207" class="dim-line"/>
        <line x1="94" y1="226" x2="100" y2="236" class="dim-line"/>
        <text x="70" y="222" class="dim-text">3 cm</text>

        
        <line x1="102" y1="184" x2="187" y2="233" class="dim-line"/>
        <line x1="99" y1="179" x2="105" y2="189" class="dim-line"/>
        <line x1="184" y1="228" x2="190" y2="238" class="dim-line"/>
        <text x="144" y="214" class="dim-text">5 cm</text>

        
        <line x1="193" y1="227" x2="228" y2="207" class="dim-line"/>
        <line x1="190" y1="222" x2="196" y2="232" class="dim-line"/>
        <line x1="225" y1="202" x2="231" y2="212" class="dim-line"/>
        <text x="220" y="224" class="dim-text">2 cm</text>

        
        <line x1="230" y1="158" x2="230" y2="202" class="dim-line"/>
        <line x1="226" y1="158" x2="234" y2="158" class="dim-line"/>
        <line x1="226" y1="202" x2="234" y2="202" class="dim-line"/>
        <text x="252" y="180" class="dim-text">2 cm</text>
      </svg>
    </div>

    
    <div class="stack-container">
      
      <div id="cardA" class="card-row prism-a" onclick="selectPrism('a')">
        <div class="row-title">
          <span class="tag-a">Prism A</span>
          <span style="font-size:11px;color:#64748b;">3 × 2 × 4</span>
        </div>
        <div class="formula">
          3 × 2 × 4 = <span style="color:#0d9488;">24 cm³</span>
        </div>
      </div>

      
      <div id="cardB" class="card-row prism-b" onclick="selectPrism('b')">
        <div class="row-title">
          <span class="tag-b">Prism B</span>
          <span style="font-size:11px;color:#64748b;">5 × 2 × 2</span>
        </div>
        <div class="formula">
          5 × 2 × 2 = <span style="color:#6366f1;">20 cm³</span>
        </div>
      </div>

      <div class="divider"></div>

      
      <div class="total-card" onclick="selectPrism('all')">
        <div>
          <div class="total-label">Total Volume</div>
          <div style="font-size:13px;color:#cbd5e1;font-weight:600;">24 + 20</div>
        </div>
        <div class="total-value">44 cm³</div>
      </div>
    </div>
  </div>

  <script>
    let activeState = 'all';

    function selectPrism(prism) {
      const cardA = document.getElementById('cardA');
      const cardB = document.getElementById('cardB');
      const groupA = document.getElementById('groupA');
      const groupB = document.getElementById('groupB');

      if (activeState === prism) {
        activeState = 'all';
      } else {
        activeState = prism;
      }

      if (activeState === 'a') {
        cardA.classList.add('active-a');
        cardB.classList.remove('active-b');
        groupA.style.opacity = '1';
        groupB.style.opacity = '0.35';
      } else if (activeState === 'b') {
        cardA.classList.remove('active-a');
        cardB.classList.add('active-b');
        groupA.style.opacity = '0.35';
        groupB.style.opacity = '1';
      } else {
        cardA.classList.remove('active-a');
        cardB.classList.remove('active-b');
        groupA.style.opacity = '1';
        groupB.style.opacity = '1';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Volume of Rectangular Prism</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100vh;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 12px 8px;
      user-select: none;
    }
    .badge {
      background: #f0f9ff;
      border: 1.5px solid #0284c7;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 700;
      color: #0369a1;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.1);
      display: flex;
      align-items: center;
      gap: 6px;
      text-align: center;
    }
    .badge span {
      color: #0284c7;
    }
    .svg-container {
      width: 100%;
      max-width: 380px;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .cube-top {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 1.25;
      stroke-linejoin: round;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }
    .cube-right {
      fill: #bae6fd;
      stroke: #0284c7;
      stroke-width: 1.25;
      stroke-linejoin: round;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }
    .cube-left {
      fill: #7dd3fc;
      stroke: #0284c7;
      stroke-width: 1.25;
      stroke-linejoin: round;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }
    .cube.dimmed {
      opacity: 0.12;
    }
    .dim-label {
      font-size: 12.5px;
      font-weight: 700;
      fill: #0369a1;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    .dim-bracket {
      stroke: #0369a1;
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 340px;
      justify-content: center;
    }
    .btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 8px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .btn:hover {
      border-color: #0284c7;
      color: #0284c7;
      background: #f8fafc;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="badge">
    Volume = 4 × 3 × 2 = <span>24 cm³</span>
  </div>

  <div class="svg-container">
    
    <svg viewBox="-30 -10 415 240" xmlns="http://www.w3.org/2000/svg">
      
      <g id="cubes-layer-0"></g>
      <g id="cubes-layer-1"></g>

      
      <path class="dim-bracket" d="M 95,122 L 87,122 L 87,54 L 95,54" />
      <text x="80" y="90" class="dim-label" text-anchor="end" dominant-baseline="middle">Height = 2 cm</text>

      
      <path class="dim-bracket" d="M 97,127 L 89,136 L 201,198 L 209,189" />
      <text x="139" y="180" class="dim-label" text-anchor="middle" transform="rotate(29, 139, 180)">Length = 4 cm</text>

      
      <path class="dim-bracket" d="M 217,189 L 225,198 L 309,151 L 301,142" />
      <text x="273" y="186" class="dim-label" text-anchor="middle" transform="rotate(-29, 273, 186)">Width = 3 cm</text>
    </svg>
  </div>

  <div class="controls">
    <button class="btn active" id="btn-all" onclick="setView('all')">All (24)</button>
    <button class="btn" id="btn-layer0" onclick="setView('bottom')">Layer 1 (12)</button>
    <button class="btn" id="btn-layer1" onclick="setView('top')">Layer 2 (12)</button>
  </div>

  <script>
    // Isometric projection setup
    const originX = 185;
    const originY = 75;
    const dxX = 28, dyX = 15.5;
    const dxY = -28, dyY = 15.5;
    const dzY = -34;

    function pt(x, y, z) {
      return {
        x: originX + x * dxX + y * dxY,
        y: originY + x * dyX + y * dyY + z * dzY
      };
    }

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

      const p4 = pt(x, y, z + 1);
      const p5 = pt(x + 1, y, z + 1);
      const p6 = pt(x + 1, y + 1, z + 1);
      const p7 = pt(x, y + 1, z + 1);

      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      g.setAttribute('class', 'cube');
      g.setAttribute('data-layer', z);

      // Top face
      const top = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      top.setAttribute('points', `${p4.x},${p4.y} ${p5.x},${p5.y} ${p6.x},${p6.y} ${p7.x},${p7.y}`);
      top.setAttribute('class', 'cube-top');

      // Left face (faces front-left)
      const left = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      left.setAttribute('points', `${p3.x},${p3.y} ${p7.x},${p7.y} ${p6.x},${p6.y} ${p2.x},${p2.y}`);
      left.setAttribute('class', 'cube-left');

      // Right face (faces front-right)
      const right = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
      right.setAttribute('points', `${p1.x},${p1.y} ${p5.x},${p5.y} ${p6.x},${p6.y} ${p2.x},${p2.y}`);
      right.setAttribute('class', 'cube-right');

      g.appendChild(top);
      g.appendChild(left);
      g.appendChild(right);

      return g;
    }

    // Build cubes back-to-front (isometric painter's algorithm)
    const layer0 = document.getElementById('cubes-layer-0');
    const layer1 = document.getElementById('cubes-layer-1');

    for (let z = 0; z < 2; z++) {
      const targetLayer = (z === 0) ? layer0 : layer1;
      for (let sum = 0; sum <= 3 + 2; sum++) {
        for (let x = 0; x < 4; x++) {
          const y = sum - x;
          if (y >= 0 && y < 3) {
            targetLayer.appendChild(drawCube(x, y, z));
          }
        }
      }
    }

    function setView(view) {
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      const cubes = document.querySelectorAll('.cube');

      if (view === 'all') {
        document.getElementById('btn-all').classList.add('active');
        cubes.forEach(c => c.classList.remove('dimmed'));
      } else if (view === 'bottom') {
        document.getElementById('btn-layer0').classList.add('active');
        cubes.forEach(c => {
          if (c.getAttribute('data-layer') === '0') {
            c.classList.remove('dimmed');
          } else {
            c.classList.add('dimmed');
          }
        });
      } else if (view === 'top') {
        document.getElementById('btn-layer1').classList.add('active');
        cubes.forEach(c => {
          if (c.getAttribute('data-layer') === '1') {
            c.classList.remove('dimmed');
          } else {
            c.classList.add('dimmed');
          }
        });
      }
    }
  </script>
</body>
</html>

OGM.6.GM.7

Aligned learning resources

Related diagrams