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

Robots cannot read your mind. If you tell a robot "go get my toy," it will just sit there waiting for smaller, clearer steps!

To make a robot move, we give it an **instruction**, which is a single, clear command like *move forward* or *turn right*.

<!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>Giving Instructions to a Robot</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px 10px;
    user-select: none;
    -webkit-user-select: none;
  }

  .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }

  .status-badge span {
    color: #22b7ff;
  }

  .grid-container {
    position: relative;
    width: 220px;
    height: 220px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  }

  .cell {
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
    position: relative;
  }

  .robot {
    position: absolute;
    width: 33.333%;
    height: 33.333%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
    z-index: 10;
    pointer-events: none;
  }

  .robot-inner {
    position: relative;
    width: 54px;
    height: 54px;
    background: #ffffff;
    border: 2px solid #22b7ff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.25);
    font-size: 26px;
    transition: transform 0.3s ease;
  }

  .pointer {
    position: absolute;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #22b7ff;
  }

  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 340px;
    width: 100%;
  }

  .btn-cmd {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: background 0.15s, border-color 0.15s;
  }

  .btn-cmd:active {
    background: #f1f5f9;
    border-color: #22b7ff;
  }

  .btn-cmd.highlight {
    background: #e0f2fe;
    border-color: #22b7ff;
    color: #0284c7;
  }

  .btn-reset {
    background: #f8fafc;
    color: #64748b;
  }
</style>
</head>
<body>

  <div class="status-badge" id="badge">
    Instruction: <span id="action-text">Ready</span>
  </div>

  <div class="grid-container">
    <div class="cell"></div><div class="cell"></div><div class="cell"></div>
    <div class="cell"></div><div class="cell"></div><div class="cell"></div>
    <div class="cell"></div><div class="cell"></div><div class="cell"></div>

    <div class="robot" id="robot">
      <div class="robot-inner" id="robot-body">
        <div class="pointer"></div>
        🤖
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-cmd" id="btn-forward">⬆ Move Forward</button>
    <button class="btn-cmd" id="btn-left">↶ Turn Left</button>
    <button class="btn-cmd" id="btn-right">↷ Turn Right</button>
    <button class="btn-cmd btn-reset" id="btn-reset">↺ Reset</button>
  </div>

<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<script>
  let col = 1;
  let row = 1;
  let angle = 0; // 0 = Up, 90 = Right, 180 = Down, 270 = Left

  const robot = $('#robot');
  const robotBody = $('#robot-body');
  const actionText = $('#action-text');

  function update() {
    robot.style.transform = `translate(${col * 100}%, ${row * 100}%)`;
    robotBody.style.transform = `rotate(${angle}deg)`;
  }

  function setCommand(text, btn) {
    actionText.textContent = text;
    $$('.btn-cmd').forEach(b => b.classList.remove('highlight'));
    if (btn) btn.classList.add('highlight');
  }

  onTap($('#btn-forward'), (e) => {
    setCommand('Move Forward', $('#btn-forward'));
    const normAngle = ((angle % 360) + 360) % 360;
    if (normAngle === 0 && row > 0) row--;
    else if (normAngle === 90 && col < 2) col++;
    else if (normAngle === 180 && row < 2) row++;
    else if (normAngle === 270 && col > 0) col--;
    update();
  });

  onTap($('#btn-left'), (e) => {
    setCommand('Turn Left', $('#btn-left'));
    angle -= 90;
    update();
  });

  onTap($('#btn-right'), (e) => {
    setCommand('Turn Right', $('#btn-right'));
    angle += 90;
    update();
  });

  onTap($('#btn-reset'), (e) => {
    setCommand('Reset', $('#btn-reset'));
    col = 1;
    row = 1;
    angle = 0;
    update();
  });

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

What happens when we connect multiple instructions together in a row?

A **sequence** is an ordered list of instructions that a robot follows one after another from start to finish.

When you put a sequence of instructions into a device and press start, you are running a **program**.

