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

Have you ever noticed that after every night comes morning, and traffic lights always switch colors in the exact same order?

Your brain is a natural detective, and it loves finding things that happen again and again.

A **pattern** is any sequence of shapes, sounds, or numbers that repeats or follows a specific **rule**.

The part that repeats is called the core unit. When you find the core unit, you can tell what comes next forever.

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

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

  /* Controls / Tabs */
  .tabs {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
  }
  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* Sequence Display */
  .pattern-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 24px 8px 12px;
  }

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

  .unit-group {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 2px dashed transparent;
    position: relative;
    transition: all 0.3s ease;
  }

  .unit-group.highlight {
    background: rgba(34, 183, 255, 0.08);
    border-color: #22b7ff;
  }

  .unit-group.dimmed {
    opacity: 0.45;
  }

  .tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  }

  .tile.shape-a {
    background: #e0f2fe;
    border: 2px solid #38bdf8;
    color: #0284c7;
  }

  .tile.shape-b {
    background: #ffedd5;
    border: 2px solid #fb923c;
    color: #ea580c;
  }

  .tile.target {
    background: #f8fafc;
    border: 2px dashed #94a3b8;
    color: #64748b;
    cursor: pointer;
  }

  .tile.target.solved {
    border-style: solid;
    cursor: default;
    animation: popIn 0.3s ease-out forwards;
  }

  @keyframes popIn {
    0% { transform: scale(0.7); opacity: 0; }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }

  /* Label Callout */
  .badge-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .highlight .badge-tag {
    opacity: 1;
  }

  /* Question & Choice Area */
  .predict-panel {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .choice-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }

  .choice-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .choice-btn:active {
    background: #f1f5f9;
  }

  .choice-btn.wrong {
    border-color: #f87171;
    background: #fef2f2;
  }

  .status-text {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    height: 18px;
  }
</style>
</head>
<body>

<div class="diagram-area">
  
  <div class="tabs">
    <button class="tab-btn active" id="tab0">1. Sequence</button>
    <button class="tab-btn" id="tab1">2. Core Unit</button>
    <button class="tab-btn" id="tab2">3. Predict</button>
  </div>

  
  <div class="pattern-container">
    <div class="units-row">
      
      <div class="unit-group" id="grp1">
        <span class="badge-tag">Core Unit</span>
        <div class="tile shape-a">▲</div>
        <div class="tile shape-b">●</div>
        <div class="tile shape-b">●</div>
      </div>

      
      <div class="unit-group" id="grp2">
        <span class="badge-tag">Repeat</span>
        <div class="tile shape-a">▲</div>
        <div class="tile shape-b">●</div>
        <div class="tile shape-b">●</div>
      </div>

      
      <div class="unit-group" id="grp3">
        <span class="badge-tag">Next</span>
        <div class="tile shape-a">▲</div>
        <div class="tile shape-b">●</div>
        <div class="tile target" id="targetTile">?</div>
      </div>
    </div>
  </div>

  
  <div class="predict-panel">
    <div class="status-text" id="statusLabel">A-B-B Pattern</div>
    <div class="choice-row" id="choiceRow" style="display: none;">
      <button class="choice-btn" id="choiceA" title="Triangle">▲</button>
      <button class="choice-btn" id="choiceB" title="Circle">●</button>
    </div>
  </div>
</div>

