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

What happens if you peel the paper wrapper off a soup can and lay it flat?

It turns into a flat sheet, just like magic!

How can flat 2D shapes fold up into 3D shapes?

A **net** is a flat shape you can fold or roll to make a solid 3D object.

A **cylinder** is shaped like a can, with a round body and flat circular lids on top and bottom.

When you unroll a cylinder, the tube flattens into one **rectangle**, attached to **two circles**.

<!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>Net of Cylinder and Cone</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, 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;
    }
    .tabs {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 999px;
    }
    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .canvas-container {
      width: 100%;
      max-width: 440px;
      height: 250px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .controls {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }
    .slider-row {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }
    input[type="range"] {
      flex: 1;
      accent-color: #0284c7;
      height: 6px;
      cursor: pointer;
    }
    .label-text {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .sub-label {
      font-size: 11px;
      font-weight: 600;
      fill: #0284c7;
      text-anchor: middle;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tabCyl" onclick="setShape('cylinder')">Cylinder</button>
    <button class="tab-btn" id="tabCone" onclick="setShape('cone')">Cone</button>
  </div>

  
  <div class="canvas-container">
    <svg viewBox="0 0 400 240" id="diagramSvg">
      
    </svg>
  </div>

  
  <div class="controls">
    <div class="slider-row">
      <span>3D Shape</span>
      <input type="range" id="foldSlider" min="0" max="100" value="0" oninput="render()">
      <span>Flat Net</span>
    </div>
  </div>

  <script>
    let currentShape = 'cylinder';
    const slider = document.getElementById('foldSlider');
    const svg = document.getElementById('diagramSvg');

    function setShape(shape) {
      currentShape = shape;
      document.getElementById('tabCyl').classList.toggle('active', shape === 'cylinder');
      document.getElementById('tabCone').classList.toggle('active', shape === 'cone');
      render();
    }

    function lerp(a, b, t) {
      return a + (b - a) * t;
    }

    function render() {
      const t = slider.value / 100; // 0 = 3D, 1 = Flat Net
      svg.innerHTML = '';

      if (currentShape === 'cylinder') {
        renderCylinder(t);
      } else {
        renderCone(t);
      }
    }

    function renderCylinder(t) {
      // 3D width: 90, Flat Net width: 190
      const bodyW = lerp(90, 190, t);
      const bodyH = lerp(110, 80, t);
      const cx = 200;
      const cy = 120;

      const topY = cy - bodyH / 2;
      const botY = cy + bodyH / 2;
      const rx = bodyW / 2;
      const ry3d = 18 * (1 - t); // Flattens circle perspective
      const rCap = 25; // True circle radius when detached

      // Base circles offset in 2D net
      const topCapY = lerp(topY, topY - rCap - 4, t);
      const botCapY = lerp(botY, botY + rCap + 4, t);
      const capRx = lerp(rx, rCap, t);
      const capRy = lerp(ry3d, rCap, t);

      // Body / Tube (rectangle unfolding)
      const rectX = cx - bodyW / 2;
      const rectY = topY;

      let html = `
        <defs>
          <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#38bdf8" />
            <stop offset="50%" stop-color="${t > 0.5 ? '#7dd3fc' : '#bae6fd'}" />
            <stop offset="100%" stop-color="#0284c7" />
          </linearGradient>
        </defs>

        
        <rect x="${rectX}" y="${rectY}" width="${bodyW}" height="${bodyH}" rx="${(1-t)*4}"
              fill="url(#bodyGrad)" stroke="#0284c7" stroke-width="2" />
        
        
        <ellipse cx="${cx}" cy="${topCapY}" rx="${capRx}" ry="${capRy}"
                 fill="#e0f2fe" stroke="#0284c7" stroke-width="2" />
        
        
        <ellipse cx="${cx}" cy="${botCapY}" rx="${capRx}" ry="${capRy}"
                 fill="#e0f2fe" stroke="#0284c7" stroke-width="2" />
      `;

      if (t > 0.6) {
        html += `
          <text x="${cx}" y="${topCapY}" class="label-text">Circle</text>
          <text x="${cx}" y="${cy}" class="label-text">Rectangle</text>
          <text x="${cx}" y="${botCapY}" class="label-text">Circle</text>
        `;
      } else if (t < 0.2) {
        html += `
          <text x="${cx}" y="${cy}" class="label-text" fill="#0f172a">Cylinder</text>
        `;
      }

      svg.innerHTML = html;
    }

    function renderCone(t) {
      const cx = 200;
      const apexY = lerp(45, 60, t);
      const baseH = lerp(120, 110, t);
      const halfW = lerp(50, 105, t);
      const rCap = 25;

      // Unfolded sector angle
      const spread = lerp(0, 110, t); // degrees half-spread
      const rCone = lerp(125, 115, t);

      // Base circle movement
      const baseCircleY = lerp(apexY + baseH, apexY + rCone + rCap + 6, t);
      const capRx = lerp(halfW, rCap, t);
      const capRy = lerp(16 * (1 - t), rCap, t);

      // Curved sector net path
      const angleRad = (spread * Math.PI) / 180;
      const xLeft = cx - rCone * Math.sin(angleRad);
      const yLeft = apexY + rCone * Math.cos(angleRad);
      const xRight = cx + rCone * Math.sin(angleRad);
      const yRight = apexY + rCone * Math.cos(angleRad);

      const pathData = t < 0.05 
        ? `M ${cx} ${apexY} L ${cx - 50} ${apexY + baseH} Q ${cx} ${apexY + baseH + 16} ${cx + 50} ${apexY + baseH} Z`
        : `M ${cx} ${apexY} L ${xLeft} ${yLeft} A ${rCone} ${rCone} 0 0 0 ${xRight} ${yRight} Z`;

      let html = `
        
        <path d="${pathData}" fill="#fed7aa" stroke="#ea580c" stroke-width="2" />
        
        
        <ellipse cx="${cx}" cy="${baseCircleY}" rx="${capRx}" ry="${capRy}"
                 fill="#ffedd5" stroke="#ea580c" stroke-width="2" />
      `;

      if (t > 0.6) {
        html += `
          <text x="${cx}" y="${apexY + 55}" class="label-text">Sector</text>
          <text x="${cx}" y="${baseCircleY}" class="label-text">Circle</text>
        `;
      } else if (t < 0.2) {
        html += `
          <text x="${cx}" y="${apexY + 65}" class="label-text">Cone</text>
        `;
      }

      svg.innerHTML = html;
    }

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

What shape do you get if you unfold a pointy party hat instead?

A **cone** looks like a party hat or an ice cream cone, with one pointy tip and one flat round bottom.

When you open a cone flat, the pointy side unfolds into a pie slice called a **sector**, along with **one circle** for the base.

<!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>Nets of Cylinder and Cone</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  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;
  }
  .app-container {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .nav-group {
    display: flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 10px;
    width: 100%;
    gap: 4px;
  }
  .nav-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .nav-btn.active.cone-theme {
    color: #d97706;
  }
  .stage-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px;
  }
  .svg-wrap {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .toggle-bar {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
    justify-content: center;
  }
  .view-btn {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .view-btn.active {
    border-color: #0284c7;
    background: #e0f2fe;
    color: #0369a1;
  }
  .cone-active .view-btn.active {
    border-color: #d97706;
    background: #fef3c7;
    color: #b45309;
  }
  .badge-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    fill: #0369a1;
    text-anchor: middle;
  }
  .badge-cone {
    fill: #b45309;
  }
</style>
</head>
<body>

<div class="app-container" id="app">
  
  <div class="nav-group">
    <button class="nav-btn active" id="btn-cylinder" onclick="setShape('cylinder')">Cylinder</button>
    <button class="nav-btn" id="btn-cone" onclick="setShape('cone')">Cone</button>
  </div>

  
  <div class="stage-card">
    <div class="svg-wrap">
      <svg viewBox="0 0 280 210" id="visual-svg">
        
      </svg>
    </div>

    
    <div class="toggle-bar" id="toggle-bar">
      <button class="view-btn active" id="btn-3d" onclick="setView('3d')">3D Shape</button>
      <button class="view-btn" id="btn-net" onclick="setView('net')">Flat Net</button>
    </div>
  </div>
</div>

<script>
  let currentShape = 'cylinder';
  let currentView = '3d';

  const svg = document.getElementById('visual-svg');
  const btnCylinder = document.getElementById('btn-cylinder');
  const btnCone = document.getElementById('btn-cone');
  const btn3D = document.getElementById('btn-3d');
  const btnNet = document.getElementById('btn-net');
  const app = document.getElementById('app');

  const renders = {
    cylinder_3d: `
      <g>
        
        <path d="M 75 80 v 65 a 65 22 0 0 0 130 0 v -65 Z" fill="#bae6fd" stroke="#0284c7" stroke-width="2.5" />
        <ellipse cx="140" cy="145" rx="65" ry="22" fill="none" stroke="#0284c7" stroke-dasharray="4 4" stroke-width="2" />
        
        <ellipse cx="140" cy="80" rx="65" ry="22" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
        <text x="140" y="32" class="badge-tag">Cylinder</text>
      </g>
    `,
    cylinder_net: `
      <g>
        
        <circle cx="140" cy="36" r="26" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
        <text x="140" y="40" class="badge-tag">Circle</text>
        
        <rect x="55" y="70" width="170" height="70" rx="4" fill="#bae6fd" stroke="#0284c7" stroke-width="2.5" />
        <text x="140" y="110" class="badge-tag">Rectangle</text>
        
        <circle cx="140" cy="174" r="26" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
        <text x="140" y="178" class="badge-tag">Circle</text>
      </g>
    `,
    cone_3d: `
      <g>
        
        <path d="M 140 45 L 75 145 a 65 20 0 0 0 130 0 Z" fill="#fde68a" stroke="#d97706" stroke-width="2.5" />
        <ellipse cx="140" cy="145" rx="65" ry="20" fill="none" stroke="#d97706" stroke-dasharray="4 4" stroke-width="2" />
        <ellipse cx="140" cy="145" rx="65" ry="20" fill="#fef3c7" fill-opacity="0.4" stroke="#d97706" stroke-width="2.5" clip-path="url(#bottom-half)" />
        <text x="140" y="30" class="badge-tag badge-cone">Cone</text>
      </g>
    `,
    cone_net: `
      <g>
        
        <path d="M 140 25 L 68 112 A 114 114 0 0 0 212 112 Z" fill="#fde68a" stroke="#d97706" stroke-width="2.5" stroke-linejoin="round" />
        <text x="140" y="80" class="badge-tag badge-cone">Sector</text>
        
        <circle cx="140" cy="160" r="28" fill="#fef3c7" stroke="#d97706" stroke-width="2.5" />
        <text x="140" y="164" class="badge-tag badge-cone">Circle</text>
      </g>
    `
  };

  function update() {
    const key = `${currentShape}_${currentView}`;
    svg.innerHTML = renders[key];

    btnCylinder.className = 'nav-btn' + (currentShape === 'cylinder' ? ' active' : '');
    btnCone.className = 'nav-btn' + (currentShape === 'cone' ? ' active cone-theme' : '');

    btn3D.className = 'view-btn' + (currentView === '3d' ? ' active' : '');
    btnNet.className = 'view-btn' + (currentView === 'net' ? ' active' : '');

    if (currentShape === 'cone') {
      app.classList.add('cone-active');
    } else {
      app.classList.remove('cone-active');
    }
  }

  function setShape(shape) {
    currentShape = shape;
    update();
  }

  function setView(view) {
    currentView = view;
    update();
  }

  update();
</script>

</body>
</html>

Can you tell these two 3D shapes apart just by looking at their flat patterns?

A cylinder needs **one rectangle and two circles** to close both ends.

A cone needs **one pie slice and one circle** because it comes to a single point at the top.

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

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

    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .svg-container {
      width: 100%;
      max-width: 480px;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .view-panel {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

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

    .part {
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .part:hover {
      opacity: 0.85;
    }

    .label-pill {
      font-size: 13px;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: middle;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="btn-cylinder" onclick="switchTab('cylinder')">Cylinder</button>
    <button class="tab-btn" id="btn-cone" onclick="switchTab('cone')">Cone</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 460 300">
      
      <g id="view-cylinder" class="view-panel active">
        
        <g class="part">
          
          <ellipse cx="100" cy="75" rx="46" ry="16" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
          
          <path d="M 54 75 L 54 185 A 46 16 0 0 0 146 185 L 146 75 Z" fill="#fef3c7" stroke="#d97706" stroke-width="2.5" />
          
          <path d="M 54 185 A 46 16 0 0 1 146 185" fill="none" stroke="#d97706" stroke-width="2" stroke-dasharray="4 4" />
          
          <path d="M 54 185 A 46 16 0 0 0 146 185" fill="none" stroke="#d97706" stroke-width="2.5" />
          
          <ellipse cx="100" cy="75" rx="46" ry="16" fill="none" stroke="#0284c7" stroke-width="2.5" />
        </g>
        <text x="100" y="235" class="label-pill" fill="#64748b">3D Solid</text>

        
        <path d="M 175 130 L 205 130" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />
        <polygon points="210,130 202,125 202,135" fill="#cbd5e1" />

        
        <g class="part">
          
          <circle cx="330" cy="46" r="24" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
          
          <rect x="250" y="76" width="160" height="96" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="2.5" />
          
          <circle cx="330" cy="202" r="24" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
        </g>

        
        <text x="330" y="46" class="label-pill" fill="#0369a1">Circle</text>
        <text x="330" y="124" class="label-pill" fill="#b45309">1 Rectangle</text>
        <text x="330" y="202" class="label-pill" fill="#0369a1">Circle</text>
        <text x="330" y="255" class="label-pill" fill="#64748b">2 Circles + 1 Rectangle</text>
      </g>

      
      <g id="view-cone" class="view-panel">
        
        <g class="part">
          
          <path d="M 100 50 L 54 185 A 46 16 0 0 0 146 185 Z" fill="#ede9fe" stroke="#7c3aed" stroke-width="2.5" />
          
          <path d="M 54 185 A 46 16 0 0 1 146 185" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="4 4" />
          
          <path d="M 54 185 A 46 16 0 0 0 146 185" fill="none" stroke="#0284c7" stroke-width="2.5" />
          
          <circle cx="100" cy="50" r="3.5" fill="#7c3aed" />
        </g>
        <text x="100" y="235" class="label-pill" fill="#64748b">3D Solid</text>

        
        <path d="M 175 130 L 205 130" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />
        <polygon points="210,130 202,125 202,135" fill="#cbd5e1" />

        
        <g class="part">
          
          <path d="M 330 35 L 234 136 A 140 140 0 0 0 426 136 Z" fill="#ede9fe" stroke="#7c3aed" stroke-width="2.5" stroke-linejoin="round" />
          
          <circle cx="330" cy="200" r="26" fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" />
        </g>

        
        <text x="330" y="95" class="label-pill" fill="#6d28d9">1 Pie Slice</text>
        <text x="330" y="200" class="label-pill" fill="#0369a1">1 Circle</text>
        <text x="330" y="255" class="label-pill" fill="#64748b">1 Pie Slice + 1 Circle</text>
      </g>
    </svg>
  </div>

  <script>
    function switchTab(shape) {
      document.getElementById('btn-cylinder').classList.toggle('active', shape === 'cylinder');
      document.getElementById('btn-cone').classList.toggle('active', shape === 'cone');
      document.getElementById('view-cylinder').classList.toggle('active', shape === 'cylinder');
      document.getElementById('view-cone').classList.toggle('active', shape === 'cone');
    }
  </script>
</body>
</html>

math

Exploring the Net of a Cylinder and Cone. Describe how a rectangle and two circular discs form a cylinder, and a circular sector and disc form a cone.

3D Shapes and Their Nets - Second Level / KS2 Maths

Making 3D Shapes: Nets and Constructions

Nets of 3D Solids: Cylinders, Cones, and Prisms

When introducing nets for curved 3D objects at Early to Primary levels under Curriculum for Excellence (MTH 2-16b progression), prioritize tactile 'unwrapping' concrete activities (CPA approach: Concrete $\to$ Pictorial $\to$ Abstract). Have learners peel labels off cylindrical tin cans to reveal rectangles and unfold paper party hats or cone coffee filters to discover the circular sector. Emphasize physical edge-matching and spatial reasoning before formalizing perimeter-to-length relationships.

Exploring the Net of a Cylinder and Cone

Unrolling a Cylinder

Unfolding a Cone