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 want your best friend to do 20 jumping jacks. Would you rather shout "Jump!" twenty separate times, or just say "Do 20 jumping jacks" once?

In computer science, we use a shortcut called a **loop**, which tells someone or something to repeat actions without listing every single step.

How much easier does a loop make our instructions? Let's compare them side by side.

A **repeat command** tells a partner two things: what action to do, and how many times to repeat it.

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* Command Block */
    .command-builder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
    }

    .loop-card {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      background: #ffffff;
      padding: 12px 18px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      width: 100%;
    }

    .keyword {
      font-weight: 700;
      font-size: 16px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tag-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .tag-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .count-tag-label { color: #8b5cf6; }
    .action-tag-label { color: #0284c7; }

    .param-box {
      font-size: 16px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 36px;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .count-box {
      background: #f3e8ff;
      color: #7c3aed;
      border: 1.5px solid #d8b4fe;
    }

    .action-box {
      background: #e0f2fe;
      color: #0369a1;
      border: 1.5px solid #bae6fd;
    }

    /* Execution Stage */
    .stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      min-height: 140px;
    }

    .slots-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      flex-wrap: wrap;
    }

    .step-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-size: 24px;
      position: relative;
      transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .step-slot .num {
      position: absolute;
      top: 3px;
      left: 6px;
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
    }

    .step-slot.active {
      background: #f0fdf4;
      border-color: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    }

    .step-slot.pending {
      opacity: 0.45;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 480px;
    }

    .control-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
      flex: 1;
    }

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

    .btn.selected-count {
      background: #7c3aed;
      color: #ffffff;
      border-color: #7c3aed;
    }

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

    .play-btn {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      font-size: 15px;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 8px;
      cursor: pointer;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .play-btn:active {
      opacity: 0.85;
    }
  </style>
</head>
<body>

  
  <div class="command-builder">
    <div class="loop-card">
      <span class="keyword">Repeat</span>

      <div class="tag-group">
        <span class="tag-label count-tag-label">How many</span>
        <div class="param-box count-box" id="countDisplay">3</div>
      </div>

      <span class="keyword">times</span>

      <div class="tag-group">
        <span class="tag-label action-tag-label">What action</span>
        <div class="param-box action-box" id="actionDisplay">👏 Clap</div>
      </div>
    </div>
  </div>

  
  <div class="stage">
    <div class="slots-container" id="slotsContainer"></div>
  </div>

  
  <div class="controls">
    <div class="control-row">
      <div class="btn-group" id="countGroup">
        <button class="btn" data-count="2">2</button>
        <button class="btn selected-count" data-count="3">3</button>
        <button class="btn" data-count="4">4</button>
        <button class="btn" data-count="5">5</button>
      </div>
    </div>

    <div class="control-row">
      <div class="btn-group" id="actionGroup">
        <button class="btn selected-action" data-emoji="👏" data-name="Clap">👏 Clap</button>
        <button class="btn" data-emoji="🦶" data-name="Stomp">🦶 Stomp</button>
        <button class="btn" data-emoji="🌟" data-name="Jump">🌟 Jump</button>
      </div>
    </div>

    <button class="play-btn" id="runBtn">▶ Run Loop</button>
  </div>

  <script>
    let currentCount = 3;
    let currentEmoji = '👏';
    let currentAction = 'Clap';
    let isPlaying = false;
    let playTimer = null;

    const countDisplay = document.getElementById('countDisplay');
    const actionDisplay = document.getElementById('actionDisplay');
    const slotsContainer = document.getElementById('slotsContainer');
    const runBtn = document.getElementById('runBtn');

    function renderSlots() {
      slotsContainer.innerHTML = '';
      for (let i = 1; i <= currentCount; i++) {
        const slot = document.createElement('div');
        slot.className = 'step-slot pending';
        slot.id = 'slot-' + i;
        slot.innerHTML = `<span class="num">${i}</span><span>${currentEmoji}</span>`;
        slotsContainer.appendChild(slot);
      }
    }

    function updateCommand() {
      countDisplay.textContent = currentCount;
      actionDisplay.textContent = `${currentEmoji} ${currentAction}`;
      renderSlots();
    }

    function resetSlots() {
      for (let i = 1; i <= currentCount; i++) {
        const slot = document.getElementById('slot-' + i);
        if (slot) {
          slot.className = 'step-slot pending';
        }
      }
    }

    function runLoop() {
      if (isPlaying) {
        clearInterval(playTimer);
        isPlaying = false;
      }

      resetSlots();
      isPlaying = true;
      runBtn.textContent = '⏸ Running...';

      let step = 1;
      const highlightStep = () => {
        resetSlots();
        const activeSlot = document.getElementById('slot-' + step);
        if (activeSlot) {
          activeSlot.className = 'step-slot active';
        }

        step++;
        if (step > currentCount) {
          clearInterval(playTimer);
          setTimeout(() => {
            resetSlots();
            for (let i = 1; i <= currentCount; i++) {
              const s = document.getElementById('slot-' + i);
              if (s) s.className = 'step-slot';
            }
            isPlaying = false;
            runBtn.textContent = '▶ Run Loop';
          }, 600);
        }
      };

      highlightStep();
      playTimer = setInterval(highlightStep, 700);
    }

    // Count Button Handlers
    document.querySelectorAll('#countGroup .btn').forEach(btn => {
      btn.addEventListener('click', () => {
        if (isPlaying) { clearInterval(playTimer); isPlaying = false; runBtn.textContent = '▶ Run Loop'; }
        document.querySelectorAll('#countGroup .btn').forEach(b => b.classList.remove('selected-count'));
        btn.classList.add('selected-count');
        currentCount = parseInt(btn.getAttribute('data-count'), 10);
        updateCommand();
      });
    });

    // Action Button Handlers
    document.querySelectorAll('#actionGroup .btn').forEach(btn => {
      btn.addEventListener('click', () => {
        if (isPlaying) { clearInterval(playTimer); isPlaying = false; runBtn.textContent = '▶ Run Loop'; }
        document.querySelectorAll('#actionGroup .btn').forEach(b => b.classList.remove('selected-action'));
        btn.classList.add('selected-action');
        currentEmoji = btn.getAttribute('data-emoji');
        currentAction = btn.getAttribute('data-name');
        updateCommand();
      });
    });

    runBtn.addEventListener('click', runLoop);

    // Init
    updateCommand();
    setTimeout(runLoop, 600);
  </script>
</body>
</html>

Now that we know the shortcut, how do we play this game with a real partner?

In this unplugged game, one person is the **programmer** who writes the code, and one person is the **robot** who follows every command exactly.

You can group multiple movements inside one repeat block to create a fun dance routine.

<!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>Repeat Loop Dance Routine</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: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
      align-items: stretch;
    }

    @media (max-width: 440px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Loop Code Block */
    .loop-card {
      background: #ffffff;
      border: 2px solid #bae6fd;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .loop-header {
      background: #0284c7;
      color: #ffffff;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.5px;
      padding: 6px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .loop-badge {
      background: #ffffff;
      color: #0284c7;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 800;
    }

    .loop-body {
      border-left: 4px solid #0284c7;
      margin-left: 8px;
      padding: 8px 0 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .action-block {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s ease;
    }

    .action-block.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
      transform: translateX(4px);
    }

    .loop-end {
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      padding-left: 8px;
    }

    /* Stage Area */
    .stage-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      min-height: 180px;
    }

    .status-pill {
      background: #f0fdf4;
      border: 1px solid #86efac;
      color: #166534;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

    .floor-line {
      position: absolute;
      bottom: 22px;
      left: 10%;
      right: 10%;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
    }

    .floor-spot {
      position: absolute;
      bottom: 16px;
      width: 44px;
      height: 16px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px dashed #cbd5e1;
    }

    .floor-spot.left { left: 16%; }
    .floor-spot.center { left: calc(50% - 22px); }
    .floor-spot.right { right: 16%; }

    .robot-actor {
      position: absolute;
      bottom: 24px;
      left: calc(50% - 24px);
      width: 48px;
      height: 48px;
      font-size: 40px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .robot-bubble {
      position: absolute;
      top: -24px;
      font-size: 20px;
      animation: pulse 1s infinite alternate ease-in-out;
    }

    @keyframes pulse {
      0% { transform: scale(0.9); }
      100% { transform: scale(1.15); }
    }

    /* Controls */
    .controls-panel {
      width: 100%;
      max-width: 580px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 10px;
    }

    .iter-dots {
      display: flex;
      gap: 6px;
    }

    .iter-chip {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .iter-chip.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .ctrl-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
    }

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

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

  <div class="main-grid">
    
    <div class="loop-card">
      <div class="loop-header">
        <span>REPEAT</span>
        <span class="loop-badge">3 TIMES</span>
      </div>

      <div class="loop-body">
        <div class="action-block" id="block-0">
          <span>⬅️</span>
          <span>Step Left</span>
        </div>
        <div class="action-block" id="block-1">
          <span>➡️</span>
          <span>Step Right</span>
        </div>
        <div class="action-block" id="block-2">
          <span>👏</span>
          <span>Clap Hands</span>
        </div>
      </div>

      <div class="loop-end">↻ REPEAT LOOP</div>
    </div>

    
    <div class="stage-card">
      <div class="status-pill" id="status-text">
        <span>Loop 1 of 3</span>
      </div>

      <div class="stage-floor">
        <div class="floor-line"></div>
        <div class="floor-spot left"></div>
        <div class="floor-spot center"></div>
        <div class="floor-spot right"></div>

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

  
  <div class="controls-panel">
    <div class="iter-dots">
      <div class="iter-chip active" id="loop-chip-0">Loop 1</div>
      <div class="iter-chip" id="loop-chip-1">Loop 2</div>
      <div class="iter-chip" id="loop-chip-2">Loop 3</div>
    </div>

    <div class="btn-group">
      <button class="ctrl-btn" id="prev-btn" title="Previous Step">◀</button>
      <button class="ctrl-btn primary" id="play-btn">⏸ Pause</button>
      <button class="ctrl-btn" id="next-btn" title="Next Step">▶</button>
    </div>
  </div>

  <script>
    const TOTAL_LOOPS = 3;
    const ACTIONS_PER_LOOP = 3;
    const TOTAL_STEPS = TOTAL_LOOPS * ACTIONS_PER_LOOP; // 9 steps (0 to 8)

    const actions = [
      { transform: 'translateX(-54px) rotate(-6deg)', emoji: '⬅️', text: 'Step Left' },
      { transform: 'translateX(54px) rotate(6deg)',  emoji: '➡️', text: 'Step Right' },
      { transform: 'translateX(0px) translateY(-14px) scale(1.1)', emoji: '👏', text: 'Clap Hands' }
    ];

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

    const robot = document.getElementById('robot');
    const bubble = document.getElementById('bubble');
    const statusText = document.getElementById('status-text');
    const playBtn = document.getElementById('play-btn');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');

    const blocks = [
      document.getElementById('block-0'),
      document.getElementById('block-1'),
      document.getElementById('block-2')
    ];

    const chips = [
      document.getElementById('loop-chip-0'),
      document.getElementById('loop-chip-1'),
      document.getElementById('loop-chip-2')
    ];

    function updateView() {
      const loopIndex = Math.floor(currentStep / ACTIONS_PER_LOOP);
      const actionIndex = currentStep % ACTIONS_PER_LOOP;

      // Update blocks highlight
      blocks.forEach((b, idx) => {
        b.classList.toggle('active', idx === actionIndex);
      });

      // Update loop chips
      chips.forEach((c, idx) => {
        c.classList.toggle('active', idx === loopIndex);
      });

      // Update robot position & reaction
      const currentAction = actions[actionIndex];
      robot.style.transform = currentAction.transform;
      bubble.textContent = currentAction.emoji;

      // Update status pill
      statusText.innerHTML = `<span>Loop ${loopIndex + 1} of ${TOTAL_LOOPS} &bull; ${currentAction.text}</span>`;
    }

    function stepNext() {
      currentStep = (currentStep + 1) % TOTAL_STEPS;
      updateView();
    }

    function stepPrev() {
      currentStep = (currentStep - 1 + TOTAL_STEPS) % TOTAL_STEPS;
      updateView();
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(stepNext, 2600);
    }

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

    // Event listeners
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        stepNext();
        startAutoPlay();
      }
    });

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

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

    chips.forEach((chip, loopIdx) => {
      chip.addEventListener('click', () => {
        stopAutoPlay();
        currentStep = loopIdx * ACTIONS_PER_LOOP;
        updateView();
      });
    });

    // Initial render and start
    updateView();
    startAutoPlay();
  </script>
</body>
</html>

What happens if you want your robot to cheer after the dance is completely finished?

Any action placed **inside** the loop repeats every single round, but actions placed **after** the loop only happen once at the very end.

<!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>Inside vs After Loop</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .main-layout {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Code Block & Track Area */
    .columns {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 12px;
    }

    @media (max-width: 440px) {
      .columns {
        grid-template-columns: 1fr;
      }
    }

    /* Program Structure Box */
    .code-container {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .code-header {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .loop-block {
      background: #eff6ff;
      border: 2px dashed #93c5fd;
      border-radius: 8px;
      padding: 8px 10px;
      position: relative;
      transition: all 0.3s ease;
    }

    .loop-block.active-container {
      border-color: #22b7ff;
      background: #e0f2fe;
    }

    .loop-title {
      font-size: 14px;
      font-weight: 700;
      color: #0284c7;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .loop-badge {
      font-size: 11px;
      background: #bae6fd;
      color: #0369a1;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
    }

    .cmd-item {
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      transition: all 0.3s ease;
    }

    .cmd-inside {
      margin-left: 12px;
    }

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

    .outside-block {
      background: #fdf4ff;
      border: 1px solid #f0abfc;
      border-radius: 8px;
      padding: 6px 8px;
    }

    .outside-block.active-container {
      border-color: #d946ef;
      background: #fae8ff;
    }

    .outside-label {
      font-size: 11px;
      font-weight: 700;
      color: #a21caf;
      margin-bottom: 4px;
      display: block;
    }

    .cmd-outside.active {
      background: #c026d3;
      color: #ffffff;
      border-color: #a21caf;
      box-shadow: 0 2px 8px rgba(192, 38, 211, 0.35);
    }

    /* Path / Robot Grid */
    .robot-stage {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    .track {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
    }

    .track-cell {
      height: 40px;
      border-radius: 8px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      transition: all 0.3s ease;
      position: relative;
    }

    .track-cell.passed {
      background: #e0f2fe;
      border-color: #7dd3fc;
      color: #0369a1;
    }

    .track-cell.current {
      background: #bae6fd;
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.3);
      color: #0369a1;
    }

    .track-cell.finish {
      border-style: dashed;
      border-color: #f0abfc;
      background: #faf5ff;
      color: #a21caf;
    }

    .track-cell.finish.current {
      background: #f5d0fe;
      border-color: #d946ef;
      box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.3);
    }

    .robot-icon {
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    /* Controls & Stepper */
    .controls-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

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

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn-step.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
    }

    .btn-step.active.finish-step {
      background: #c026d3;
      border-color: #a21caf;
    }

    .play-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .play-btn:active {
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <div class="main-layout">
    <div class="columns">
      
      <div class="code-container">
        <div class="code-header">Program Code</div>
        
        <div class="loop-block" id="loopBox">
          <div class="loop-title">
            <span>🔁 Repeat 3 times</span>
            <span class="loop-badge" id="loopCounter">Loop: 1/3</span>
          </div>
          <div class="cmd-item cmd-inside" id="cmdForward">
            <span>➡️</span> Step Forward
          </div>
        </div>

        <div class="outside-block" id="afterBox">
          <span class="outside-label">After Loop</span>
          <div class="cmd-item cmd-outside" id="cmdCheer">
            <span>🎉</span> Cheer & Done!
          </div>
        </div>
      </div>

      
      <div class="robot-stage">
        <div class="code-header">Robot Action</div>
        <div class="track">
          <div class="track-cell" id="cell1">
            <span>Tile 1</span>
            <span class="cell-robot" id="r1">🤖</span>
          </div>
          <div class="track-cell" id="cell2">
            <span>Tile 2</span>
            <span class="cell-robot" id="r2"></span>
          </div>
          <div class="track-cell" id="cell3">
            <span>Tile 3</span>
            <span class="cell-robot" id="r3"></span>
          </div>
          <div class="track-cell finish" id="cellFinish">
            <span>End Target</span>
            <span class="cell-robot" id="rFinish"></span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="controls-panel">
      <div class="step-buttons">
        <button class="btn-step active" onclick="setStep(0)">Round 1</button>
        <button class="btn-step" onclick="setStep(1)">Round 2</button>
        <button class="btn-step" onclick="setStep(2)">Round 3</button>
        <button class="btn-step finish-step" onclick="setStep(3)">After Loop</button>
      </div>
      <button class="play-btn" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> Auto
      </button>
    </div>
  </div>

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

    const steps = [
      { round: 1, pos: 1, inside: true, cheer: false, text: "Loop: 1/3" },
      { round: 2, pos: 2, inside: true, cheer: false, text: "Loop: 2/3" },
      { round: 3, pos: 3, inside: true, cheer: false, text: "Loop: 3/3" },
      { round: 4, pos: 4, inside: false, cheer: true, text: "Done ✓" }
    ];

    function render() {
      const s = steps[currentStep];

      // Update Step buttons
      const btns = document.querySelectorAll('.btn-step');
      btns.forEach((b, idx) => {
        b.classList.toggle('active', idx === currentStep);
      });

      // Update Code Box states
      const loopBox = document.getElementById('loopBox');
      const afterBox = document.getElementById('afterBox');
      const cmdForward = document.getElementById('cmdForward');
      const cmdCheer = document.getElementById('cmdCheer');
      const loopCounter = document.getElementById('loopCounter');

      loopCounter.textContent = s.text;
      loopBox.classList.toggle('active-container', s.inside);
      afterBox.classList.toggle('active-container', !s.inside);

      cmdForward.classList.toggle('active', s.inside);
      cmdCheer.classList.toggle('active', !s.inside);

      // Update Track Cells and Robot Position
      for (let i = 1; i <= 3; i++) {
        const cell = document.getElementById('cell' + i);
        const r = document.getElementById('r' + i);
        cell.classList.remove('current', 'passed');
        r.textContent = '';

        if (i < s.pos && s.pos <= 3) {
          cell.classList.add('passed');
        } else if (i === s.pos) {
          cell.classList.add('current');
          r.textContent = '🤖';
        } else if (s.pos === 4) {
          cell.classList.add('passed');
        }
      }

      // Finish cell
      const finishCell = document.getElementById('cellFinish');
      const rFinish = document.getElementById('rFinish');
      finishCell.classList.remove('current');
      rFinish.textContent = '';

      if (s.pos === 4) {
        finishCell.classList.add('current');
        rFinish.textContent = '🤖 🎉';
      }
    }

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

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

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

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

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

How do programmers design a brand-new movement routine from start to finish?

How do programmers design a movement routine from scratch?

First, **Plan & Decompose** by breaking a routine down into individual movement steps.

Second, use **Pattern Recognition** to find repeating movement sequences.

Third, **Write Code** with loops by grouping that sequence inside a repeat block with a loop count.

Fourth, **Test & Debug** by having a partner act out the code and fixing any timing or movement errors.

First, **Plan & Decompose** by breaking your routine down into individual movement steps.

Next, use **Pattern Recognition** to spot any sequences of movements that repeat.

Then, **Write Code** with loops by grouping that repeating sequence inside a repeat block with a loop count.

Finally, **Test & Debug** by having a partner act out the program to find and fix any timing or movement errors.

Now you are ready to follow this process to build your own routine!

Write down a routine on paper like **Repeat 4 times: [ Spin once, Touch your toes ]**, then hand it to your partner and watch your human robot run the code!

technology

Unplugged Loops: Repeat Commands. Learners will give a partner a set of movement instructions using repeat phrases and act them out without a computer.

Lesson 6: Getting Loopy (Unplugged Activity)

Dance Move Algorithms & Repetition (Unplugged)

Using Loops in a Program: Repetition and Patterns

For 2nd grade mastery of TEKS 126.3(b)(2)(B), pair kinesthetic movement with physical artifacts such as large foam cards, dry-erase algorithm mats, or 'Repeat' brackets. Structure the activity with clear role reciprocity: Student A acts as the 'Programmer' (arranging movement command blocks inside a repeat loop), while Student B acts as the 'Robot' (executing the physical actions step-by-step). Emphasize explicit counting during partner testing so learners physically connect the loop counter $n$ with the number of times the sequence is enacted.

Unplugged Loops: Repeat Commands

The Repeat Shortcut

Programmer and Robot

Inside vs. Outside the Loop