<script>
  const tab0 = document.getElementById('tab0');
  const tab1 = document.getElementById('tab1');
  const tab2 = document.getElementById('tab2');

  const grp1 = document.getElementById('grp1');
  const grp2 = document.getElementById('grp2');
  const grp3 = document.getElementById('grp3');
  const targetTile = document.getElementById('targetTile');
  const statusLabel = document.getElementById('statusLabel');
  const choiceRow = document.getElementById('choiceRow');
  const choiceA = document.getElementById('choiceA');
  const choiceB = document.getElementById('choiceB');

  let currentStep = 0;
  let solved = false;

  function setStep(step) {
    currentStep = step;
    [tab0, tab1, tab2].forEach((t, i) => t.classList.toggle('active', i === step));

    // Reset visual classes
    grp1.classList.remove('highlight', 'dimmed');
    grp2.classList.remove('highlight', 'dimmed');
    grp3.classList.remove('highlight', 'dimmed');

    if (step === 0) {
      statusLabel.textContent = 'A – B – B Pattern';
      choiceRow.style.display = 'none';
      resetTarget();
    } else if (step === 1) {
      grp1.classList.add('highlight');
      grp2.classList.add('dimmed');
      grp3.classList.add('dimmed');
      statusLabel.textContent = 'Core Unit: ▲ ● ●';
      choiceRow.style.display = 'none';
      resetTarget();
    } else if (step === 2) {
      grp1.classList.add('dimmed');
      grp2.classList.add('dimmed');
      grp3.classList.add('highlight');
      choiceRow.style.display = 'flex';
      if (!solved) {
        statusLabel.textContent = 'What comes next?';
      } else {
        showSolved();
      }
    }
  }

  function resetTarget() {
    solved = false;
    targetTile.className = 'tile target';
    targetTile.textContent = '?';
  }

  function showSolved() {
    targetTile.className = 'tile shape-b solved';
    targetTile.textContent = '●';
    statusLabel.textContent = 'Correct: ● completes the unit!';
  }

  tab0.addEventListener('click', () => setStep(0));
  tab1.addEventListener('click', () => setStep(1));
  tab2.addEventListener('click', () => setStep(2));

  choiceB.addEventListener('click', () => {
    solved = true;
    showSolved();
    if (window.answerCorrect) {
      window.answerCorrect({ answer: '●', explanation: 'The core unit ends with ●.' });
    }
  });

  choiceA.addEventListener('click', () => {
    choiceA.classList.add('wrong');
    statusLabel.textContent = 'Look at the core unit: ▲ ● ●';
    setTimeout(() => choiceA.classList.remove('wrong'), 600);
    if (window.answerIncorrect) {
      window.answerIncorrect({ answer: '▲', feedback: 'The third item in the core unit is ●.' });
    }
  });

  targetTile.addEventListener('click', () => {
    if (currentStep !== 2) setStep(2);
  });
</script>
</body>
</html>

What happens when objects do not just repeat, but grow or shrink along the way?

Some patterns change step-by-step using a math rule, like adding the same amount every single 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>Pattern Rule</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .rule-badge {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
  }

  .sequence-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 580px;
    align-items: stretch;
  }

  @media (max-width: 480px) {
    .sequence-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
    }
  }

  .step-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 180px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    user-select: none;
  }

  .step-card.active {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  }

  .dot-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 4px;
    flex-grow: 1;
    align-content: end;
    justify-items: center;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background-color 0.25s ease, transform 0.25s ease;
  }

  @media (min-width: 500px) {
    .dot {
      width: 14px;
      height: 14px;
    }
  }

  .dot.base {
    background: #3b82f6;
  }

  .dot.added {
    background: #10b981;
  }

  .step-num {
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
    color: #1e2945;
  }

  .step-tag {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
  }

  .mystery-card {
    background: #f8fafc;
    border: 2px dashed #94a3b8;
  }

  .mystery-card.revealed {
    border: 1.5px solid #10b981;
    background: #ffffff;
  }

  .mystery-q {
    font-size: 28px;
    font-weight: 800;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
  }

  .rule-arrow {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 580px;
    margin-top: 10px;
    color: #059669;
    font-size: 13px;
    font-weight: 700;
  }

  .rule-step {
    flex: 1;
    text-align: center;
  }

  .btn-reveal {
    margin-top: 14px;
    background: #10b981;
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
  }

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

<div class="rule-badge">✦ Rule: +3 each step</div>

