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 snap your fingers three times before a cat blinks? Some things happen in a flash, while other things take a very long time.

We use **units of time** to measure how long events take, from a quick sneeze to waiting for your next birthday.

How do we measure things that happen super fast?

A **second** is very quick, like clapping your hands once or taking a single step.

When you count 60 seconds, you make one **minute**, which is about how long it takes to brush your teeth.

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

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34,183,255,0.3);
    }

    .stage-container {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      padding: 16px;
      position: relative;
      overflow: hidden;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .unit-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .visual-circle {
      width: 110px;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .dial-svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .dial-bg {
      fill: none;
      stroke: #f1f5f9;
      stroke-width: 8;
    }

    .dial-progress {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 8;
      stroke-linecap: round;
      stroke-dasharray: 283;
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 0.5s ease;
    }

    .center-emoji {
      position: absolute;
      font-size: 34px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .unit-title {
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
    }

    .grouping-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .math-pill {
      font-size: 16px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 10px;
      border-radius: 6px;
      letter-spacing: 0.5px;
    }

    .equal-arrow {
      font-size: 18px;
      color: #94a3b8;
      font-weight: 700;
    }

    .target-pill {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 4px 10px;
      border-radius: 6px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
      width: 100%;
      max-width: 440px;
    }

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

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

    .ctrl-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" onclick="setStep(0)">Second</button>
    <button class="tab-btn" onclick="setStep(1)">Minute</button>
    <button class="tab-btn" onclick="setStep(2)">Hour</button>
    <button class="tab-btn" onclick="setStep(3)">Day</button>
  </div>

  <div class="stage-container">
    <div class="unit-display">
      <div class="visual-circle">
        <svg class="dial-svg" viewBox="0 0 100 100">
          <circle class="dial-bg" cx="50" cy="50" r="45" />
          <circle id="dialRing" class="dial-progress" cx="50" cy="50" r="45" />
        </svg>
        <div id="unitEmoji" class="center-emoji">⏱️</div>
      </div>
      <div id="unitName" class="unit-title">1 Second</div>
    </div>

    <div class="grouping-box">
      <div id="mathLeft" class="math-pill">1 Tick</div>
      <div class="equal-arrow">→</div>
      <div id="mathRight" class="target-pill">Base Unit</div>
    </div>
  </div>

  <div class="controls">
    <button id="prevBtn" class="ctrl-btn" onclick="prevStep()">← Prev</button>
    <button id="playBtn" class="ctrl-btn" onclick="togglePlay()">⏸ Pause</button>
    <button id="nextBtn" class="ctrl-btn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    const steps = [
      {
        name: "Second",
        emoji: "⚡",
        left: "1 Snap",
        right: "1 Second",
        fillPercent: 0.15
      },
      {
        name: "1 Minute",
        emoji: "🪥",
        left: "60 Seconds",
        right: "1 Minute",
        fillPercent: 0.45
      },
      {
        name: "1 Hour",
        emoji: "⚽",
        left: "60 Minutes",
        right: "1 Hour",
        fillPercent: 0.75
      },
      {
        name: "1 Day",
        emoji: "☀️",
        left: "24 Hours",
        right: "1 Day",
        fillPercent: 1.0
      }
    ];

    let current = 0;
    let playing = true;
    let timer = null;
    const CIRCUMFERENCE = 2 * Math.PI * 45; // ~282.74

    const tabs = document.querySelectorAll('.tab-btn');
    const unitName = document.getElementById('unitName');
    const unitEmoji = document.getElementById('unitEmoji');
    const mathLeft = document.getElementById('mathLeft');
    const mathRight = document.getElementById('mathRight');
    const dialRing = document.getElementById('dialRing');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function update() {
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === current);
      });

      const s = steps[current];
      unitName.textContent = s.name;
      unitEmoji.textContent = s.emoji;
      mathLeft.textContent = s.left;
      mathRight.textContent = s.right;

      const offset = CIRCUMFERENCE * (1 - s.fillPercent);
      dialRing.style.strokeDashoffset = offset;

      prevBtn.disabled = (current === 0);
      nextBtn.disabled = (current === steps.length - 1);
    }

    function setStep(idx) {
      current = Math.max(0, Math.min(steps.length - 1, idx));
      update();
    }

    function nextStep() {
      current = (current + 1) % steps.length;
      update();
    }

    function prevStep() {
      current = (current - 1 + steps.length) % steps.length;
      update();
    }

    function togglePlay() {
      playing = !playing;
      playBtn.textContent = playing ? '⏸ Pause' : '▶ Play';
      if (playing) startTimer();
      else clearInterval(timer);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (playing) {
          nextStep();
        }
      }, 3500);
    }

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

What happens when we group lots of minutes together?

When 60 minutes tick by, you have completed one **hour**, which is about the length of a fun cartoon movie.

