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 try to put the roof on a toy house before building the walls?

It crashes straight to the ground! In design and building, doing actions in the right order is called following **step-by-step directions**.

<!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>Following Directions Step by Step</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

    /* Mode selector */
    .mode-toggle {
      display: flex;
      background: #e2e8f0;
      border-radius: 999px;
      padding: 3px;
      gap: 4px;
      width: 100%;
      max-width: 320px;
    }

    .toggle-btn {
      flex: 1;
      padding: 8px 12px;
      border: none;
      background: transparent;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

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

    .toggle-btn.active-wrong {
      background: #ef4444;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    }

    /* Stage Area */
    .stage-card {
      width: 100%;
      height: 240px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid #e6e6e6;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 24px;
    }

    /* Ground line */
    .ground {
      position: absolute;
      bottom: 20px;
      left: 10%;
      right: 10%;
      height: 4px;
      background: #cbd5e1;
      border-radius: 2px;
    }

    /* Tower Blocks */
    .block {
      position: absolute;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: #ffffff;
      user-select: none;
    }

    /* Correct Blocks */
    .base-block {
      width: 130px;
      height: 42px;
      background: #3b82f6;
      border-radius: 8px;
      bottom: 24px;
    }

    .middle-block {
      width: 96px;
      height: 42px;
      background: #0ea5e9;
      border-radius: 8px;
      bottom: 70px;
    }

    .roof-block {
      width: 0;
      height: 0;
      border-left: 36px solid transparent;
      border-right: 36px solid transparent;
      border-bottom: 46px solid #f59e0b;
      bottom: 116px;
    }

    /* Hidden states (resting before step) */
    .hidden-block {
      opacity: 0;
      transform: translateY(-40px) scale(0.8);
      pointer-events: none;
    }

    /* Wrong order crash states */
    .roof-fall {
      bottom: 24px !important;
      transform: rotate(75deg) translateX(25px) !important;
      border-bottom-color: #ef4444 !important;
      transition: all 0.4s ease-in !important;
    }

    .crash-sign {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      font-size: 38px;
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      pointer-events: none;
    }

    .crash-sign.show {
      transform: translate(-50%, -50%) scale(1);
    }

    /* Status badge */
    .status-badge {
      position: absolute;
      top: 14px;
      font-size: 14px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #475569;
    }

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

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

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

    .step-btn {
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: all 0.2s;
    }

    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .play-btn {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .play-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="main-wrapper">
    
    <div class="mode-toggle">
      <button class="toggle-btn active-correct" id="btnCorrect" onclick="setMode('correct')">
        ✓ Step-by-Step
      </button>
      <button class="toggle-btn" id="btnWrong" onclick="setMode('wrong')">
        ✕ Wrong Order
      </button>
    </div>

    
    <div class="stage-card">
      <div class="status-badge" id="statusBadge">Step 1 of 3</div>

      
      <div class="ground"></div>

      
      <div class="block base-block hidden-block" id="base">1. Base</div>
      <div class="block middle-block hidden-block" id="mid">2. Wall</div>
      <div class="block roof-block hidden-block" id="roof"></div>

      
      <div class="crash-sign" id="crashIcon">💥</div>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="playToggle" onclick="togglePlay()" aria-label="Play or Pause">⏸</button>
      <button class="step-btn active" id="s1" onclick="setStep(1)">1</button>
      <button class="step-btn" id="s2" onclick="setStep(2)">2</button>
      <button class="step-btn" id="s3" onclick="setStep(3)">3</button>
    </div>
  </div>

  <script>
    let mode = 'correct';
    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    const base = document.getElementById('base');
    const mid = document.getElementById('mid');
    const roof = document.getElementById('roof');
    const crashIcon = document.getElementById('crashIcon');
    const badge = document.getElementById('statusBadge');
    const playToggle = document.getElementById('playToggle');

    function render() {
      // Clear special crash classes
      roof.classList.remove('roof-fall');
      crashIcon.classList.remove('show');
      badge.className = 'status-badge';

      // Update Step buttons
      for (let i = 1; i <= 3; i++) {
        const btn = document.getElementById('s' + i);
        if (i === currentStep) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }

      if (mode === 'correct') {
        // CORRECT ORDER: Base -> Wall -> Roof
        base.classList.toggle('hidden-block', currentStep < 1);
        mid.classList.toggle('hidden-block', currentStep < 2);
        roof.classList.toggle('hidden-block', currentStep < 3);

        if (currentStep === 3) {
          badge.textContent = 'Stable! ✓';
          badge.classList.add('success');
        } else {
          badge.textContent = `Step ${currentStep} of 3`;
        }
      } else {
        // WRONG ORDER: Roof first (falls!), then Wall, then Base
        if (currentStep === 1) {
          base.classList.add('hidden-block');
          mid.classList.add('hidden-block');
          roof.classList.remove('hidden-block');
          roof.classList.add('roof-fall');
          crashIcon.classList.add('show');
          badge.textContent = 'No Base! 💥';
          badge.classList.add('fail');
        } else if (currentStep === 2) {
          base.classList.add('hidden-block');
          mid.classList.remove('hidden-block');
          roof.classList.remove('hidden-block');
          roof.classList.add('roof-fall');
          crashIcon.classList.add('show');
          badge.textContent = 'No Base! 💥';
          badge.classList.add('fail');
        } else if (currentStep === 3) {
          base.classList.remove('hidden-block');
          mid.classList.remove('hidden-block');
          roof.classList.remove('hidden-block');
          roof.classList.add('roof-fall');
          crashIcon.classList.add('show');
          badge.textContent = 'Crashed! ✕';
          badge.classList.add('fail');
        }
      }
    }

    function setMode(m) {
      mode = m;
      document.getElementById('btnCorrect').className = 'toggle-btn ' + (m === 'correct' ? 'active-correct' : '');
      document.getElementById('btnWrong').className = 'toggle-btn ' + (m === 'wrong' ? 'active-wrong' : '');
      currentStep = 1;
      render();
    }

    function setStep(step) {
      currentStep = step;
      render();
    }

    function nextStep() {
      currentStep = (currentStep % 3) + 1;
      render();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playToggle.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 3000);
    }

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

Why does the exact order of steps matter so much when we make things?

A **sequence** is the exact order in which actions must happen from start to finish.

Each step in a design project creates the foundation that holds up the next piece.

<!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: transparent;
      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;
    }

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

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .step-btn.active {
      background: #f0f9ff;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .play-btn {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }
    .play-btn:active {
      background: #f1f5f9;
    }

    .stage-wrapper {
      position: relative;
      width: 100%;
      max-width: 400px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .layer {
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: center bottom;
    }

    .layer.hidden {
      opacity: 0;
      transform: translateY(-16px) scale(0.95);
      pointer-events: none;
    }

    .layer.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      background: #f1f5f9;
      color: #475569;
      transition: all 0.3s ease;
    }
    .status-badge.complete {
      background: #ecfdf5;
      color: #15803d;
    }
  </style>
</head>
<body>

  
  <div class="controls-row">
    <button class="step-btn active" data-step="0">1 Base</button>
    <button class="step-btn" data-step="1">2 Frame</button>
    <button class="step-btn" data-step="2">3 Walls</button>
    <button class="step-btn" data-step="3">4 Roof</button>
    <button class="play-btn" id="togglePlay" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="stage-wrapper">
    <svg viewBox="0 0 320 220" aria-label="Step by step building structure">
      
      <line x1="20" y1="205" x2="300" y2="205" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round" />
      
      
      <g id="layer-0" class="layer visible">
        <rect x="50" y="172" width="220" height="32" rx="6" fill="#334155" />
        <rect x="58" y="178" width="46" height="20" rx="3" fill="#475569" />
        <rect x="110" y="178" width="46" height="20" rx="3" fill="#475569" />
        <rect x="164" y="178" width="46" height="20" rx="3" fill="#475569" />
        <rect x="216" y="178" width="46" height="20" rx="3" fill="#475569" />
      </g>

      
      <g id="layer-1" class="layer hidden">
        <rect x="68" y="112" width="24" height="60" rx="4" fill="#0284c7" />
        <rect x="228" y="112" width="24" height="60" rx="4" fill="#0284c7" />
        <line x1="92" y1="120" x2="228" y2="164" stroke="#38bdf8" stroke-width="3" stroke-dasharray="4 3" />
        <line x1="92" y1="164" x2="228" y2="120" stroke="#38bdf8" stroke-width="3" stroke-dasharray="4 3" />
      </g>

      
      <g id="layer-2" class="layer hidden">
        <rect x="94" y="112" width="132" height="60" fill="#e0f2fe" stroke="#38bdf8" stroke-width="2" />
        
        <rect x="138" y="124" width="44" height="36" rx="4" fill="#ffffff" stroke="#0284c7" stroke-width="2" />
        <line x1="160" y1="124" x2="160" y2="160" stroke="#0284c7" stroke-width="2" />
        <line x1="138" y1="142" x2="182" y2="142" stroke="#0284c7" stroke-width="2" />
      </g>

      
      <g id="layer-3" class="layer hidden">
        <polygon points="160,38 42,112 278,112" fill="#22b7ff" />
        <polygon points="160,48 58,112 262,112" fill="#0ea5e9" opacity="0.4" />
        
        <line x1="160" y1="38" x2="160" y2="18" stroke="#1e2945" stroke-width="3" stroke-linecap="round" />
        <polygon points="160,20 184,27 160,34" fill="#22c55e" />
      </g>
    </svg>
  </div>

  
  <div id="status" class="status-badge">Step 1: Base</div>

  <script>
    const stepNames = ["Step 1: Base", "Step 2: Frame", "Step 3: Walls", "Step 4: Done ✓"];
    const buttons = document.querySelectorAll('.step-btn');
    const layers = [
      document.getElementById('layer-0'),
      document.getElementById('layer-1'),
      document.getElementById('layer-2'),
      document.getElementById('layer-3')
    ];
    const statusEl = document.getElementById('status');
    const playBtn = document.getElementById('togglePlay');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function render(step) {
      currentStep = step;
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });
      layers.forEach((layer, idx) => {
        if (idx <= step) {
          layer.classList.remove('hidden');
          layer.classList.add('visible');
        } else {
          layer.classList.remove('visible');
          layer.classList.add('hidden');
        }
      });
      statusEl.textContent = stepNames[step];
      statusEl.classList.toggle('complete', step === 3);
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      render(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

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

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        render(step);
        stopTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

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

How can you make sure you never miss a step while building?

Great builders follow three simple habits to keep their projects on track:

First, **read or listen** to the entire step before touching any pieces. Second, complete **only one step** at a time, and third, **check your work** against the picture before moving on.

<!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>Following Directions Step by Step</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: #f8f9fa;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .nav-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin-bottom: 16px;
  }

  .step-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
  }

  .step-btn.active {
    border-color: #22b7ff;
    color: #1e2945;
    background: #eef9ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
  }

  .stage-viewport {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 240px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e6e6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    overflow: hidden;
  }

  .scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    padding: 16px;
  }

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

  /* Scene 1: Read */
  .card-guide {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f8fafc;
    border: 2px dashed #22b7ff;
    border-radius: 12px;
    padding: 16px 24px;
  }

  .guide-icon {
    font-size: 40px;
  }

  .guide-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .line {
    height: 8px;
    border-radius: 4px;
    background: #22b7ff;
  }

  .line.short { width: 48px; }
  .line.long { width: 96px; opacity: 0.5; }

  /* Scene 2: Build 1 Step */
  .build-area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    height: 120px;
  }

  .brick-stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 4px;
  }

  .brick {
    width: 80px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    color: #ffffff;
  }

  .brick-base { background: #3b82f6; }
  .brick-new {
    background: #22b7ff;
    animation: dropIn 0.5s ease;
  }

  @keyframes dropIn {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  .arrow-indicator {
    font-size: 28px;
    color: #22b7ff;
    margin-bottom: 24px;
  }

  /* Scene 3: Check */
  .compare-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  .compare-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
  }

  .mini-brick {
    width: 48px;
    height: 18px;
    border-radius: 4px;
    margin-bottom: 3px;
  }

  .b-top { background: #22b7ff; }
  .b-bot { background: #3b82f6; }

  .check-badge {
    width: 44px;
    height: 44px;
    background: #16a34a;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3);
  }

  .caption-pill {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #475569;
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }

  .ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    color: #1e2945;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .ctrl-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
  }
</style>
</head>
<body>

<div class="nav-bar">
  <button class="step-btn active" data-step="0">1. Read 📖</button>
  <button class="step-btn" data-step="1">2. Build 🧱</button>
  <button class="step-btn" data-step="2">3. Check ✓</button>
</div>

<div class="stage-viewport">
  
  <div class="scene active" id="scene-0">
    <div class="card-guide">
      <div class="guide-icon">👀</div>
      <div class="guide-lines">
        <div class="line short"></div>
        <div class="line long"></div>
      </div>
    </div>
    <div class="caption-pill">1. Look & Listen</div>
  </div>

  
  <div class="scene" id="scene-1">
    <div class="build-area">
      <div class="brick-stack">
        <div class="brick brick-base">Base</div>
        <div class="brick brick-new">+1 Step</div>
      </div>
    </div>
    <div class="caption-pill">2. Do One Step</div>
  </div>

  
  <div class="scene" id="scene-2">
    <div class="compare-wrap">
      <div class="compare-box">
        <div class="mini-brick b-top"></div>
        <div class="mini-brick b-bot"></div>
      </div>
      <div class="check-badge">✓</div>
      <div class="compare-box">
        <div class="mini-brick b-top"></div>
        <div class="mini-brick b-bot"></div>
      </div>
    </div>
    <div class="caption-pill">3. Match the Picture</div>
  </div>
</div>

<div class="controls">
  <button class="ctrl-btn" id="prevBtn" title="Previous">◀</button>
  <button class="ctrl-btn" id="playBtn" title="Play / Pause">⏸</button>
  <button class="ctrl-btn" id="nextBtn" title="Next">▶</button>
</div>

<script>
  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  const buttons = document.querySelectorAll('.step-btn');
  const scenes = document.querySelectorAll('.scene');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  function setStep(idx) {
    currentStep = (idx + 3) % 3;
    buttons.forEach((btn, i) => {
      btn.classList.toggle('active', i === currentStep);
    });
    scenes.forEach((scene, i) => {
      scene.classList.toggle('active', i === currentStep);
    });
  }

  function startTimer() {
    stopTimer();
    timer = setInterval(() => {
      setStep(currentStep + 1);
    }, 3200);
  }

  function stopTimer() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      setStep(parseInt(btn.getAttribute('data-step')));
      if (isPlaying) startTimer();
    });
  });

  prevBtn.addEventListener('click', () => {
    setStep(currentStep - 1);
    if (isPlaying) startTimer();
  });

  nextBtn.addEventListener('click', () => {
    setStep(currentStep + 1);
    if (isPlaying) startTimer();
  });

  playBtn.addEventListener('click', () => {
    isPlaying = !isPlaying;
    playBtn.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      startTimer();
    } else {
      stopTimer();
    }
  });

  startTimer();
