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

What if all the numbers in the world suddenly vanished right now?

You wouldn't know how old you are, what time it is, or how many socks are in your drawer!

We use numbers every day to find out **how many** items we have.

<!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>Counting Toy Cars</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;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    .cars-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .car-box {
      flex: 1;
      max-width: 130px;
      background: #ffffff;
      border: 2px solid rgba(0,0,0,0);
      border-radius: 14px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
      user-select: none;
    }

    .car-box.active {
      border-color: #22b7ff;
      box-shadow: 0 6px 16px rgba(34, 183, 255, 0.25);
    }

    .badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #eef2f6;
      color: #8b95a5;
      font-weight: 700;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .car-box.active .badge {
      background: #22b7ff;
      color: #ffffff;
    }

    .car-icon {
      font-size: 42px;
      line-height: 1;
      filter: grayscale(80%) opacity(0.5);
      transition: filter 0.3s ease;
    }

    .car-box.active .car-icon {
      filter: grayscale(0%) opacity(1);
    }

    .car-word {
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      text-transform: capitalize;
    }

    .car-box.active .car-word {
      color: #1e2945;
    }

    .total-banner {
      width: 100%;
      height: 52px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .total-num {
      color: #22b7ff;
      font-size: 22px;
      margin-left: 6px;
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .btn:active {
      background: #f1f5f9;
    }

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

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

    .dot.active {
      background: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="counter-area">
    <div class="cars-grid">
      <div class="car-box active" id="car-0" onclick="setCount(0)">
        <div class="badge">1</div>
        <div class="car-icon">🚗</div>
        <div class="car-word">One</div>
      </div>

      <div class="car-box" id="car-1" onclick="setCount(1)">
        <div class="badge">2</div>
        <div class="car-icon">🚙</div>
        <div class="car-word">Two</div>
      </div>

      <div class="car-box" id="car-2" onclick="setCount(2)">
        <div class="badge">3</div>
        <div class="car-icon">🏎️</div>
        <div class="car-word">Three</div>
      </div>
    </div>

    <div class="total-banner">
      Total:<span class="total-num" id="totalText">1 car</span>
    </div>

    <div class="controls">
      <button class="btn" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> Auto
      </button>
      <div class="step-dots">
        <div class="dot active" onclick="setCount(0)"></div>
        <div class="dot" onclick="setCount(1)"></div>
        <div class="dot" onclick="setCount(2)"></div>
      </div>
    </div>
  </div>

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

    const totals = ["1 car", "2 cars", "3 cars"];

    function updateView() {
      for (let i = 0; i < 3; i++) {
        const car = document.getElementById(`car-${i}`);
        const dot = document.querySelectorAll('.dot')[i];
        if (i <= currentStep) {
          car.classList.add('active');
        } else {
          car.classList.remove('active');
        }
        if (i === currentStep) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      }
      document.getElementById('totalText').textContent = totals[currentStep];
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateView();
    }

    function setCount(index) {
      currentStep = index;
      updateView();
    }

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

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

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

When you touch each toy car and say "one, two, three," you are counting to find the total.

Counting helps with toys, but how do numbers help us talk to our friends far away?

A **phone number** is a special set of digits that connects you to one specific phone.

A **house address** is a number painted on a building so your friends and the mail carrier can find your front door.

<!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; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      user-select: none;
    }
    .tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .tab-btn.active {
      background: #eff6ff;
      border-color: #22b7ff;
      color: #0284c7;
    }
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 280px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }
    .scene {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .scene.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Scene 1: Address */
    .street {
      display: flex;
      gap: 14px;
      align-items: flex-end;
      margin-bottom: 10px;
    }
    .house {
      width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .roof {
      width: 0;
      height: 0;
      border-left: 45px solid transparent;
      border-right: 45px solid transparent;
      border-bottom: 35px solid #94a3b8;
    }
    .roof.target { border-bottom-color: #f97316; }
    .wall {
      width: 76px;
      height: 70px;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-top: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0 0;
    }
    .wall.target {
      background: #fff7ed;
      border-color: #fdba74;
    }
    .number-plate {
      background: #1e2945;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
    }
    .target .number-plate {
      background: #0284c7;
      box-shadow: 0 0 0 3px #bae6fd;
    }
    .door {
      width: 24px;
      height: 34px;
      background: #64748b;
      border-radius: 4px 4px 0 0;
    }
    .target .door { background: #ea580c; }
    .mail-anim {
      font-size: 32px;
      animation: deliver 2.5s infinite ease-in-out;
    }
    @keyframes deliver {
      0% { transform: translate(-100px, -20px) scale(0.8); opacity: 0; }
      30% { opacity: 1; }
      80%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
    }

    /* Scene 2: Clock */
    .clock-face {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 6px solid #0284c7;
      background: #f8fafc;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .center-dot {
      width: 10px;
      height: 10px;
      background: #0284c7;
      border-radius: 50%;
      z-index: 2;
    }
    .hand-h {
      position: absolute;
      bottom: 50%;
      left: calc(50% - 3px);
      width: 6px;
      height: 38px;
      background: #1e2945;
      border-radius: 3px;
      transform-origin: bottom center;
      transform: rotate(270deg);
    }
    .hand-m {
      position: absolute;
      bottom: 50%;
      left: calc(50% - 2px);
      width: 4px;
      height: 52px;
      background: #0284c7;
      border-radius: 2px;
      transform-origin: bottom center;
      transform: rotate(0deg);
    }
    .badge {
      background: #0284c7;
      color: #ffffff;
      font-size: 20px;
      font-weight: 800;
      padding: 6px 18px;
      border-radius: 20px;
      letter-spacing: 1px;
    }

    /* Scene 3: Price */
    .shop-item {
      font-size: 64px;
      margin-bottom: 4px;
    }
    .price-tag {
      background: #16a34a;
      color: #ffffff;
      font-size: 24px;
      font-weight: 800;
      padding: 4px 16px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(22, 163, 74, 0.2);
    }

    /* Scene 4: Measure */
    .ruler-layout {
      display: flex;
      align-items: flex-end;
      gap: 20px;
      height: 190px;
    }
    .ruler {
      width: 32px;
      height: 180px;
      background: #fef08a;
      border: 2px solid #eab308;
      border-radius: 4px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 6px 0;
    }
    .mark {
      width: 12px;
      height: 2px;
      background: #a16207;
    }
    .mark.long { width: 18px; }
    .kid {
      font-size: 72px;
      line-height: 1;
    }
    .measure-line {
      position: absolute;
      right: -70px;
      top: 40px;
      border-top: 2px dashed #0284c7;
      width: 65px;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setTab(0)">🏠 Address</button>
    <button class="tab-btn" onclick="setTab(1)">⏰ Time</button>
    <button class="tab-btn" onclick="setTab(2)">🏷️ Price</button>
    <button class="tab-btn" onclick="setTab(3)">📏 Height</button>
  </div>

  <div class="stage">
    
    <div class="scene active">
      <div class="street">
        <div class="house">
          <div class="roof"></div>
          <div class="wall">
            <span class="number-plate">5</span>
            <div class="door"></div>
          </div>
        </div>
        <div class="house">
          <div class="roof target"></div>
          <div class="wall target">
            <span class="number-plate">7</span>
            <div class="door"></div>
          </div>
        </div>
        <div class="house">
          <div class="roof"></div>
          <div class="wall">
            <span class="number-plate">9</span>
            <div class="door"></div>
          </div>
        </div>
      </div>
      <div class="mail-anim">✉️ ➔ No. 7</div>
    </div>

    
    <div class="scene">
      <div class="clock-face">
        <div class="hand-h"></div>
        <div class="hand-m"></div>
        <div class="center-dot"></div>
      </div>
      <div class="badge">9:00</div>
    </div>

    
    <div class="scene">
      <div class="shop-item">🍎</div>
      <div class="price-tag">50p</div>
    </div>

    
    <div class="scene">
      <div class="ruler-layout">
        <div class="ruler">
          <div class="mark long"><div class="measure-line"></div></div>
          <div class="mark"></div>
          <div class="mark long"></div>
          <div class="mark"></div>
          <div class="mark long"></div>
        </div>
        <div class="kid">🧍</div>
      </div>
      <div class="badge" style="margin-top: 10px;">120 cm</div>
    </div>
  </div>

  <script>
    const btns = document.querySelectorAll('.tab-btn');
    const scenes = document.querySelectorAll('.scene');

    function setTab(index) {
      btns.forEach((btn, i) => btn.classList.toggle('active', i === index));
      scenes.forEach((scene, i) => scene.classList.toggle('active', i === index));
    }
  </script>
</body>
</html>

What happens when you want to buy a snack at the grocery store or play a game with friends?

A **price tag** uses numbers to show how many dollars you need to pay for something.

In a game, a **score** uses numbers to track points earned by each player or team.

Comparing results like **Team Blue**: $3$ and **Team Red**: $1$ tells everyone right away who is winning!

<!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; }
  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%;
    user-select: none;
    -webkit-user-select: none;
  }

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

  .matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .team-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
    transition: box-shadow 0.2s ease;
  }

  .team-blue { border-color: rgba(34, 183, 255, 0.25); }
  .team-red { border-color: rgba(239, 68, 68, 0.25); }

  .team-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .team-blue .team-name { color: #0284c7; }
  .team-red .team-name { color: #dc2626; }

  .score-num {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    margin: 4px 0 8px;
  }
  .team-blue .score-num { color: #0284c7; }
  .team-red .score-num { color: #dc2626; }

  .tokens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    min-height: 48px;
    max-height: 48px;
    align-content: flex-start;
    width: 100%;
    padding: 0 4px;
  }

  .token {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .team-blue .token { background: #0284c7; }
  .team-red .token { background: #dc2626; }

  .btn-add {
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    max-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: opacity 0.15s ease;
  }
  .btn-add:active { opacity: 0.75; }
  .btn-blue { background: #0284c7; color: #ffffff; }
  .btn-red { background: #dc2626; color: #ffffff; }

  .vs-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  .vs-circle {
    width: 32px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
  }

  .status-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .status-badge .symbol {
    font-size: 16px;
  }

  .controls {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .btn-reset {
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-reset:active { opacity: 0.7; }
</style>
</head>
<body>

<div class="scoreboard">
  <div class="matchup">
    
    <div class="team-card team-blue">
      <span class="team-name">Team Blue</span>
      <div id="blueNum" class="score-num">3</div>
      <div id="blueTokens" class="tokens"></div>
      <button class="btn-add btn-blue" id="addBlue">+1 Goal</button>
    </div>

    
    <div class="vs-divider">
      <div class="vs-circle">VS</div>
    </div>

    
    <div class="team-card team-red">
      <span class="team-name">Team Red</span>
      <div id="redNum" class="score-num">1</div>
      <div id="redTokens" class="tokens"></div>
      <button class="btn-add btn-red" id="addRed">+1 Goal</button>
    </div>
  </div>

  
  <div class="status-badge" id="statusBadge">
    <span>3 &gt; 1</span>
    <span class="symbol">✦</span>
    <span>Blue Leads</span>
  </div>

  
  <div class="controls">
    <button class="btn-reset" id="resetBtn">Reset (3 vs 1)</button>
    <button class="btn-reset" id="clearBtn">0 vs 0</button>
  </div>
</div>

<script>
  let blue = 3;
  let red = 1;

  const blueNum = document.getElementById('blueNum');
  const redNum = document.getElementById('redNum');
  const blueTokens = document.getElementById('blueTokens');
  const redTokens = document.getElementById('redTokens');
  const statusBadge = document.getElementById('statusBadge');

  function render() {
    blueNum.textContent = blue;
    redNum.textContent = red;

    // Render tokens
    blueTokens.innerHTML = '';
    for (let i = 0; i < blue; i++) {
      const dot = document.createElement('div');
      dot.className = 'token';
      blueTokens.appendChild(dot);
    }

    redTokens.innerHTML = '';
    for (let i = 0; i < red; i++) {
      const dot = document.createElement('div');
      dot.className = 'token';
      redTokens.appendChild(dot);
    }

    // Status logic
    if (blue > red) {
      statusBadge.innerHTML = `<span>${blue} &gt; ${red}</span> <span class="symbol">✦</span> <span style="color:#0284c7">Blue Leads</span>`;
    } else if (red > blue) {
      statusBadge.innerHTML = `<span>${red} &gt; ${blue}</span> <span class="symbol">✦</span> <span style="color:#dc2626">Red Leads</span>`;
    } else {
      statusBadge.innerHTML = `<span>${blue} = ${red}</span> <span class="symbol">✦</span> <span>Tied Game</span>`;
    }
  }

  document.getElementById('addBlue').addEventListener('click', () => {
    if (blue < 10) blue++;
    render();
  });

  document.getElementById('addRed').addEventListener('click', () => {
    if (red < 10) red++;
    render();
  });

  document.getElementById('resetBtn').addEventListener('click', () => {
    blue = 3;
    red = 1;
    render();
  });

  document.getElementById('clearBtn').addEventListener('click', () => {
    blue = 0;
    red = 0;
    render();
  });

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

How do you know when it is finally time for your birthday party?

A calendar uses numbers to track each day of the month so you never miss a party or holiday.

<!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>Numbers in Everyday Life</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --primary: #22b7ff;
    --primary-light: #e8f7ff;
    --text: #1e2945;
    --muted: #6b7280;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --card: #ffffff;
  }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: transparent;
    color: var(--text);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .nav-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 440px;
  }
  .tab-btn {
    flex: 1;
    padding: 8px 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
  }

  .stage-container {
    width: 100%;
    max-width: 440px;
    height: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 16px;
  }
  .scene.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Scene 1: Clock */
  .clock {
    width: 120px;
    height: 120px;
    border: 4px solid var(--text);
    border-radius: 50%;
    position: relative;
    background: #ffffff;
    margin-bottom: 12px;
  }
  .clock-center {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .hour-hand {
    position: absolute;
    width: 4px;
    height: 32px;
    background: var(--text);
    top: 50%;
    left: 50%;
    transform-origin: top center;
    transform: rotate(90deg);
    border-radius: 2px;
  }
  .min-hand {
    position: absolute;
    width: 3px;
    height: 46px;
    background: var(--primary);
    top: 50%;
    left: 50%;
    transform-origin: top center;
    transform: rotate(180deg);
    border-radius: 2px;
  }
  .num-12 { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; }
  .num-3  { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; color: var(--primary); }
  .num-6  { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; }
  .num-9  { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; }

  /* Scene 2: Calendar */
  .cal-card {
    width: 140px;
    background: #ffffff;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .cal-header {
    background: #ef4444;
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 4px;
    letter-spacing: 0.5px;
  }
  .cal-body {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
  }
  .cal-cell {
    padding: 3px 0;
    border-radius: 4px;
  }
  .cal-cell.highlight {
    background: var(--primary);
    color: white;
    font-weight: 700;
  }

  /* Scene 3: Ruler */
  .ruler-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .pencil {
    width: 140px;
    height: 18px;
    background: #f59e0b;
    border-radius: 0 4px 4px 0;
    position: relative;
    display: flex;
    align-items: center;
    border-left: 20px solid #fed7aa;
  }
  .ruler {
    width: 220px;
    height: 38px;
    background: #fef08a;
    border: 2px solid #ca8a04;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    position: relative;
  }
  .tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #713f12;
  }
  .tick::before {
    content: '';
    width: 2px;
    height: 8px;
    background: #713f12;
    margin-bottom: 2px;
  }

  /* Scene 4: Price */
  .price-stage {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  .item-icon {
    font-size: 52px;
  }
  .tag {
    background: var(--primary-light);
    border: 2px dashed var(--primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
  }

  /* Common Badge */
  .badge {
    background: var(--primary-light);
    color: var(--text);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid rgba(34, 183, 255, 0.4);
  }
  .badge span {
    color: #0284c7;
  }
</style>
</head>
<body>

<div class="nav-tabs">
  <button class="tab-btn active" onclick="setStep(0)">🕒 Time</button>
  <button class="tab-btn" onclick="setStep(1)">📅 Date</button>
  <button class="tab-btn" onclick="setStep(2)">📏 Length</button>
  <button class="tab-btn" onclick="setStep(3)">🏷️ Price</button>
</div>

<div class="stage-container">
  
  <div class="scene active" id="scene-0">
    <div class="clock">
      <div class="num-12">12</div>
      <div class="num-3">3</div>
      <div class="num-6">6</div>
      <div class="num-9">9</div>
      <div class="clock-center"></div>
      <div class="hour-hand"></div>
      <div class="min-hand"></div>
    </div>
    <div class="badge">Time: <span>3:00</span></div>
  </div>

  
  <div class="scene" id="scene-1">
    <div class="cal-card">
      <div class="cal-header">MAY</div>
      <div class="cal-body">
        <div class="cal-cell">12</div>
        <div class="cal-cell">13</div>
        <div class="cal-cell">14</div>
        <div class="cal-cell highlight">15</div>
        <div class="cal-cell">16</div>
        <div class="cal-cell">17</div>
      </div>
    </div>
    <div class="badge">Date: <span>May 15</span></div>
  </div>

  
  <div class="scene" id="scene-2">
    <div class="ruler-stage">
      <div class="pencil"></div>
      <div class="ruler">
        <div class="tick">0</div>
        <div class="tick">2</div>
        <div class="tick">4</div>
        <div class="tick">6</div>
        <div class="tick" style="color: #0284c7;">8</div>
        <div class="tick">10</div>
      </div>
    </div>
    <div class="badge">Length: <span>8 cm</span></div>
  </div>

  
  <div class="scene" id="scene-3">
    <div class="price-stage">
      <div class="item-icon">🍎</div>
      <div class="tag">£2</div>
    </div>
    <div class="badge">Price: <span>£2.00</span></div>
  </div>
</div>

<script>
  let currentStep = 0;
  let timer;

  function setStep(index) {
    currentStep = index;
    const tabs = document.querySelectorAll('.tab-btn');
    const scenes = document.querySelectorAll('.scene');
    
    tabs.forEach((tab, i) => tab.classList.toggle('active', i === index));
    scenes.forEach((scene, i) => scene.classList.toggle('active', i === index));

    clearInterval(timer);
    timer = setInterval(nextStep, 3600);
  }

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

  timer = setInterval(nextStep, 3600);
</script>

</body>
</html>

Look around your room right now — can you spot three different numbers hiding nearby?

math

Discovering How Numbers Help Us Every Day. Identify how numbers are used in modern life for counting, phone numbers, prices, dates, house addresses, and scores.

Early Level Maths and Numeracy: Numbers in the World and Counting

Early Years Activities: Numbers Everywhere and Counting Collections

Curriculum for Excellence: Numeracy and Mathematics Across Learning (MTH 1-12a)

To achieve mastery for Early Level (P1) learners under Curriculum for Excellence (CfE), embed learning in high-engagement, real-world contexts and play pedagogy. Conduct a 'Number Walk' around the school building and grounds to spot numbers on doors, fire alarms, clocks, and signs. Set up thematic role-play stations (a post office with addresses, a grocery shop with price tags, a doctor's surgery with a phone pad, and a sports arena with a scoreboard). Emphasise the transition from nominal uses (labels) to cardinal uses (amounts) through dialogic questions such as: 'Is this number telling us how many, or where to go?'

Discovering How Numbers Help Us Every Day

Counting Objects

Calling and Finding Places

Prices and Game Scores