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 opening a giant box of Lego blocks with 500 pieces, but there is no instruction booklet inside!

An **algorithm** is a list of step-by-step instructions to solve a problem or complete a task.

<!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>What Is an Algorithm?</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
  }

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

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

  /* Algorithm Instruction Steps */
  .steps-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 150px;
    width: 100%;
  }

  .step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
  }

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

  .step-num {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    width: 18px;
  }

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

  .step-icon {
    font-size: 18px;
    line-height: 1;
  }

  .step-label {
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
  }

  /* Grid World */
  .grid-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  }

  .grid-board {
    position: relative;
    width: 192px;
    height: 192px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 12px;
  }

  .grid-cell {
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #e2e8f0;
  }

  .target-star {
    font-size: 24px;
    animation: starPulse 2s ease-in-out infinite;
  }

  @keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }

  /* Bot Actor */
  .bot-actor {
    position: absolute;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transition: left 0.4s ease, top 0.4s ease, transform 0.3s ease;
    z-index: 10;
  }

  /* Path Dots */
  .path-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.3s ease;
  }

  .path-dot.passed {
    background: #7dd3fc;
  }

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

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

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

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

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

  <div class="main-layout">
    
    <div class="steps-list" id="stepsList">
      <div class="step-item active" data-step="0">
        <span class="step-num">1</span>
        <span class="step-icon">➡️</span>
        <span class="step-label">Right</span>
      </div>
      <div class="step-item" data-step="1">
        <span class="step-num">2</span>
        <span class="step-icon">➡️</span>
        <span class="step-label">Right</span>
      </div>
      <div class="step-item" data-step="2">
        <span class="step-num">3</span>
        <span class="step-icon">⬆️</span>
        <span class="step-label">Up</span>
      </div>
      <div class="step-item" data-step="3">
        <span class="step-num">4</span>
        <span class="step-icon">⬆️</span>
        <span class="step-label">Goal ⭐</span>
      </div>
    </div>

    
    <div class="grid-card">
      <div class="grid-board" id="board">
        
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"><span class="target-star">⭐</span></div>

        
        <div class="grid-cell"></div>
        <div class="grid-cell"></div>
        <div class="grid-cell"><div class="path-dot" id="dot2"></div></div>

        
        <div class="grid-cell"><div class="path-dot passed" id="dot0"></div></div>
        <div class="grid-cell"><div class="path-dot" id="dot1"></div></div>
        <div class="grid-cell"></div>

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

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

<script>
  // Positions corresponding to: Start, Step 1, Step 2, Step 3, Step 4 (Goal)
  // Grid layout is 3x3. Grid cell size is 56px + 6px gap = 62px offset, padding 6px.
  const positions = [
    { x: 6, y: 130 },   // [0, 2] Bottom-Left (Start)
    { x: 68, y: 130 },  // [1, 2] Step 1: Right
    { x: 130, y: 130 }, // [2, 2] Step 2: Right
    { x: 130, y: 68 },  // [2, 1] Step 3: Up
    { x: 130, y: 6 }    // [2, 0] Step 4: Up (Star)
  ];

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

  const bot = document.getElementById('bot');
  const stepItems = document.querySelectorAll('.step-item');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const dots = [
    document.getElementById('dot0'),
    document.getElementById('dot1'),
    document.getElementById('dot2')
  ];

  function render(index) {
    currentStep = index;
    
    // Position Bot
    const pos = positions[index];
    bot.style.left = pos.x + 'px';
    bot.style.top = pos.y + 'px';

    // Celebration effect on goal
    if (index === 4) {
      bot.style.transform = 'scale(1.2) rotate(8deg)';
    } else {
      bot.style.transform = 'scale(1) rotate(0deg)';
    }

    // Step Highlighting (step index 0-3 maps to cards 0-3, 4 keeps last card highlighted)
    stepItems.forEach((item, i) => {
      const active = (i === index) || (index === 4 && i === 3);
      item.classList.toggle('active', active);
    });

    // Path dots highlighting
    dots.forEach((dot, i) => {
      dot.classList.toggle('passed', index > i);
    });
  }

  function nextStep() {
    let next = (currentStep + 1) % positions.length;
    render(next);
  }

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

  function startTimer() {
    stopTimer();
    timer = setInterval(nextStep, 2600);
  }

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

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

  // Click on step cards
  stepItems.forEach((item) => {
    item.addEventListener('click', () => {
      const stepIdx = parseInt(item.dataset.step, 10);
      render(stepIdx + 1);
      if (isPlaying) startTimer();
    });
  });

  playBtn.addEventListener('click', togglePlay);
  nextBtn.addEventListener('click', () => {
    nextStep();
    if (isPlaying) startTimer();
  });
  prevBtn.addEventListener('click', () => {
    prevStep();
    if (isPlaying) startTimer();
  });

  // Initial position
  render(1);
  startTimer();
