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

How does a toy robot find its way to a hidden treasure chest?

It follows a **sequence**, which is a list of steps in exact order from start to finish.

Each arrow tells our robot to move **one square** in that exact 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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    .sequence-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .seq-step {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      font-size: 20px;
      font-weight: 700;
      color: #6b7280;
      transition: all 0.3s ease;
      cursor: pointer;
    }

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

    .seq-step.done {
      background: #e1f5fe;
      border-color: #b3e5fc;
      color: #0288d1;
    }

    .grid-container {
      position: relative;
      width: min(72vw, 240px);
      height: min(72vw, 240px);
      background: #ffffff;
      border-radius: 12px;
      border: 2px solid #e6e6e6;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 4px;
      padding: 4px;
    }

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

    .cell.path {
      background: #e1f5fe;
    }

    .cell.goal {
      background: #e8f5e9;
    }

    .flag-icon {
      font-size: 20px;
    }

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

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

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

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

    .btn:active {
      filter: brightness(0.95);
    }
  </style>
</head>
<body>

  
  <div class="sequence-bar" id="sequenceBar">
    <button class="seq-step active" onclick="setStep(0)">Start</button>
    <button class="seq-step" onclick="setStep(1)">➔</button>
    <button class="seq-step" onclick="setStep(2)">➔</button>
    <button class="seq-step" onclick="setStep(3)">⬆</button>
    <button class="seq-step" onclick="setStep(4)">➔</button>
  </div>

  
  <div class="grid-container" id="grid">
    <div class="robot" id="robot">🤖</div>
    
    
    <div class="cell" id="c-0-0"></div>
    <div class="cell" id="c-1-0"></div>
    <div class="cell" id="c-2-0"></div>
    <div class="cell goal" id="c-3-0"><span class="flag-icon">⭐</span></div>
    
    <div class="cell" id="c-0-1"></div>
    <div class="cell" id="c-1-1"></div>
    <div class="cell" id="c-2-1"></div>
    <div class="cell" id="c-3-1"></div>
    
    <div class="cell" id="c-0-2"></div>
    <div class="cell" id="c-1-2"></div>
    <div class="cell" id="c-2-2"></div>
    <div class="cell" id="c-3-2"></div>
    
    <div class="cell" id="c-0-3"></div>
    <div class="cell" id="c-1-3"></div>
    <div class="cell" id="c-2-3"></div>
    <div class="cell" id="c-3-3"></div>
  </div>

  
  <div class="controls">
    <button class="btn" onclick="prevStep()">◀</button>
    <button class="btn btn-primary" id="playBtn" onclick="togglePlay()">▶ Play</button>
    <button class="btn" onclick="nextStep()">▶</button>
  </div>

  <script>
    const path = [
      { x: 0, y: 1 }, // Start
      { x: 1, y: 1 }, // Right
      { x: 2, y: 1 }, // Right
      { x: 2, y: 0 }, // Up
      { x: 3, y: 0 }  // Right (Goal)
    ];

    let currentStep = 0;
    let timer = null;

    const robot = document.getElementById('robot');
    const stepButtons = document.querySelectorAll('.seq-step');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      // Move robot
      const pos = path[currentStep];
      robot.style.transform = `translate(${pos.x * 100}%, ${pos.y * 100}%)`;

      // Update sequence step highlights
      stepButtons.forEach((btn, idx) => {
        btn.classList.remove('active', 'done');
        if (idx === currentStep) {
          btn.classList.add('active');
        } else if (idx < currentStep) {
          btn.classList.add('done');
        }
      });

      // Highlight path cells
      for (let y = 0; y < 4; y++) {
        for (let x = 0; x < 4; x++) {
          const cell = document.getElementById(`c-${x}-${y}`);
          if (!cell.classList.contains('goal')) {
            cell.classList.remove('path');
          }
        }
      }

      for (let i = 0; i <= currentStep; i++) {
        const p = path[i];
        const cell = document.getElementById(`c-${p.x}-${p.y}`);
        if (!cell.classList.contains('goal')) {
          cell.classList.add('path');
        }
      }
    }

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

    function nextStep() {
      currentStep = (currentStep + 1) % path.length;
      updateView();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + path.length) % path.length;
      updateView();
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Play';
      } else {
        playBtn.textContent = '⏸ Pause';
        timer = setInterval(() => {
          nextStep();
        }, 1200);
      }
    }

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

What happens when we string multiple arrows together into a path?

