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 wanted to build a giant bridge, a rocket ship, or a tall skyscraper?

Before engineers build real, giant structures, they build a **model** — a smaller, simpler version made from everyday materials to test their ideas.

<!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>From Model to Real Structure</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .nav-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 500px;
      justify-content: center;
    }

    .nav-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 600;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

    .nav-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      align-items: center;
      width: 100%;
      max-width: 520px;
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      min-height: 220px;
      position: relative;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 6px;
    }

    .badge-model {
      background: #fef3c7;
      color: #b45309;
    }

    .badge-real {
      background: #e0f2fe;
      color: #0369a1;
    }

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

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

    .caption {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      margin-top: 4px;
      text-align: center;
    }

    .arrow-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 20px;
      font-weight: bold;
    }

    .scale-icon {
      font-size: 12px;
      font-weight: 600;
      color: #22b7ff;
      background: #ffffff;
      border: 1px solid #bae6fd;
      border-radius: 20px;
      padding: 2px 6px;
      margin-top: 4px;
    }

    .test-bar {
      margin-top: 10px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .test-btn {
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: none;
      background: #22b7ff;
      color: #ffffff;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: filter 0.2s ease;
    }

    .test-btn:active {
      filter: brightness(0.9);
    }

    .weight-load {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      opacity: 0;
      transform: translateY(-20px);
    }

    .weight-load.active {
      opacity: 1;
      transform: translateY(0);
    }

    .flex-beam {
      transition: transform 0.4s ease;
      transform-origin: center;
    }

    .flex-beam.strained {
      transform: scaleY(0.97) translateY(2px);
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" id="btn0" onclick="setStructure(0)">🌉 Bridge</button>
    <button class="nav-btn" id="btn1" onclick="setStructure(1)">🏙️ Tower</button>
    <button class="nav-btn" id="btn2" onclick="setStructure(2)">⛺ Dome</button>
  </div>

  <div class="comparison-grid">
    
    <div class="panel">
      <span class="badge badge-model">Small Model</span>
      <div class="canvas-box" id="modelBox"></div>
      <div class="caption" id="modelLabel">Popsicle Sticks</div>
    </div>

    
    <div class="arrow-divider">
      ➔
      <span class="scale-icon">Scale Up</span>
    </div>

    
    <div class="panel">
      <span class="badge badge-real">Real Structure</span>
      <div class="canvas-box" id="realBox"></div>
      <div class="caption" id="realLabel">Steel Truss</div>
    </div>
  </div>

  <div class="test-bar">
    <button class="test-btn" id="testBtn" onclick="toggleTest()">
      <span id="testIcon">⚖️</span> Test Model Strength
    </button>
  </div>

  <script>
    const data = [
      {
        name: "Bridge",
        modelMat: "Popsicle Sticks",
        realMat: "Steel Truss",
        modelSvg: `
          <svg viewBox="0 0 140 100">
            
            <rect x="15" y="65" width="16" height="30" fill="#cbd5e1" rx="2"/>
            <rect x="109" y="65" width="16" height="30" fill="#cbd5e1" rx="2"/>
            
            
            <g id="bridgeTruss" class="flex-beam">
              <polygon points="20,65 70,25 120,65" fill="none" stroke="#d97706" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
              <line x1="20" y1="65" x2="120" y2="65" stroke="#b45309" stroke-width="6" stroke-linecap="round"/>
              <line x1="45" y1="45" x2="45" y2="65" stroke="#d97706" stroke-width="4"/>
              <line x1="70" y1="25" x2="70" y2="65" stroke="#d97706" stroke-width="4"/>
              <line x1="95" y1="45" x2="95" y2="65" stroke="#d97706" stroke-width="4"/>
              
              <circle cx="20" cy="65" r="3" fill="#fef08a"/>
              <circle cx="70" cy="25" r="3" fill="#fef08a"/>
              <circle cx="120" cy="65" r="3" fill="#fef08a"/>
            </g>

            
            <g id="testWeight" class="weight-load">
              <rect x="58" y="42" width="24" height="20" fill="#475569" rx="3"/>
              <text x="70" y="56" fill="#ffffff" font-size="9" font-weight="bold" text-anchor="middle">1 kg</text>
              <polygon points="66,62 74,62 70,66" fill="#475569"/>
            </g>
          </svg>
        `,
        realSvg: `
          <svg viewBox="0 0 140 100">
            
            <rect x="0" y="80" width="140" height="20" fill="#bae6fd"/>
            <path d="M0,82 Q35,80 70,82 T140,82 L140,100 L0,100 Z" fill="#7dd3fc"/>
            
            
            <rect x="18" y="40" width="14" height="50" fill="#64748b" rx="2"/>
            <rect x="108" y="40" width="14" height="50" fill="#64748b" rx="2"/>
            
            
            <polygon points="10,60 70,12 130,60" fill="none" stroke="#0284c7" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="5" y1="60" x2="135" y2="60" stroke="#0369a1" stroke-width="5"/>
            
            <line x1="30" y1="44" x2="50" y2="60" stroke="#0284c7" stroke-width="2"/>
            <line x1="50" y1="28" x2="70" y2="60" stroke="#0284c7" stroke-width="2"/>
            <line x1="90" y1="28" x2="70" y2="60" stroke="#0284c7" stroke-width="2"/>
            <line x1="110" y1="44" x2="90" y2="60" stroke="#0284c7" stroke-width="2"/>
            
            <rect x="62" y="54" width="16" height="6" fill="#ef4444" rx="1"/>
            <circle cx="65" cy="60" r="1.5" fill="#1e2945"/>
            <circle cx="75" cy="60" r="1.5" fill="#1e2945"/>
          </svg>
        `
      },
      {
        name: "Tower",
        modelMat: "Straws & Clay",
        realMat: "Steel & Glass",
        modelSvg: `
          <svg viewBox="0 0 140 100">
            
            <line x1="20" y1="92" x2="120" y2="92" stroke="#cbd5e1" stroke-width="3"/>
            
            
            <g id="bridgeTruss" class="flex-beam">
              
              <line x1="45" y1="90" x2="52" y2="55" stroke="#ec4899" stroke-width="4" stroke-linecap="round"/>
              <line x1="95" y1="90" x2="88" y2="55" stroke="#ec4899" stroke-width="4" stroke-linecap="round"/>
              <line x1="45" y1="90" x2="88" y2="55" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
              <line x1="95" y1="90" x2="52" y2="55" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
              <line x1="52" y1="55" x2="88" y2="55" stroke="#ec4899" stroke-width="4"/>
              
              
              <line x1="52" y1="55" x2="70" y2="20" stroke="#10b981" stroke-width="4" stroke-linecap="round"/>
              <line x1="88" y1="55" x2="70" y2="20" stroke="#10b981" stroke-width="4" stroke-linecap="round"/>

              
              <circle cx="45" cy="90" r="5" fill="#f97316"/>
              <circle cx="95" cy="90" r="5" fill="#f97316"/>
              <circle cx="52" cy="55" r="5" fill="#f97316"/>
              <circle cx="88" cy="55" r="5" fill="#f97316"/>
              <circle cx="70" cy="20" r="5" fill="#f97316"/>
            </g>

            
            <g id="testWeight" class="weight-load">
              <rect x="58" y="0" width="24" height="18" fill="#475569" rx="3"/>
              <text x="70" y="13" fill="#ffffff" font-size="9" font-weight="bold" text-anchor="middle">500g</text>
            </g>
          </svg>
        `,
        realSvg: `
          <svg viewBox="0 0 140 100">
            
            <line x1="10" y1="92" x2="130" y2="92" stroke="#cbd5e1" stroke-width="2"/>
            
            
            <polygon points="40,92 52,25 70,10 88,25 100,92" fill="#e0f2fe" stroke="#0284c7" stroke-width="2"/>
            
            <line x1="45" y1="65" x2="95" y2="65" stroke="#0284c7" stroke-width="1.5"/>
            <line x1="52" y1="42" x2="88" y2="42" stroke="#0284c7" stroke-width="1.5"/>
            <line x1="70" y1="10" x2="70" y2="92" stroke="#0284c7" stroke-width="1.5"/>
            <line x1="57" y1="92" x2="57" y2="42" stroke="#38bdf8" stroke-width="1"/>
            <line x1="83" y1="92" x2="83" y2="42" stroke="#38bdf8" stroke-width="1"/>
            
            <line x1="70" y1="10" x2="70" y2="2" stroke="#dc2626" stroke-width="2"/>
            <circle cx="70" cy="2" r="1.5" fill="#dc2626"/>
          </svg>
        `
      },
      {
        name: "Dome",
        modelMat: "Paper Tubes",
        realMat: "Geodesic Glass",
        modelSvg: `
          <svg viewBox="0 0 140 100">
            
            <line x1="15" y1="90" x2="125" y2="90" stroke="#cbd5e1" stroke-width="3"/>
            
            
            <g id="bridgeTruss" class="flex-beam">
              <polygon points="25,90 40,55 70,35 100,55 115,90" fill="#fef9c3" stroke="#eab308" stroke-width="3"/>
              <line x1="40" y1="55" x2="100" y2="55" stroke="#ca8a04" stroke-width="2.5"/>
              <line x1="25" y1="90" x2="70" y2="35" stroke="#ca8a04" stroke-width="2"/>
              <line x1="115" y1="90" x2="70" y2="35" stroke="#ca8a04" stroke-width="2"/>
              
              <circle cx="25" cy="90" r="4" fill="#94a3b8"/>
              <circle cx="115" cy="90" r="4" fill="#94a3b8"/>
              <circle cx="40" cy="55" r="4" fill="#94a3b8"/>
              <circle cx="100" cy="55" r="4" fill="#94a3b8"/>
              <circle cx="70" cy="35" r="4" fill="#94a3b8"/>
            </g>

            
            <g id="testWeight" class="weight-load">
              <rect x="58" y="15" width="24" height="18" fill="#475569" rx="3"/>
              <text x="70" y="28" fill="#ffffff" font-size="9" font-weight="bold" text-anchor="middle">2 kg</text>
            </g>
          </svg>
        `,
        realSvg: `
          <svg viewBox="0 0 140 100">
            
            <line x1="10" y1="90" x2="130" y2="90" stroke="#cbd5e1" stroke-width="2"/>
            
            
            <path d="M15,90 Q70,15 125,90 Z" fill="#f0fdf4" stroke="#16a34a" stroke-width="2"/>
            <polygon points="30,75 50,45 70,30 90,45 110,75 70,60" fill="none" stroke="#22c55e" stroke-width="1.5"/>
            <line x1="70" y1="30" x2="70" y2="90" stroke="#22c55e" stroke-width="1.5"/>
            <line x1="30" y1="75" x2="110" y2="75" stroke="#22c55e" stroke-width="1.5"/>
            <line x1="50" y1="45" x2="90" y2="45" stroke="#22c55e" stroke-width="1.5"/>
            
            <rect x="64" y="80" width="12" height="10" fill="#15803d" rx="1"/>
          </svg>
        `
      }
    ];

    let currentIdx = 0;
    let isTesting = false;

    function render() {
      const cur = data[currentIdx];
      document.getElementById('modelBox').innerHTML = cur.modelSvg;
      document.getElementById('realBox').innerHTML = cur.realSvg;
      document.getElementById('modelLabel').textContent = cur.modelMat;
      document.getElementById('realLabel').textContent = cur.realMat;

      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn${i}`).classList.toggle('active', i === currentIdx);
      }
      isTesting = false;
      updateTestState();
    }

    function setStructure(idx) {
      currentIdx = idx;
      render();
    }

    function toggleTest() {
      isTesting = !isTesting;
      updateTestState();
    }

    function updateTestState() {
      const weight = document.getElementById('testWeight');
      const truss = document.getElementById('bridgeTruss');
      const testBtn = document.getElementById('testBtn');

      if (!weight) return;

      if (isTesting) {
        weight.classList.add('active');
        if (truss) truss.classList.add('strained');
        testBtn.style.background = '#10b981';
        testBtn.innerHTML = '<span>✓</span> Holds Strong!';
      } else {
        weight.classList.remove('active');
        if (truss) truss.classList.remove('strained');
        testBtn.style.background = '#22b7ff';
        testBtn.innerHTML = '<span>⚖️</span> Test Model Strength';
      }
    }

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

What everyday items around your house can you use to build your own model?

Different materials have different strengths. A **rigid** material stays straight and stiff, while a **flexible** material easily bends into curves.

<!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>Rigid vs Flexible</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }
    .tile {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .tile:active {
      background: #f8fafc;
    }
    .tile.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }
    .title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 2px;
    }
    .sub {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 8px;
    }
    .stage {
      width: 100%;
      height: 130px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .btn-test {
      margin-top: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: none;
      background: #eef8ff;
      color: #0284c7;
      pointer-events: none;
    }
    .tile.active .btn-test {
      background: #22b7ff;
      color: #ffffff;
    }
    .hand-icon {
      transition: transform 0.3s ease;
    }
    .hint {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="tile" id="rigidTile" onclick="testMaterial('rigid')">
      <div class="title">Rigid 🪵</div>
      <div class="sub">Stays straight</div>
      <div class="stage">
        <svg viewBox="0 0 200 130">
          
          <rect x="25" y="70" width="22" height="45" rx="3" fill="#cbd5e1" />
          <rect x="153" y="70" width="22" height="45" rx="3" fill="#cbd5e1" />
          
          
          <rect id="rigidBeam" x="20" y="62" width="160" height="12" rx="2" fill="#b45309" stroke="#78350f" stroke-width="1.5" />
          
          
          <g id="rigidPush" class="hand-icon" transform="translate(100, 32)">
            <circle cx="0" cy="0" r="14" fill="#ffedd5" stroke="#f97316" stroke-width="1.5" />
            <text x="0" y="5" font-size="14" text-anchor="middle">⬇️</text>
          </g>
        </svg>
      </div>
      <div class="btn-test" id="rigidBtn">Push ⬇️</div>
    </div>

    
    <div class="tile" id="flexTile" onclick="testMaterial('flex')">
      <div class="title">Flexible ➰</div>
      <div class="sub">Bends</div>
      <div class="stage">
        <svg viewBox="0 0 200 130">
          
          <rect x="25" y="70" width="22" height="45" rx="3" fill="#cbd5e1" />
          <rect x="153" y="70" width="22" height="45" rx="3" fill="#cbd5e1" />
          
          
          <path id="flexBeam" d="M 24 68 Q 100 68 176 68" fill="none" stroke="#0ea5e9" stroke-width="10" stroke-linecap="round" />
          
          
          <g id="flexPush" class="hand-icon" transform="translate(100, 32)">
            <circle cx="0" cy="0" r="14" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
            <text x="0" y="5" font-size="14" text-anchor="middle">⬇️</text>
          </g>
        </svg>
      </div>
      <div class="btn-test" id="flexBtn">Push ⬇️</div>
    </div>
  </div>

  <div class="hint">Tap either side to test!</div>

  <script>
    let activeSide = null;

    function testMaterial(type) {
      const rigidTile = document.getElementById('rigidTile');
      const flexTile = document.getElementById('flexTile');
      const rigidPush = document.getElementById('rigidPush');
      const flexPush = document.getElementById('flexPush');
      const flexBeam = document.getElementById('flexBeam');
      const rigidBeam = document.getElementById('rigidBeam');

      if (type === 'rigid') {
        rigidTile.classList.add('active');
        flexTile.classList.remove('active');
        
        // Rigid stays stiff: hand presses down slightly, beam does not bend
        rigidPush.style.transform = 'translate(100px, 46px)';
        rigidBeam.style.transform = 'translateY(1px)';
        
        // Reset flexible side
        flexPush.style.transform = 'translate(100px, 32px)';
        flexBeam.setAttribute('d', 'M 24 68 Q 100 68 176 68');
      } else {
        flexTile.classList.add('active');
        rigidTile.classList.remove('active');
        
        // Flexible bends deeply under force
        flexPush.style.transform = 'translate(100px, 78px)';
        flexBeam.setAttribute('d', 'M 24 68 Q 100 106 176 68');
        
        // Reset rigid side
        rigidPush.style.transform = 'translate(100px, 32px)';
        rigidBeam.style.transform = 'translateY(0px)';
      }
    }

    // Auto-cycle for demonstration
    let current = 0;
    setInterval(() => {
      if (document.hidden) return;
      current = (current + 1) % 2;
      testMaterial(current === 0 ? 'rigid' : 'flex');
    }, 3200);

    // Initial state
    testMaterial('rigid');
  </script>
</body>
</html>

Once you choose your materials, how do you attach them together so they do not fall apart?

You can connect your parts using different **joints** depending on what supplies you have.

<!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>Types of Joints</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Tab Buttons */
    .joint-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .joint-btn {
      flex: 1 1 calc(50% - 8px);
      max-width: 130px;
      padding: 8px 6px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    }

    .joint-btn span.icon {
      font-size: 18px;
    }

    .joint-btn.active {
      border-color: #22b7ff;
      color: #0284c7;
      background: #f0f9ff;
    }

    /* Main Display Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 260px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .joint-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

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

    .visual-area {
      width: 100%;
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .joint-label-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      background: #f1f5f9;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 8px;
    }

    /* Beam Styling */
    .beam {
      position: absolute;
      background: #fed7aa;
      border: 2px solid #ea580c;
      border-radius: 4px;
    }

    /* Fixed Joint Animation */
    .fixed-beam-h {
      width: 160px;
      height: 26px;
      top: 100px;
    }

    .fixed-beam-v {
      width: 26px;
      height: 100px;
      top: 24px;
    }

    .glue-tape {
      position: absolute;
      width: 44px;
      height: 44px;
      background: rgba(34, 183, 255, 0.4);
      border: 2px dashed #0284c7;
      border-radius: 4px;
      top: 91px;
      z-index: 2;
    }

    /* Pivot Joint Animation */
    .pivot-arm-fixed {
      width: 26px;
      height: 90px;
      bottom: 24px;
      left: calc(50% - 13px);
    }

    .pivot-arm-moving {
      width: 26px;
      height: 90px;
      bottom: 80px;
      left: calc(50% - 13px);
      transform-origin: 13px 77px;
      animation: swing 3s ease-in-out infinite;
      z-index: 1;
    }

    .pivot-pin {
      position: absolute;
      width: 16px;
      height: 16px;
      background: #22b7ff;
      border: 2px solid #0369a1;
      border-radius: 50%;
      top: 85px;
      z-index: 3;
    }

    @keyframes swing {
      0%, 100% { transform: rotate(0deg); }
      30% { transform: rotate(45deg); }
      70% { transform: rotate(-45deg); }
    }

    /* Slot Joint Animation */
    .slot-v {
      width: 32px;
      height: 110px;
      background: #bfdbfe;
      border: 2px solid #2563eb;
      top: 40px;
      animation: slide-in 3.5s ease-in-out infinite;
      z-index: 2;
    }

    .slot-h {
      width: 160px;
      height: 32px;
      background: #bfdbfe;
      border: 2px solid #2563eb;
      top: 85px;
      z-index: 1;
    }

    @keyframes slide-in {
      0%, 100% { transform: translateY(0); }
      40%, 60% { transform: translateY(-40px); }
    }

    /* Tied Joint Animation */
    .tied-beam-1 {
      width: 140px;
      height: 22px;
      transform: rotate(35deg);
    }
    .tied-beam-2 {
      width: 140px;
      height: 22px;
      transform: rotate(-35deg);
    }
    .tied-lash {
      position: absolute;
      width: 34px;
      height: 34px;
      border: 3px solid #d97706;
      border-radius: 8px;
      background: repeating-linear-gradient(
        45deg,
        #fbbf24,
        #fbbf24 4px,
        #d97706 4px,
        #d97706 8px
      );
      z-index: 2;
    }

    /* Footer Hint */
    .hint {
      font-size: 13px;
      color: #6b7280;
      text-align: center;
    }
  </style>
</head>
<body>

  
  <div class="joint-nav">
    <button class="joint-btn active" data-idx="0">
      <span class="icon">🩹</span>
      <span>Fixed</span>
    </button>
    <button class="joint-btn" data-idx="1">
      <span class="icon">📍</span>
      <span>Hinge</span>
    </button>
    <button class="joint-btn" data-idx="2">
      <span class="icon">🧩</span>
      <span>Slot</span>
    </button>
    <button class="joint-btn" data-idx="3">
      <span class="icon">🪢</span>
      <span>Tied</span>
    </button>
  </div>

  
  <div class="stage">
    
    <div class="joint-panel active" id="panel-0">
      <div class="visual-area">
        <div class="beam fixed-beam-h"></div>
        <div class="beam fixed-beam-v"></div>
        <div class="glue-tape"></div>
      </div>
      <div class="joint-label-badge">🔒 Rigid • No Movement</div>
    </div>

    
    <div class="joint-panel" id="panel-1">
      <div class="visual-area">
        <div class="beam pivot-arm-fixed"></div>
        <div class="beam pivot-arm-moving"></div>
        <div class="pivot-pin"></div>
      </div>
      <div class="joint-label-badge">🔄 Rotates • Swings</div>
    </div>

    
    <div class="joint-panel" id="panel-2">
      <div class="visual-area">
        <div class="beam slot-h"></div>
        <div class="beam slot-v"></div>
      </div>
      <div class="joint-label-badge">🧩 Interlocks • Slotted</div>
    </div>

    
    <div class="joint-panel" id="panel-3">
      <div class="visual-area">
        <div class="beam tied-beam-1"></div>
        <div class="beam tied-beam-2"></div>
        <div class="tied-lash"></div>
      </div>
      <div class="joint-label-badge">🪢 Bound • Wrapped</div>
    </div>
  </div>

  <div class="hint">Tap a joint to explore how parts connect</div>

  <script>
    const buttons = document.querySelectorAll('.joint-btn');
    const panels = document.querySelectorAll('.joint-panel');
    let currentIndex = 0;
    let autoTimer = null;

    function showJoint(index) {
      currentIndex = index;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      panels.forEach((p, i) => {
        p.classList.toggle('active', i === index);
      });
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        clearInterval(autoTimer);
        showJoint(i);
        startAutoCycle();
      });
    });

    function startAutoCycle() {
      autoTimer = setInterval(() => {
        const next = (currentIndex + 1) % buttons.length;
        showJoint(next);
      }, 3600);
    }

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

How do we put materials and joints together to build something that stands tall?

First, sketch your idea on paper. Then build a wide **base** at the bottom so your structure does not tip over.

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

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

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 540px;
      flex: 1;
    }

    .stage-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .stage-card.highlight {
      border-color: #22b7ff;
    }

    .title-label {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .stage-view {
      position: relative;
      width: 100%;
      height: 180px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .ground-line {
      position: absolute;
      bottom: 16px;
      left: 10%;
      width: 80%;
      height: 4px;
      background: #94a3b8;
      border-radius: 2px;
    }

    /* Force Push Hand/Arrow */
    .push-indicator {
      position: absolute;
      top: 36px;
      left: 16px;
      font-size: 22px;
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 10;
    }

    .pushed .push-indicator {
      opacity: 1;
      transform: translateX(4px);
    }

    /* Structure: Narrow */
    .tower-narrow-wrapper {
      position: absolute;
      bottom: 20px;
      width: 44px;
      height: 120px;
      transform-origin: bottom right;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .tower-narrow {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .block {
      background: #e0f2fe;
      border: 2px solid #0284c7;
      border-radius: 6px;
      box-sizing: border-box;
    }

    .block-square {
      width: 36px;
      height: 36px;
    }

    /* Structure: Wide */
    .tower-wide-wrapper {
      position: absolute;
      bottom: 20px;
      width: 110px;
      height: 120px;
      transform-origin: bottom center;
      transition: transform 0.4s ease;
    }

    .tower-wide {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .wide-base-row {
      display: flex;
      gap: 3px;
      width: 100%;
      justify-content: center;
    }

    .wide-mid-row {
      display: flex;
      gap: 3px;
      width: 70%;
      justify-content: center;
    }

    .wide-base-block {
      width: 34px;
      height: 36px;
    }

    /* Animated states */
    .pushed .tower-narrow-wrapper {
      transform: rotate(72deg) translateY(6px);
    }

    .pushed .tower-wide-wrapper {
      animation: gentle-wobble 0.6s ease;
    }

    @keyframes gentle-wobble {
      0% { transform: rotate(0deg); }
      30% { transform: rotate(4deg); }
      60% { transform: rotate(-2deg); }
      100% { transform: rotate(0deg); }
    }

    .status-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 4px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
    }

    .pushed .status-badge {
      opacity: 1;
      transform: translateY(0);
    }

    .status-fail {
      background: #fee2e2;
      color: #dc2626;
    }

    .status-pass {
      background: #dcfce7;
      color: #16a34a;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 540px;
      justify-content: center;
    }

    .btn {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.3);
      transition: background 0.2s ease, opacity 0.2s ease;
    }

    .btn:active {
      opacity: 0.85;
    }

    .btn-secondary {
      background: #f1f5f9;
      color: #475569;
      box-shadow: none;
      border: 1px solid #cbd5e1;
    }
  </style>
</head>
<body>

  <div class="comparison-grid" id="testArea">
    
    <div class="stage-card">
      <div class="title-label">Narrow Base</div>
      <div class="stage-view">
        <div class="push-indicator">👉</div>
        <div class="tower-narrow-wrapper">
          <div class="tower-narrow">
            <div class="block block-square"></div>
            <div class="block block-square"></div>
            <div class="block block-square"></div>
          </div>
        </div>
        <div class="ground-line"></div>
      </div>
      <div class="status-badge status-fail">⚠️ Tips Over</div>
    </div>

    
    <div class="stage-card highlight">
      <div class="title-label">Wide Base</div>
      <div class="stage-view">
        <div class="push-indicator">👉</div>
        <div class="tower-wide-wrapper">
          <div class="tower-wide">
            <div class="block block-square"></div>
            <div class="wide-mid-row">
              <div class="block wide-base-block"></div>
              <div class="block wide-base-block"></div>
            </div>
            <div class="wide-base-row">
              <div class="block wide-base-block"></div>
              <div class="block wide-base-block"></div>
              <div class="block wide-base-block"></div>
            </div>
          </div>
        </div>
        <div class="ground-line"></div>
      </div>
      <div class="status-badge status-pass">✓ Stable</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="pushBtn">Test Strength 👉</button>
    <button class="btn btn-secondary" id="resetBtn" style="display: none;">Reset ↺</button>
  </div>

  <script>
    const testArea = document.getElementById('testArea');
    const pushBtn = document.getElementById('pushBtn');
    const resetBtn = document.getElementById('resetBtn');

    function applyPush() {
      testArea.classList.add('pushed');
      pushBtn.style.display = 'none';
      resetBtn.style.display = 'inline-flex';
    }

    function resetTest() {
      testArea.classList.remove('pushed');
      resetBtn.style.display = 'none';
      pushBtn.style.display = 'inline-flex';
    }

    pushBtn.addEventListener('click', applyPush);
    resetBtn.addEventListener('click', resetTest);
  </script>
</body>
</html>

If your model bends or collapses during a test, that is not a mistake — it tells you where to add an extra stick or piece of tape to make it stronger.

Try taking two paper cups and a strip of cardboard: how many toy blocks can your model bridge hold before it bends?

technology

Exploring How Things Are Built. Learners explore different ways to design and construct simple models using everyday materials.

Early Level Technologies: Designing, Building and Everyday Materials

Structures and Model Making: Early Years and Primary 1 Design and Technology Collection

Technologies Benchmarks & Guidance: Craft, Design, Engineering and Graphics (TCH 0-09a)

Pedagogical delivery for Early Level (P1) learners must be hands-on, multi-sensory, and play-based. Emphasize open-ended 'junk modelling' provocations with diverse clean recyclables and joining mediums (masking tape is developmentally optimal for developing fine motor control without the wet frustration of PVA). Use guided questioning such as 'How can we make the bottom heavier or wider?' to foster problem-solving and growth mindset resilience when structures collapse.

Exploring How Things Are Built

Choosing Your Materials

Ways to Connect Pieces

Building a Model Step-by-Step