</script>
</body>
</html>

Whenever you follow a recipe, build a toy, or brush your teeth, you are following an algorithm.

What happens if you mix up the steps and do them backwards?

An algorithm only works when the steps happen in the correct **sequence**, which means the exact order from start to finish.

<!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;
    }

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

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

    /* Mode Switcher */
    .mode-switch {
      display: flex;
      gap: 8px;
      background: #e5e7eb;
      padding: 4px;
      border-radius: 24px;
      width: 100%;
      max-width: 320px;
    }

    .mode-btn {
      flex: 1;
      padding: 8px 12px;
      border: none;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      color: #4b5563;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      text-align: center;
    }

    .mode-btn.active.correct {
      background: #ffffff;
      color: #059669;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .mode-btn.active.wrong {
      background: #ffffff;
      color: #dc2626;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    /* Sequence Flow */
    .sequence-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 6px;
    }

    .step-card {
      flex: 1;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: border-color 0.3s ease, transform 0.2s ease;
      min-width: 0;
    }

    .step-num {
      font-size: 12px;
      font-weight: 700;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .step-icon {
      font-size: 28px;
      line-height: 1;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrow {
      font-size: 18px;
      color: #9ca3af;
      font-weight: bold;
      user-select: none;
      flex-shrink: 0;
    }

    /* Big Visual Outcome Box */
    .outcome-box {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
      border: 2px solid #e5e7eb;
      transition: border-color 0.3s ease;
    }

    .outcome-box.correct {
      border-color: #10b981;
    }

    .outcome-box.wrong {
      border-color: #ef4444;
    }

    /* Foot Stage Display */
    .foot-stage {
      position: relative;
      width: 120px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .foot-base {
      font-size: 64px;
      line-height: 1;
      position: absolute;
      transition: opacity 0.3s ease;
    }

    .status-pill {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-pill.correct {
      background: #ecfdf5;
      color: #059669;
    }

    .status-pill.wrong {
      background: #fef2f2;
      color: #dc2626;
    }

    @media (max-width: 400px) {
      .step-icon {
        font-size: 24px;
      }
      .foot-base {
        font-size: 52px;
      }
      .foot-stage {
        height: 80px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="mode-switch">
      <button id="btn-correct" class="mode-btn active correct" onclick="setMode('correct')">✓ Correct</button>
      <button id="btn-wrong" class="mode-btn wrong" onclick="setMode('wrong')">✗ Wrong</button>
    </div>

    
    <div class="sequence-row">
      <div class="step-card">
        <span class="step-num">Step 1</span>
        <span id="step1-icon" class="step-icon">🧦</span>
      </div>

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

      <div class="step-card">
        <span class="step-num">Step 2</span>
        <span id="step2-icon" class="step-icon">👟</span>
      </div>

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

      <div class="step-card">
        <span class="step-num">Result</span>
        <span id="result-icon" class="step-icon">✅</span>
      </div>
    </div>

    
    <div id="outcome-box" class="outcome-box correct">
      <div class="foot-stage">
        <div id="foot-art" class="foot-base">👟</div>
      </div>
      <div id="status-pill" class="status-pill correct">
        <span id="status-text">Ready</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const btnCorrect = document.getElementById('btn-correct');
      const btnWrong = document.getElementById('btn-wrong');
      const step1 = document.getElementById('step1-icon');
      const step2 = document.getElementById('step2-icon');
      const result = document.getElementById('result-icon');
      const outcomeBox = document.getElementById('outcome-box');
      const footArt = document.getElementById('foot-art');
      const statusPill = document.getElementById('status-pill');
      const statusText = document.getElementById('status-text');

      if (mode === 'correct') {
        btnCorrect.className = 'mode-btn active correct';
        btnWrong.className = 'mode-btn wrong';
        step1.textContent = '🧦';
        step2.textContent = '👟';
        result.textContent = '✅';
        outcomeBox.className = 'outcome-box correct';
        footArt.textContent = '👟';
        statusPill.className = 'status-pill correct';
        statusText.textContent = '✓ Ready';
      } else {
        btnCorrect.className = 'mode-btn correct';
        btnWrong.className = 'mode-btn active wrong';
        step1.textContent = '👟';
        step2.textContent = '🧦';
        result.textContent = '❌';
        outcomeBox.className = 'outcome-box wrong';
        footArt.textContent = '🧦';
        statusPill.className = 'status-pill wrong';
        statusText.textContent = '✗ Bug';
      }
    }
  </script>
</body>
</html>

If you put your shoes on before your socks, your socks will end up stretched over your sneakers!

How do real computers and robots use these step-by-step instructions?

Computers cannot guess what you want — they only follow exact instructions written in code.

In JavaScript, we group steps together into a **function**, which is a named set of instructions you can run anytime.

<!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>Algorithm & Function</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/prism.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -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: 100%;
      padding: 12px;
      gap: 12px;
    }
    .main-grid {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }
    @media (max-width: 480px) {
      .main-grid {
        flex-direction: column;
      }
    }
    .code-card, .visual-card {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .visual-card {
      align-items: center;
      min-height: 160px;
      position: relative;
      overflow: hidden;
    }
    pre {
      margin: 0 !important;
      padding: 6px !important;
      background: transparent !important;
      font-size: 13px !important;
      line-height: 1.6 !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    }
    .code-line {
      display: block;
      padding: 2px 6px;
      border-radius: 6px;
      transition: background 0.3s ease, color 0.3s ease;
    }
    .code-line.active {
      background: rgba(34, 183, 255, 0.18);
      font-weight: 600;
    }
    .stage-item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 56px;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
      text-align: center;
    }
    .stage-item.active {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .stage-item.prev {
      transform: translate(-50%, -60%) scale(0.8);
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 500;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .btn-step.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
    .btn-play {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
      color: #1e2945;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s ease;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    <div class="code-card">
      <pre><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">makeJuice</span>() {
  <span class="code-line" id="code-0">addFruit();</span>
  <span class="code-line" id="code-1">blend();</span>
  <span class="code-line" id="code-2">serve();</span>
}</code></pre>
    </div>

    <div class="visual-card">
      <div class="stage-item active" id="stage-0">🍓 🍌</div>
      <div class="stage-item" id="stage-1">🌪️</div>
      <div class="stage-item" id="stage-2">🧃 ✨</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-play" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn-step active" id="tab-0">Step 1</button>
    <button class="btn-step" id="tab-1">Step 2</button>
    <button class="btn-step" id="tab-2">Step 3</button>
  </div>

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

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

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

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

    const playBtn = document.getElementById('playBtn');

    function setStep(idx) {
      currentStep = idx;
      for (let i = 0; i < TOTAL_STEPS; i++) {
        if (i === idx) {
          codeLines[i].classList.add('active');
          stageItems[i].className = 'stage-item active';
          tabs[i].classList.add('active');
        } else {
          codeLines[i].classList.remove('active');
          stageItems[i].className = i < idx ? 'stage-item prev' : 'stage-item';
          tabs[i].classList.remove('active');
        }
      }
    }

    function nextStep() {
      setStep((currentStep + 1) % TOTAL_STEPS);
    }

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

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

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

    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => {
        setStep(index);
        stopTimer();
      });
    });

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

Next time you tie your shoes or follow a game rule, ask yourself: what steps make up your algorithm?

technology

What Is an Algorithm?. Learners will understand that an algorithm is a set of step-by-step instructions for completing a task.

Conditionals with Cards & Real-Life Algorithms

What Is an Algorithm?

Crazy Character Algorithms & Unplugged Computational Thinking

At the 2nd-grade level, algorithms are best taught first using 'unplugged' physical activities (e.g., Simon Says with conditionals: 'If you are wearing sneakers, then tap your head') and concrete daily routines. Emphasize that order matters through humorously failed executions when steps are swapped, and frame debugging as detective work to foster growth mindset.

What Is an Algorithm?

The Steps Must Be in Order

Talking to Computers