<div class="sequence-grid">
  
  <div class="step-card" onclick="selectCard(0)">
    <div class="dot-stack">
      <div class="dot base"></div>
      <div class="dot base"></div>
    </div>
    <div class="step-num">2</div>
    <div class="step-tag">Start</div>
  </div>

  
  <div class="step-card" onclick="selectCard(1)">
    <div class="dot-stack">
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot added"></div>
      <div class="dot added"></div>
      <div class="dot added"></div>
    </div>
    <div class="step-num">5</div>
    <div class="step-tag">+3</div>
  </div>

  
  <div class="step-card" onclick="selectCard(2)">
    <div class="dot-stack">
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot added"></div>
      <div class="dot added"></div>
      <div class="dot added"></div>
    </div>
    <div class="step-num">8</div>
    <div class="step-tag">+3</div>
  </div>

  
  <div class="step-card" onclick="selectCard(3)">
    <div class="dot-stack">
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot added"></div>
      <div class="dot added"></div>
      <div class="dot added"></div>
    </div>
    <div class="step-num">11</div>
    <div class="step-tag">+3</div>
  </div>

  
  <div class="step-card mystery-card" id="mysteryCard" onclick="toggleMystery()">
    <div class="mystery-q" id="mysteryQ">?</div>
    <div class="dot-stack" id="mysteryDots" style="display:none;">
      <div class="dot base"></div><div class="dot base"></div>
      <div class="dot base"></div><div class="dot base"></div>
      <div class="dot base"></div><div class="dot base"></div>
      <div class="dot base"></div><div class="dot base"></div>
      <div class="dot base"></div><div class="dot base"></div>
      <div class="dot base"></div>
      <div class="dot added"></div><div class="dot added"></div><div class="dot added"></div>
    </div>
    <div class="step-num" id="mysteryNum">?</div>
    <div class="step-tag" id="mysteryTag">Next</div>
  </div>
</div>

<button class="btn-reveal" id="revealBtn" onclick="toggleMystery()">Reveal Next</button>

<script>
  let revealed = false;

  function toggleMystery() {
    revealed = !revealed;
    const card = document.getElementById('mysteryCard');
    const q = document.getElementById('mysteryQ');
    const dots = document.getElementById('mysteryDots');
    const num = document.getElementById('mysteryNum');
    const tag = document.getElementById('mysteryTag');
    const btn = document.getElementById('revealBtn');

    if (revealed) {
      card.classList.add('revealed', 'active');
      q.style.display = 'none';
      dots.style.display = 'grid';
      num.textContent = '14';
      tag.textContent = '+3';
      btn.textContent = 'Reset';
    } else {
      card.classList.remove('revealed', 'active');
      q.style.display = 'flex';
      dots.style.display = 'none';
      num.textContent = '?';
      tag.textContent = 'Next';
      btn.textContent = 'Reveal Next';
    }
  }

  function selectCard(index) {
    document.querySelectorAll('.step-card').forEach((card, i) => {
      if (i === index) {
        card.classList.add('active');
      } else {
        card.classList.remove('active');
      }
    });
  }
</script>
</body>
</html>

Once you discover the hidden rule, how do you use it to solve a mystery?

Say the pattern out loud to hear its rhythm: Star, Star, Balloon... Star, Star, Balloon... Star, [ ? ], Balloon.

<!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>Pattern Rhythm</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
      user-select: none;
    }

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

    .pattern-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 580px;
    }

    .unit-box {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      padding: 8px 10px;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      border: 2px solid #eef0f4;
      position: relative;
    }

    .unit-tag {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: #f1f5f9;
      color: #64748b;
      font-size: 11px;
      font-weight: 600;
      padding: 1px 8px;
      border-radius: 10px;
      letter-spacing: 0.5px;
    }

    .item-card {
      width: 44px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }

    .item-card.highlight {
      background: #fef3c7;
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
      transform: translateY(-2px);
    }

    .target-slot {
      background: #f0fdf4;
      border: 2px dashed #94a3b8;
      color: #3b82f6;
      font-weight: 800;
      font-size: 22px;
    }

    .target-slot.filled {
      border: 2px solid #22c55e;
      background: #ecfdf5;
    }

    .choices-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      align-items: center;
    }

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

    .btn:active {
      transform: translateY(1px);
    }

    .btn-play {
      font-size: 14px;
      padding: 6px 14px;
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #334155;
    }

    .feedback {
      min-height: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
    }

    .feedback.correct {
      color: #16a34a;
    }
  </style>