<!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>Giving Instructions to a Robot</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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    user-select: none;
  }

  .main-layout {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    max-width: 520px;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 440px) {
    .main-layout {
      flex-direction: column;
      gap: 12px;
    }
  }

  /* Instruction Sequence Column */
  .program-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    width: 100%;
    max-width: 220px;
  }

  .step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

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

  .step-item.done {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #94a3b8;
  }

  .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
  }

  .step-item.active .step-num {
    background: #22b7ff;
    color: #ffffff;
  }

  .step-icon {
    font-size: 16px;
  }

  /* Robot Arena Grid */
  .grid-container {
    position: relative;
    width: 240px;
    height: 240px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 4px;
  }

  .cell {
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    position: relative;
  }

  .star-target {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
  }

  .robot {
    position: absolute;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }

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

  .btn {
    border: none;
    outline: none;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(34, 183, 255, 0.3);
    transition: background-color 0.2s ease, opacity 0.2s ease;
  }

  .btn:hover {
    background: #0ea5e9;
  }

  .btn-subtle {
    background: #ffffff;
    color: #4b5563;
    border: 1px solid #d1d5db;
    box-shadow: none;
  }

  .btn-subtle:hover {
    background: #f3f4f6;
  }
</style>
</head>
<body>

<div class="main-layout">
  
  <div class="program-col" id="instructions">
    <div class="step-item" data-step="0">
      <span class="step-num">1</span>
      <span class="step-icon">⬆️</span>
      <span>Forward</span>
    </div>
    <div class="step-item" data-step="1">
      <span class="step-num">2</span>
      <span class="step-icon">↪️</span>
      <span>Turn Right</span>
    </div>
    <div class="step-item" data-step="2">
      <span class="step-num">3</span>
      <span class="step-icon">⬆️</span>
      <span>Forward</span>
    </div>
    <div class="step-item" data-step="3">
      <span class="step-num">4</span>
      <span class="step-icon">⬆️</span>
      <span>Forward</span>
    </div>
  </div>

  
  <div class="grid-container" id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"><span class="star-target">🌟</span></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>

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


<div class="controls">
  <button class="btn" id="runBtn">▶ Run</button>
  <button class="btn btn-subtle" id="resetBtn">↺ Reset</button>
</div>

<script>
  // Robot poses: [col (0-2), row (0-2), rotation in deg]
  // Start: bottom-left (0, 2), facing Up (0 deg)
  // Step 1: (0, 1), 0 deg
  // Step 2: (0, 1), 90 deg (turned right)
  // Step 3: (1, 1), 90 deg
  // Step 4: (2, 1) -> wait, target is top-right (2, 0).
  // Let's align steps precisely:
  // Initial: (0, 2), 0° (Bottom-Left)
  // Step 1 (Forward): (0, 1), 0°
  // Step 2 (Forward): (0, 0), 0° (Top-Left)
  // Step 3 (Turn Right): (0, 0), 90° (Facing Right)
  // Step 4 (Forward): (1, 0), 90° -> Step 5? Let's make it exactly 4 steps:
  // Step 0: start at (0, 2), facing Up (0°)
  // 1: Forward -> (0, 1), 0°
  // 2: Turn Right -> (0, 1), 90°
  // 3: Forward -> (1, 1), 90°
  // 4: Forward -> (2, 1) -> Let's put target at (2, 1) or let's use:
  // Path: (0,2) --[1.Forward]--> (0,1) --[2.Forward]--> (0,0) --[3.Turn Right]--> (0,0, 90°) --[4.Forward]--> (1,0) -- wait 4 steps!
  // Simple 4-step path:
  // Step 1: Forward  -> (0, 1), 0°
  // Step 2: Turn Right -> (0, 1), 90°
  // Step 3: Forward -> (1, 1), 90°
  // Step 4: Forward -> (2, 1), 90° [Target at cell (2, 1) -> row 1, col 2]

  const poses = [
    { col: 0, row: 2, rot: 0 },   // Start
    { col: 0, row: 1, rot: 0 },   // Step 1: Forward
    { col: 0, row: 1, rot: 90 },  // Step 2: Turn Right
    { col: 1, row: 1, rot: 90 },  // Step 3: Forward
    { col: 2, row: 1, rot: 90 }   // Step 4: Forward (Goal!)
  ];

  // Reposition star dynamically to cell (col:2, row:1) -> index 5
  const cells = document.querySelectorAll('.cell');
  const star = document.querySelector('.star-target');
  cells[5].appendChild(star);

  const robot = document.getElementById('robot');
  const stepItems = document.querySelectorAll('.step-item');
  const runBtn = document.getElementById('runBtn');
  const resetBtn = document.getElementById('resetBtn');

  let currentStep = 0;
  let timer = null;
  let isRunning = false;

  function updateRobot(stepIndex) {
    const p = poses[stepIndex];
    const cellSize = 76; // approximate cell size including gap
    const x = p.col * cellSize + 6;
    const y = p.row * cellSize + 6;
    robot.style.transform = `translate(${x}px, ${y}px) rotate(${p.rot}deg)`;

    stepItems.forEach((item, idx) => {
      item.classList.remove('active', 'done');
      if (idx === stepIndex - 1) {
        item.classList.add('active');
      } else if (idx < stepIndex - 1) {
        item.classList.add('done');
      }
    });
  }

  function nextStep() {
    if (currentStep < 4) {
      currentStep++;
      updateRobot(currentStep);
    } else {
      pause();
    }
  }

  function run() {
    if (currentStep >= 4) {
      currentStep = 0;
      updateRobot(0);
    }
    isRunning = true;
    runBtn.textContent = '⏸ Pause';
    timer = setInterval(() => {
      if (currentStep < 4) {
        nextStep();
      } else {
        pause();
      }
    }, 850);
  }

  function pause() {
    isRunning = false;
    runBtn.textContent = '▶ Run';
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  function reset() {
    pause();
    currentStep = 0;
    updateRobot(0);
  }

  runBtn.addEventListener('click', () => {
    if (isRunning) {
      pause();
    } else {
      run();
    }
  });

  resetBtn.addEventListener('click', reset);

  stepItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
      pause();
      currentStep = idx + 1;
      updateRobot(currentStep);
    });
  });

  // Initialize at start position
  updateRobot(0);