</script>

</body>
</html>

Let's put these rules to work on a real building project!

Follow these written directions to see how a tabletop crane comes together piece by piece.

<!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>Step by Step Crane Assembly</title>
  <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: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Top step selector pills */
    .step-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      border: 1px solid #dbeafe;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 4px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .step-btn .num {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
    }

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

    .step-btn.active .num {
      color: rgba(255, 255, 255, 0.85);
    }

    /* Crane Stage Area */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 250px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin: 8px 0;
    }

    .stage-svg {
      width: 100%;
      height: 100%;
    }

    /* Construction parts */
    .crane-part {
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform-origin: center bottom;
    }

    .part-hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.92);
    }

    .part-active {
      opacity: 1;
      transform: scale(1);
    }

    /* Indicator glow for current piece */
    .highlight-glow {
      filter: drop-shadow(0 0 4px #22b7ff);
    }

    /* Step indicator & playback controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background 0.15s ease;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    .arrow-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .arrow-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="step-nav" role="tablist">
    <button class="step-btn active" data-step="0">
      <span class="num">Step 1</span>
      <span>Base</span>
    </button>
    <button class="step-btn" data-step="1">
      <span class="num">Step 2</span>
      <span>Tower</span>
    </button>
    <button class="step-btn" data-step="2">
      <span class="num">Step 3</span>
      <span>Arm</span>
    </button>
    <button class="step-btn" data-step="3">
      <span class="num">Step 4</span>
      <span>Cable</span>
    </button>
  </div>

  
  <div class="stage-container">
    <svg class="stage-svg" viewBox="0 0 320 220" aria-label="Crane Assembly Diagram">
      
      <line x1="30" y1="195" x2="290" y2="195" stroke="#e2e8f0" stroke-width="2" stroke-linecap="round" />

      
      <g id="part-base" class="crane-part part-active">
        <rect x="100" y="180" width="120" height="14" rx="4" fill="#334155" />
        <rect x="120" y="172" width="80" height="8" rx="2" fill="#475569" />
        <circle cx="112" cy="187" r="2.5" fill="#94a3b8" />
        <circle cx="208" cy="187" r="2.5" fill="#94a3b8" />
      </g>

      
      <g id="part-tower" class="crane-part part-hidden">
        
        <rect x="148" y="70" width="24" height="102" fill="#0284c7" rx="2" />
        
        <line x1="148" y1="85" x2="172" y2="105" stroke="#e0f2fe" stroke-width="2" />
        <line x1="172" y1="105" x2="148" y2="125" stroke="#e0f2fe" stroke-width="2" />
        <line x1="148" y1="125" x2="172" y2="145" stroke="#e0f2fe" stroke-width="2" />
        <line x1="172" y1="145" x2="148" y2="165" stroke="#e0f2fe" stroke-width="2" />
        
        <rect x="144" y="60" width="32" height="10" rx="3" fill="#0369a1" />
      </g>

      
      <g id="part-arm" class="crane-part part-hidden">
        
        <polygon points="160,35 152,60 168,60" fill="#0369a1" />
        <line x1="160" y1="35" x2="80" y2="58" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,2" />
        <line x1="160" y1="35" x2="245" y2="58" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,2" />
        
        <rect x="65" y="56" width="188" height="10" rx="3" fill="#22b7ff" />
        
        <rect x="68" y="66" width="24" height="18" rx="2" fill="#64748b" />
      </g>

      
      <g id="part-hook" class="crane-part part-hidden">
        
        <rect x="220" y="54" width="16" height="6" rx="1" fill="#0f172a" />
        
        <line x1="228" y1="60" x2="228" y2="135" stroke="#475569" stroke-width="2" stroke-linecap="round" />
        
        <path d="M 228,135 C 228,142 222,146 222,150 C 222,154 228,155 231,152" fill="none" stroke="#334155" stroke-width="2.5" stroke-linecap="round" />
        
        <rect x="217" y="152" width="22" height="22" rx="3" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
        <line x1="217" y1="163" x2="239" y2="163" stroke="#d97706" stroke-width="1" />
        <line x1="228" y1="152" x2="228" y2="174" stroke="#d97706" stroke-width="1" />
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="arrow-btn" id="prevBtn" aria-label="Previous Step">← Back</button>
    <button class="play-btn" id="playBtn" aria-label="Play or Pause">⏸</button>
    <button class="arrow-btn" id="nextBtn" aria-label="Next Step">Next →</button>
  </div>

  <script>
    const steps = [
      { id: 'part-base', label: 'Step 1: Base' },
      { id: 'part-tower', label: 'Step 2: Tower' },
      { id: 'part-arm', label: 'Step 3: Arm' },
      { id: 'part-hook', label: 'Step 4: Cable' }
    ];

    const partElements = [
      document.getElementById('part-base'),
      document.getElementById('part-tower'),
      document.getElementById('part-arm'),
      document.getElementById('part-hook')
    ];

    const stepButtons = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function renderStep(idx) {
      currentStep = idx;

      // Update part visibilities (cumulative construction)
      partElements.forEach((el, i) => {
        if (i <= currentStep) {
          el.classList.remove('part-hidden');
          el.classList.add('part-active');
          if (i === currentStep) {
            el.classList.add('highlight-glow');
          } else {
            el.classList.remove('highlight-glow');
          }
        } else {
          el.classList.add('part-hidden');
          el.classList.remove('part-active', 'highlight-glow');
        }
      });

      // Update button styles
      stepButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
    }

    function nextStep() {
      renderStep((currentStep + 1) % steps.length);
    }

    function prevStep() {
      renderStep((currentStep - 1 + steps.length) % steps.length);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(nextStep, 3200);
    }

    function stopAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶';
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function togglePlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    }

    // Attach interaction events
    stepButtons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(i);
      });
    });

    playBtn.addEventListener('click', togglePlay);

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    // Start auto sequence
    startAutoPlay();
  </script>
</body>
</html>

Notice how Step 3 was only possible because the tower from Step 2 was already standing.

A common mistake is **skipping ahead** when you get excited, which often means you have to take pieces apart later.

If your build ever looks different from the instructions, just pause and re-check your last completed step.

Following Directions Step by Step. Learners will follow a set of written or spoken directions to complete a simple building task.

Hands-on Engineering Design Process for Elementary Learners

CS Fundamentals: Real-Life Algorithms and Step-by-Step Instructions

Following Instructions and the Engineering Design Process (Grades K-2)

Effective instruction for TEKS 126.3(b)(3)(A) in Grade 2 combines physical manipulatives (e.g., LEGOs, linking cubes, craft sticks) with explicit algorithmic sequencing. Teachers should utilize the 'Say-Show-Do' routine: delivering one chunk of instructions at a time, modeling the spatial alignment, and having students verify their physical progress against a partner's build before progressing to the next step. To foster mental agility, embed intentional 'bug testing' where students inspect a slightly incorrect build and identify which step was missed or reversed.

Following Directions Step by Step

Why Order Matters

The Three Builder Rules