A full **day** has 24 hours, giving us daytime for school and playtime, plus nighttime for sleeping.

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

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      padding: 8px 4px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .tab-btn.active {
      color: #0284c7;
      background: #f0f9ff;
      border-color: #22b7ff;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    .tab-icon {
      font-size: 16px;
    }

    .display-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .unit-panel {
      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;
    }

    .unit-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    .math-badge {
      font-size: 18px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    /* Second Visual */
    .second-ring {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 6px solid #e0f2fe;
      border-top-color: #22b7ff;
      animation: spin 1s linear infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Minute Visual: 60s Grid */
    .grid-60 {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 3px;
      width: 200px;
      background: #f8fafc;
      padding: 6px;
      border-radius: 8px;
    }

    .dot-sec {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      background: #22b7ff;
      opacity: 0.85;
    }

    /* Hour Visual: Clock with 60 minute ticks */
    .clock-dial {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 5px solid #22b7ff;
      background: #f0f9ff;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .clock-center {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #1e2945;
      z-index: 2;
    }

    .clock-hand-hour {
      position: absolute;
      top: 30px;
      left: 62px;
      width: 6px;
      height: 35px;
      background: #1e2945;
      border-radius: 3px;
      transform-origin: 3px 35px;
      transform: rotate(60deg);
    }

    .clock-hand-min {
      position: absolute;
      top: 15px;
      left: 63px;
      width: 4px;
      height: 50px;
      background: #0284c7;
      border-radius: 2px;
      transform-origin: 2px 50px;
      animation: spin 4s linear infinite;
    }

    /* Day Visual: 24h Sun & Moon */
    .day-night-wheel {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      border: 4px solid #bae6fd;
      animation: spin 8s linear infinite;
    }

    .sky-day {
      width: 100%;
      height: 50%;
      background: linear-gradient(180deg, #38bdf8, #bae6fd);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .sky-night {
      width: 100%;
      height: 50%;
      background: linear-gradient(180deg, #1e2945, #0f172a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .unit-sub {
      font-size: 13px;
      color: #6b7280;
      margin-top: 8px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" data-step="0" role="tab">
      <span class="tab-icon">⚡</span>
      <span>Second</span>
    </button>
    <button class="tab-btn" data-step="1" role="tab">
      <span class="tab-icon">⏱️</span>
      <span>Minute</span>
    </button>
    <button class="tab-btn" data-step="2" role="tab">
      <span class="tab-icon">🕐</span>
      <span>Hour</span>
    </button>
    <button class="tab-btn" data-step="3" role="tab">
      <span class="tab-icon">☀️</span>
      <span>Day</span>
    </button>
  </div>

  <div class="display-stage">
    
    <div class="unit-panel active" id="panel-0">
      <div class="math-badge">1 Second</div>
      <div class="second-ring">⏱️</div>
      <div class="unit-sub">1 tick</div>
    </div>

    
    <div class="unit-panel" id="panel-1">
      <div class="math-badge">1 min = 60 s</div>
      <div class="grid-60" id="dotGrid"></div>
      <div class="unit-sub">60 seconds</div>
    </div>

    
    <div class="unit-panel" id="panel-2">
      <div class="math-badge">1 hr = 60 min</div>
      <div class="clock-dial">
        <div class="clock-hand-hour"></div>
        <div class="clock-hand-min"></div>
        <div class="clock-center"></div>
      </div>
      <div class="unit-sub">60 minutes</div>
    </div>

    
    <div class="unit-panel" id="panel-3">
      <div class="math-badge">1 day = 24 hr</div>
      <div class="day-night-wheel">
        <div class="sky-day">☀️</div>
        <div class="sky-night">🌙</div>
      </div>
      <div class="unit-sub">Day & Night</div>
    </div>
  </div>

  <script>
    // Build 60 dots for minute panel
    const grid = document.getElementById('dotGrid');
    for (let i = 0; i < 60; i++) {
      const dot = document.createElement('div');
      dot.className = 'dot-sec';
      grid.appendChild(dot);
    }

    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.unit-panel');
    let currentIndex = 0;
    let autoTimer = null;

    function setStep(index) {
      currentIndex = index;
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === index);
      });
      panels.forEach((panel, i) => {
        panel.classList.toggle('active', i === index);
      });
    }

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

    function startAuto() {
      autoTimer = setInterval(() => {
        setStep((currentIndex + 1) % tabs.length);
      }, 3500);
    }

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

What if we want to count even longer periods of time, like school terms or seasons?

A **week** is made of 7 days in a row, from Monday all the way through Sunday.

A **month** has about 4 weeks (or 30 to 31 days), and **12 months** make one full **year** with 365 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">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -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%;
    }

    .ladder {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 540px;
      margin-bottom: 16px;
    }

    .unit-btn {
      flex: 1;
      padding: 8px 4px;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      background: #ffffff;
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
      user-select: none;
    }

    .unit-btn.active {
      border-color: #22b7ff;
      background: #eef9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .arrow-mult {
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1;
    }

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

    .unit-panel {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .unit-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .main-icon {
      font-size: 40px;
      line-height: 1;
    }

    .conversion-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 18px;
      font-weight: 800;
      color: #0369a1;
    }

    .grid-vis {
      display: grid;
      gap: 3px;
      width: 100%;
      max-width: 320px;
      height: 64px;
      align-items: center;
      justify-content: center;
    }

    .grid-60 {
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(5, 1fr);
    }

    .grid-24 {
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }

    .grid-7 {
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: 1fr;
    }

    .cell {
      background: #e2e8f0;
      border-radius: 2px;
      height: 9px;
      width: 100%;
      transition: background-color 0.4s ease;
    }

    .cell.fill {
      background: #22b7ff;
    }

    .cell.fill-accent {
      background: #f59e0b;
    }

    .nav-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      cursor: pointer;
      color: #475569;
      transition: all 0.2s;
    }

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

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

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

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

  <div class="ladder">
    <button class="unit-btn active" onclick="setStep(0)">Seconds</button>
    <div class="arrow-mult"><span>×60</span><span>→</span></div>
    <button class="unit-btn" onclick="setStep(1)">Minutes</button>
    <div class="arrow-mult"><span>×60</span><span>→</span></div>
    <button class="unit-btn" onclick="setStep(2)">Hours</button>
    <div class="arrow-mult"><span>×24</span><span>→</span></div>
    <button class="unit-btn" onclick="setStep(3)">Days</button>
  </div>

  <div class="display-area">
    
    <div class="unit-panel active" id="panel-0">
      <div class="main-icon">⏱️</div>
      <div class="conversion-badge">1 min = 60 s</div>
      <div class="grid-vis grid-60" id="grid-sec"></div>
    </div>

    
    <div class="unit-panel" id="panel-1">
      <div class="main-icon">⏳</div>
      <div class="conversion-badge">1 hr = 60 min</div>
      <div class="grid-vis grid-60" id="grid-min"></div>
    </div>

    
    <div class="unit-panel" id="panel-2">
      <div class="main-icon">☀️🌙</div>
      <div class="conversion-badge">1 day = 24 hr</div>
      <div class="grid-vis grid-24" id="grid-hr"></div>
    </div>

    
    <div class="unit-panel" id="panel-3">
      <div class="main-icon">📅</div>
      <div class="conversion-badge">1 week = 7 days</div>
      <div class="grid-vis grid-7" id="grid-day"></div>
    </div>
  </div>

  <div class="nav-controls">
    <button class="nav-btn" onclick="prevStep()" aria-label="Previous">◀</button>
    <div class="dots">
      <div class="dot active" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
      <div class="dot" onclick="setStep(3)"></div>
    </div>
    <button class="nav-btn" onclick="nextStep()" aria-label="Next">▶</button>
  </div>

  <script>
    function buildGrid(id, count, fillCount, accent) {
      const el = document.getElementById(id);
      el.innerHTML = '';
      for (let i = 0; i < count; i++) {
        const cell = document.createElement('div');
        cell.className = 'cell' + (i < fillCount ? (accent ? ' fill-accent' : ' fill') : '');
        el.appendChild(cell);
      }
    }

    buildGrid('grid-sec', 60, 60, false);
    buildGrid('grid-min', 60, 60, false);
    buildGrid('grid-hr', 24, 24, true);
    buildGrid('grid-day', 7, 7, true);

    let current = 0;
    const total = 4;

    function setStep(idx) {
      current = (idx + total) % total;
      
      document.querySelectorAll('.unit-btn').forEach((b, i) => {
        b.classList.toggle('active', i === current);
      });
      document.querySelectorAll('.unit-panel').forEach((p, i) => {
        p.classList.toggle('active', i === current);
      });
      document.querySelectorAll('.dot').forEach((d, i) => {
        d.classList.toggle('active', i === current);
      });
    }

    function nextStep() { setStep(current + 1); }
    function prevStep() { setStep(current - 1); }
  </script>
</body>
</html>

When you do a science test, matching the unit to the action is key.

Would you time a toy car rolling down a ramp in **seconds** or in **years**?

math

Exploring Units of Time: Seconds, Minutes, Hours, Days. Identify the relationships between seconds, minutes, hours, days, weeks, months, and years.

Round the Clock: What is a Second? & What is a Minute?

Choose Units of Time (Seconds, Minutes, Hours, Days)

Estimating, Comparing and Measuring Time: Age 5–7 Collection

At Early Level (P1 / age 4-6), instruction should prioritize multi-sensory and kinesthetic timing investigations rather than abstract numerical operations. Incorporate physical benchmarks (clapping for 1 second, staying silent or doing star jumps for 1 minute, referencing routine intervals like lunchtime for hours, and using classroom calendar daily chart routines for days and weeks). Encourage learners to articulate why a unit matches an event (e.g., 'A stopwatch measuring seconds is best for a sprint because an hour is far too big').

Exploring Units of Time: Seconds, Minutes, Hours, Days

Seconds and Minutes

Minutes to Hours and Days