To reach our destination, we read the arrows from **left to right** and take one hop at a time.

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

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

    .sequence-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 420px;
    }

    .seq-step {
      flex: 1;
      aspect-ratio: 1;
      max-width: 58px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
    }

    .seq-num {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 2px;
    }

    .seq-step.active {
      background: #e0f2fe;
      border-color: #0284c7;
      box-shadow: 0 0 0 2px #38bdf8;
      color: #0369a1;
    }

    .seq-step.passed {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #94a3b8;
    }

    /* Grid Area */
    .grid-wrapper {
      position: relative;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1;
      background: #ffffff;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      padding: 6px;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .cell {
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #edf2f7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      position: relative;
    }

    .cell.start-cell::after {
      content: "🚩";
      font-size: 20px;
      opacity: 0.35;
    }

    .cell.goal-cell::after {
      content: "⭐";
      font-size: 22px;
    }

    /* Moving Character */
    #character {
      position: absolute;
      width: calc(25% - 6px);
      height: calc(25% - 6px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      z-index: 10;
      transition: left 0.4s ease, top 0.4s ease;
      pointer-events: none;
    }

    /* Path Trail */
    .trail-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background: #38bdf8;
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease;
      z-index: 5;
    }

    .trail-dot.visible {
      opacity: 0.7;
    }

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

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

    .btn:active {
      background: #f1f5f9;
    }

    .btn-play {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      flex: 1;
    }

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

  
  <div class="sequence-container">
    <div class="seq-step" data-step="0" onclick="goToStep(0)">
      <span class="seq-num">1</span>
      <span>➡️</span>
    </div>
    <div class="seq-step" data-step="1" onclick="goToStep(1)">
      <span class="seq-num">2</span>
      <span>➡️</span>
    </div>
    <div class="seq-step" data-step="2" onclick="goToStep(2)">
      <span class="seq-num">3</span>
      <span>⬆️</span>
    </div>
    <div class="seq-step" data-step="3" onclick="goToStep(3)">
      <span class="seq-num">4</span>
      <span>⬆️</span>
    </div>
    <div class="seq-step" data-step="4" onclick="goToStep(4)">
      <span class="seq-num">5</span>
      <span>➡️</span>
    </div>
  </div>

  
  <div class="grid-wrapper" id="grid">
    
    <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell goal-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="cell start-cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>

    
    <div id="character">🤖</div>
  </div>

  
  <div class="controls">
    <button class="btn" onclick="prevStep()" aria-label="Previous">◀</button>
    <button class="btn btn-play" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="btn" onclick="nextStep()" aria-label="Next">▶</button>
  </div>

  <script>
    // Grid Positions (col 0-3, row 0-3)
    // Step 0: Start at (0,3)
    // Step 1: ➡️ to (1,3)
    // Step 2: ➡️ to (2,3)
    // Step 3: ⬆️ to (2,2)
    // Step 4: ⬆️ to (2,1)
    // Step 5: ➡️ to (3,0) -- wait, 3,0 is Goal! Let's align path:
    // (0,3) -> (1,3) -> (2,3) -> (2,2) -> (2,0) -> (3,0)
    const positions = [
      { c: 0, r: 3 }, // Initial Start
      { c: 1, r: 3 }, // Step 1: Right
      { c: 2, r: 3 }, // Step 2: Right
      { c: 2, r: 2 }, // Step 3: Up
      { c: 2, r: 0 }, // Step 4: Up 2
      { c: 3, r: 0 }  // Step 5: Right -> Goal (index 3, row 0)
    ];

    let currentStep = 0; // 0 to 5
    let isPlaying = true;
    let timer = null;

    const char = document.getElementById('character');
    const stepCards = document.querySelectorAll('.seq-step');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      // Position character (grid layout is 4 cols, each 25%)
      const pos = positions[currentStep];
      const leftPercent = pos.c * 25;
      const topPercent = pos.r * 25;
      
      char.style.left = `calc(${leftPercent}% + 3px)`;
      char.style.top = `calc(${topPercent}% + 3px)`;

      if (currentStep === 5) {
        char.textContent = '🎉';
      } else {
        char.textContent = '🤖';
      }

      // Update sequence bar
      stepCards.forEach((card, idx) => {
        card.classList.remove('active', 'passed');
        if (currentStep === 0) {
          // At start, none active yet
        } else if (idx === currentStep - 1) {
          card.classList.add('active');
        } else if (idx < currentStep - 1) {
          card.classList.add('passed');
        }
      });
    }

    function nextStep() {
      currentStep = (currentStep + 1) % positions.length;
      updateView();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + positions.length) % positions.length;
      updateView();
    }

    function goToStep(seqIndex) {
      currentStep = seqIndex + 1;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        startAutoPlay();
      } else {
        playBtn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    function startAutoPlay() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 1500);
    }

    // Initialize
    updateView();
    startAutoPlay();
  </script>
</body>
</html>

A common mistake is rushing ahead and **skipping an arrow**, which lands you in the wrong square.

Always point your finger at each arrow as you move so you never lose your place on the map.

math

Following a Sequence of Directional Instructions. Follow a multi-step spoken or drawn instruction chain to travel from a start point to a destination.

Barefoot Early Years: Busy Bodies & Route Algorithms

NRICH Early Years: Mapping and Spatial Reasoning

KS1 Programming & Route Sequencing: Floor Robots and Fakebots

In Early Level (P1) CfE pedagogy, spatial and directional learning should begin with embodied physical movement (e.g., children acting as robots or guiding peers through obstacle courses) before transitioning to semi-concrete visual tracks (floor mats, arrow cards) and abstract symbol chains. Consistently reinforce that turns happen on the spot to prevent confusion between rotating and translating across the grid.

Following a Sequence of Directional Instructions

Reading Direction Arrows

Step-by-Step Journeys

Don't Skip a Step!

Key takeaways