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 you have a friendly toy robot and you tell it, "Make me a sandwich!"

The robot just blinks its eyes and stands still because computers cannot guess what you want.

To get a computer or robot to do anything, we must give it clear steps called **instructions**.

An instruction is a single, clear action or command, such as **Step Forward** or **Turn Left**.

An **instruction** is a single, clear action or command, such as **Step Forward** or **Turn Left**.

What happens when we put these steps in a line?

When you arrange instructions in an exact order, you make a **sequence**.

Think about getting dressed: you put on your socks first, and then your shoes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Mode selector tabs */
    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

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

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

    /* Sequence Display Card */
    .display-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .flow-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .step-box {
      flex: 1;
      max-width: 120px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 4px;
      text-align: center;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .step-box.active {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .step-num {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 4px;
    }

    .step-item {
      font-size: 24px;
      line-height: 1;
    }

    .step-label {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      margin-top: 4px;
    }

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

    /* Visual Foot Result Stage */
    .stage {
      width: 100%;
      height: 150px;
      background: #f8fafc;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .foot-graphic {
      position: relative;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Visual Layers */
    .layer {
      position: absolute;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .layer-foot {
      font-size: 54px;
      z-index: 1;
    }

    .layer-sock {
      font-size: 44px;
      z-index: 2;
      transform: translate(2px, 8px);
    }

    .layer-shoe {
      font-size: 46px;
      z-index: 3;
      transform: translate(4px, 12px);
    }

    /* Wrong order layering */
    .wrong .layer-shoe {
      z-index: 2;
      transform: translate(2px, 8px);
    }

    .wrong .layer-sock {
      z-index: 3;
      transform: translate(4px, 12px) scale(1.15);
      filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.2));
    }

    /* Status Badge */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

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

    .status-badge.fail {
      background: #fee2e2;
      color: #b91c1c;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="tabs">
      <button class="tab-btn active" id="btn-correct" onclick="setMode('correct')">
        🧦 → 👟 Correct
      </button>
      <button class="tab-btn" id="btn-wrong" onclick="setMode('wrong')">
        👟 → 🧦 Wrong
      </button>
    </div>

    
    <div class="display-card">
      <div class="flow-steps">
        <div class="step-box active" id="step1-card">
          <div class="step-num">Step 1</div>
          <div class="step-item" id="step1-icon">🧦</div>
          <div class="step-label" id="step1-text">Socks</div>
        </div>

        <div class="arrow">→</div>

        <div class="step-box active" id="step2-card">
          <div class="step-num">Step 2</div>
          <div class="step-item" id="step2-icon">👟</div>
          <div class="step-label" id="step2-text">Shoes</div>
        </div>
      </div>

      
      <div class="stage" id="stage-box">
        <div class="foot-graphic" id="foot-container">
          <div class="layer layer-foot">🦶</div>
          <div class="layer layer-sock" id="layer-sock">🧦</div>
          <div class="layer layer-shoe" id="layer-shoe">👟</div>
        </div>
      </div>

      
      <div class="status-badge success" id="status-tag">
        ✓ Works
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnCorrect = document.getElementById('btn-correct');
      const btnWrong = document.getElementById('btn-wrong');
      const step1Icon = document.getElementById('step1-icon');
      const step1Text = document.getElementById('step1-text');
      const step2Icon = document.getElementById('step2-icon');
      const step2Text = document.getElementById('step2-text');
      const footContainer = document.getElementById('foot-container');
      const statusTag = document.getElementById('status-tag');

      if (mode === 'correct') {
        btnCorrect.classList.add('active');
        btnWrong.classList.remove('active');

        step1Icon.textContent = '🧦';
        step1Text.textContent = 'Socks';
        step2Icon.textContent = '👟';
        step2Text.textContent = 'Shoes';

        footContainer.classList.remove('wrong');
        statusTag.className = 'status-badge success';
        statusTag.textContent = '✓ Works';
      } else {
        btnWrong.classList.add('active');
        btnCorrect.classList.remove('active');

        step1Icon.textContent = '👟';
        step1Text.textContent = 'Shoes';
        step2Icon.textContent = '🧦';
        step2Text.textContent = 'Socks';

        footContainer.classList.add('wrong');
        statusTag.className = 'status-badge fail';
        statusTag.textContent = '✕ Error';
      }
    }
  </script>
</body>
</html>

If you swap the order and put your shoes on before your socks, it does not work!

Computers work the exact same way — they do step one, then step two, then step three.

How do we tell a robot where to walk using a sequence?

Let's help a little robot find its shiny gold star on a simple grid.

<!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>Instructions for Computers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

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

    @media (min-width: 520px) {
      .main-layout {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 24px;
      }
    }

    /* Grid Area */
    .grid-wrap {
      position: relative;
      width: 200px;
      height: 200px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .cell {
      background: #f1f5f9;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .cell.goal {
      background: #fef9c3;
      border: 2px dashed #f59e0b;
    }

    .star {
      font-size: 28px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    .star.reached {
      transform: scale(1.25);
      filter: drop-shadow(0 0 6px #f59e0b);
    }

    /* Robot */
    .robot {
      position: absolute;
      width: 56px;
      height: 56px;
      top: 8px;
      left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      z-index: 10;
      transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
      pointer-events: none;
    }

    /* Path trails */
    .trail {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #93c5fd;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .trail.active {
      opacity: 1;
    }

    /* Instruction Cards List */
    .cards-list {
      display: flex;
      flex-direction: row;
      gap: 6px;
      justify-content: center;
      width: 100%;
    }

    @media (min-width: 520px) {
      .cards-list {
        flex-direction: column;
        width: auto;
      }
    }

    .card-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      user-select: none;
      transition: all 0.25s ease;
      min-width: 60px;
    }

    @media (min-width: 520px) {
      .card-item {
        min-width: 130px;
        padding: 8px 12px;
      }
    }

    .card-item .num {
      font-weight: 700;
      font-size: 13px;
      color: #64748b;
      width: 14px;
    }

    .card-item .action {
      font-size: 18px;
      line-height: 1;
    }

    .card-item .label {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      display: none;
    }

    @media (min-width: 520px) {
      .card-item .label {
        display: inline;
      }
    }

    .card-item.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    .card-item.active .num {
      color: #0284c7;
    }

    .card-item.done {
      border-color: #cbd5e1;
      background: #f8fafc;
      opacity: 0.75;
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #22b7ff;
      border-color: #0ea5e9;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #0284c7;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="grid-wrap" id="grid">
      
      <div class="cell" id="c-0-0"></div>
      <div class="cell" id="c-0-1"></div>
      <div class="cell goal" id="c-0-2"><span class="star" id="star">⭐</span></div>

      
      <div class="cell" id="c-1-0"></div>
      <div class="cell" id="c-1-1"></div>
      <div class="cell" id="c-1-2"></div>

      
      <div class="cell" id="c-2-0"></div>
      <div class="cell" id="c-2-1"></div>
      <div class="cell" id="c-2-2"></div>

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

    
    <div class="cards-list" id="cards">
      <div class="card-item" data-step="1">
        <span class="num">1</span>
        <span class="action">⬆️</span>
        <span class="label">Up</span>
      </div>
      <div class="card-item" data-step="2">
        <span class="num">2</span>
        <span class="action">⬆️</span>
        <span class="label">Up</span>
      </div>
      <div class="card-item" data-step="3">
        <span class="num">3</span>
        <span class="action">➡️</span>
        <span class="label">Right</span>
      </div>
      <div class="card-item" data-step="4">
        <span class="num">4</span>
        <span class="action">➡️</span>
        <span class="label">Right</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous">◀</button>
    <button class="btn btn-primary" id="playBtn" style="min-width: 80px;">⏸ Pause</button>
    <button class="btn" id="nextBtn" aria-label="Next">▶</button>
  </div>

  <script>
    // Robot positions: [row, col]
    // 0: start (2, 0)
    // 1: (1, 0)
    // 2: (0, 0)
    // 3: (0, 1)
    // 4: (0, 2)
    const positions = [
      { r: 2, c: 0 },
      { r: 1, c: 0 },
      { r: 0, c: 0 },
      { r: 0, c: 1 },
      { r: 0, c: 2 }
    ];

    const robot = document.getElementById('robot');
    const star = document.getElementById('star');
    const cardItems = Array.from(document.querySelectorAll('.card-item'));
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 0;
    const totalSteps = 5; // 0 (start) to 4 (reached)
    let isPlaying = true;
    let timer = null;

    // Cell size calculation: 200px width - 16px padding = 184px.
    // 3 columns with 8px gap => each cell is 56px, step offset = 64px
    const stepOffset = 64;

    function render(step) {
      currentStep = step;
      const pos = positions[step];
      const x = pos.c * stepOffset;
      const y = pos.r * stepOffset;

      robot.style.transform = `translate(${x}px, ${y}px)`;

      // Star glow on final step
      if (step === 4) {
        star.classList.add('reached');
      } else {
        star.classList.remove('reached');
      }

      // Update card highlights
      cardItems.forEach((card, idx) => {
        const cardStep = idx + 1;
        card.classList.remove('active', 'done');
        if (cardStep === step) {
          card.classList.add('active');
        } else if (cardStep < step) {
          card.classList.add('done');
        }
      });
    }

    function advance() {
      const next = (currentStep + 1) % totalSteps;
      render(next);
    }

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

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

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

    prevBtn.addEventListener('click', () => {
      stopTimer();
      render((currentStep - 1 + totalSteps) % totalSteps);
    });

    nextBtn.addEventListener('click', () => {
      stopTimer();
      render((currentStep + 1) % totalSteps);
    });

    cardItems.forEach((card, idx) => {
      card.addEventListener('click', () => {
        stopTimer();
        render(idx + 1);
      });
    });

    // Initial render and start
    render(0);
    startTimer();
  </script>
</body>
</html>

The robot moves one tile at a time by following each instruction card in order.

Next time you press a button on a tablet or a toy car, see if you can spot the sequence of steps it follows!

technology

What Are Instructions for Computers?. Understand that computers need a sequence of instructions to work.

Early Level & KS1 Computing: What is an Algorithm and Giving Instructions

Early Years & Early Level: Bee-Bot Sequences and Unplugged Movement Match

Programming A: Robot Algorithms - Floor Robots and Sequencing

At Early Level (P1 / ages 4–5), pedagogy relies on the Concrete-Representational-Abstract (CRA) approach and 'unplugged' physical play. Start with kinaesthetic activities where children act as 'human robots' who can only move when a partner issues specific command words or holds up arrow cards. Progress to tangible programmable devices (such as Bee-Bots or Code-a-pillars) before any on-screen apps. Emphasize verbal reasoning and debugging by purposefully testing 'broken' sequences to demonstrate that devices follow instructions literally, not intuitively.

What Are Instructions for Computers?

Steps in Order