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

Have you ever rolled a game die or stacked toy blocks to make a tall tower?

Both of these fun toys share the exact same shape called a **cube**.

A flat square lives flat on paper, but a **cube** is a solid **3D shape** you can pick up and hold in your hands.

<!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; user-select: none; }
    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;
      min-height: 100%;
      padding: 12px;
    }

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

    .comparison {
      display: flex;
      width: 100%;
      justify-content: center;
      gap: 16px;
    }

    .card-box {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 220px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .tag {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .sub-tag {
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      margin-top: 2px;
    }

    /* 2D Flat Square */
    .square-stage {
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .flat-square {
      width: 80px;
      height: 80px;
      background: #e0f2fe;
      border: 3px solid #22b7ff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      color: #0284c7;
    }

    /* 3D Cube Stage */
    .cube-stage {
      width: 120px;
      height: 120px;
      perspective: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      touch-action: none;
    }

    .cube-stage:active {
      cursor: grabbing;
    }

    .cube {
      width: 70px;
      height: 70px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(-22deg) rotateY(32deg);
      transition: transform 0.1s ease-out;
    }

    .cube-face {
      position: absolute;
      width: 70px;
      height: 70px;
      background: rgba(34, 183, 255, 0.82);
      border: 2px solid #ffffff;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      color: #ffffff;
      box-shadow: inset 0 0 10px rgba(2, 132, 199, 0.3);
    }

    .face-front  { transform: translateZ(35px); }
    .face-back   { transform: rotateY(180deg) translateZ(35px); background: rgba(2, 132, 199, 0.85); }
    .face-right  { transform: rotateY(90deg) translateZ(35px); background: rgba(14, 165, 233, 0.85); }
    .face-left   { transform: rotateY(-90deg) translateZ(35px); background: rgba(56, 189, 248, 0.85); }
    .face-top    { transform: rotateX(90deg) translateZ(35px); background: rgba(125, 211, 252, 0.9); color: #0369a1; }
    .face-bottom { transform: rotateX(-90deg) translateZ(35px); background: rgba(3, 105, 161, 0.85); }

    .hint {
      font-size: 12px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 20px;
      padding: 6px 14px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="comparison">
      
      <div class="card-box">
        <div>
          <div class="tag">2D Square</div>
          <div class="sub-tag">Flat</div>
        </div>
        
        <div class="square-stage">
          <div class="flat-square">1 Face</div>
        </div>

        <div class="sub-tag">4 straight edges</div>
      </div>

      
      <div class="card-box">
        <div>
          <div class="tag">3D Cube</div>
          <div class="sub-tag">Solid</div>
        </div>
        
        <div class="cube-stage" id="cubeStage">
          <div class="cube" id="cube">
            <div class="cube-face face-front">1</div>
            <div class="cube-face face-back">6</div>
            <div class="cube-face face-right">2</div>
            <div class="cube-face face-left">5</div>
            <div class="cube-face face-top">3</div>
            <div class="cube-face face-bottom">4</div>
          </div>
        </div>

        <div class="hint">↺ Drag to Turn</div>
      </div>
    </div>

    <div class="badge">6 Equal Square Faces</div>
  </div>

  <script>
    const stage = document.getElementById('cubeStage');
    const cube = document.getElementById('cube');

    let rotX = -22;
    let rotY = 32;
    let isDragging = false;
    let startX = 0;
    let startY = 0;
    let autoRotate = true;

    function updateTransform() {
      cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
    }

    // Auto rotate gently when not interacting
    setInterval(() => {
      if (autoRotate && !isDragging) {
        rotY = (rotY + 0.6) % 360;
        updateTransform();
      }
    }, 30);

    function startDrag(x, y) {
      isDragging = true;
      autoRotate = false;
      startX = x;
      startY = y;
    }

    function moveDrag(x, y) {
      if (!isDragging) return;
      const dx = x - startX;
      const dy = y - startY;
      rotY += dx * 0.8;
      rotX -= dy * 0.8;
      rotX = Math.max(-80, Math.min(80, rotX));
      startX = x;
      startY = y;
      updateTransform();
    }

    function endDrag() {
      isDragging = false;
    }

    // Pointer events
    stage.addEventListener('pointerdown', (e) => {
      startDrag(e.clientX, e.clientY);
      stage.setPointerCapture(e.pointerId);
    });

    stage.addEventListener('pointermove', (e) => {
      moveDrag(e.clientX, e.clientY);
    });

    stage.addEventListener('pointerup', (e) => {
      endDrag();
      try { stage.releasePointerCapture(e.pointerId); } catch(err) {}
    });

    stage.addEventListener('pointercancel', endDrag);
  </script>
</body>
</html>

Every side of a cube is a flat square, and all six sides are the exact same size!

Can you spot cubes hiding all around your house?

Look around your play area and kitchen to find everyday objects shaped just like a cube.

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

    .nav-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }

    .tab-btn {
      flex: 1 1 calc(25% - 6px);
      min-width: 75px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

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

    .display-area {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 250px;
      margin: 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .view-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .view-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

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

    .badge-pill {
      font-size: 15px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      margin-top: 4px;
    }

    /* Real World Grid */
    .real-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      padding: 8px;
    }

    .real-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }

    .real-icon {
      font-size: 38px;
      line-height: 1;
    }

    .real-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Edge / Face styling */
    .face {
      transition: fill 0.3s ease, opacity 0.3s ease;
    }
    .edge-line {
      transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
    }
    .vertex-dot {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setMode(0)">6 Faces</button>
    <button class="tab-btn" onclick="setMode(1)">12 Edges</button>
    <button class="tab-btn" onclick="setMode(2)">8 Corners</button>
    <button class="tab-btn" onclick="setMode(3)">Real Cubes</button>
  </div>

  
  <div class="display-area">
    
    
    <div class="view-panel active" id="cube-panel">
      <svg viewBox="0 0 300 240">
        
        <polygon id="back-face" points="150,50 81,90 81,170 150,130" fill="#e2e8f0" opacity="0.4" />
        
        
        <line id="he1" x1="150" y1="50" x2="150" y2="130" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4" />
        <line id="he2" x1="150" y1="130" x2="81" y2="170" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4" />
        <line id="he3" x1="150" y1="130" x2="219" y2="170" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4" />

        
        
        <polygon id="face-top" class="face" points="150,50 219,90 150,130 81,90" fill="#bae6fd" stroke="#0284c7" stroke-width="2" stroke-linejoin="round" />
        
        <polygon id="face-left" class="face" points="81,90 150,130 150,210 81,170" fill="#7dd3fc" stroke="#0284c7" stroke-width="2" stroke-linejoin="round" />
        
        <polygon id="face-right" class="face" points="150,130 219,90 219,170 150,210" fill="#38bdf8" stroke="#0284c7" stroke-width="2" stroke-linejoin="round" />

        
        <g id="edges-group">
          <line class="edge-line e-vis" x1="150" y1="50" x2="219" y2="90" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="219" y1="90" x2="150" y2="130" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="150" y1="130" x2="81" y2="90" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="81" y1="90" x2="150" y2="50" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="81" y1="90" x2="81" y2="170" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="150" y1="130" x2="150" y2="210" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="219" y1="90" x2="219" y2="170" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="81" y1="170" x2="150" y2="210" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          <line class="edge-line e-vis" x1="150" y1="210" x2="219" y2="170" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
        </g>

        
        <g id="vertices-group" opacity="0">
          <circle class="vertex-dot" cx="150" cy="50" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="219" cy="90" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="81" cy="90" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="150" cy="130" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="81" cy="170" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="219" cy="170" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="150" cy="210" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" />
          <circle class="vertex-dot" cx="150" cy="130" r="6" fill="#f59e0b" stroke="#ffffff" stroke-width="2" opacity="0.6" />
        </g>
      </svg>
      <div class="badge-pill" id="feature-badge">6 Flat Faces</div>
    </div>

    
    <div class="view-panel" id="real-panel">
      <div class="real-grid">
        <div class="real-card">
          <span class="real-icon">🎲</span>
          <span class="real-label">Dice</span>
        </div>
        <div class="real-card">
          <span class="real-icon">🔤</span>
          <span class="real-label">Block</span>
        </div>
        <div class="real-card">
          <span class="real-icon">🧊</span>
          <span class="real-label">Ice</span>
        </div>
      </div>
      <div class="badge-pill">Everyday Cubes</div>
    </div>

  </div>

  <script>
    let activeIdx = 0;
    const tabs = document.querySelectorAll('.tab-btn');
    const cubePanel = document.getElementById('cube-panel');
    const realPanel = document.getElementById('real-panel');
    const badge = document.getElementById('feature-badge');
    const vertices = document.getElementById('vertices-group');
    const edgeLines = document.querySelectorAll('.e-vis');
    const hiddenEdges = [document.getElementById('he1'), document.getElementById('he2'), document.getElementById('he3')];
    const faces = [document.getElementById('face-top'), document.getElementById('face-left'), document.getElementById('face-right')];

    function setMode(idx) {
      activeIdx = idx;
      tabs.forEach((t, i) => t.classList.toggle('active', i === idx));

      if (idx === 3) {
        cubePanel.classList.remove('active');
        realPanel.classList.add('active');
        return;
      }

      realPanel.classList.remove('active');
      cubePanel.classList.add('active');

      if (idx === 0) {
        // Faces
        badge.textContent = "6 Flat Faces";
        badge.style.color = "#0284c7";
        vertices.setAttribute('opacity', '0');
        faces.forEach((f, i) => {
          f.setAttribute('fill', ['#bae6fd', '#7dd3fc', '#38bdf8'][i]);
          f.setAttribute('opacity', '1');
        });
        edgeLines.forEach(e => {
          e.setAttribute('stroke', '#0284c7');
          e.setAttribute('stroke-width', '2.5');
        });
        hiddenEdges.forEach(e => {
          e.setAttribute('stroke', '#cbd5e1');
          e.setAttribute('stroke-width', '2');
        });
      } else if (idx === 1) {
        // Edges
        badge.textContent = "12 Straight Edges";
        badge.style.color = "#2563eb";
        vertices.setAttribute('opacity', '0');
        faces.forEach(f => {
          f.setAttribute('fill', '#f1f5f9');
          f.setAttribute('opacity', '0.6');
        });
        edgeLines.forEach(e => {
          e.setAttribute('stroke', '#2563eb');
          e.setAttribute('stroke-width', '4.5');
        });
        hiddenEdges.forEach(e => {
          e.setAttribute('stroke', '#2563eb');
          e.setAttribute('stroke-width', '3.5');
        });
      } else if (idx === 2) {
        // Corners
        badge.textContent = "8 Pointy Corners";
        badge.style.color = "#d97706";
        vertices.setAttribute('opacity', '1');
        faces.forEach(f => {
          f.setAttribute('fill', '#f8fafc');
          f.setAttribute('opacity', '0.5');
        });
        edgeLines.forEach(e => {
          e.setAttribute('stroke', '#cbd5e1');
          e.setAttribute('stroke-width', '2');
        });
        hiddenEdges.forEach(e => {
          e.setAttribute('stroke', '#e2e8f0');
          e.setAttribute('stroke-width', '1.5');
        });
      }
    }

    // Auto rotate every 3.5 seconds
    let timer = setInterval(() => {
      setMode((activeIdx + 1) % 4);
    }, 3500);

    // Pause auto timer on click
    tabs.forEach(tab => {
      tab.addEventListener('click', () => clearInterval(timer));
    });
  </script>
</body>
</html>

Alphabet blocks, game dice, and square ice cubes are all real-world cubes.

What happens if a box has sides that are long and stretched out instead of square?

To be a true cube, every single side must be a **square** — if a box has long rectangle sides like a cereal box, it is not a cube!

<!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;
      -webkit-tap-highlight-color: transparent;
    }

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

    .container {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Mode switcher */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.3);
    }

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

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

    .shape-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.25s ease, transform 0.25s ease;
    }

    .shape-card.cube-card {
      border-color: rgba(34, 197, 94, 0.3);
    }

    .shape-card.non-cube-card {
      border-color: rgba(239, 68, 68, 0.2);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      margin-bottom: 8px;
    }

    .badge-cube {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-box {
      background: #fee2e2;
      color: #b91c1c;
    }

    .canvas-box {
      width: 100%;
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .face {
      transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
    }

    .face-cube-top { fill: #60a5fa; }
    .face-cube-front { fill: #3b82f6; }
    .face-cube-right { fill: #1d4ed8; }

    .face-box-top { fill: #fb923c; }
    .face-box-front { fill: #f97316; }
    .face-box-right { fill: #c2410c; }

    .net-face {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    .label-tag {
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      margin-top: 6px;
    }

    .equal-mark {
      stroke: #ffffff;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .view-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .view-layer {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .view-layer.hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.92);
    }
  </style>
</head>
<body>

<div class="container">
  <div class="controls">
    <button class="btn active" id="btn3D" onclick="setView('3d')">📦 3D Box</button>
    <button class="btn" id="btnNet" onclick="setView('net')">✦ Flat Faces</button>
  </div>

  <div class="grid">
    
    <div class="shape-card cube-card">
      <div class="badge badge-cube">✓ Cube</div>
      
      <div class="canvas-box">
        <div class="view-container">
          
          <div class="view-layer" id="cube3D">
            <svg viewBox="0 0 200 180">
              
              <g transform="translate(100, 95)">
                
                <polygon class="face face-cube-top" points="0,-60 52,-30 0,0 -52,-30" stroke="#ffffff" stroke-width="2"/>
                
                <polygon class="face face-cube-front" points="-52,-30 0,0 0,60 -52,30" stroke="#ffffff" stroke-width="2"/>
                
                <polygon class="face face-cube-right" points="0,0 52,-30 52,30 0,60" stroke="#ffffff" stroke-width="2"/>
                
                
                <line x1="-28" y1="-14" x2="-24" y2="-16" class="equal-mark"/>
                <line x1="24" y1="-16" x2="28" y2="-14" class="equal-mark"/>
                <line x1="-28" y1="16" x2="-24" y2="14" class="equal-mark"/>
                <line x1="24" y1="14" x2="28" y2="16" class="equal-mark"/>
                <line x1="-2" y1="28" x2="2" y2="28" class="equal-mark"/>
              </g>
            </svg>
          </div>

          
          <div class="view-layer hidden" id="cubeNet">
            <svg viewBox="0 0 200 180">
              <g transform="translate(100, 90)">
                
                
                <rect x="-18" y="-62" width="36" height="36" fill="#60a5fa" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                
                <rect x="-72" y="-22" width="36" height="36" fill="#3b82f6" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                <rect x="-36" y="-22" width="36" height="36" fill="#2563eb" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                <rect x="0" y="-22" width="36" height="36" fill="#1d4ed8" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                <rect x="36" y="-22" width="36" height="36" fill="#1e40af" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                
                <rect x="-18" y="18" width="36" height="36" fill="#3b82f6" rx="2" stroke="#ffffff" stroke-width="1.5"/>
              </g>
            </svg>
          </div>
        </div>
      </div>

      <div class="label-tag">6 Square Sides</div>
    </div>

    
    <div class="shape-card non-cube-card">
      <div class="badge badge-box">✗ Not a Cube</div>

      <div class="canvas-box">
        <div class="view-container">
          
          <div class="view-layer" id="box3D">
            <svg viewBox="0 0 200 180">
              
              <g transform="translate(100, 95)">
                
                <polygon class="face face-box-top" points="0,-75 42,-55 0,-35 -42,-55" stroke="#ffffff" stroke-width="2"/>
                
                <polygon class="face face-box-front" points="-42,-55 0,-35 0,65 -42,45" stroke="#ffffff" stroke-width="2"/>
                
                <polygon class="face face-box-right" points="0,-35 42,-55 42,45 0,65" stroke="#ffffff" stroke-width="2"/>
              </g>
            </svg>
          </div>

          
          <div class="view-layer hidden" id="boxNet">
            <svg viewBox="0 0 200 180">
              <g transform="translate(100, 90)">
                
                
                <rect x="-14" y="-62" width="28" height="20" fill="#fb923c" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                
                <rect x="-64" y="-38" width="24" height="64" fill="#f97316" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                <rect x="-38" y="-38" width="36" height="64" fill="#ea580c" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                <rect x="0" y="-38" width="24" height="64" fill="#c2410c" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                <rect x="26" y="-38" width="36" height="64" fill="#9a3412" rx="2" stroke="#ffffff" stroke-width="1.5"/>
                
                <rect x="-14" y="30" width="28" height="20" fill="#f97316" rx="2" stroke="#ffffff" stroke-width="1.5"/>
              </g>
            </svg>
          </div>
        </div>
      </div>

      <div class="label-tag">Rectangle Sides</div>
    </div>
  </div>
</div>

<script>
  function setView(mode) {
    const is3D = mode === '3d';
    
    document.getElementById('btn3D').classList.toggle('active', is3D);
    document.getElementById('btnNet').classList.toggle('active', !is3D);

    document.getElementById('cube3D').classList.toggle('hidden', !is3D);
    document.getElementById('cubeNet').classList.toggle('hidden', is3D);

    document.getElementById('box3D').classList.toggle('hidden', !is3D);
    document.getElementById('boxNet').classList.toggle('hidden', is3D);
  }
</script>

</body>
</html>

Next time you play with your toys, count the flat square sides to see if you are holding a real cube!

math

Recognizing and Naming Cubes. Identify cubes in models and everyday objects like dice and building blocks.

Recognising 3D Shapes: Early and First Level Maths

Identify and Select Three-Dimensional Shapes: Cubes

Building Blocks - Early Years and Primary 3D Spatial Reasoning

Teaching cubes at Curriculum for Excellence Early Level (P1) requires a concrete-pictorial-abstract (CPA) approach. Begin with multi-sensory physical exploration using real tactile objects (dice, wooden unit blocks, linking cubes) to let children feel the $6$ flat faces and pointy corners. Encourage positional and mathematical talk (e.g., 'flat', 'square faces', 'corners', 'stacking'). Reinforce that cubes maintain their shape regardless of orientation or color, and use sorting games ('Cube / Not a Cube') to help learners distinguish cubes from elongated cuboids and 2D squares.

Recognizing and Naming Cubes

What Is a Cube?

Cubes in Everyday Life

Cube Detective: Is It a Cube?