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

Imagine putting on your shoes *before* your socks! That would feel pretty silly, wouldn't it?

To get things right, we need to do each step in the correct order.

A **sequence** is a list of steps that happen in a specific order from first to last.

A set of step-by-step instructions that solves a problem or completes a task is called an **algorithm**.

<!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>Sequencing Algorithm</title>
<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;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
  }

  .main-stage {
    width: 100%;
    max-width: 480px;
    height: 160px;
    background: #f0f9ff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .stage-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .stage-view.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  .stage-icon {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 6px;
  }

  .stage-label {
    font-size: 16px;
    font-weight: 700;
    color: #0369a1;
  }

  .steps-track {
    width: 100%;
    max-width: 480px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 0;
  }

  .step-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
    user-select: none;
  }

  .step-card:hover {
    border-color: #38bdf8;
  }

  .step-card.active {
    border-color: #0284c7;
    background: #e0f2fe;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
  }

  .step-num {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 99px;
    padding: 2px 6px;
    margin-bottom: 4px;
  }

  .step-card.active .step-num {
    background: #0284c7;
    color: #ffffff;
  }

  .step-card-icon {
    font-size: 24px;
    margin-bottom: 2px;
  }

  .step-card-name {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    text-align: center;
  }

  .controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .btn {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #1e2945;
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s;
  }

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

  .btn-primary {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
  }

  .btn-primary:hover {
    background: #0369a1;
    border-color: #0369a1;
  }
</style>
</head>
<body>

<div class="main-stage">
  <div class="stage-view active" id="view-0">
    <div class="stage-icon">🧴🪥</div>
    <div class="stage-label">1. Paste on Brush</div>
  </div>
  <div class="stage-view" id="view-1">
    <div class="stage-icon">🦷✨🪥</div>
    <div class="stage-label">2. Brush Teeth</div>
  </div>
  <div class="stage-view" id="view-2">
    <div class="stage-icon">💧👄</div>
    <div class="stage-label">3. Rinse Mouth</div>
  </div>
  <div class="stage-view" id="view-3">
    <div class="stage-icon">😁✨</div>
    <div class="stage-label">4. Clean Teeth</div>
  </div>
</div>

<div class="steps-track">
  <div class="step-card active" data-index="0">
    <span class="step-num">Step 1</span>
    <span class="step-card-icon">🧴</span>
    <span class="step-card-name">Paste</span>
  </div>
  <div class="step-card" data-index="1">
    <span class="step-num">Step 2</span>
    <span class="step-card-icon">🪥</span>
    <span class="step-card-name">Brush</span>
  </div>
  <div class="step-card" data-index="2">
    <span class="step-num">Step 3</span>
    <span class="step-card-icon">💧</span>
    <span class="step-card-name">Rinse</span>
  </div>
  <div class="step-card" data-index="3">
    <span class="step-num">Step 4</span>
    <span class="step-card-icon">✨</span>
    <span class="step-card-name">Clean</span>
  </div>
</div>

<div class="controls">
  <button class="btn" id="prevBtn">← Back</button>
  <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
  <button class="btn" id="nextBtn">Next →</button>
</div>

<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<script>
  let currentStep = 0;
  const totalSteps = 4;
  let isPlaying = true;
  let timer = null;

  const views = [
    document.getElementById('view-0'),
    document.getElementById('view-1'),
    document.getElementById('view-2'),
    document.getElementById('view-3')
  ];
  const cards = document.querySelectorAll('.step-card');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  function setStep(index) {
    currentStep = (index + totalSteps) % totalSteps;
    views.forEach((v, i) => {
      v.classList.toggle('active', i === currentStep);
    });
    cards.forEach((c, i) => {
      c.classList.toggle('active', i === currentStep);
    });
  }

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

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

  cards.forEach((card, idx) => {
    card.addEventListener('click', () => {
      setStep(idx);
      if (isPlaying) {
        startTimer();
      }
    });
  });

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

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

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

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

If you rinse your mouth before you brush, your teeth never get clean! Order makes all the difference.

What happens when we build something delicious like a sandwich?