</script>

</body>
</html>

What happens if we mix up the order of our steps?

Robots follow our instructions strictly in the order we give them.

If you swap two steps by mistake, your robot will turn too early or move in the wrong direction!

<!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>Robot Instructions Sequence</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
  body {
    background: transparent;
    color: #1e293b;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    gap: 10px;
  }

  /* Mode Switcher */
  .mode-switch {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 999px;
  }
  .mode-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
  }
  .mode-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .mode-btn.swapped-btn.active {
    color: #dc2626;
  }

  /* Main Display Grid */
  .main-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 440px;
    align-items: center;
  }

  /* Instruction Sequence List */
  .instruction-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  .step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    transition: all 0.25s ease;
  }
  .step-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
  }
  .step-item.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 0 0 1px #3b82f6;
  }
  .step-item.active .num {
    background: #3b82f6;
    color: #ffffff;
  }
  .step-item.swapped-tag {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
  }
  .step-item.swapped-tag .num {
    background: #ef4444;
    color: #ffffff;
  }

  /* Floor Arena */
  .arena-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  }
  .grid-floor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
    height: 100%;
    gap: 4px;
    position: relative;
  }
  .cell {
    background: #f8fafc;
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .cell.target-cell {
    background: #fef9c3;
    border-style: solid;
    border-color: #facc15;
  }
  .cell.target-cell::after {
    content: '⭐';
    font-size: 20px;
  }
  .cell.start-cell::before {
    content: 'START';
    font-size: 8px;
    font-weight: 800;
    color: #94a3b8;
    position: absolute;
    bottom: 2px;
  }
  .cell.wrong-target {
    border-color: #fca5a5;
    background: #fff1f2;
  }
  .cell.wrong-target::after {
    content: '❌';
    font-size: 16px;
  }

  /* Robot Avatar */
  .robot {
    position: absolute;
    width: calc((100% - 8px) / 3);
    height: calc((100% - 12px) / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 10;
    transition: left 0.4s ease, top 0.4s ease, transform 0.4s ease;
    pointer-events: none;
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .btn:hover {
    background: #f1f5f9;
  }
  .step-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    min-width: 70px;
    text-align: center;
  }

  @media (max-width: 360px) {
    .main-stage { gap: 8px; }
    .step-item { font-size: 11px; padding: 4px 6px; }
    .robot { font-size: 20px; }
  }
</style>
</head>
<body>

  
  <div class="mode-switch">
    <button class="mode-btn active" id="btnCorrect">✓ Correct Order</button>
    <button class="mode-btn swapped-btn" id="btnSwapped">⇄ Swapped Steps</button>
  </div>

  
  <div class="main-stage">
    <div class="instruction-card" id="stepList">
      
    </div>

    <div class="arena-wrapper">
      <div class="grid-floor" id="floorGrid">
        
      </div>
      <div class="robot" id="robot">🤖</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">◀</button>
    <button class="btn" id="playBtn">▶ Play</button>
    <button class="btn" id="nextBtn">▶</button>
    <button class="btn" id="resetBtn">↺</button>
    <span class="step-label" id="stepIndicator">Start</span>
  </div>

<script>
  const sequences = {
    correct: {
      steps: [
        { text: "Move Forward", icon: "⬆", swap: false },
        { text: "Move Forward", icon: "⬆", swap: false },
        { text: "Turn Right", icon: "↪", swap: false },
        { text: "Move Forward", icon: "⬆", swap: false }
      ],
      // [col (0-2), row (0-3), angleDeg]
      positions: [
        { col: 0, row: 3, deg: 0 },    // Start
        { col: 0, row: 2, deg: 0 },    // 1. Forward
        { col: 0, row: 1, deg: 0 },    // 2. Forward
        { col: 0, row: 1, deg: 90 },   // 3. Turn Right
        { col: 1, row: 1, deg: 90 }    // 4. Forward (Goal)
      ],
      target: { col: 1, row: 1, type: 'target-cell' }
    },
    swapped: {
      steps: [
        { text: "Move Forward", icon: "⬆", swap: false },
        { text: "Turn Right", icon: "↪", swap: true },
        { text: "Move Forward", icon: "⬆", swap: true },
        { text: "Move Forward", icon: "⬆", swap: false }
      ],
      positions: [
        { col: 0, row: 3, deg: 0 },    // Start
        { col: 0, row: 2, deg: 0 },    // 1. Forward
        { col: 0, row: 2, deg: 90 },   // 2. Turn Right early!
        { col: 1, row: 2, deg: 90 },   // 3. Forward
        { col: 2, row: 2, deg: 90 }    // 4. Forward (Misses!)
      ],
      target: { col: 1, row: 1, type: 'target-cell' },
      wrongTarget: { col: 2, row: 2, type: 'wrong-target' }
    }
  };

  let currentMode = 'correct';
  let stepIndex = 0;
  let timer = null;

  const floorGrid = document.getElementById('floorGrid');
  const stepList = document.getElementById('stepList');
  const robot = document.getElementById('robot');
  const stepIndicator = document.getElementById('stepIndicator');
  const btnCorrect = document.getElementById('btnCorrect');
  const btnSwapped = document.getElementById('btnSwapped');
  const playBtn = document.getElementById('playBtn');

  // Generate 3x4 grid cells
  function buildGrid() {
    floorGrid.innerHTML = '';
    for (let r = 0; r < 4; r++) {
      for (let c = 0; c < 3; c++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.id = `cell-${c}-${r}`;
        if (c === 0 && r === 3) cell.classList.add('start-cell');
        if (c === 1 && r === 1) cell.classList.add('target-cell');
        if (currentMode === 'swapped' && c === 2 && r === 2) cell.classList.add('wrong-target');
        floorGrid.appendChild(cell);
      }
    }
  }

  // Render Instruction List
  function renderInstructions() {
    const seq = sequences[currentMode];
    stepList.innerHTML = '';
    seq.steps.forEach((s, idx) => {
      const item = document.createElement('div');
      item.className = 'step-item' + (s.swap ? ' swapped-tag' : '');
      item.id = `step-item-${idx}`;
      item.innerHTML = `
        <span class="num">${idx + 1}</span>
        <span>${s.icon} ${s.text}</span>
      `;
      stepList.appendChild(item);
    });
  }

  // Update robot position and highlights
  function updateVisuals() {
    const seq = sequences[currentMode];
    const pos = seq.positions[stepIndex];

    // Grid coordinates to percentage
    const leftPct = (pos.col / 3) * 100;
    const topPct = (pos.row / 4) * 100;

    robot.style.left = `calc(${leftPct}% + ${pos.col * 2}px)`;
    robot.style.top = `calc(${topPct}% + ${pos.row * 3}px)`;
    robot.style.transform = `rotate(${pos.deg}deg)`;

    // Highlight active step item
    seq.steps.forEach((_, idx) => {
      const el = document.getElementById(`step-item-${idx}`);
      if (el) {
        if (idx === stepIndex - 1) {
          el.classList.add('active');
        } else {
          el.classList.remove('active');
        }
      }
    });

    // Step text label
    if (stepIndex === 0) {
      stepIndicator.textContent = 'Start';
    } else {
      stepIndicator.textContent = `Step ${stepIndex} / 4`;
    }
  }

  function setMode(mode) {
    currentMode = mode;
    btnCorrect.classList.toggle('active', mode === 'correct');
    btnSwapped.classList.toggle('active', mode === 'swapped');
    stopAutoPlay();
    stepIndex = 0;
    buildGrid();
    renderInstructions();
    updateVisuals();
  }

  function nextStep() {
    const max = sequences[currentMode].positions.length - 1;
    if (stepIndex < max) {
      stepIndex++;
      updateVisuals();
    } else {
      stopAutoPlay();
    }
  }

  function prevStep() {
    if (stepIndex > 0) {
      stepIndex--;
      updateVisuals();
    }
  }

  function reset() {
    stopAutoPlay();
    stepIndex = 0;
    updateVisuals();
  }

  function togglePlay() {
    if (timer) {
      stopAutoPlay();
    } else {
      const max = sequences[currentMode].positions.length - 1;
      if (stepIndex >= max) stepIndex = 0;
      updateVisuals();
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(() => {
        if (stepIndex < max) {
          stepIndex++;
          updateVisuals();
        } else {
          stopAutoPlay();
        }
      }, 1000);
    }
  }

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

  // Event Listeners
  btnCorrect.addEventListener('click', () => setMode('correct'));
  btnSwapped.addEventListener('click', () => setMode('swapped'));
  document.getElementById('nextBtn').addEventListener('click', () => { stopAutoPlay(); nextStep(); });
  document.getElementById('prevBtn').addEventListener('click', () => { stopAutoPlay(); prevStep(); });
  document.getElementById('resetBtn').addEventListener('click', reset);
  playBtn.addEventListener('click', togglePlay);

  // Initialize
  setMode('correct');
</script>
</body>
</html>

How do software engineers write these exact same robot commands on a computer?

In computer languages like **JavaScript**, each instruction is written as an action word followed by parentheses `()` and a semicolon `;`.

Notice how each line of code is just one step in our sequence.

<!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>Giving Instructions to a Robot</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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .layout {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
      align-items: center;
    }
    .panel {
      flex: 1 1 200px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 180px;
    }
    .panel-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .code-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .code-line {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .code-line .num {
      color: #94a3b8;
      font-size: 11px;
      width: 12px;
    }
    .code-line.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      font-weight: 600;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
    }
    .code-line.done {
      border-color: #cbd5e1;
      background: #f1f5f9;
      color: #64748b;
    }
    .grid-container {
      position: relative;
      width: 180px;
      height: 180px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
    .grid-cell {
      border: 1px dashed #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .target {
      font-size: 26px;
      transition: transform 0.3s ease;
    }
    .target.collected {
      transform: scale(0);
      opacity: 0;
    }
    .robot {
      position: absolute;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
      pointer-events: none;
    }
    .sparkle {
      position: absolute;
      right: 14px;
      bottom: 14px;
      font-size: 24px;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.3s ease;
      pointer-events: none;
      z-index: 11;
    }
    .sparkle.show {
      opacity: 1;
      transform: scale(1.2);
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      user-select: none;
    }
    .btn:active {
      background: #f1f5f9;
    }
    .btn-primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .btn-primary:active {
      background: #0369a1;
    }
  </style>
</head>
<body>

  <div class="layout">
    
    <div class="panel">
      <div class="panel-title">Sequence</div>
      <div class="code-list" id="codeList">
        <div class="code-line" data-step="0"><span class="num">1</span>moveForward()</div>
        <div class="code-line" data-step="1"><span class="num">2</span>turnRight()</div>
        <div class="code-line" data-step="2"><span class="num">3</span>moveForward()</div>
        <div class="code-line" data-step="3"><span class="num">4</span>collect()</div>
      </div>
    </div>

    
    <div class="panel" style="align-items: center;">
      <div class="panel-title" style="align-self: flex-start;">Result</div>
      <div class="grid-container">
        
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell">
          <span class="target" id="star">⭐</span>
        </div>

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

  
  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <button class="btn btn-primary" id="playBtn">▶ Run</button>
    <button class="btn" id="nextBtn">→</button>
    <button class="btn" id="resetBtn">↺</button>
  </div>

  <script>
    const robot = document.getElementById('robot');
    const star = document.getElementById('star');
    const sparkle = document.getElementById('sparkle');
    const lines = document.querySelectorAll('.code-line');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const resetBtn = document.getElementById('resetBtn');

    // States: 0 = start, 1 = move 1, 2 = turn, 3 = move 2, 4 = collect
    const poses = [
      { x: 0, y: 60, rot: 0 },    // Start (0, 1) facing East
      { x: 60, y: 60, rot: 0 },   // Step 1: forward to (1, 1)
      { x: 60, y: 60, rot: 90 },  // Step 2: turn right (South)
      { x: 60, y: 120, rot: 90 }, // Step 3: forward to (1, 2)
      { x: 120, y: 120, rot: 0 }  // Step 4: collect at (2, 2)
    ];

    // Correcting grid steps to reach (2,2):
    // Start at (0, 0), facing East
    const path = [
      { x: 0, y: 0, rot: 0, doneIdx: -1 },       // Step 0: Initial
      { x: 120, y: 0, rot: 0, doneIdx: 0 },      // Step 1: moveForward() -> (2, 0)
      { x: 120, y: 0, rot: 90, doneIdx: 1 },     // Step 2: turnRight() -> face South
      { x: 120, y: 120, rot: 90, doneIdx: 2 },   // Step 3: moveForward() -> (2, 2)
      { x: 120, y: 120, rot: 90, doneIdx: 3 }    // Step 4: collect()
    ];

    let currentStep = 0;
    let timer = null;

    function render(step) {
      currentStep = Math.max(0, Math.min(step, 4));
      const pos = path[currentStep];

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

      lines.forEach((line, idx) => {
        line.classList.remove('active', 'done');
        if (idx === currentStep - 1) {
          line.classList.add('active');
        } else if (idx < currentStep - 1) {
          line.classList.add('done');
        }
      });

      if (currentStep === 4) {
        star.classList.add('collected');
        sparkle.classList.add('show');
      } else {
        star.classList.remove('collected');
        sparkle.classList.remove('show');
      }
    }

    function stopAuto() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Run';
      }
    }

    function startAuto() {
      stopAuto();
      if (currentStep >= 4) {
        render(0);
      }
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(() => {
        if (currentStep < 4) {
          render(currentStep + 1);
        } else {
          stopAuto();
        }
      }, 1000);
    }

    playBtn.addEventListener('click', () => {
      if (timer) {
        stopAuto();
      } else {
        startAuto();
      }
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      render(currentStep - 1);
    });

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

    resetBtn.addEventListener('click', () => {
      stopAuto();
      render(0);
    });

    lines.forEach((line, idx) => {
      line.addEventListener('click', () => {
        stopAuto();
        render(idx + 1);
      });
    });

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

Next time you want a robot or character to move, plan your path, line up your instructions in order, and press run!

technology

Giving Instructions to a Robot. Develop a sequence of instructions and run them using a programmable device.

Bee-Bots Basics Activity (Algorithms & Programming Sequences)

What is an Algorithm? Early Level Computing Science

Getting to Know Bee-Bot: Floor Robot Sequences and Debugging

At Early Level (P1 / ages 4-5), abstract digital thinking should always be scaffolded through physical, kinesthetic, and unplugged experiences first. Begin with 'Human Robot' games where children direct a peer or teacher using verbal directional language. Transition to tangible card sequences (arrow cards) before entering commands on floor programmable devices (like Bee-Bots or Blue-Bots). Emphasize paired programming (a 'Driver' who presses buttons and a 'Navigator' who lays down the command cards) to encourage collaborative problem-solving, verbal reasoning, and active debugging.

Giving Instructions to a Robot

Building a Sequence

Order Matters