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

How fast can your friend zoom across the playground? You can find out using a special tool called a stopwatch!

A **stopwatch** is a timer that measures how many seconds an activity takes, starting right from zero.

<!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>Stopwatch: Start, Stop, Reset</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;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .main-wrapper {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Step selector bar */
  .step-bar {
    display: flex;
    width: 100%;
    gap: 8px;
    background: #ffffff;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
  }

  .step-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .step-btn.active.btn-start {
    background: #ecfdf5;
    color: #16a34a;
    box-shadow: 0 0 0 1.5px #22c55e;
  }

  .step-btn.active.btn-stop {
    background: #fffbeb;
    color: #d97706;
    box-shadow: 0 0 0 1.5px #f59e0b;
  }

  .step-btn.active.btn-reset {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: 0 0 0 1.5px #3b82f6;
  }

  /* Stopwatch housing */
  .stopwatch-casing {
    position: relative;
    width: 220px;
    height: 220px;
    background: #ffffff;
    border-radius: 50%;
    border: 8px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(30, 41, 69, 0.08);
  }

  /* Crown & side buttons */
  .casing-top {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 14px;
    background: #94a3b8;
    border-radius: 4px;
  }

  .ring-track {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px dashed #e2e8f0;
    pointer-events: none;
  }

  .progress-ring {
    position: absolute;
    inset: 4px;
    transform: rotate(-90deg);
  }

  .progress-circle {
    fill: none;
    stroke-width: 5;
    stroke-dasharray: 603;
    stroke-dashoffset: 603;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
  }

  .state-badge {
    position: absolute;
    top: 36px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    transition: all 0.3s ease;
  }

  .state-badge.state-start {
    background: #dcfce7;
    color: #15803d;
  }

  .state-badge.state-stop {
    background: #fef3c7;
    color: #b45309;
  }

  .state-badge.state-reset {
    background: #e0f2fe;
    color: #0369a1;
  }

  .digital-readout {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 32px;
    font-weight: 700;
    color: #1e2945;
    letter-spacing: -0.5px;
    margin-top: 10px;
  }

  .digital-sub {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
    margin-top: -2px;
  }

  /* Action cue */
  .action-banner {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
  }

  .banner-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
  }

  .banner-sub {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }

  .pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }

  .dot-green { background: #22c55e; }
  .dot-amber { background: #f59e0b; }
  .dot-blue  { background: #3b82f6; }
</style>
</head>
<body>

<div class="main-wrapper">
  
  <div class="step-bar">
    <button class="step-btn btn-start active" id="btnStart" onclick="setStep(0)">
      <span>▶</span> Start
    </button>
    <button class="step-btn btn-stop" id="btnStop" onclick="setStep(1)">
      <span>⏸</span> Stop
    </button>
    <button class="step-btn btn-reset" id="btnReset" onclick="setStep(2)">
      <span>↺</span> Reset
    </button>
  </div>

  
  <div class="stopwatch-casing">
    <div class="casing-top"></div>
    <div class="ring-track"></div>
    <svg class="progress-ring" width="196" height="196" viewBox="0 0 200 200">
      <circle id="progCircle" class="progress-circle" cx="100" cy="100" r="96" stroke="#22c55e" />
    </svg>
    <div class="state-badge state-start" id="stateBadge">RUNNING</div>
    <div class="digital-readout" id="mainTime">00:04</div>
    <div class="digital-sub" id="subTime">.85 s</div>
  </div>

  
  <div class="action-banner">
    <div class="banner-label">
      <span class="pulse-dot dot-green" id="statusDot"></span>
      <span id="actionTitle">Starts Timer</span>
    </div>
    <div class="banner-sub" id="actionSub">Counts up from 0</div>
  </div>
</div>

<script>
  let currentStep = 0;
  let timerInterval = null;
  let elapsedMs = 0;
  const CIRCLE_CIRCUMFERENCE = 603;

  const steps = [
    {
      name: 'RUNNING',
      badgeClass: 'state-start',
      btnId: 'btnStart',
      dotClass: 'dot-green',
      stroke: '#22c55e',
      title: 'Starts Timer',
      sub: 'Counts up from 0'
    },
    {
      name: 'STOPPED',
      badgeClass: 'state-stop',
      btnId: 'btnStop',
      dotClass: 'dot-amber',
      stroke: '#f59e0b',
      title: 'Freezes Time',
      sub: 'Shows final result'
    },
    {
      name: 'READY',
      badgeClass: 'state-reset',
      btnId: 'btnReset',
      dotClass: 'dot-blue',
      stroke: '#3b82f6',
      title: 'Resets to Zero',
      sub: 'Ready for next race'
    }
  ];

  function formatTime(ms) {
    const totalSecs = Math.floor(ms / 1000);
    const mins = Math.floor(totalSecs / 60);
    const secs = totalSecs % 60;
    const hundredths = Math.floor((ms % 1000) / 10);

    const pad = (n) => String(n).padStart(2, '0');
    return {
      main: `${pad(mins)}:${pad(secs)}`,
      sub: `.${pad(hundredths)} s`
    };
  }

  function updateDisplay() {
    const t = formatTime(elapsedMs);
    document.getElementById('mainTime').textContent = t.main;
    document.getElementById('subTime').textContent = t.sub;

    const fraction = ((elapsedMs % 10000) / 10000);
    const offset = CIRCLE_CIRCUMFERENCE - (fraction * CIRCLE_CIRCUMFERENCE);
    document.getElementById('progCircle').style.strokeDashoffset = offset;
  }

  function setStep(index) {
    currentStep = index;
    clearInterval(timerInterval);

    // Update buttons
    ['btnStart', 'btnStop', 'btnReset'].forEach((id, i) => {
      document.getElementById(id).classList.toggle('active', i === index);
    });

    const s = steps[index];
    const badge = document.getElementById('stateBadge');
    badge.textContent = s.name;
    badge.className = `state-badge ${s.badgeClass}`;

    const dot = document.getElementById('statusDot');
    dot.className = `pulse-dot ${s.dotClass}`;

    document.getElementById('actionTitle').textContent = s.title;
    document.getElementById('actionSub').textContent = s.sub;
    document.getElementById('progCircle').style.stroke = s.stroke;

    if (index === 0) {
      // Running from 0 or existing
      if (elapsedMs === 0) elapsedMs = 1200;
      timerInterval = setInterval(() => {
        elapsedMs += 40;
        if (elapsedMs >= 10000) elapsedMs = 0;
        updateDisplay();
      }, 40);
    } else if (index === 1) {
      // Freeze time at fixed clear value if not already running
      if (elapsedMs === 0) elapsedMs = 5380;
      updateDisplay();
    } else if (index === 2) {
      // Reset to 0
      elapsedMs = 0;
      document.getElementById('mainTime').textContent = '00:00';
      document.getElementById('subTime').textContent = '.00 s';
      document.getElementById('progCircle').style.strokeDashoffset = CIRCLE_CIRCUMFERENCE;
    }
  }

  // Initial load: Start step
  setStep(0);
</script>
</body>
</html>

To time any race or game, you only need to learn three simple button presses.

First, press **Start** the exact moment your friend takes their first step.

Next, press **Stop** the moment your friend crosses the finish line so the numbers freeze.

Finally, press **Reset** to wipe the screen clean and bring the numbers back to zero for the next turn.

<!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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
  }

  .diagram-root {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Step selector tabs */
  .step-nav {
    display: flex;
    width: 100%;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
  }

  .step-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }

  .step-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  /* Stopwatch visual */
  .stopwatch-casing {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #ffffff;
    border: 8px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(30, 41, 69, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
  }

  /* Top Buttons */
  .top-btn {
    position: absolute;
    width: 38px;
    height: 16px;
    background: #cbd5e1;
    border-radius: 4px 4px 0 0;
    top: -20px;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s;
  }
  .btn-left {
    left: 28px;
    transform: rotate(-30deg);
  }
  .btn-right {
    right: 28px;
    transform: rotate(30deg);
  }
  .top-crown {
    position: absolute;
    width: 20px;
    height: 14px;
    background: #94a3b8;
    top: -18px;
    border-radius: 3px 3px 0 0;
  }

  .btn-left.highlight {
    background: #3b82f6;
    transform: rotate(-30deg) translateY(3px);
  }
  .btn-right.highlight-start {
    background: #22c55e;
    transform: rotate(30deg) translateY(3px);
  }
  .btn-right.highlight-stop {
    background: #ef4444;
    transform: rotate(30deg) translateY(3px);
  }

  /* Digital display inside stopwatch */
  .digital-screen {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    text-align: center;
    min-width: 140px;
  }

  .time-display {
    font-family: ui-monospace, monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1e2945;
  }

  .status-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }

  /* Track scene */
  .track-container {
    width: 100%;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 10px 16px;
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
  }

  .track-line {
    position: absolute;
    left: 20px;
    right: 20px;
    height: 2px;
    background: #e2e8f0;
    border-top: 2px dashed #cbd5e1;
  }

  .runner {
    position: absolute;
    font-size: 24px;
    line-height: 1;
    left: 16px;
    transition: left 0.3s ease;
    transform: translateY(-2px);
  }

  .flag {
    position: absolute;
    right: 16px;
    font-size: 18px;
    line-height: 1;
  }

  /* Action highlight description */
  .action-hint {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
  }

  .action-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
</style>
</head>
<body>

<div class="diagram-root">
  
  <div class="step-nav">
    <button class="step-btn active" id="tab-0">1. Start</button>
    <button class="step-btn" id="tab-1">2. Stop</button>
    <button class="step-btn" id="tab-2">3. Reset</button>
  </div>

  
  <div class="stopwatch-casing">
    <div class="top-crown"></div>
    <button class="top-btn btn-left" id="reset-hardware-btn" title="Reset"></button>
    <button class="top-btn btn-right highlight-start" id="start-stop-hardware-btn" title="Start/Stop"></button>

    <div class="digital-screen">
      <div class="time-display" id="clock-text">00:03.40</div>
      <div class="status-badge" id="status-text" style="color: #22c55e;">Counting</div>
    </div>
  </div>

  
  <div class="action-hint" id="action-hint">
    <span class="action-dot" id="hint-dot" style="background:#22c55e;"></span>
    <span id="hint-text">Running</span>
  </div>

  
  <div class="track-container">
    <div class="track-line"></div>
    <div class="runner" id="runner-emoji">🏃</div>
    <div class="flag">🏁</div>
  </div>
</div>

<script>
  const states = [
    {
      time: "00:04.28",
      status: "Counting",
      statusColor: "#22c55e",
      btnLeft: "",
      btnRight: "highlight-start",
      runnerPos: "60%",
      hint: "Running...",
      animate: true
    },
    {
      time: "00:08.50",
      status: "Stopped",
      statusColor: "#ef4444",
      btnLeft: "",
      btnRight: "highlight-stop",
      runnerPos: "82%",
      hint: "Time Frozen",
      animate: false
    },
    {
      time: "00:00.00",
      status: "Reset",
      statusColor: "#3b82f6",
      btnLeft: "highlight",
      btnRight: "",
      runnerPos: "16px",
      hint: "Back to Zero",
      animate: false
    }
  ];

  let currentStep = 0;
  let timerInterval = null;
  let currentHundredths = 428;

  const clockText = document.getElementById('clock-text');
  const statusText = document.getElementById('status-text');
  const btnLeft = document.getElementById('reset-hardware-btn');
  const btnRight = document.getElementById('start-stop-hardware-btn');
  const runner = document.getElementById('runner-emoji');
  const hintDot = document.getElementById('hint-dot');
  const hintText = document.getElementById('hint-text');

  function pad(n, len = 2) {
    return String(n).padStart(len, '0');
  }

  function formatTime(hundredths) {
    const sec = Math.floor(hundredths / 100);
    const m = Math.floor(sec / 60);
    const s = sec % 60;
    const cs = hundredths % 100;
    return `${pad(m)}:${pad(s)}.${pad(cs)}`;
  }

  function setStep(idx) {
    currentStep = idx;
    
    // Update tab classes
    for (let i = 0; i < 3; i++) {
      const tab = document.getElementById(`tab-${i}`);
      if (i === idx) {
        tab.classList.add('active');
      } else {
        tab.classList.remove('active');
      }
    }

    const state = states[idx];

    // Hardware buttons visual
    btnLeft.className = `top-btn btn-left ${state.btnLeft}`;
    btnRight.className = `top-btn btn-right ${state.btnRight}`;

    // Text & colors
    statusText.textContent = state.status;
    statusText.style.color = state.statusColor;
    hintDot.style.background = state.statusColor;
    hintText.textContent = state.hint;
    runner.style.left = state.runnerPos;

    // Running animation or static
    if (timerInterval) clearInterval(timerInterval);

    if (state.animate) {
      currentHundredths = 240;
      timerInterval = setInterval(() => {
        currentHundredths += 7;
        clockText.textContent = formatTime(currentHundredths);
        const progress = Math.min(80, 20 + (currentHundredths / 50));
        runner.style.left = `${progress}%`;
      }, 70);
    } else {
      clockText.textContent = state.time;
    }
  }

  // Setup click listeners
  for (let i = 0; i < 3; i++) {
    document.getElementById(`tab-${i}`).addEventListener('click', () => {
      setStep(i);
    });
  }

  // Hardware buttons are also interactive
  btnLeft.addEventListener('click', () => setStep(2));
  btnRight.addEventListener('click', () => {
    if (currentStep === 0) setStep(1);
    else setStep(0);
  });

  // Initialize
  setStep(0);
</script>

</body>
</html>

What if you want to time jumping instead of running?

Let's time Leo doing 5 big frog jumps across the mat!

You say 'Ready, Set, Go!' and tap **Start** on 'Go'. Leo jumps five times, and you tap **Stop** the second his feet land on jump number five.

<!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>Starting, Stopping, and Resetting a Stopwatch</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    /* Stepper Header */
    .step-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      border: 2px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

    .step-btn.active {
      border-color: #0284c7;
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    }

    /* Stopwatch Visual Container */
    .stage {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 340px;
      margin: 8px 0;
    }

    /* Stopwatch Body */
    .stopwatch {
      position: relative;
      width: 210px;
      height: 210px;
      background: #ffffff;
      border-radius: 50%;
      border: 8px solid #1e2945;
      box-shadow: 0 8px 24px rgba(30, 41, 69, 0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Top Crown Button */
    .crown {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 14px;
      background: #1e2945;
      border-radius: 4px 4px 0 0;
    }

    /* Dial Tick Ring */
    .dial {
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      border: 2px dashed #cbd5e1;
    }

    /* Needle */
    .needle-pivot {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      background: #f97316;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
    }

    .needle {
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 4px;
      height: 72px;
      background: #f97316;
      border-radius: 2px;
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(0deg);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
    }

    /* Digital Readout Display */
    .digital-display {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 14px;
      margin-top: 50px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .digits {
      font-size: 26px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #1e2945;
      letter-spacing: 1px;
    }

    /* Elapsed Time Callout Badge */
    .badge {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 12px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }

    .badge.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* Action Controls */
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 320px;
      justify-content: center;
    }

    .action-btn {
      flex: 1;
      padding: 10px 8px;
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: opacity 0.2s ease, transform 0.1s ease;
    }

    .action-btn:active {
      transform: scale(0.97);
    }

    .btn-start {
      background: #10b981;
      color: #ffffff;
    }

    .btn-stop {
      background: #ef4444;
      color: #ffffff;
    }

    .btn-reset {
      background: #64748b;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="step-nav">
    <button class="step-btn active" id="tab0" onclick="setStep(0)">1. Start ▶</button>
    <button class="step-btn" id="tab1" onclick="setStep(1)">2. Stop ⏸</button>
    <button class="step-btn" id="tab2" onclick="setStep(2)">3. Reset ↺</button>
  </div>

  
  <div class="stage">
    <div class="stopwatch">
      <div class="crown"></div>
      <div class="dial"></div>
      <div class="needle" id="needle"></div>
      <div class="needle-pivot"></div>

      <div class="digital-display">
        <div class="digits" id="timeText">00:00.0</div>
      </div>
    </div>

    
    <div class="badge" id="elapsedTag">⏱ Elapsed Time</div>
  </div>

  
  <div class="controls">
    <button class="action-btn btn-start" id="btnStart" onclick="handleStart()">▶ Start</button>
    <button class="action-btn btn-stop" id="btnStop" onclick="handleStop()">⏸ Stop</button>
    <button class="action-btn btn-reset" id="btnReset" onclick="handleReset()">↺ Reset</button>
  </div>

  <script>
    let timerId = null;
    let startTime = 0;
    let elapsed = 0;
    let state = 0; // 0: reset/ready, 1: running, 2: stopped

    const digitsEl = document.getElementById('timeText');
    const needleEl = document.getElementById('needle');
    const badgeEl = document.getElementById('elapsedTag');

    function formatTime(ms) {
      const totalSecs = ms / 1000;
      const mins = Math.floor(totalSecs / 60);
      const secs = Math.floor(totalSecs % 60);
      const tenths = Math.floor((ms % 1000) / 100);
      const mm = String(mins).padStart(2, '0');
      const ss = String(secs).padStart(2, '0');
      return `${mm}:${ss}.${tenths}`;
    }

    function updateView(ms) {
      digitsEl.textContent = formatTime(ms);
      const angle = (ms / 10000) * 360; // 10s per revolution
      needleEl.style.transform = `translateX(-50%) rotate(${angle}deg)`;
    }

    function updateTabs(index) {
      for (let i = 0; i < 3; i++) {
        const tab = document.getElementById('tab' + i);
        if (tab) tab.classList.toggle('active', i === index);
      }
    }

    function handleStart() {
      if (state === 1) return;
      state = 1;
      updateTabs(0);
      badgeEl.classList.remove('show');
      startTime = performance.now() - elapsed;
      if (timerId) cancelAnimationFrame(timerId);

      function tick() {
        if (state !== 1) return;
        elapsed = performance.now() - startTime;
        updateView(elapsed);
        timerId = requestAnimationFrame(tick);
      }
      timerId = requestAnimationFrame(tick);
    }

    function handleStop() {
      if (state !== 1 && elapsed === 0) return;
      state = 2;
      updateTabs(1);
      if (timerId) cancelAnimationFrame(timerId);
      badgeEl.classList.add('show');
    }

    function handleReset() {
      state = 0;
      updateTabs(2);
      if (timerId) cancelAnimationFrame(timerId);
      elapsed = 0;
      updateView(0);
      badgeEl.classList.remove('show');
    }

    function setStep(stepIndex) {
      if (stepIndex === 0) {
        handleReset();
        handleStart();
      } else if (stepIndex === 1) {
        if (state !== 1) {
          elapsed = 5400; // Simulated 5.4s for jump demo
          updateView(elapsed);
        }
        handleStop();
      } else if (stepIndex === 2) {
        handleReset();
      }
    }

    // Initialize in ready state
    setStep(0);
  </script>
</body>
</html>

The big number on your screen shows **elapsed time**, which is how many seconds have passed from start to finish.

If you see tiny numbers spinning super fast at the end, do not worry—just look at the big front numbers to read the whole seconds.

Try practicing with your thumbs right now: tap Start, count to three in your head, and tap Stop!

math

Starting, Stopping, and Resetting a Stopwatch. Operate a handheld digital stopwatch or tablet timer to record how long a classmate runs or jumps.

Early Level Mathematics and Numeracy: Measuring Time and Using Timers

Beat the Clock: Measuring Time in the Early Years

Measuring Time: Practical Stopwatch Activities for Primary Learners

For P1 / Early Level learners within the Scottish Curriculum for Excellence (MNU 1-10c), focus on practical, multi-sensory experiences linking gross-motor physical activities (running, jumping, hopping) to the operation of simple digital timers. Use color-coded buttons (e.g., green dot on Start, red dot on Stop, blue dot on Reset) to support emerging readers. Encourage pairing up so one child performs an action while the other operates the timer, fostering collaborative discussion around words like 'faster', 'slower', 'more seconds', and 'less seconds'.

Starting, Stopping, and Resetting a Stopwatch

The Three Buttons

Timing a Jump