Let's put the picture cards in order so we can make lunch without making a giant mess.

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

    /* Sequence Mode Tabs */
    .mode-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }
    .mode-btn {
      flex: 1;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .mode-btn.active.correct {
      background: #ecfdf5;
      border-color: #10b981;
      color: #047857;
    }
    .mode-btn.active.wrong {
      background: #fef2f2;
      border-color: #ef4444;
      color: #b91c1c;
    }

    /* Cards Timeline */
    .timeline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 440px;
      gap: 6px;
      margin: 10px 0;
    }
    .step-card {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .step-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }
    .step-card.error-card.active {
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
    }
    .step-num {
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      margin-bottom: 2px;
    }
    .step-icon {
      font-size: 24px;
      line-height: 1.2;
    }
    .step-text {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      margin-top: 2px;
      white-space: nowrap;
    }
    .arrow {
      color: #cbd5e1;
      font-weight: 900;
      font-size: 16px;
    }

    /* Showcase Plate */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 170px;
      background: #ffffff;
      border-radius: 16px;
      border: 2px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .plate {
      width: 180px;
      height: 80px;
      background: #f1f5f9;
      border: 3px solid #cbd5e1;
      border-radius: 50%;
      position: absolute;
      bottom: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Sandwich Layers */
    .sandwich-stack {
      position: absolute;
      bottom: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 130px;
    }
    .layer {
      height: 18px;
      border-radius: 8px;
      transition: opacity 0.3s ease, transform 0.3s ease;
      position: relative;
    }
    .bread-bottom {
      width: 120px;
      background: #d97706;
      border: 3px solid #b45309;
      box-shadow: inset 0 -3px #92400e;
      z-index: 1;
    }
    .jelly-inside {
      width: 104px;
      height: 10px;
      background: #e11d48;
      border-radius: 5px;
      margin: -2px 0;
      z-index: 2;
      box-shadow: 0 0 6px rgba(225, 29, 72, 0.5);
    }
    .bread-top {
      width: 120px;
      background: #f59e0b;
      border: 3px solid #b45309;
      box-shadow: inset 0 3px #fcd34d;
      z-index: 3;
    }
    .jelly-outside {
      width: 90px;
      height: 12px;
      background: #e11d48;
      border-radius: 6px;
      margin-bottom: -4px;
      z-index: 4;
      box-shadow: 0 2px 8px rgba(225, 29, 72, 0.6);
    }

    /* Outcome Badge */
    .status-badge {
      position: absolute;
      top: 10px;
      font-size: 14px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .status-badge.correct {
      background: #d1fae5;
      color: #065f46;
    }
    .status-badge.wrong {
      background: #fee2e2;
      color: #991b1b;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 440px;
      margin-top: 6px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      color: #334155;
      width: 42px;
      height: 38px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .ctrl-btn:active {
      background: #f1f5f9;
    }
    .step-dots {
      display: flex;
      gap: 8px;
    }
    .dot {
      width: 12px;
      height: 12px;
      border-radius: 5px;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }
    .dot.wrong-dot.active {
      background: #ef4444;
    }
  </style>
</head>
<body>

  
  <div class="mode-bar">
    <button class="mode-btn active correct" id="btnCorrect">✓ Correct Order</button>
    <button class="mode-btn" id="btnWrong">⚠️ Wrong Order</button>
  </div>

  
  <div class="timeline" id="timeline">
    <div class="step-card active" data-step="0">
      <span class="step-num">STEP 1</span>
      <span class="step-icon" id="icon0">🍞</span>
      <span class="step-text" id="label0">Bread</span>
    </div>
    <span class="arrow">→</span>
    <div class="step-card" data-step="1">
      <span class="step-num">STEP 2</span>
      <span class="step-icon" id="icon1">🍓</span>
      <span class="step-text" id="label1">Spread</span>
    </div>
    <span class="arrow">→</span>
    <div class="step-card" data-step="2">
      <span class="step-num">STEP 3</span>
      <span class="step-icon" id="icon2">🥪</span>
      <span class="step-text" id="label2">Close</span>
    </div>
  </div>

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

    <div class="sandwich-stack">
      <div class="layer jelly-outside" id="lJellyOut" style="display: none;"></div>
      <div class="layer bread-top" id="lBreadTop" style="display: none;"></div>
      <div class="layer jelly-inside" id="lJellyIn" style="display: none;"></div>
      <div class="layer bread-bottom" id="lBreadBottom"></div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀</button>
    <button class="ctrl-btn" id="playBtn">⏸</button>
    <button class="ctrl-btn" id="nextBtn">▶</button>
    <div class="step-dots" style="margin-left: 10px;">
      <div class="dot active" data-dot="0"></div>
      <div class="dot" data-dot="1"></div>
      <div class="dot" data-dot="2"></div>
    </div>
  </div>

  <script>
    const modes = {
      correct: {
        steps: [
          { icon: '🍞', text: 'Bread' },
          { icon: '🍓', text: 'Spread' },
          { icon: '🥪', text: 'Close' }
        ],
        visuals: [
          { bottom: true, jellyIn: false, top: false, jellyOut: false, label: '✨ Step 1: Bread' },
          { bottom: true, jellyIn: true,  top: false, jellyOut: false, label: '✨ Step 2: Spread Jelly' },
          { bottom: true, jellyIn: true,  top: true,  jellyOut: false, label: '🥪 Ready to Eat!' }
        ]
      },
      wrong: {
        steps: [
          { icon: '🍞', text: 'Bread' },
          { icon: '🥪', text: 'Close' },
          { icon: '🍓', text: 'Spread' }
        ],
        visuals: [
          { bottom: true, jellyIn: false, top: false, jellyOut: false, label: '⚠️ Step 1: Bread' },
          { bottom: true, jellyIn: false, top: true,  jellyOut: false, label: '⚠️ Step 2: Closed Early!' },
          { bottom: true, jellyIn: false, top: true,  jellyOut: true,  label: '💥 Mess! Jelly Outside!' }
        ]
      }
    };

    let currentMode = 'correct';
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const badge = document.getElementById('statusBadge');
    const playBtn = document.getElementById('playBtn');

    const lBreadBottom = document.getElementById('lBreadBottom');
    const lJellyIn = document.getElementById('lJellyIn');
    const lBreadTop = document.getElementById('lBreadTop');
    const lJellyOut = document.getElementById('lJellyOut');

    function renderMode() {
      const modeData = modes[currentMode];
      modeData.steps.forEach((s, idx) => {
        document.getElementById(`icon${idx}`).textContent = s.icon;
        document.getElementById(`label${idx}`).textContent = s.text;
      });

      const isWrong = currentMode === 'wrong';
      document.getElementById('btnCorrect').className = `mode-btn ${!isWrong ? 'active correct' : ''}`;
      document.getElementById('btnWrong').className = `mode-btn ${isWrong ? 'active wrong' : ''}`;
      
      cards.forEach(c => {
        if (isWrong) c.classList.add('error-card');
        else c.classList.remove('error-card');
      });

      dots.forEach(d => {
        if (isWrong) d.classList.add('wrong-dot');
        else d.classList.remove('wrong-dot');
      });

      renderStep();
    }

    function renderStep() {
      cards.forEach((c, idx) => c.classList.toggle('active', idx === currentStep));
      dots.forEach((d, idx) => d.classList.toggle('active', idx === currentStep));

      const vis = modes[currentMode].visuals[currentStep];
      lBreadBottom.style.display = vis.bottom ? 'block' : 'none';
      lJellyIn.style.display = vis.jellyIn ? 'block' : 'none';
      lBreadTop.style.display = vis.top ? 'block' : 'none';
      lJellyOut.style.display = vis.jellyOut ? 'block' : 'none';

      badge.textContent = vis.label;
      badge.className = `status-badge ${currentMode === 'wrong' && currentStep > 0 ? 'wrong' : 'correct'}`;
    }

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

    function prevStep() {
      currentStep = (currentStep - 1 + 3) % 3;
      renderStep();
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 2600);
      playBtn.textContent = '⏸';
      isPlaying = true;
    }

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

    // Event Listeners
    document.getElementById('btnCorrect').addEventListener('click', () => {
      currentMode = 'correct';
      currentStep = 0;
      renderMode();
    });

    document.getElementById('btnWrong').addEventListener('click', () => {
      currentMode = 'wrong';
      currentStep = 0;
      renderMode();
    });

    cards.forEach((c, idx) => {
      c.addEventListener('click', () => {
        currentStep = idx;
        renderStep();
        stopTimer();
      });
    });

    dots.forEach((d, idx) => {
      d.addEventListener('click', () => {
        currentStep = idx;
        renderStep();
        stopTimer();
      });
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      nextStep();
      stopTimer();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      prevStep();
      stopTimer();
    });

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

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

If you close the sandwich before spreading the jelly, the jelly ends up on the outside of the bread!

How do computers and robots use these same step-by-step rules?

Computers cannot read your mind — they only do the exact steps you give them, one after another.

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

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

    /* Program Sequence Ribbon */
    .sequence-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 540px;
    }

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

    .seq-step .step-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }

    .seq-step.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .seq-step.completed {
      border-color: #10b981;
      background: #f0fdf4;
      color: #047857;
    }

    .seq-arrow {
      font-size: 14px;
      color: #94a3b8;
      font-weight: bold;
    }

    /* Visual Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 220px;
      background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 65%, #86efac 65%, #4ade80 70%, #78350f 70%, #451a03 100%);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Sun & Cloud */
    .sky-elements {
      position: absolute;
      top: 12px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 28px;
    }

    .sun {
      transition: transform 0.5s ease, filter 0.5s ease;
      transform: scale(0.8);
      opacity: 0.5;
    }

    .sun.glow {
      transform: scale(1.2);
      opacity: 1;
      filter: drop-shadow(0 0 12px #f59e0b);
    }

    /* Soil Mound / Hole */
    .hole-zone {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 38px;
      border-radius: 50%;
      background: #270e03;
      box-shadow: inset 0 4px 8px rgba(0,0,0,0.6);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .hole-zone.dug {
      opacity: 1;
    }

    /* Interactive Plant Target */
    .plant-actor {
      position: absolute;
      bottom: 42px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.4s ease;
    }

    .plant-visual {
      font-size: 46px;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: bottom center;
    }

    /* Robot / Tool */
    .robot-actor {
      position: absolute;
      bottom: 50px;
      font-size: 42px;
      transition: left 0.5s ease, transform 0.4s ease, opacity 0.3s ease;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    }

    /* Water Drops */
    .water-drops {
      position: absolute;
      bottom: 70px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20px;
      opacity: 0;
      transition: opacity 0.3s ease;
      animation: drip 1s infinite linear;
    }

    .water-drops.active {
      opacity: 1;
    }

    @keyframes drip {
      0% { transform: translate(-50%, -10px); opacity: 0; }
      50% { opacity: 1; }
      100% { transform: translate(-50%, 15px); opacity: 0; }
    }

    /* Controller Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 540px;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

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

    .btn-play {
      background: #3b82f6;
      color: #ffffff;
      border-color: #2563eb;
      min-width: 90px;
    }

    .btn-play:hover {
      background: #2563eb;
    }

    .step-pills {
      display: flex;
      gap: 6px;
    }

    .step-pill {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .step-pill.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
    }
  </style>
</head>
<body>

  
  <div class="sequence-bar">
    <div class="seq-step active" id="seq-0">
      <span class="step-icon">🕳️</span>
      <span>1. Dig</span>
    </div>
    <span class="seq-arrow">→</span>
    <div class="seq-step" id="seq-1">
      <span class="step-icon">🌱</span>
      <span>2. Plant</span>
    </div>
    <span class="seq-arrow">→</span>
    <div class="seq-step" id="seq-2">
      <span class="step-icon">💧</span>
      <span>3. Water</span>
    </div>
    <span class="seq-arrow">→</span>
    <div class="seq-step" id="seq-3">
      <span class="step-icon">🌻</span>
      <span>4. Bloom</span>
    </div>
  </div>

  
  <div class="stage">
    <div class="sky-elements">
      <div class="sun" id="sun">☀️</div>
      <div class="cloud">☁️</div>
    </div>

    
    <div class="hole-zone" id="hole"></div>

    
    <div class="plant-actor">
      <div class="plant-visual" id="plantVisual"></div>
    </div>

    
    <div class="water-drops" id="waterDrops">💧<br>💧</div>

    
    <div class="robot-actor" id="robot">🤖</div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" title="Previous">◀</button>
    <button class="btn btn-play" id="playBtn">⏸ Pause</button>
    <button class="btn" id="nextBtn" title="Next">▶</button>
    <div class="step-pills">
      <button class="step-pill active" id="pill-0">1</button>
      <button class="step-pill" id="pill-1">2</button>
      <button class="step-pill" id="pill-2">3</button>
      <button class="step-pill" id="pill-3">4</button>
    </div>
  </div>

  <script>
    const stepsData = [
      {
        plant: '',
        hole: true,
        robotPos: '42%',
        robotIcon: '🤖⛏️',
        sunGlow: false,
        watering: false
      },
      {
        plant: '🌰',
        hole: true,
        robotPos: '26%',
        robotIcon: '🤖',
        sunGlow: false,
        watering: false
      },
      {
        plant: '🌱',
        hole: true,
        robotPos: '26%',
        robotIcon: '🤖🫗',
        sunGlow: false,
        watering: true
      },
      {
        plant: '🌻',
        hole: false,
        robotPos: '78%',
        robotIcon: '🤖✨',
        sunGlow: true,
        watering: false
      }
    ];

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

    const holeEl = document.getElementById('hole');
    const plantEl = document.getElementById('plantVisual');
    const robotEl = document.getElementById('robot');
    const sunEl = document.getElementById('sun');
    const waterDropsEl = document.getElementById('waterDrops');
    const playBtn = document.getElementById('playBtn');

    function renderStep(idx) {
      currentStep = idx;
      const data = stepsData[idx];

      // Update sequence bar
      for (let i = 0; i < 4; i++) {
        const stepEl = document.getElementById(`seq-${i}`);
        const pillEl = document.getElementById(`pill-${i}`);
        
        stepEl.classList.remove('active', 'completed');
        pillEl.classList.remove('active');

        if (i === idx) {
          stepEl.classList.add('active');
          pillEl.classList.add('active');
        } else if (i < idx) {
          stepEl.classList.add('completed');
        }
      }

      // Update visuals
      holeEl.className = data.hole ? 'hole-zone dug' : 'hole-zone';
      plantEl.textContent = data.plant;
      plantEl.style.transform = idx === 3 ? 'scale(1.3)' : 'scale(1)';
      
      robotEl.style.left = data.robotPos;
      robotEl.textContent = data.robotIcon;
      
      if (data.sunGlow) {
        sunEl.classList.add('glow');
      } else {
        sunEl.classList.remove('glow');
      }

      if (data.watering) {
        waterDropsEl.classList.add('active');
      } else {
        waterDropsEl.classList.remove('active');
      }
    }

    function nextStep() {
      renderStep((currentStep + 1) % 4);
    }

    function prevStep() {
      renderStep((currentStep - 1 + 4) % 4);
    }

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

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

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

    document.getElementById('nextBtn').addEventListener('click', () => {
      pauseAutoPlay();
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      pauseAutoPlay();
      prevStep();
    });

    for (let i = 0; i < 4; i++) {
      document.getElementById(`seq-${i}`).addEventListener('click', () => {
        pauseAutoPlay();
        renderStep(i);
      });
      document.getElementById(`pill-${i}`).addEventListener('click', () => {
        pauseAutoPlay();
        renderStep(i);
      });
    }

    // Initialize
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Whenever you do a task or write a computer program, always ask yourself: **What comes first, and what comes next?**

technology

Putting Steps in Order (Sequencing). Learners will arrange a set of picture cards into a correct step-by-step sequence to complete a task such as brushing teeth or making a sandwich.

Early Years Computational Thinking: Everyday Algorithms & Sequencing

Computing Science: What is an Algorithm? (Early & First Level)

CS Fundamentals Course A: Real-Life Algorithms (Unplugged)

For Scottish Curriculum for Excellence (CfE) Early Level (P1), instruction should begin strictly 'unplugged' using concrete, tactile picture cards, physical props (e.g., real bread, pretend toothbrushes), and roleplay ('Teacher Robot'). Establish left-to-right scanning with clear visual ordinal numbers ($1, 2, 3, 4$) before introducing floor robots (e.g., Bee-Bots) or digital early coding platforms to satisfy TCH 0-01a and progress toward TCH 1-01a.

Work through this lesson with your tutor.

Putting Steps in Order (Sequencing)

What Is a Sequence?

Making a Sandwich