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

Three animal friends are zooming toward a giant, yummy strawberry!

To tell who gets there ahead of the others, we use **ordinal words**, which are special words that show order or position.

<!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>First, Second, and Third</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    :root {
      --primary: #22b7ff;
      --text: #1e2945;
      --border: #e2e8f0;
      --bg: #f8fafc;
      --gold: #f59e0b;
      --silver: #64748b;
      --bronze: #b45309;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: var(--text);
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      min-height: 100%;
    }

    /* Track Layout */
    .track-area {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .finish-banner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      border-bottom: 2px dashed #cbd5e1;
      padding-bottom: 8px;
    }
    .finish-tag {
      background: #1e2945;
      color: #ffffff;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 12px;
      letter-spacing: 0.5px;
    }

    .lanes {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .lane {
      display: flex;
      align-items: center;
      background: var(--bg);
      border-radius: 12px;
      padding: 8px 12px;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .lane.active {
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
    }
    .lane[data-pos="0"].active { border-color: var(--gold); }
    .lane[data-pos="1"].active { border-color: var(--silver); }
    .lane[data-pos="2"].active { border-color: var(--bronze); }

    .runner-avatar {
      font-size: 28px;
      line-height: 1;
      margin-right: 12px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    }

    .runner-info {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .badge-num {
      font-size: 15px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 8px;
      color: #ffffff;
      min-width: 48px;
      text-align: center;
    }
    .badge-num.gold { background: var(--gold); }
    .badge-num.silver { background: var(--silver); }
    .badge-num.bronze { background: var(--bronze); }

    .word-label {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }

    .arrow-indicator {
      font-size: 18px;
      color: #94a3b8;
      transition: transform 0.3s ease, color 0.3s ease;
    }
    .lane.active .arrow-indicator {
      color: var(--primary);
      transform: translateX(4px);
    }

    /* Podium Display */
    .podium-container {
      width: 100%;
      max-width: 520px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      align-items: flex-end;
      text-align: center;
    }

    .podium-card {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .podium-card.active {
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
      transform: translateY(-4px);
    }
    .podium-card[data-pos="0"].active { border-color: var(--gold); }
    .podium-card[data-pos="1"].active { border-color: var(--silver); }
    .podium-card[data-pos="2"].active { border-color: var(--bronze); }

    .podium-icon { font-size: 24px; line-height: 1; }
    .podium-abbr { font-size: 14px; font-weight: 800; }
    .podium-word { font-size: 13px; font-weight: 700; color: #64748b; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: var(--text);
      color: #ffffff;
      border-color: var(--text);
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid var(--border);
      color: var(--text);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .play-btn:hover {
      background: var(--bg);
    }
  </style>
</head>
<body>

  
  <div class="track-area">
    <div class="finish-banner">
      <span>🏁 Finish Line</span>
      <span class="finish-tag">Order of Finish</span>
    </div>

    <div class="lanes">
      <div class="lane step active" data-pos="0">
        <span class="runner-avatar">🐰</span>
        <div class="runner-info">
          <span class="badge-num gold">1st</span>
          <span class="word-label">First</span>
          <span class="arrow-indicator">→</span>
        </div>
      </div>

      <div class="lane step" data-pos="1">
        <span class="runner-avatar">🐢</span>
        <div class="runner-info">
          <span class="badge-num silver">2nd</span>
          <span class="word-label">Second</span>
          <span class="arrow-indicator">→</span>
        </div>
      </div>

      <div class="lane step" data-pos="2">
        <span class="runner-avatar">🦔</span>
        <div class="runner-info">
          <span class="badge-num bronze">3rd</span>
          <span class="word-label">Third</span>
          <span class="arrow-indicator">→</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="podium-container">
    <div class="podium-card step" data-pos="1">
      <span class="podium-icon">🥈</span>
      <span class="podium-abbr" style="color:var(--silver)">2nd</span>
      <span class="podium-word">Second</span>
    </div>
    <div class="podium-card step active" data-pos="0" style="padding-top:14px; padding-bottom:14px;">
      <span class="podium-icon">🥇</span>
      <span class="podium-abbr" style="color:var(--gold)">1st</span>
      <span class="podium-word">First</span>
    </div>
    <div class="podium-card step" data-pos="2">
      <span class="podium-icon">🥉</span>
      <span class="podium-abbr" style="color:var(--bronze)">3rd</span>
      <span class="podium-word">Third</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playToggle" aria-label="Play/Pause">⏸</button>
    <button class="step-btn active" data-idx="0">1st First</button>
    <button class="step-btn" data-idx="1">2nd Second</button>
    <button class="step-btn" data-idx="2">3rd Third</button>
  </div>

  <script>
    const lanes = $$('.lane');
    const podiumCards = $$('.podium-card');
    const stepBtns = $$('.step-btn');
    const playToggle = $('#playToggle');

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

    function setStep(idx) {
      currentIdx = idx;
      
      lanes.forEach((lane) => {
        lane.classList.toggle('active', parseInt(lane.dataset.pos) === idx);
      });

      podiumCards.forEach((card) => {
        card.classList.toggle('active', parseInt(card.dataset.pos) === idx);
      });

      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = true;
      playToggle.textContent = '⏸';
      timer = setInterval(() => {
        setStep((currentIdx + 1) % 3);
      }, 3000);
    }

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

    lanes.forEach((lane) => {
      onTap(lane, () => {
        pauseAutoPlay();
        setStep(parseInt(lane.dataset.pos));
      });
    });

    podiumCards.forEach((card) => {
      onTap(card, () => {
        pauseAutoPlay();
        setStep(parseInt(card.dataset.pos));
      });
    });

    stepBtns.forEach((btn, i) => {
      onTap(btn, () => {
        pauseAutoPlay();
        setStep(i);
      });
    });

    onTap(playToggle, () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

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

How do we write and say each winning spot?

The leader in the very front is in **first place**, which we can write as **1st** by putting 'st' after the number 1.

The next runner is in **second place** (written as **2nd**), and the one right after that is in **third place** (written as **3rd**).

<!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>First, Second, and Third</title>
  <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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }

    .diagram {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Track Container */
    .track-area {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
    }

    /* Finish Line */
    .finish-line {
      position: absolute;
      right: 54px;
      top: 0;
      bottom: 0;
      width: 12px;
      background: repeating-linear-gradient(
        45deg,
        #1e2945,
        #1e2945 6px,
        #ffffff 6px,
        #ffffff 12px
      );
      opacity: 0.25;
      z-index: 1;
    }

    .finish-banner {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      z-index: 2;
      line-height: 1;
    }

    /* Lanes */
    .lane {
      position: relative;
      height: 64px;
      background: #f1f5f9;
      border-radius: 12px;
      display: flex;
      align-items: center;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
      z-index: 2;
    }

    .lane.active {
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.25);
      border-color: #22b7ff;
    }

    /* Runner Token */
    .runner {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .lane-1 .runner { left: 62%; }
    .lane-2 .runner { left: 38%; }
    .lane-3 .runner { left: 14%; }

    .avatar {
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    .badge-pill {
      font-weight: 800;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 8px;
      color: #ffffff;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .bg-1st { background: #eab308; }
    .bg-2nd { background: #94a3b8; }
    .bg-3rd { background: #d97706; }

    /* Interactive Buttons / Cards */
    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .order-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 14px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: all 0.25s ease;
      user-select: none;
    }

    .order-btn:hover {
      border-color: #cbd5e1;
    }

    .order-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .numeral {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
    }

    .word {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.3px;
    }

    .order-btn.active .word {
      color: #0284c7;
    }

    .c-1st { color: #ca8a04; }
    .c-2nd { color: #64748b; }
    .c-3rd { color: #b45309; }

    /* Controls bar */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 2px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .nav-btn:active {
      transform: scale(0.95);
    }

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

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .dot.active {
      background: #22b7ff;
      width: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<div class="diagram">
  
  <div class="track-area">
    <div class="finish-line"></div>
    <div class="finish-banner">🏁</div>

    
    <div class="lane lane-1 active" data-index="0">
      <div class="runner">
        <span class="avatar">🦊</span>
        <span class="badge-pill bg-1st">1st</span>
      </div>
    </div>

    
    <div class="lane lane-2" data-index="1">
      <div class="runner">
        <span class="avatar">🐰</span>
        <span class="badge-pill bg-2nd">2nd</span>
      </div>
    </div>

    
    <div class="lane lane-3" data-index="2">
      <div class="runner">
        <span class="avatar">🐢</span>
        <span class="badge-pill bg-3rd">3rd</span>
      </div>
    </div>
  </div>

  
  <div class="cards-row">
    <button class="order-btn active" data-index="0">
      <span class="numeral c-1st">1st</span>
      <span class="word">First</span>
    </button>
    <button class="order-btn" data-index="1">
      <span class="numeral c-2nd">2nd</span>
      <span class="word">Second</span>
    </button>
    <button class="order-btn" data-index="2">
      <span class="numeral c-3rd">3rd</span>
      <span class="word">Third</span>
    </button>
  </div>

  
  <div class="controls">
    <button class="nav-btn" id="prevBtn" aria-label="Previous">◀</button>
    <div class="dots">
      <div class="dot active" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
    </div>
    <button class="nav-btn" id="nextBtn" aria-label="Next">▶</button>
  </div>
</div>

<script>
  let currentIndex = 0;
  const totalSteps = 3;
  let autoTimer = null;

  const lanes = document.querySelectorAll('.lane');
  const btns = document.querySelectorAll('.order-btn');
  const dots = document.querySelectorAll('.dot');

  function setStep(index) {
    currentIndex = (index + totalSteps) % totalSteps;

    lanes.forEach((lane, i) => {
      lane.classList.toggle('active', i === currentIndex);
    });

    btns.forEach((btn, i) => {
      btn.classList.toggle('active', i === currentIndex);
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === currentIndex);
    });
  }

  function nextStep() {
    setStep(currentIndex + 1);
  }

  function prevStep() {
    setStep(currentIndex - 1);
  }

  function startAuto() {
    stopAuto();
    autoTimer = setInterval(nextStep, 3500);
  }

  function stopAuto() {
    if (autoTimer) {
      clearInterval(autoTimer);
      autoTimer = null;
    }
  }

  // Event Listeners
  btns.forEach((btn) => {
    btn.addEventListener('click', () => {
      setStep(parseInt(btn.dataset.index, 10));
      stopAuto();
    });
  });

  lanes.forEach((lane) => {
    lane.addEventListener('click', () => {
      setStep(parseInt(lane.dataset.index, 10));
      stopAuto();
    });
  });

  dots.forEach((dot) => {
    dot.addEventListener('click', () => {
      setStep(parseInt(dot.dataset.index, 10));
      stopAuto();
    });
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    prevStep();
    stopAuto();
  });

  document.getElementById('nextBtn').addEventListener('click', () => {
    nextStep();
    stopAuto();
  });

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

What happens when we are not running a race, but waiting in line for a delicious ice cream cone?

Always look for the **front of the line** first to know where counting begins.

<!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>First, Second, Third</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

    .direction-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 14px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #1d4ed8;
    }

    .queue-container {
      width: 100%;
      display: grid;
      grid-template-columns: 80px repeat(3, 1fr);
      gap: 8px;
      align-items: end;
    }

    @media (max-width: 440px) {
      .queue-container {
        grid-template-columns: 60px repeat(3, 1fr);
        gap: 4px;
      }
    }

    .counter-box {
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      padding: 12px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
    }

    .counter-icon {
      font-size: 28px;
      margin-bottom: 6px;
    }

    .counter-label {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      line-height: 1.2;
    }

    .person-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 6px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 140px;
      cursor: pointer;
      transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
      user-select: none;
    }

    .person-card:hover {
      border-color: #93c5fd;
      background: #f0f9ff;
    }

    .person-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }

    .rank-tag {
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      background: #e2e8f0;
      padding: 2px 8px;
      border-radius: 10px;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .person-card.active .rank-tag {
      background: #22b7ff;
      color: #ffffff;
    }

    .avatar {
      font-size: 38px;
      line-height: 1;
      margin: 8px 0;
    }

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

    .btn-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .nav-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

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

    .nav-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="scene-wrap">
    <div class="direction-bar">
      <span>← Front of Line (Start Here)</span>
    </div>

    <div class="queue-container">
      <div class="counter-box">
        <div class="counter-icon">🎟️</div>
        <div class="counter-label">Counter</div>
      </div>

      <div class="person-card active" id="card-0" onclick="selectPos(0)">
        <span class="rank-tag">1st</span>
        <div class="avatar">👧</div>
        <span class="word-label">First</span>
      </div>

      <div class="person-card" id="card-1" onclick="selectPos(1)">
        <span class="rank-tag">2nd</span>
        <div class="avatar">👦</div>
        <span class="word-label">Second</span>
      </div>

      <div class="person-card" id="card-2" onclick="selectPos(2)">
        <span class="rank-tag">3rd</span>
        <div class="avatar">🧒</div>
        <span class="word-label">Third</span>
      </div>
    </div>

    <div class="btn-group">
      <button class="nav-btn active" id="btn-0" onclick="selectPos(0)">1st • First</button>
      <button class="nav-btn" id="btn-1" onclick="selectPos(1)">2nd • Second</button>
      <button class="nav-btn" id="btn-2" onclick="selectPos(2)">3rd • Third</button>
      <button class="nav-btn" id="btn-all" onclick="selectPos('all')">All</button>
    </div>
  </div>

  <script>
    function selectPos(index) {
      const cards = [document.getElementById('card-0'), document.getElementById('card-1'), document.getElementById('card-2')];
      const buttons = [document.getElementById('btn-0'), document.getElementById('btn-1'), document.getElementById('btn-2'), document.getElementById('btn-all')];

      cards.forEach((card, i) => {
        if (index === 'all' || index === i) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });

      buttons.forEach((btn) => btn.classList.remove('active'));
      if (index === 'all') {
        document.getElementById('btn-all').classList.add('active');
      } else {
        document.getElementById('btn-' + index).classList.add('active');
      }
    }
  </script>
</body>
</html>

The child right at the counter is **first**, the child behind them is **second**, and the next friend in line is **third**.

Next time you line up for the playground slide, check to see who is 1st, 2nd, and 3rd!

math

Using Ordinal Words: First, Second, and Third. Identify the 1st, 2nd, and 3rd positions of items in a line or race.

Ordinal Numbers: Early Level Maths and Numeracy

Queueing and Positional Order in Early Years

Ordinal Numbers - Primary 1 Curriculum for Excellence

At Early Level (P1, ages 4–5), instruction should begin concretely with physical movement (e.g., lining up for break time, running outdoor mini-races, rolling toy cars). Teachers should emphasize the 'point of reference' (e.g., the front door, the finish line) so children realize ordinality depends on orientation. Use the Concrete-Pictorial-Abstract (CPA) approach: start with physical toys/children, transition to pictures of lines and races, and connect spoken words ('first', 'second', 'third') to their abbreviated notation ('1st', '2nd', '3rd').

Using Ordinal Words: First, Second, and Third

The Three Places

Positions in a Line