</head>
<body>

  <div class="pattern-container">
    
    <div class="unit-box">
      <span class="unit-tag">Unit 1</span>
      <div class="item-card" id="card-0">⭐</div>
      <div class="item-card" id="card-1">⭐</div>
      <div class="item-card" id="card-2">🎈</div>
    </div>

    
    <div class="unit-box">
      <span class="unit-tag">Unit 2</span>
      <div class="item-card" id="card-3">⭐</div>
      <div class="item-card" id="card-4">⭐</div>
      <div class="item-card" id="card-5">🎈</div>
    </div>

    
    <div class="unit-box">
      <span class="unit-tag">Unit 3</span>
      <div class="item-card" id="card-6">⭐</div>
      <div class="item-card target-slot" id="card-7">?</div>
      <div class="item-card" id="card-8">🎈</div>
    </div>
  </div>

  <div class="feedback" id="feedback-text">Complete the pattern:</div>

  <div class="choices-row" id="choice-buttons">
    <button class="btn" id="btn-star">⭐</button>
    <button class="btn" id="btn-balloon">🎈</button>
  </div>

  <button class="btn btn-play" id="btn-rhythm">▶ Play Rhythm</button>

  <script>
    let isPlaying = false;
    let isSolved = false;

    // Web Audio synthesizer for calm feedback tones
    let audioCtx = null;
    function playTone(type) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        const freq = (type === 'star') ? 587.33 : 329.63; // D5 vs E4
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    const slot = document.getElementById('card-7');
    const feedback = document.getElementById('feedback-text');
    const btnStar = document.getElementById('btn-star');
    const btnBalloon = document.getElementById('btn-balloon');
    const btnRhythm = document.getElementById('btn-rhythm');

    function checkAnswer(val) {
      if (val === 'star') {
        isSolved = true;
        slot.textContent = '⭐';
        slot.classList.add('filled');
        feedback.textContent = '✓ Pattern complete!';
        feedback.classList.add('correct');
        playTone('star');
        if (typeof window.answerCorrect === 'function') {
          window.answerCorrect({ answer: 'star', explanation: 'Pattern is ⭐ ⭐ 🎈' });
        }
      } else {
        feedback.textContent = 'Try again!';
        feedback.classList.remove('correct');
        playTone('balloon');
        if (typeof window.answerIncorrect === 'function') {
          window.answerIncorrect({ answer: 'balloon', feedback: 'Look at Unit 1 and Unit 2.' });
        }
      }
    }

    btnStar.addEventListener('click', () => checkAnswer('star'));
    btnBalloon.addEventListener('click', () => checkAnswer('balloon'));

    async function runRhythm() {
      if (isPlaying) return;
      isPlaying = true;
      btnRhythm.textContent = '⏸ Playing...';

      const totalItems = 9;
      for (let i = 0; i < totalItems; i++) {
        const card = document.getElementById(`card-${i}`);
        card.classList.add('highlight');
        
        const isBalloon = (i % 3 === 2);
        playTone(isBalloon ? 'balloon' : 'star');
        
        await new Promise(r => setTimeout(r, 450));
        card.classList.remove('highlight');
        
        // Pause between pattern units
        if (isBalloon && i < totalItems - 1) {
          await new Promise(r => setTimeout(r, 250));
        }
      }

      isPlaying = false;
      btnRhythm.textContent = '▶ Play Rhythm';
    }

    btnRhythm.addEventListener('click', runRhythm);
  </script>
</body>
</html>

Computer programmers use patterns every day to tell computers how to repeat tasks without having to write every single step by hand.

Take a quick look around your room right now — can you spot a pattern hiding on your shirt, your floor tiles, or a calendar?

technology

What Is a Pattern?. Learners will understand that a pattern is something that repeats or follows a rule and be able to spot one in a simple sequence.

IXL Grade 2: Repeating Patterns and Pattern Rules

BBC Bitesize: Copy, Extend, and Describe Repeating Patterns

Khan Academy: 2nd Grade Math - Counting Patterns and Sequences

Effective instruction for 2nd grade pattern recognition moves from concrete/visual representations (manipulatives, colors, shapes) to auditory and kinesthetic patterns (rhythms, claps), and finally to abstract symbolic representations (letters like $ABB$ and numerical sequences like $+2, +5, +10$). Emphasize identifying the 'core' unit before making any prediction to prevent random guessing.

What Is a Pattern?

Repeating Patterns

Growing Patterns

Spotting the Missing Piece