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

Can you clap your hands faster than you can eat breakfast? Some things happen in a flash, while other things take a long time.

We measure time using four handy sizes: **seconds**, **minutes**, **hours**, and **days**.

A **second** is super quick, like saying "one Mississippi" or snapping your fingers. If an activity is over almost right away, we count it in seconds.

<!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>Seconds</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    /* Central Visual Card */
    .stage-card {
      width: 100%;
      background: #ffffff;
      border-radius: 20px;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.12);
    }

    .action-icon {
      font-size: 68px;
      line-height: 1;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }

    .action-icon.pulse {
      transform: scale(1.15);
    }

    .time-badge {
      font-size: 32px;
      font-weight: 800;
      color: #22b7ff;
      letter-spacing: -0.5px;
    }

    /* Progress bar track */
    .track-wrap {
      width: 100%;
      max-width: 280px;
      height: 14px;
      background: #eef7ff;
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .track-fill {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #22b7ff, #00d285);
      border-radius: 999px;
      transform-origin: left;
    }

    /* Trigger Button */
    .play-btn {
      appearance: none;
      border: none;
      background: #22b7ff;
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
      padding: 10px 28px;
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .play-btn:active {
      opacity: 0.9;
    }

    /* Action selection tiles */
    .options-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .opt-btn {
      appearance: none;
      background: #ffffff;
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 14px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

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

    .opt-emoji {
      font-size: 26px;
      line-height: 1;
    }

    .opt-label {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      text-align: center;
      line-height: 1.1;
    }

    @media (max-width: 360px) {
      .action-icon {
        font-size: 56px;
        height: 64px;
      }
      .time-badge {
        font-size: 28px;
      }
      .opt-emoji {
        font-size: 22px;
      }
      .opt-label {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="main-view">
    <div class="stage-card">
      <div id="icon" class="action-icon">🫰</div>
      <div id="badge" class="time-badge">1s</div>
      
      <div class="track-wrap">
        <div id="fill" class="track-fill"></div>
      </div>

      <button id="trigger" class="play-btn">▶ Count</button>
    </div>

    <div class="options-grid">
      <button class="opt-btn active" data-idx="0">
        <span class="opt-emoji">🫰</span>
        <span class="opt-label">Snap</span>
      </button>
      <button class="opt-btn" data-idx="1">
        <span class="opt-emoji">👁️</span>
        <span class="opt-label">Blink</span>
      </button>
      <button class="opt-btn" data-idx="2">
        <span class="opt-emoji">🗣️</span>
        <span class="opt-label">Say</span>
      </button>
      <button class="opt-btn" data-idx="3">
        <span class="opt-emoji">🦘</span>
        <span class="opt-label">Hop</span>
      </button>
    </div>
  </div>

  <script>
    const data = [
      { emoji: '🫰', label: '1s', sec: 1.0 },
      { emoji: '👁️', label: '1s', sec: 1.0 },
      { emoji: '🗣️', label: '1s', sec: 1.0 },
      { emoji: '🦘', label: '2s', sec: 2.0 }
    ];

    let currentIdx = 0;
    let isRunning = false;
    let animFrame = null;

    const iconEl = document.getElementById('icon');
    const badgeEl = document.getElementById('badge');
    const fillEl = document.getElementById('fill');
    const triggerBtn = document.getElementById('trigger');
    const optionBtns = document.querySelectorAll('.opt-btn');

    function selectAction(index) {
      if (isRunning) stopCount();
      currentIdx = index;

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

      iconEl.textContent = data[index].emoji;
      badgeEl.textContent = data[index].label;
      fillEl.style.width = '0%';
    }

    function runTimer() {
      if (isRunning) return;
      isRunning = true;
      triggerBtn.disabled = true;
      iconEl.classList.add('pulse');

      const duration = data[currentIdx].sec * 1000;
      const startTime = performance.now();

      function update(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        fillEl.style.width = (progress * 100) + '%';

        if (progress < 1) {
          animFrame = requestAnimationFrame(update);
        } else {
          stopCount();
          setTimeout(() => {
            fillEl.style.width = '0%';
          }, 600);
        }
      }

      animFrame = requestAnimationFrame(update);
    }

    function stopCount() {
      isRunning = false;
      triggerBtn.disabled = false;
      iconEl.classList.remove('pulse');
      if (animFrame) cancelAnimationFrame(animFrame);
    }

    optionBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => selectAction(idx));
    });

    triggerBtn.addEventListener('click', runTimer);
  </script>
</body>
</html>

What happens when an activity takes longer than just a few quick snaps?

A **minute** is made of 60 seconds. You need minutes to brush your teeth, sing the alphabet song, or tie your shoes.

<!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;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .unit-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 14px;
    }
    .unit-btn {
      flex: 1;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      padding: 8px 4px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .unit-btn.active {
      background: #e6f7ff;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }

    .display-area {
      width: 100%;
      max-width: 440px;
      position: relative;
      height: 230px;
      overflow: hidden;
    }

    .unit-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .unit-view.active {
      opacity: 1;
      pointer-events: auto;
    }

    .meter-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      border: 1px solid #eef2f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .meter-visual {
      flex: 1;
      height: 10px;
      background: #f1f5f9;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
    }
    .meter-fill {
      height: 100%;
      border-radius: 5px;
      transition: width 0.4s ease;
    }
    .fill-sec { width: 12%; background: #38bdf8; }
    .fill-min { width: 55%; background: #0ea5e9; }
    .fill-hr  { width: 100%; background: #0284c7; }

    .clock-dial {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #cbd5e1;
      position: relative;
      flex-shrink: 0;
    }
    .hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform-origin: bottom center;
      background: #0284c7;
      border-radius: 2px;
    }
    .hand-sec {
      width: 1.5px;
      height: 12px;
      background: #ef4444;
      animation: spin 2s linear infinite;
    }
    .hand-min {
      width: 2px;
      height: 10px;
      animation: spin 8s linear infinite;
    }
    .hand-hr {
      width: 2.5px;
      height: 8px;
      animation: spin 24s linear infinite;
    }

    @keyframes spin {
      from { transform: translateX(-50%) rotate(0deg); }
      to { transform: translateX(-50%) rotate(360deg); }
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      flex: 1;
    }
    .item-card {
      background: #ffffff;
      border: 1px solid #eef2f6;
      border-radius: 12px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .item-icon {
      font-size: 26px;
      line-height: 1;
    }
    .item-label {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
    }
  </style>
</head>
<body>

  <div class="unit-nav">
    <button class="unit-btn active" data-unit="0">⚡ Seconds</button>
    <button class="unit-btn" data-unit="1">⏱️ Minutes</button>
    <button class="unit-btn" data-unit="2">⏳ Hours</button>
  </div>

  <div class="display-area">
    
    <div class="unit-view active" id="view-0">
      <div class="meter-box">
        <div class="clock-dial">
          <div class="hand hand-sec"></div>
        </div>
        <div class="meter-visual">
          <div class="meter-fill fill-sec"></div>
        </div>
      </div>
      <div class="cards-row">
        <div class="item-card">
          <span class="item-icon">👏</span>
          <span class="item-label">Clap</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🤧</span>
          <span class="item-label">Sneeze</span>
        </div>
        <div class="item-card">
          <span class="item-icon">👀</span>
          <span class="item-label">Blink</span>
        </div>
      </div>
    </div>

    
    <div class="unit-view" id="view-1">
      <div class="meter-box">
        <div class="clock-dial">
          <div class="hand hand-min"></div>
        </div>
        <div class="meter-visual">
          <div class="meter-fill fill-min"></div>
        </div>
      </div>
      <div class="cards-row">
        <div class="item-card">
          <span class="item-icon">🪥</span>
          <span class="item-label">Brush Teeth</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🥪</span>
          <span class="item-label">Eat Lunch</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🎵</span>
          <span class="item-label">Song</span>
        </div>
      </div>
    </div>

    
    <div class="unit-view" id="view-2">
      <div class="meter-box">
        <div class="clock-dial">
          <div class="hand hand-hr"></div>
        </div>
        <div class="meter-visual">
          <div class="meter-fill fill-hr"></div>
        </div>
      </div>
      <div class="cards-row">
        <div class="item-card">
          <span class="item-icon">😴</span>
          <span class="item-label">Night Sleep</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🏫</span>
          <span class="item-label">School Day</span>
        </div>
        <div class="item-card">
          <span class="item-icon">🎬</span>
          <span class="item-label">Movie</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const btns = document.querySelectorAll('.unit-btn');
    const views = document.querySelectorAll('.unit-view');
    let currentIndex = 0;
    let timer = null;

    function showUnit(idx) {
      currentIndex = idx;
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
      views.forEach((v, i) => v.classList.toggle('active', i === idx));
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
        showUnit(idx);
      });
    });

    timer = setInterval(() => {
      currentIndex = (currentIndex + 1) % btns.length;
      showUnit(currentIndex);
    }, 3800);
  </script>
</body>
</html>

What about things that take way longer than brushing your teeth?

An **hour** is a big bundle of 60 minutes. We use hours to measure things like watching a whole movie, a full day at school, or sleeping at night.

<!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, sans-serif; }
    body {
      background: #f3f2ff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }
    .tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 340px;
      margin-bottom: 10px;
    }
    .tab {
      flex: 1;
      padding: 8px 4px;
      border: none;
      background: #ffffff;
      border-radius: 10px;
      font-weight: 700;
      font-size: 13px;
      text-align: center;
      cursor: pointer;
      color: #6b7280;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, color 0.2s;
    }
    .tab.active {
      background: #6366f1;
      color: #ffffff;
    }
    .stage {
      width: 100%;
      max-width: 340px;
      height: 200px;
      background: #ffffff;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(30, 41, 69, 0.05);
    }
    .card-content {
      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;
    }
    .card-content.active {
      opacity: 1;
      pointer-events: auto;
    }
    .icon {
      font-size: 48px;
      line-height: 1;
      margin-bottom: 8px;
    }
    .meter-wrap {
      width: 160px;
      height: 12px;
      background: #eef2ff;
      border-radius: 6px;
      overflow: hidden;
      margin: 8px 0;
    }
    .meter-fill {
      height: 100%;
      background: #6366f1;
      border-radius: 6px;
      transition: width 0.4s ease;
    }
    .title {
      font-size: 17px;
      font-weight: 800;
      color: #1e2945;
    }
    .badge {
      font-size: 13px;
      font-weight: 700;
      color: #6366f1;
      background: #eef2ff;
      padding: 2px 10px;
      border-radius: 12px;
      margin-top: 4px;
    }
    .dots {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #c7d2fe;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease;
    }
    .dot.active {
      width: 20px;
      border-radius: 4px;
      background: #6366f1;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab active" data-i="0">Seconds</button>
    <button class="tab" data-i="1">Minutes</button>
    <button class="tab" data-i="2">Hours</button>
  </div>

  <div class="stage">
    <div class="card-content active" id="card-0">
      <div class="icon">👏</div>
      <div class="title">Clap</div>
      <div class="meter-wrap"><div class="meter-fill" style="width: 5%;"></div></div>
      <div class="badge">1 Second</div>
    </div>

    <div class="card-content" id="card-1">
      <div class="icon">🪥</div>
      <div class="title">Brush Teeth</div>
      <div class="meter-wrap"><div class="meter-fill" style="width: 40%;"></div></div>
      <div class="badge">60 Seconds</div>
    </div>

    <div class="card-content" id="card-2">
      <div class="icon">🎬</div>
      <div class="title">Movie</div>
      <div class="meter-wrap"><div class="meter-fill" style="width: 100%;"></div></div>
      <div class="badge">60 Minutes</div>
    </div>
  </div>

  <div class="dots">
    <button class="dot active" data-i="0" aria-label="Step 1"></button>
    <button class="dot" data-i="1" aria-label="Step 2"></button>
    <button class="dot" data-i="2" aria-label="Step 3"></button>
  </div>

  <script>
    let current = 0;
    const tabs = document.querySelectorAll('.tab');
    const cards = document.querySelectorAll('.card-content');
    const dots = document.querySelectorAll('.dot');
    let timer;

    function setStep(idx) {
      current = idx;
      tabs.forEach((t, i) => t.classList.toggle('active', i === idx));
      cards.forEach((c, i) => c.classList.toggle('active', i === idx));
      dots.forEach((d, i) => d.classList.toggle('active', i === idx));
    }

    function startCycle() {
      clearInterval(timer);
      timer = setInterval(() => {
        setStep((current + 1) % 3);
      }, 3200);
    }

    [...tabs, ...dots].forEach(el => {
      el.addEventListener('click', () => {
        setStep(parseInt(el.dataset.i, 10));
        startCycle();
      });
    });

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

What is even bigger than a whole night of sleeping?

A **day** lasts 24 hours, which is one full cycle of daytime and nighttime. A whole weekend takes 2 days, and a school week takes 5 days!

<!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>Guessing How Long Things Take</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

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

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

    .ladder-row {
      position: relative;
      display: flex;
      align-items: center;
      height: 64px;
      padding: 8px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      cursor: pointer;
      overflow: hidden;
      transition: box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .ladder-row:hover {
      background: #f1f5f9;
    }

    .ladder-row.active {
      box-shadow: 0 0 0 2px #22b7ff;
      background: #ffffff;
    }

    .progress-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      opacity: 0.18;
      border-radius: 11px;
      transition: width 0.4s ease, opacity 0.25s ease;
      z-index: 1;
    }

    .ladder-row.active .progress-fill {
      opacity: 0.35;
    }

    .row-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .unit-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .unit-tag {
      font-weight: 700;
      font-size: 16px;
      letter-spacing: -0.01em;
    }

    .example-group {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      color: #475569;
      font-weight: 500;
    }

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

    /* Pastels */
    .c-sec .progress-fill { background: #f59e0b; }
    .c-sec .unit-tag { color: #d97706; }

    .c-min .progress-fill { background: #10b981; }
    .c-min .unit-tag { color: #059669; }

    .c-hr .progress-fill { background: #06b6d4; }
    .c-hr .unit-tag { color: #0891b2; }

    .c-day .progress-fill { background: #8b5cf6; }
    .c-day .unit-tag { color: #7c3aed; }

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

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease;
    }

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

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

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

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

  <div class="ladder-container">
    <div class="ladder-row c-sec active" data-step="0">
      <div class="progress-fill" style="width: 15%;"></div>
      <div class="row-content">
        <div class="unit-group">
          <span class="icon-box">⏱️</span>
          <span class="unit-tag">Seconds</span>
        </div>
        <div class="example-group">
          <span>Clap</span>
          <span class="icon-box">👏</span>
        </div>
      </div>
    </div>

    <div class="ladder-row c-min" data-step="1">
      <div class="progress-fill" style="width: 40%;"></div>
      <div class="row-content">
        <div class="unit-group">
          <span class="icon-box">⏳</span>
          <span class="unit-tag">Minutes</span>
        </div>
        <div class="example-group">
          <span>Brush</span>
          <span class="icon-box">🪥</span>
        </div>
      </div>
    </div>

    <div class="ladder-row c-hr" data-step="2">
      <div class="progress-fill" style="width: 70%;"></div>
      <div class="row-content">
        <div class="unit-group">
          <span class="icon-box">🕒</span>
          <span class="unit-tag">Hours</span>
        </div>
        <div class="example-group">
          <span>Movie</span>
          <span class="icon-box">🎬</span>
        </div>
      </div>
    </div>

    <div class="ladder-row c-day" data-step="3">
      <div class="progress-fill" style="width: 100%;"></div>
      <div class="row-content">
        <div class="unit-group">
          <span class="icon-box">📅</span>
          <span class="unit-tag">Days</span>
        </div>
        <div class="example-group">
          <span>Weekend</span>
          <span class="icon-box">⛺</span>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" aria-label="Toggle autoplay">⏸</button>
    <div class="step-dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
  </div>

  <script>
    (function () {
      const rows = document.querySelectorAll('.ladder-row');
      const dots = document.querySelectorAll('.dot');
      const playBtn = document.getElementById('playBtn');

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

      function setStep(idx) {
        currentStep = idx;
        rows.forEach((r, i) => r.classList.toggle('active', i === idx));
        dots.forEach((d, i) => d.classList.toggle('active', i === idx));
      }

      function nextStep() {
        setStep((currentStep + 1) % rows.length);
      }

      function startAutoPlay() {
        isPlaying = true;
        playBtn.textContent = '⏸';
        clearInterval(timer);
        timer = setInterval(nextStep, 3200);
      }

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

      rows.forEach((row, i) => {
        row.addEventListener('click', () => {
          setStep(i);
          pauseAutoPlay();
        });
      });

      dots.forEach((dot, i) => {
        dot.addEventListener('click', () => {
          setStep(i);
          pauseAutoPlay();
        });
      });

      playBtn.addEventListener('click', () => {
        if (isPlaying) {
          pauseAutoPlay();
        } else {
          startAutoPlay();
        }
      });

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

Next time you do something fun, pause and ask yourself: will this take **seconds**, **minutes**, **hours**, or **days**?

math

Guessing How Long Things Take. Estimate whether everyday activities take seconds, minutes, hours, or days.

Curriculum for Excellence Early and First Level: Time and Measuring Duration

IXL Maths: Relate and Choose Units of Time (Seconds, Minutes, Hours, Days)

NRICH Primary: Stop the Clock and Estimating Time Tasks

At Early Level (P1), young children understand time through bodily rhythms, active physical engagement, and sensory feedback. Effective pedagogy pairs each standard unit with an immediate concrete anchor: claps/foot-stomps for seconds, physical 1-minute sand timers or singing known nursery rhymes for minutes, visual daily routine timetables (snack time to lunch time) for hours, and day-night cycle charts for days. Prioritize estimation games where pupils first predict the unit before physically timing simple classroom tasks.

Guessing How Long Things Take

Super Fast: Seconds

A Little Longer: Minutes

Big Chunks of Time: Hours