<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px;
    }

    .diagram-area {
      width: 100%;
      max-width: 560px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Jump arcs & labels transitions */
    .jump-group {
      transition: opacity 0.35s ease;
      opacity: 0.12;
    }
    .jump-group.active {
      opacity: 1;
    }

    /* Equation bar */
    .equation-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      row-gap: 6px;
      column-gap: 5px;
      font-size: clamp(12px, 3.4vw, 15px);
      font-weight: 700;
      padding: 8px 12px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      margin-top: 6px;
      width: 100%;
      max-width: 520px;
    }

    .eq-segment {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 7px;
      border-radius: 6px;
      font-size: clamp(11.5px, 3.2vw, 14px);
      font-weight: 700;
      transition: opacity 0.3s ease;
    }

    .badge-orange { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
    .badge-blue   { background: #dbeafe; color: #0369a1; border: 1px solid #93c5fd; }
    .badge-green  { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
    .badge-total  { background: #1e2945; color: #ffffff; }

    .eq-dim { opacity: 0.22; }

    /* Stepper controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      width: 100%;
      max-width: 520px;
    }

    .btn-step {
      flex: 1;
      padding: 7px 4px;
      font-size: clamp(11px, 2.8vw, 13px);
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

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

    .btn-step.active {
      background: #0284c7;
      border-color: #0369a1;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    }

    .btn-play {
      padding: 7px 11px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
    }

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

    @media (max-width: 380px) {
      body {
        padding: 6px;
      }
      .equation-bar {
        padding: 6px 8px;
      }
      .btn-step {
        padding: 6px 2px;
      }
      .btn-play {
        padding: 6px 8px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <svg viewBox="0 0 540 215" aria-label="Open number line calculating elapsed time from 8:40 AM to 11:15 AM">
      <defs>
        
        <marker id="arr-orange" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#c2410c" />
        </marker>
        <marker id="arr-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#0284c7" />
        </marker>
        <marker id="arr-green" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#15803d" />
        </marker>
        <marker id="arr-axis" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 2 L 8 5 L 0 8 z" fill="#94a3b8" />
        </marker>
      </defs>

      
      <line x1="20" y1="150" x2="520" y2="150" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" marker-start="url(#arr-axis)" marker-end="url(#arr-axis)" />

      
      <g id="step1-group" class="jump-group active">
        
        <path d="M 55 148 C 55 88, 155 88, 155 148" fill="none" stroke="#ea580c" stroke-width="3.5" marker-end="url(#arr-orange)" />
        
        <rect x="80" y="68" width="62" height="24" rx="6" fill="#ffedd5" stroke="#fdba74" stroke-width="1.5" />
        <text x="111" y="84.5" fill="#c2410c" font-size="13" font-weight="700" text-anchor="middle">+20 min</text>
        
        
        <polygon points="151,135 159,135 155,142" fill="#ea580c" />
        <rect x="116" y="115" width="78" height="20" rx="4" fill="#ea580c" />
        <text x="155" y="129" fill="#ffffff" font-size="10.5" font-weight="800" letter-spacing="0.5" text-anchor="middle">BENCHMARK</text>
        <circle cx="155" cy="150" r="6" fill="#ea580c" />
      </g>

      
      <g id="step2-group" class="jump-group">
        
        <path d="M 155 148 C 155 22, 405 22, 405 148" fill="none" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arr-blue)" />
        
        <rect x="245" y="15" width="70" height="24" rx="6" fill="#dbeafe" stroke="#93c5fd" stroke-width="1.5" />
        <text x="280" y="31.5" fill="#0369a1" font-size="13" font-weight="700" text-anchor="middle">+2 hours</text>
      </g>

      
      <g id="step3-group" class="jump-group">
        
        <path d="M 405 148 C 405 92, 485 92, 485 148" fill="none" stroke="#15803d" stroke-width="3.5" marker-end="url(#arr-green)" />
        
        <rect x="420" y="72" width="62" height="24" rx="6" fill="#dcfce7" stroke="#86efac" stroke-width="1.5" />
        <text x="451" y="88.5" fill="#14532d" font-size="13" font-weight="700" text-anchor="middle">+15 min</text>
      </g>

      
      
      <line x1="55" y1="142" x2="55" y2="158" stroke="#1e2945" stroke-width="3" stroke-linecap="round" />
      <circle cx="55" cy="150" r="5" fill="#1e2945" />
      <text x="55" y="176" fill="#1e2945" font-size="13.5" font-weight="800" text-anchor="middle">8:40 AM</text>
      <text x="55" y="193" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">Start</text>

      
      <line x1="155" y1="142" x2="155" y2="158" stroke="#c2410c" stroke-width="3" stroke-linecap="round" />
      <text x="155" y="176" fill="#c2410c" font-size="13.5" font-weight="800" text-anchor="middle">9:00 AM</text>

      
      <line x1="405" y1="142" x2="405" y2="158" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
      <circle cx="405" cy="150" r="5" fill="#0284c7" />
      <text x="405" y="176" fill="#0284c7" font-size="13.5" font-weight="800" text-anchor="middle">11:00 AM</text>

      
      <line x1="485" y1="142" x2="485" y2="158" stroke="#15803d" stroke-width="3" stroke-linecap="round" />
      <circle cx="485" cy="150" r="5" fill="#15803d" />
      <text x="485" y="176" fill="#15803d" font-size="13.5" font-weight="800" text-anchor="middle">11:15 AM</text>
      <text x="485" y="193" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">End</text>
    </svg>
  </div>

  
  <div class="equation-bar" id="eqBar">
    <div class="eq-segment">
      <span class="badge badge-blue" id="eqH">2 hours</span>
      <span>+</span>
      <span>(</span>
      <span class="badge badge-orange" id="eqM1">20 min</span>
      <span>+</span>
      <span class="badge badge-green" id="eqM2">15 min</span>
      <span>)</span>
    </div>
    <div class="eq-segment">
      <span>=</span>
      <span class="badge badge-total" id="eqTotal">2 hr 35 min</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-play" id="playBtn" title="Play/Pause" aria-label="Toggle autoplay">▶</button>
    <button class="btn-step active" data-step="0">1. To Hour</button>
    <button class="btn-step" data-step="1">2. Jump Hours</button>
    <button class="btn-step" data-step="2">3. Add Mins</button>
    <button class="btn-step" data-step="3">All / Total</button>
  </div>

  <script>
    const steps = [
      {
        activeJumps: ['step1-group'],
        dimEquation: ['eqH', 'eqM2', 'eqTotal']
      },
      {
        activeJumps: ['step1-group', 'step2-group'],
        dimEquation: ['eqM2', 'eqTotal']
      },
      {
        activeJumps: ['step1-group', 'step2-group', 'step3-group'],
        dimEquation: ['eqTotal']
      },
      {
        activeJumps: ['step1-group', 'step2-group', 'step3-group'],
        dimEquation: []
      }
    ];

    let currentStep = 0;
    let autoInterval = null;

    const stepButtons = document.querySelectorAll('.btn-step');
    const playBtn = document.getElementById('playBtn');
    const jumpGroups = {
      'step1-group': document.getElementById('step1-group'),
      'step2-group': document.getElementById('step2-group'),
      'step3-group': document.getElementById('step3-group')
    };

    const eqElements = {
      eqH: document.getElementById('eqH'),
      eqM1: document.getElementById('eqM1'),
      eqM2: document.getElementById('eqM2'),
      eqTotal: document.getElementById('eqTotal')
    };

    function setStep(idx) {
      currentStep = idx;
      const data = steps[idx];

      // Update button highlights
      stepButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Update SVG jumps
      Object.keys(jumpGroups).forEach(id => {
        jumpGroups[id].classList.toggle('active', data.activeJumps.includes(id));
      });

      // Update Equation elements
      Object.keys(eqElements).forEach(id => {
        const isDim = data.dimEquation.includes(id);
        eqElements[id].classList.toggle('eq-dim', isDim);
      });
    }

    stepButtons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        pauseAuto();
        setStep(idx);
      });
    });

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

    function startAuto() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(nextStep, 3500);
      playBtn.textContent = '⏸';
    }

    function pauseAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
      }
      playBtn.textContent = '▶';
    }

    playBtn.addEventListener('click', () => {
      if (autoInterval) {
        pauseAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Initialize initial state
    setStep(0);
    // Start calm auto-play
    startAuto();
  </script>
</body>
</html>

Finding Elapsed Time Forward Using an Open Number Line

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elapsed Time Number Line</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      user-select: none;
      gap: 12px;
    }

    /* Stepper Navigation */
    .stepper-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 540px;
      flex-wrap: wrap;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

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

    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .btn-play {
      min-width: 82px;
      background: #f8fafc;
    }

    /* SVG Container */
    .svg-container {
      width: 100%;
      max-width: 540px;
      margin: 4px 0;
      display: flex;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Step Visibility & Transitions */
    .jump-group,
    .point-group {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .jump-group.visible,
    .point-group.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* Summary Box */
    .summary-box {
      width: 100%;
      max-width: 540px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 60px;
    }

    .summary-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #475569;
    }

    .equation {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 28px;
    }

    .sum-part {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .sum-part.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .blue-text {
      color: #1d4ed8;
      font-weight: 800;
    }

    .green-text {
      color: #15803d;
      font-weight: 800;
    }

    .op-text {
      color: #334155;
      font-weight: 800;
    }

    .total-badge {
      display: inline-block;
      padding: 3px 10px;
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #93c5fd;
      border-radius: 6px;
      font-weight: 800;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .total-badge.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .initial-prompt {
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      font-style: italic;
      transition: opacity 0.2s ease;
    }

    .initial-prompt.hidden {
      display: none;
    }

    @media (max-width: 400px) {
      .btn {
        padding: 5px 8px;
        font-size: 12px;
      }
      .summary-box {
        font-size: 13px;
        padding: 8px 10px;
      }
      .total-badge {
        font-size: 12px;
        padding: 2px 8px;
      }
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="btn btn-play" id="playBtn" title="Play sequence">▶ Play</button>
    <button class="btn btn-step active" data-step="0">Start</button>
    <button class="btn btn-step" data-step="1">Step 1 (+1 hr)</button>
    <button class="btn btn-step" data-step="2">Step 2 (+1 hr)</button>
    <button class="btn btn-step" data-step="3">Step 3 (+20 min)</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 540 180" role="img" aria-label="Open number line showing elapsed time jumps">
      <defs>
        
        <marker id="arrow-line" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 2 L 8 5 L 0 8 z" fill="#475569" />
        </marker>
        
        <marker id="arc-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1d4ed8" />
        </marker>
        <marker id="arc-green" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#15803d" />
        </marker>
      </defs>

      
      <line x1="20" y1="105" x2="520" y2="105" stroke="#475569" stroke-width="3" stroke-linecap="round" marker-end="url(#arrow-line)" />

      
      <g class="jump-group" id="jump1">
        <path d="M 60 95 C 100 18, 170 18, 208 94" fill="none" stroke="#1d4ed8" stroke-width="3" stroke-dasharray="6 4" marker-end="url(#arc-blue)" />
        <rect x="104" y="16" width="62" height="24" rx="12" fill="#eff6ff" stroke="#1d4ed8" stroke-width="1.5" />
        <text x="135" y="33" text-anchor="middle" font-size="13" font-weight="800" fill="#1d4ed8">+1 hr</text>
      </g>

      
      <g class="jump-group" id="jump2">
        <path d="M 210 95 C 250 18, 320 18, 358 94" fill="none" stroke="#1d4ed8" stroke-width="3" stroke-dasharray="6 4" marker-end="url(#arc-blue)" />
        <rect x="254" y="16" width="62" height="24" rx="12" fill="#eff6ff" stroke="#1d4ed8" stroke-width="1.5" />
        <text x="285" y="33" text-anchor="middle" font-size="13" font-weight="800" fill="#1d4ed8">+1 hr</text>
      </g>

      
      <g class="jump-group" id="jump3">
        <path d="M 360 95 C 392 38, 442 38, 478 94" fill="none" stroke="#15803d" stroke-width="3" stroke-dasharray="6 4" marker-end="url(#arc-green)" />
        <rect x="385" y="32" width="70" height="24" rx="12" fill="#f0fdf4" stroke="#15803d" stroke-width="1.5" />
        <text x="420" y="49" text-anchor="middle" font-size="13" font-weight="800" fill="#15803d">+20 min</text>
      </g>

      
      <g class="point-group visible" id="pt0">
        <line x1="60" y1="95" x2="60" y2="115" stroke="#1e2945" stroke-width="3.5" stroke-linecap="round" />
        <circle cx="60" cy="105" r="4.5" fill="#1e2945" />
        <text x="60" y="136" text-anchor="middle" font-size="15" font-weight="800" fill="#1e2945">2:15 PM</text>
        <text x="60" y="154" text-anchor="middle" font-size="12" font-weight="700" fill="#475569">Start</text>
      </g>

      
      <g class="point-group" id="pt1">
        <line x1="210" y1="95" x2="210" y2="115" stroke="#1d4ed8" stroke-width="3" stroke-linecap="round" />
        <circle cx="210" cy="105" r="4.5" fill="#1d4ed8" />
        <text x="210" y="136" text-anchor="middle" font-size="15" font-weight="800" fill="#1d4ed8">3:15 PM</text>
      </g>

      
      <g class="point-group" id="pt2">
        <line x1="360" y1="95" x2="360" y2="115" stroke="#1d4ed8" stroke-width="3" stroke-linecap="round" />
        <circle cx="360" cy="105" r="4.5" fill="#1d4ed8" />
        <text x="360" y="136" text-anchor="middle" font-size="15" font-weight="800" fill="#1d4ed8">4:15 PM</text>
      </g>

      
      <g class="point-group" id="pt3">
        <line x1="480" y1="95" x2="480" y2="115" stroke="#15803d" stroke-width="3.5" stroke-linecap="round" />
        <circle cx="480" cy="105" r="4.5" fill="#15803d" />
        <text x="480" y="136" text-anchor="middle" font-size="15" font-weight="800" fill="#15803d">4:35 PM</text>
        <text x="480" y="154" text-anchor="middle" font-size="12" font-weight="700" fill="#475569">End</text>
      </g>
    </svg>
  </div>

  
  <div class="summary-box">
    <div class="summary-title">Total Elapsed Time</div>
    <div class="equation">
      <span class="initial-prompt" id="promptText">Click a step or press Play to track jumps</span>
      <span class="sum-part blue-text" id="sum1">1 hr</span>
      <span class="sum-part op-text" id="plus1">+</span>
      <span class="sum-part blue-text" id="sum2">1 hr</span>
      <span class="sum-part op-text" id="plus2">+</span>
      <span class="sum-part green-text" id="sum3">20 min</span>
      <span class="sum-part op-text" id="equals">=</span>
      <span class="total-badge" id="sumTotal">2 hours and 20 minutes</span>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let timer = null;
    const totalSteps = 4;

    const playBtn = document.getElementById('playBtn');
    const stepBtns = document.querySelectorAll('.btn-step');
    const promptText = document.getElementById('promptText');

    const jumps = [
      document.getElementById('jump1'),
      document.getElementById('jump2'),
      document.getElementById('jump3')
    ];

    const points = [
      document.getElementById('pt0'),
      document.getElementById('pt1'),
      document.getElementById('pt2'),
      document.getElementById('pt3')
    ];

    const sumElements = {
      1: [document.getElementById('sum1')],
      2: [document.getElementById('plus1'), document.getElementById('sum2')],
      3: [document.getElementById('plus2'), document.getElementById('sum3'), document.getElementById('equals'), document.getElementById('sumTotal')]
    };

    function setStep(step) {
      currentStep = step;

      // Update button styles
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Update Jump Lines & Points
      jumps.forEach((jump, idx) => {
        jump.classList.toggle('visible', step > idx);
      });

      points.forEach((pt, idx) => {
        pt.classList.toggle('visible', step >= idx);
      });

      // Update Prompt and Summary Parts
      promptText.classList.toggle('hidden', step > 0);

      for (let s = 1; s <= 3; s++) {
        const isVisible = step >= s;
        sumElements[s].forEach(el => {
          el.classList.toggle('visible', isVisible);
        });
      }
    }

    function togglePlay() {
      if (timer) {
        stopPlay();
      } else {
        startPlay();
      }
    }

    function startPlay() {
      if (currentStep >= totalSteps - 1) {
        setStep(0);
      }
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(() => {
        if (currentStep < totalSteps - 1) {
          setStep(currentStep + 1);
        } else {
          stopPlay();
        }
      }, 1400);
    }

    function stopPlay() {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Play';
    }

    // Step button click handlers
    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        stopPlay();
        setStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    playBtn.addEventListener('click', togglePlay);

    // Initial state
    setStep(0);
  </script>
</body>
</html>

<!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="1:1">
  <title>Reading Clocks to the Nearest Minute</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      padding: 8px 12px;
      user-select: none;
    }

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

    /* Stepper Buttons */
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }
    .btn-step {
      flex: 1;
      max-width: 130px;
      padding: 6px 8px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .btn-step.active {
      background: #ffffff;
      color: #0f172a;
      border-color: #0284c7;
      box-shadow: 0 1px 4px rgba(2,132,199,0.18);
    }

    /* Clock SVG Container */
    .clock-container {
      width: 100%;
      max-width: 340px;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Digital Display Box */
    .digital-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 18px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      font-variant-numeric: tabular-nums;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 26px;
      font-weight: 700;
    }
    .digit-hour {
      color: #e11d48;
      transition: opacity 0.2s ease;
    }
    .digit-colon {
      color: #94a3b8;
    }
    .digit-min {
      color: #16a34a;
      transition: opacity 0.2s ease;
    }
    .digit-dim {
      opacity: 0.25;
    }

    /* SVG Layer Transitions */
    .step-layer {
      transition: opacity 0.3s ease;
    }
    .hidden {
      opacity: 0;
      pointer-events: none;
    }
    .visible {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="controls">
      <button id="btnStep1" class="btn-step active" onclick="setStep(1)">1. Hour</button>
      <button id="btnStep2" class="btn-step" onclick="setStep(2)">2. Minutes</button>
      <button id="btnAll" class="btn-step" onclick="setStep(3)">Full Time</button>
    </div>

    
    <div class="clock-container">
      <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
        <defs>
          <filter id="shadow" x="-8%" y="-8%" width="120%" height="120%">
            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08"/>
          </filter>
          <marker id="arrow-hour" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1 L 8 5 L 0 9 z" fill="#e11d48"/>
          </marker>
        </defs>

        
        <circle cx="200" cy="200" r="160" fill="#ffffff" stroke="#cbd5e1" stroke-width="4" filter="url(#shadow)"/>

        
        <g id="dialTicks"></g>

        
        <g id="hourNumbers" font-size="20" font-weight="700" fill="#1e2945" text-anchor="middle" dominant-baseline="central"></g>

        
        <g id="layerHour" class="step-layer visible">
          
          <path d="M 200 200 L 321.2 130 A 140 140 0 0 1 330 200 Z" fill="#fee2e2" opacity="0.6"/>
          
          <path d="M 270 120 Q 255 145 242 165" fill="none" stroke="#e11d48" stroke-width="2" stroke-dasharray="3,3" marker-end="url(#arrow-hour)"/>
          <rect x="235" y="94" width="85" height="24" rx="12" fill="#ffe4e6" stroke="#e11d48" stroke-width="1.5"/>
          <text x="277.5" y="106" font-size="12" font-weight="700" fill="#e11d48" text-anchor="middle" dominant-baseline="central">Hour is 2</text>
        </g>

        
        <g id="layerMinute" class="step-layer hidden">
          
          
          <path d="M 200 52 A 148 148 0 0 1 274 72" fill="none" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round"/>
          <circle cx="242" cy="52" r="12" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
          <text x="242" y="52.5" font-size="11" font-weight="700" fill="#16a34a" text-anchor="middle" dominant-baseline="central">+5</text>

          
          <path d="M 278 75 A 148 148 0 0 1 328 126" fill="none" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round"/>
          <circle cx="310" cy="94" r="12" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
          <text x="310" y="94.5" font-size="11" font-weight="700" fill="#16a34a" text-anchor="middle" dominant-baseline="central">+10</text>

          
          <path d="M 330 131 A 148 148 0 0 1 348 200" fill="none" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round"/>
          <circle cx="347" cy="162" r="12" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
          <text x="347" y="162.5" font-size="11" font-weight="700" fill="#16a34a" text-anchor="middle" dominant-baseline="central">+15</text>

          
          
          <circle cx="357.1" cy="216.5" r="4.5" fill="#16a34a"/>
          <text x="375" y="217" font-size="10" font-weight="700" fill="#16a34a" text-anchor="start" dominant-baseline="central">16</text>

          
          <circle cx="354.5" cy="232.8" r="4.5" fill="#16a34a"/>
          <text x="373" y="233" font-size="10" font-weight="700" fill="#16a34a" text-anchor="start" dominant-baseline="central">17</text>

          
          <circle cx="350.3" cy="248.8" r="5" fill="#15803d" stroke="#ffffff" stroke-width="1.5"/>
          <text x="370" y="250" font-size="11" font-weight="800" fill="#15803d" text-anchor="start" dominant-baseline="central">18</text>

          
          <rect x="235" y="275" width="96" height="24" rx="12" fill="#dcfce7" stroke="#16a34a" stroke-width="1.5"/>
          <text x="283" y="287" font-size="12" font-weight="700" fill="#15803d" text-anchor="middle" dominant-baseline="central">Minute is 18</text>
        </g>

        
        
        <circle cx="200" cy="200" r="10" fill="#94a3b8"/>

        
        
        <line x1="200" y1="200" x2="270" y2="173.1" stroke="#e11d48" stroke-width="6" stroke-linecap="round"/>

        
        
        <line x1="200" y1="200" x2="314.1" y2="237.1" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round"/>

        
        <circle cx="200" cy="200" r="4.5" fill="#ffffff"/>
      </svg>
    </div>

    
    <div class="digital-box">
      <span id="digHour" class="digit-hour">2</span>
      <span class="digit-colon">:</span>
      <span id="digMin" class="digit-min digit-dim">18</span>
    </div>
  </div>

  <script>
    // 1. Generate Ticks and Numbers dynamically for exact mathematical accuracy
    const ticksGroup = document.getElementById('dialTicks');
    const numbersGroup = document.getElementById('hourNumbers');
    const cx = 200, cy = 200, rDial = 160;

    for (let i = 0; i < 60; i++) {
      const angle = (i * 6) * Math.PI / 180;
      const isMajor = i % 5 === 0;
      const rInner = isMajor ? rDial - 14 : rDial - 7;
      const x1 = cx + rDial * Math.sin(angle);
      const y1 = cy - rDial * Math.cos(angle);
      const x2 = cx + rInner * Math.sin(angle);
      const y2 = cy - rInner * Math.cos(angle);

      const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      tick.setAttribute('x1', x1);
      tick.setAttribute('y1', y1);
      tick.setAttribute('x2', x2);
      tick.setAttribute('y2', y2);
      tick.setAttribute('stroke', isMajor ? '#475569' : '#cbd5e1');
      tick.setAttribute('stroke-width', isMajor ? '2.5' : '1.5');
      ticksGroup.appendChild(tick);
    }

    const hourValues = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
    hourValues.forEach((num, idx) => {
      const angle = (idx * 30) * Math.PI / 180;
      const rNum = 125;
      const x = cx + rNum * Math.sin(angle);
      const y = cy - rNum * Math.cos(angle);

      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', x);
      text.setAttribute('y', y);
      text.textContent = num;
      numbersGroup.appendChild(text);
    });

    // 2. Interactive Stepper State Logic
    function setStep(step) {
      const btn1 = document.getElementById('btnStep1');
      const btn2 = document.getElementById('btnStep2');
      const btnAll = document.getElementById('btnAll');
      const layerHour = document.getElementById('layerHour');
      const layerMin = document.getElementById('layerMinute');
      const digH = document.getElementById('digHour');
      const digM = document.getElementById('digMin');

      [btn1, btn2, btnAll].forEach(b => b.classList.remove('active'));

      if (step === 1) {
        btn1.classList.add('active');
        layerHour.setAttribute('class', 'step-layer visible');
        layerMin.setAttribute('class', 'step-layer hidden');
        digH.classList.remove('digit-dim');
        digM.classList.add('digit-dim');
      } else if (step === 2) {
        btn2.classList.add('active');
        layerHour.setAttribute('class', 'step-layer hidden');
        layerMin.setAttribute('class', 'step-layer visible');
        digH.classList.add('digit-dim');
        digM.classList.remove('digit-dim');
      } else {
        btnAll.classList.add('active');
        layerHour.setAttribute('class', 'step-layer visible');
        layerMin.setAttribute('class', 'step-layer visible');
        digH.classList.remove('digit-dim');
        digM.classList.remove('digit-dim');
      }
    }
  </script>
</body>
</html>

Reading Clocks to the Nearest Minute in 12-Hour Time

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }

    .main-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
      max-width: 580px;
      flex-wrap: wrap;
    }

    .clock-wrapper {
      width: 250px;
      height: 250px;
      position: relative;
      flex-shrink: 0;
    }

    .clock-svg {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.08));
    }

    .info-panel {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-width: 240px;
      max-width: 290px;
    }

    .digital-clock {
      background: #0f172a;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 10px 16px;
      border-radius: 12px;
      text-align: center;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 2px;
    }

    .digital-clock .hour-part { color: #f43f5e; }
    .digital-clock .colon { color: #94a3b8; }
    .digital-clock .min-part { color: #38bdf8; }

    .status-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 13.5px;
      line-height: 1.35;
    }

    .status-card.correct {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      color: #166534;
    }

    .status-card.mistake {
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
      color: #991b1b;
    }

    .icon-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .correct .icon-badge {
      background: #22c55e;
      color: #ffffff;
    }

    .mistake .icon-badge {
      background: #ef4444;
      color: #ffffff;
    }

    .card-title {
      font-weight: 700;
      display: block;
      margin-bottom: 2px;
    }

    .card-desc {
      font-size: 12px;
      font-weight: 500;
      opacity: 0.9;
    }

    .guide-chip {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12.5px;
      color: #334155;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    @media (max-width: 530px) {
      .main-container {
        flex-direction: column;
        gap: 16px;
      }
      .clock-wrapper {
        width: 220px;
        height: 220px;
      }
      .info-panel {
        max-width: 100%;
        width: 100%;
      }
    }
  </style>
</head>
<body>

<div class="main-container">
  
  <div class="clock-wrapper">
    <svg class="clock-svg" viewBox="0 0 260 260">
      <defs>
        
        <line id="min-tick" x1="130" y1="14" x2="130" y2="19" stroke="#cbd5e1" stroke-width="1.2" stroke-linecap="round"/>
        <line id="hour-tick" x1="130" y1="13" x2="130" y2="22" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
      </defs>

      
      <circle cx="130" cy="130" r="124" fill="#ffffff" stroke="#e2e8f0" stroke-width="3"/>

      
      
      
      
      
      <path d="M 130 130 L 73.0 228.7 A 114 114 0 0 1 31.3 187.0 Z" 
            fill="#ffe4e6" 
            stroke="#f43f5e" 
            stroke-width="1.5" 
            stroke-dasharray="3,3" 
            opacity="0.85"/>

      
      
      
      
      <path d="M 16.0 130.0 A 114 114 0 0 1 18.5 106.3" 
            fill="none" 
            stroke="#0284c7" 
            stroke-width="4.5" 
            stroke-linecap="round"/>

      
      <g>
        
        <use href="#min-tick" transform="rotate(6 130 130)" />
        <use href="#min-tick" transform="rotate(12 130 130)" />
        <use href="#min-tick" transform="rotate(18 130 130)" />
        <use href="#min-tick" transform="rotate(24 130 130)" />
        <use href="#min-tick" transform="rotate(36 130 130)" />
        <use href="#min-tick" transform="rotate(42 130 130)" />
        <use href="#min-tick" transform="rotate(48 130 130)" />
        <use href="#min-tick" transform="rotate(54 130 130)" />
        <use href="#min-tick" transform="rotate(66 130 130)" />
        <use href="#min-tick" transform="rotate(72 130 130)" />
        <use href="#min-tick" transform="rotate(78 130 130)" />
        <use href="#min-tick" transform="rotate(84 130 130)" />
        <use href="#min-tick" transform="rotate(96 130 130)" />
        <use href="#min-tick" transform="rotate(102 130 130)" />
        <use href="#min-tick" transform="rotate(108 130 130)" />
        <use href="#min-tick" transform="rotate(114 130 130)" />
        <use href="#min-tick" transform="rotate(126 130 130)" />
        <use href="#min-tick" transform="rotate(132 130 130)" />
        <use href="#min-tick" transform="rotate(138 130 130)" />
        <use href="#min-tick" transform="rotate(144 130 130)" />
        <use href="#min-tick" transform="rotate(156 130 130)" />
        <use href="#min-tick" transform="rotate(162 130 130)" />
        <use href="#min-tick" transform="rotate(168 130 130)" />
        <use href="#min-tick" transform="rotate(174 130 130)" />
        <use href="#min-tick" transform="rotate(186 130 130)" />
        <use href="#min-tick" transform="rotate(192 130 130)" />
        <use href="#min-tick" transform="rotate(198 130 130)" />
        <use href="#min-tick" transform="rotate(204 130 130)" />
        <use href="#min-tick" transform="rotate(216 130 130)" />
        <use href="#min-tick" transform="rotate(222 130 130)" />
        <use href="#min-tick" transform="rotate(228 130 130)" />
        <use href="#min-tick" transform="rotate(234 130 130)" />
        <use href="#min-tick" transform="rotate(246 130 130)" />
        <use href="#min-tick" transform="rotate(252 130 130)" />
        <use href="#min-tick" transform="rotate(258 130 130)" />
        <use href="#min-tick" transform="rotate(264 130 130)" />
        
        
        <line x1="130" y1="13" x2="130" y2="20" stroke="#0284c7" stroke-width="2" stroke-linecap="round" transform="rotate(276 130 130)" />
        <line x1="130" y1="13" x2="130" y2="21" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" transform="rotate(282 130 130)" />

        <use href="#min-tick" transform="rotate(288 130 130)" />
        <use href="#min-tick" transform="rotate(294 130 130)" />
        <use href="#min-tick" transform="rotate(306 130 130)" />
        <use href="#min-tick" transform="rotate(312 130 130)" />
        <use href="#min-tick" transform="rotate(318 130 130)" />
        <use href="#min-tick" transform="rotate(324 130 130)" />
        <use href="#min-tick" transform="rotate(336 130 130)" />
        <use href="#min-tick" transform="rotate(342 130 130)" />
        <use href="#min-tick" transform="rotate(348 130 130)" />
        <use href="#min-tick" transform="rotate(354 130 130)" />

        
        <use href="#hour-tick" transform="rotate(0 130 130)" />
        <use href="#hour-tick" transform="rotate(30 130 130)" />
        <use href="#hour-tick" transform="rotate(60 130 130)" />
        <use href="#hour-tick" transform="rotate(90 130 130)" />
        <use href="#hour-tick" transform="rotate(120 130 130)" />
        <use href="#hour-tick" transform="rotate(150 130 130)" />
        <use href="#hour-tick" transform="rotate(180 130 130)" />
        <use href="#hour-tick" transform="rotate(210 130 130)" />
        <use href="#hour-tick" transform="rotate(240 130 130)" />
        <use href="#hour-tick" transform="rotate(270 130 130)" stroke="#0284c7" />
        <use href="#hour-tick" transform="rotate(300 130 130)" />
        <use href="#hour-tick" transform="rotate(330 130 130)" />
      </g>

      
      <text x="96" y="168" font-size="10.5" font-weight="700" fill="#e11d48" text-anchor="middle" letter-spacing="0.2">Hour 7</text>

      
      <g font-size="16" font-weight="700" text-anchor="middle" dominant-baseline="central" fill="#1e293b">
        <text x="130" y="35">12</text>
        <text x="178" y="48">1</text>
        <text x="212" y="82">2</text>
        <text x="225" y="130">3</text>
        <text x="212" y="178">4</text>
        <text x="178" y="212">5</text>
        <text x="130" y="225">6</text>
        <text x="82" y="212" fill="#e11d48">7</text>
        <text x="48" y="178">8</text>
        <text x="35" y="130" fill="#0284c7">9</text>
        <text x="48" y="82">10</text>
        <text x="82" y="48">11</text>
      </g>

      
      <line x1="130" y1="130" x2="130" y2="42" stroke="#0284c7" stroke-width="4" stroke-linecap="round" transform="rotate(282 130 130)"/>

      
      <line x1="130" y1="130" x2="130" y2="72" stroke="#e11d48" stroke-width="6.5" stroke-linecap="round" transform="rotate(233.5 130 130)"/>

      
      <circle cx="130" cy="130" r="6" fill="#0f172a"/>
      <circle cx="130" cy="130" r="2.2" fill="#ffffff"/>
    </svg>
  </div>

  
  <div class="info-panel">
    
    <div class="digital-clock">
      <span class="hour-part">7</span><span class="colon">:</span><span class="min-part">47</span>
    </div>

    
    <div class="status-card correct">
      <div class="icon-badge">✓</div>
      <div>
        <span class="card-title">Correct: 7:47</span>
        <span class="card-desc">Hour hand is still in Hour 7 zone (before 8).</span>
      </div>
    </div>

    
    <div class="status-card mistake">
      <div class="icon-badge">✕</div>
      <div>
        <span class="card-title">Common Mistake: Thinking it is 8:47!</span>
        <span class="card-desc">It looks close to 8, but it hasn't reached 8 yet.</span>
      </div>
    </div>

    
    <div class="guide-chip">
      <span>Minute hand:</span>
      <strong style="color: #0284c7;">45 + 2 ticks = 47 min</strong>
    </div>
  </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 10px;
      user-select: none;
    }

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

    .info-pill {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      padding: 4px 14px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .svg-container {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      cursor: pointer;
    }

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

    .min-btn {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 16px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

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

    .min-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.35);
    }
  </style>
</head>
<body>

<div class="main-wrap">
  <div id="infoPill" class="info-pill">
    <span>Minute:</span> <span id="currentMinLabel">0 min (12:00)</span>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 400 400" id="clockSvg" role="img" aria-label="Interactive Clock Face">
      <defs>
        <filter id="bubbleShadow" x="-30%" y="-30%" width="160%" height="160%">
          <feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.18" />
        </filter>
        <radialGradient id="clockFaceGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="100%" stop-color="#f8fafc" />
        </radialGradient>
      </defs>

      
      <circle cx="200" cy="200" r="188" fill="none" stroke="#f1f5f9" stroke-width="22" />

      
      <circle cx="200" cy="200" r="172" fill="url(#clockFaceGrad)" stroke="#cbd5e1" stroke-width="2.5" />

      
      <path d="M 200 28 A 172 172 0 0 1 286 51 L 200 200 Z" fill="#e0f2fe" opacity="0.65" />

      
      <g id="ticksGroup"></g>

      
      <g id="outerBadgesGroup"></g>
      <g id="hourNumbersGroup"></g>

      
      <polygon points="200,28 286,51 340,116 236,70" fill="#0284c7" opacity="0.12" />

      
      <g transform="translate(296, 80)" filter="url(#bubbleShadow)">
        
        <circle cx="0" cy="0" r="56" fill="#ffffff" stroke="#0284c7" stroke-width="2.5" />
        
        
        <rect x="-42" y="-45" width="84" height="15" rx="7.5" fill="#e0f2fe" />
        <text x="0" y="-34" text-anchor="middle" font-size="8.5" font-weight="800" fill="#0369a1" letter-spacing="0.4">ZOOM: 0 → 5 MIN</text>

        
        <rect x="-44" y="-22" width="88" height="38" rx="8" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />

        
        
        <g transform="translate(-33, 0)">
          <line x1="0" y1="-18" x2="0" y2="-4" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          <text x="0" y="10" text-anchor="middle" font-size="10.5" font-weight="700" fill="#0284c7">1m</text>
        </g>
        
        
        <g transform="translate(-11, 0)">
          <line x1="0" y1="-18" x2="0" y2="-4" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          <text x="0" y="10" text-anchor="middle" font-size="10.5" font-weight="700" fill="#0284c7">2m</text>
        </g>

        
        <g transform="translate(11, 0)">
          <line x1="0" y1="-18" x2="0" y2="-4" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          <text x="0" y="10" text-anchor="middle" font-size="10.5" font-weight="700" fill="#0284c7">3m</text>
        </g>

        
        <g transform="translate(33, 0)">
          <line x1="0" y1="-18" x2="0" y2="-4" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          <text x="0" y="10" text-anchor="middle" font-size="10.5" font-weight="700" fill="#0284c7">4m</text>
        </g>

        
        <text x="0" y="32" text-anchor="middle" font-size="9" font-weight="700" fill="#475569">1 tick = 1 min</text>
      </g>

      
      <line id="minuteHand" x1="200" y1="200" x2="200" y2="48" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
      <circle id="handTip" cx="200" cy="48" r="4.5" fill="#0284c7" />

      
      <line x1="200" y1="200" x2="200" y2="105" stroke="#1e2945" stroke-width="6" stroke-linecap="round" />

      
      <circle cx="200" cy="200" r="7" fill="#1e2945" />
      <circle cx="200" cy="200" r="2.5" fill="#ffffff" />
    </svg>
  </div>

  
  <div class="btn-group">
    <button class="min-btn active" data-min="0">:00</button>
    <button class="min-btn" data-min="1">:01</button>
    <button class="min-btn" data-min="2">:02</button>
    <button class="min-btn" data-min="3">:03</button>
    <button class="min-btn" data-min="4">:04</button>
    <button class="min-btn" data-min="5">:05</button>
    <button class="min-btn" data-min="15">:15</button>
    <button class="min-btn" data-min="30">:30</button>
    <button class="min-btn" data-min="45">:45</button>
  </div>
</div>

<script>
  const cx = 200, cy = 200, rTicks = 172;
  const ticksGroup = document.getElementById('ticksGroup');
  const hourNumbersGroup = document.getElementById('hourNumbersGroup');
  const outerBadgesGroup = document.getElementById('outerBadgesGroup');
  const minuteHand = document.getElementById('minuteHand');
  const handTip = document.getElementById('handTip');
  const infoPill = document.getElementById('currentMinLabel');
  const buttons = document.querySelectorAll('.min-btn');

  // Generate 60 minute ticks
  for (let i = 0; i < 60; i++) {
    const angle = (i * 6) * Math.PI / 180;
    const isFive = i % 5 === 0;
    const len = isFive ? 12 : (i <= 5 ? 8 : 6);
    const strokeWidth = isFive ? 2.5 : (i <= 5 ? 1.8 : 1.2);
    const strokeColor = isFive ? '#0f172a' : (i <= 5 ? '#0284c7' : '#94a3b8');

    const x1 = cx + (rTicks - 2) * Math.sin(angle);
    const y1 = cy - (rTicks - 2) * Math.cos(angle);
    const x2 = cx + (rTicks - 2 - len) * Math.sin(angle);
    const y2 = cy - (rTicks - 2 - len) * Math.cos(angle);

    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', x1);
    line.setAttribute('y1', y1);
    line.setAttribute('x2', x2);
    line.setAttribute('y2', y2);
    line.setAttribute('stroke', strokeColor);
    line.setAttribute('stroke-width', strokeWidth);
    line.setAttribute('stroke-linecap', 'round');
    ticksGroup.appendChild(line);
  }

  // 12 Big Hour Numbers and 5-min Outer Callouts
  for (let h = 1; h <= 12; h++) {
    const angle = (h * 30) * Math.PI / 180;

    // Hour number inside
    const rx = cx + 132 * Math.sin(angle);
    const ry = cy - 132 * Math.cos(angle) + 6;
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', rx);
    text.setAttribute('y', ry);
    text.setAttribute('text-anchor', 'middle');
    text.setAttribute('font-size', '16');
    text.setAttribute('font-weight', '700');
    text.setAttribute('fill', '#1e2945');
    text.textContent = h;
    hourNumbersGroup.appendChild(text);

    // Outer 5-minute callout badge (5, 10, 15... 60)
    const minVal = h * 5;
    const bx = cx + 188 * Math.sin(angle);
    const by = cy - 188 * Math.cos(angle) + 4;
    const badgeText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    badgeText.setAttribute('x', bx);
    badgeText.setAttribute('y', by);
    badgeText.setAttribute('text-anchor', 'middle');
    badgeText.setAttribute('font-size', '10.5');
    badgeText.setAttribute('font-weight', '700');
    badgeText.setAttribute('fill', h === 12 ? '#64748b' : '#0369a1');
    badgeText.textContent = minVal === 60 ? '60' : minVal;
    outerBadgesGroup.appendChild(badgeText);
  }

  function setMinute(m) {
    const angle = m * 6;
    const rad = angle * Math.PI / 180;
    const handLen = 152;
    const hx = cx + handLen * Math.sin(rad);
    const hy = cy - handLen * Math.cos(rad);

    minuteHand.setAttribute('x2', hx);
    minuteHand.setAttribute('y2', hy);
    handTip.setAttribute('cx', hx);
    handTip.setAttribute('cy', hy);

    const padM = m < 10 ? '0' + m : m;
    infoPill.textContent = `${m} min (12:${padM})`;

    buttons.forEach(btn => {
      if (parseInt(btn.getAttribute('data-min'), 10) === m) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const val = parseInt(btn.getAttribute('data-min'), 10);
      setMinute(val);
    });
  });

  // Tap anywhere on clock to set that minute
  document.getElementById('clockSvg').addEventListener('click', (e) => {
    const svg = document.getElementById('clockSvg');
    const pt = svg.createSVGPoint();
    pt.x = e.clientX;
    pt.y = e.clientY;
    const svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
    const dx = svgP.x - cx;
    const dy = svgP.y - cy;
    let deg = Math.atan2(dx, -dy) * 180 / Math.PI;
    if (deg < 0) deg += 360;
    const nearestMin = Math.round(deg / 6) % 60;
    setMinute(nearestMin);
  });
</script>

</body>
</html>

Reading Analog Clocks with Roman Numerals I to XII

Converting Between 12-Hour and 24-Hour Time Notation

Converting Between Days and Hours

Converting Between Hours and Minutes

Converting Between Minutes and Seconds

Solving Multi-Step Word Problems Involving Time Conversions

math

Time Measurement, Clocks, and Unit Conversions

认识24时计时法与钟面对应

普通计时法与24时计时法的互换

计算跨昼夜的经过时间

大月小月与平年闰年的规律

制作年历与季度天数统计

中国古代土圭之法与二十四节气

四季变化与地球公转周期探究

年月日的秘密与历法探秘

Finding Start Times from End Times and Durations

Calculating Elapsed Time Across Hour Boundaries

Calculating Elapsed Time Across AM and PM Transitions

Interpreting Bus, Train, and Event Schedules

Solving Multi-Step Real-World Elapsed Time Problems

Elapsed Time Intervals and Duration Problems

校园树影子与时间变化小课题

生活中的质量调查与装箱方案

度量单位发展小论文与分享

综合与实践探究小课题

Reading Time to 5 Minutes Past and To the Hour

Reading Time to the Nearest Minute on Analogue Clocks

Telling Time on Clocks with Roman Numerals from I to XII

Estimating Time to the Nearest Minute

Using a.m. and p.m., Morning, Afternoon, Noon, and Midnight

Converting Analogue Times to 12-Hour Digital Times

Understanding the 24-Hour Clock System

Converting Between 12-Hour and 24-Hour Clocks

Recording and Writing Times in 12-Hour and 24-Hour Notation

Telling Time: Analogue, Roman Numerals, and 24-Hour Clocks

Seconds, Minutes, and Hours: Relationships and Comparisons

Days in Each Month, Years, and Leap Years

Using Calendars and Rhymes to Find Days and Dates

Calculating the Duration of an Event Within an Hour

Calculating Durations Bridging Through the Hour

Finding End Times Given the Start Time and Duration

Finding Start Times Given the End Time and Duration

Comparing Durations of Tasks and Events

Solving Word Problems Involving Time and Durations

Units of Time, Calendars, and Event Durations

Odczytywanie pełnych godzin na zegarze

Odczytywanie minut na zegarze

Zegar elektroniczny – system 24-godzinny

Jednostki czasu – doba, godzina, minuta, sekunda

Obliczenia czasu – ile minęło

Kalendarz – dni, tygodnie, miesiące

Zapisywanie i odczytywanie dat

Znaki rzymskie I–XII

Czas i kalendarz

El grado sexagesimal como unidad de medida angular

Uso del transportador para medir ángulos en ambas direcciones

Construcción de ángulos con regla y transportador

Clasificación de ángulos: agudo, recto, obtuso y llano

Ángulos completos y ángulos cóncavos o reflejos

Medición y clasificación de ángulos

Ángulos complementarios y suplementarios

Ángulos adyacentes y opuestos por el vértice

Descomposición aditiva de ángulos en figuras compuestas

Ángulos en la naturaleza, el arte y la inclinación de rampas

Estimación visual de ángulos en objetos del entorno

Relaciones entre ángulos y aplicaciones

Understanding Seconds, Minutes and Hours

Relationship Between Hours and Minutes

Relationship Between Days and Hours

Estimating Duration of Events

Comparing Duration of Events

Understanding Time Units

Reading Analogue Clocks in Minute Intervals

Telling Time to Five-Minute Intervals

Telling Time to the Nearest Minute

Reading Time to the Nearest Minute on an Analogue Clock

Reading Time to the Nearest Minute on a Digital Clock

Connecting Analogue and Digital Time

Reading Times as Minutes Past the Hour

Reading Times as Minutes To the Hour

Reading Clocks to the Nearest Minute

Calculating Duration in Minutes

Calculating Duration in Hours

Converting and Calculating with Time

Time Word Problems

Using Stopwatches and Timers

Reading Simple Timetables

Estimating and Comparing Duration of Events

Solving Problems with Start and End Times

Solving Problems with Time

Diferenciación de magnitudes: longitud, masa, capacidad, tiempo y área

Unidades estandarizadas del SI frente a unidades convencionales

Unidades de longitud: metro, múltiplos y submúltiplos

Conversiones entre unidades de longitud en el sistema métrico

Unidades de masa: gramo, kilogramo, miligramo y tonelada

Unidades de capacidad: litro, mililitro y relación con el decímetro cúbico

Unidades de tiempo: horas, minutos, segundos, días y siglos

Cálculo de tiempos transcurridos y cronogramas

Sistema métrico: magnitudes, unidades y conversiones

Selección de instrumentos de medición apropiados

Estimación de medidas por aproximación sensorial

Rangos de variación y tolerancia en mediciones

Medición de temperatura: escalas y conversiones

Análisis de errores en procesos de medición

Resolución de problemas aplicados con medidas

Estimación y aplicación de medidas en contextos reales

Concepto de perímetro como longitud del contorno

Fórmulas de perímetro para cuadrados, rectángulos y polígonos regulares

Concepto de área y recubrimiento con unidades cuadradas

Área del rectángulo y del cuadrado: base por altura

Área del triángulo a partir de la mitad de un rectángulo

Área del paralelogramo y del trapecio por descomposición

Área de figuras compuestas en forma de L o irregulares

Independencia entre perímetro y área: mismo perímetro, distinta área

Efecto en el perímetro y el área al duplicar las dimensiones lineales

Perímetro y área de figuras planas

Área de la superficie exterior de cubos y prismas rectangulares

Concepto de volumen y conteo de cubos unitarios

Fórmula del volumen del prisma recto: área de la base por altura

Volumen de cuerpos compuestos por dos o más prismas

Relación entre volumen y dimensiones: efecto al escalar lados

Estimación de áreas de terrenos y volúmenes de piscinas

Problemas integrados de optimización de cajas y empapelado

Área superficial y volumen de sólidos

Magnitudes aditivas y multiplicativas en situaciones reales

La rapidez como relación entre distancia recorrida y tiempo

Unidades de rapidez: kilómetros por hora y metros por segundo

Cálculo de distancias y duraciones a rapidez constante

Variación de temperatura y escalas en situaciones climáticas

Densidad poblacional y razones de capacidad por unidad

Figuras con igual perímetro y distinta área: isoperimetría

Figuras con igual área y distinto perímetro

Maximización del área con perímetro fijo en cercados

Minimización del perímetro con área fija en diseños

Resolución de desafíos integrados de magnitudes y geometría

Relaciones entre magnitudes, rapidez y geometría métrica

Concepto de igualdad como equilibrio en la balanza

Construcción de igualdades numéricas con operaciones combinadas

Resolución de ecuaciones con incógnitas en cuadros o letras

Construcción e interpretación de desigualdades: mayor y menor que

Resolución de desafíos de desigualdades y rangos admisibles

Relaciones de dependencia entre cantidades: variable dependiente e independiente

Dependencia temporal en fenómenos económicos: ahorro y presupuesto

Dependencia temporal en ciencias naturales: crecimiento de plantas y temperatura

OGM.4.MD.1

Aligned learning resources

Related diagrams