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

If you watch a show for **30 minutes**, did you know you also watched it for **0.5 hours**?

Time can be written in regular minutes, or as a **decimal number** with a dot.

How does a full circle of time work on a clock?

One full turn around the clock takes **60 minutes**. We call one full turn **1.0 hour**.

<!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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    .visual-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .clock-box {
      width: 180px;
      height: 180px;
      position: relative;
      flex-shrink: 0;
    }

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

    .stats-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      min-width: 130px;
    }

    .stat-card {
      background: #f8f9fa;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .stat-card.highlight {
      background: #f0f9ff;
      border-color: #22b7ff;
    }

    .stat-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
    }

    .stat-val {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }

    .stat-card.highlight .stat-val {
      color: #0284c7;
    }

    .controls-panel {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    .slider-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    input[type="range"] {
      flex: 1;
      height: 8px;
      border-radius: 4px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #22b7ff;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #22b7ff;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    .btn-group {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
    }

    .preset-btn {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .preset-btn span {
      font-size: 11px;
      color: #6b7280;
      font-weight: normal;
    }

    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .preset-btn.active span {
      color: #e0f2fe;
    }

    .calc-row {
      font-size: 13px;
      color: #6b7280;
      font-weight: 600;
      background: #f8f9fa;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px dashed #cbd5e1;
    }

    .calc-row b {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    <div class="visual-row">
      <div class="clock-box">
        <svg viewBox="0 0 200 200">
          
          <circle cx="100" cy="100" r="90" fill="#f8fafc" stroke="#cbd5e1" stroke-width="3" />
          
          
          <path id="sector" fill="rgba(34, 183, 255, 0.28)" stroke="#22b7ff" stroke-width="1.5" />
          
          
          <g id="ticks" stroke="#94a3b8" stroke-width="2" stroke-linecap="round">
            
            <line x1="100" y1="18" x2="100" y2="26" stroke="#475569" stroke-width="3" />
            <line x1="141" y1="29" x2="137" y2="36" />
            <line x1="171" y1="59" x2="164" y2="63" />
            <line x1="182" y1="100" x2="174" y2="100" stroke="#475569" stroke-width="3" />
            <line x1="171" y1="141" x2="164" y2="137" />
            <line x1="141" y1="171" x2="137" y2="164" />
            <line x1="100" y1="182" x2="100" y2="174" stroke="#475569" stroke-width="3" />
            <line x1="59" y1="171" x2="63" y2="164" />
            <line x1="29" y1="141" x2="36" y2="137" />
            <line x1="18" y1="100" x2="26" y2="100" stroke="#475569" stroke-width="3" />
            <line x1="29" y1="59" x2="36" y2="63" />
            <line x1="59" y1="29" x2="63" y2="36" />
          </g>

          
          <line id="hand" x1="100" y1="100" x2="100" y2="24" stroke="#0284c7" stroke-width="4" stroke-linecap="round" />
          
          
          <circle cx="100" cy="100" r="5" fill="#0284c7" />
        </svg>
      </div>

      <div class="stats-col">
        <div class="stat-card">
          <span class="stat-label">Minutes</span>
          <span class="stat-val" id="val-min">15 min</span>
        </div>
        <div class="stat-card">
          <span class="stat-label">Fraction</span>
          <span class="stat-val" id="val-frac">¼ turn</span>
        </div>
        <div class="stat-card highlight">
          <span class="stat-label">Decimal Time</span>
          <span class="stat-val" id="val-dec">0.25 hr</span>
        </div>
      </div>
    </div>

    <div class="controls-panel">
      <div class="slider-wrap">
        <input type="range" id="min-slider" min="0" max="60" step="5" value="15" aria-label="Minutes">
      </div>

      <div class="btn-group">
        <button class="preset-btn active" data-min="15">¼<span>15m</span></button>
        <button class="preset-btn" data-min="30">½<span>30m</span></button>
        <button class="preset-btn" data-min="45">¾<span>45m</span></button>
        <button class="preset-btn" data-min="60">1.0<span>60m</span></button>
      </div>

      <div class="calc-row">
        <span id="calc-text">15 ÷ 60 = <b>0.25 hr</b></span>
      </div>
    </div>
  </div>

  <script>
    const slider = document.getElementById('min-slider');
    const sector = document.getElementById('sector');
    const hand = document.getElementById('hand');
    const valMin = document.getElementById('val-min');
    const valFrac = document.getElementById('val-frac');
    const valDec = document.getElementById('val-dec');
    const calcText = document.getElementById('calc-text');
    const buttons = document.querySelectorAll('.preset-btn');

    function gcd(a, b) {
      return b === 0 ? a : gcd(b, a % b);
    }

    function formatFraction(mins) {
      if (mins === 0) return '0 turn';
      if (mins === 60) return '1 full turn';
      const divisor = gcd(mins, 60);
      const num = mins / divisor;
      const den = 60 / divisor;
      if (num === 1 && den === 4) return '¼ turn';
      if (num === 1 && den === 2) return '½ turn';
      if (num === 3 && den === 4) return '¾ turn';
      if (num === 1 && den === 3) return '⅓ turn';
      if (num === 2 && den === 3) return '⅔ turn';
      return `${num}/${den} turn`;
    }

    function update(mins) {
      mins = parseInt(mins, 10);
      slider.value = mins;

      // Clock Math
      const deg = (mins / 60) * 360;
      const rad = (deg - 90) * (Math.PI / 180);
      const cx = 100, cy = 100, r = 80;

      // Hand end coordinates
      const hx = cx + r * Math.cos(rad);
      const hy = cy + r * Math.sin(rad);

      hand.setAttribute('x2', hx);
      hand.setAttribute('y2', hy);

      // SVG Sector Path
      if (mins === 0) {
        sector.setAttribute('d', '');
      } else if (mins === 60) {
        sector.setAttribute('d', `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - 0.01} ${cy - r} Z`);
      } else {
        const largeArc = deg > 180 ? 1 : 0;
        sector.setAttribute('d', `M ${cx} ${cy} L ${cx} ${cy - r} A ${r} ${r} 0 ${largeArc} 1 ${hx} ${hy} Z`);
      }

      // Display values
      const decimalVal = (mins / 60).toFixed(2).replace(/\.?0+$/, '');
      const displayDec = mins === 0 ? '0 hr' : `${decimalVal} hr`;

      valMin.textContent = `${mins} min`;
      valFrac.textContent = formatFraction(mins);
      valDec.textContent = displayDec;
      calcText.innerHTML = `${mins} ÷ 60 = <b>${displayDec}</b>`;

      // Update button active state
      buttons.forEach(btn => {
        const btnMin = parseInt(btn.getAttribute('data-min'), 10);
        if (btnMin === mins) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    slider.addEventListener('input', (e) => {
      update(e.target.value);
    });

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const m = btn.getAttribute('data-min');
        update(m);
      });
    });

    // Initial setup
    update(15);
  </script>
</body>
</html>

What happens if the big hand only goes halfway around?

Half of 60 minutes is **30 minutes**. Since half of 1 whole is 0.5, 30 minutes equals **0.5 hours**.

<!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>Hours, Minutes and Decimals</title>
<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;
    min-height: 100vh;
    padding: 12px;
  }
  .app-container {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .preset-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .preset-btn {
    flex: 1;
    min-width: 68px;
    padding: 8px 6px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .preset-btn.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #b45309;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15);
  }
  .main-display {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    gap: 12px;
  }
  .clock-box {
    width: 170px;
    height: 170px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .cards-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .val-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .val-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
  }
  .val-num {
    font-size: 18px;
    font-weight: 700;
    color: #1e2945;
  }
  .accent {
    color: #d97706;
  }
  .slider-box {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
  }
  input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
  }
  .frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    margin: 0 2px;
  }
  .frac-top {
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 1px;
  }
  .frac-bot {
    padding-top: 1px;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="preset-bar">
    <button class="preset-btn" onclick="setTime(15)">15 min<br><span style="font-size:11px;font-weight:normal">¼ hr</span></button>
    <button class="preset-btn active" onclick="setTime(30)">30 min<br><span style="font-size:11px;font-weight:normal">½ hr</span></button>
    <button class="preset-btn" onclick="setTime(45)">45 min<br><span style="font-size:11px;font-weight:normal">¾ hr</span></button>
    <button class="preset-btn" onclick="setTime(60)">60 min<br><span style="font-size:11px;font-weight:normal">1 hr</span></button>
  </div>

  <div class="main-display">
    <div class="clock-box">
      <svg viewBox="0 0 160 160">
        
        <circle cx="80" cy="80" r="68" fill="#ffffff" stroke="#cbd5e1" stroke-width="3" />
        
        
        <line x1="80" y1="16" x2="80" y2="24" stroke="#94a3b8" stroke-width="2" />
        <line x1="144" y1="80" x2="136" y2="80" stroke="#94a3b8" stroke-width="2" />
        <line x1="80" y1="144" x2="80" y2="136" stroke="#94a3b8" stroke-width="2" />
        <line x1="16" y1="80" x2="24" y2="80" stroke="#94a3b8" stroke-width="2" />
        
        
        <path id="sector" fill="rgba(245, 158, 11, 0.3)" stroke="#f59e0b" stroke-width="2" />

        
        <line id="hand" x1="80" y1="80" x2="80" y2="22" stroke="#d97706" stroke-width="3" stroke-linecap="round" />
        <circle cx="80" cy="80" r="5" fill="#d97706" />

        
        <text x="80" y="32" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">0 / 60</text>
        <text x="130" y="83" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">15</text>
        <text x="80" y="132" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">30</text>
        <text x="30" y="83" text-anchor="middle" font-size="10" font-weight="700" fill="#64748b">45</text>
      </svg>
    </div>

    <div class="cards-box">
      <div class="val-card">
        <span class="val-label">Minutes</span>
        <span class="val-num" id="disp-min">30 min</span>
      </div>
      <div class="val-card">
        <span class="val-label">Fraction</span>
        <span class="val-num" id="disp-frac">
          <span class="frac"><span class="frac-top">1</span><span class="frac-bot">2</span></span> hr
        </span>
      </div>
      <div class="val-card">
        <span class="val-label">Decimal</span>
        <span class="val-num accent" id="disp-dec">0.5 hr</span>
      </div>
    </div>
  </div>

  <div class="slider-box">
    <input type="range" id="timeSlider" min="0" max="60" step="5" value="30" oninput="onSlide(this.value)">
    <div class="slider-labels">
      <span>0m (0.0)</span>
      <span>15m (0.25)</span>
      <span>30m (0.5)</span>
      <span>45m (0.75)</span>
      <span>60m (1.0)</span>
    </div>
  </div>
</div>

<script>
  function gcd(a, b) {
    return b === 0 ? a : gcd(b, a % b);
  }

  function formatFraction(m) {
    if (m === 0) return '0 hr';
    if (m === 60) return '1 hr';
    const d = gcd(m, 60);
    const top = m / d;
    const bot = 60 / d;
    return `<span class="frac"><span class="frac-top">${top}</span><span class="frac-bot">${bot}</span></span> hr`;
  }

  function updateVisuals(minutes) {
    const r = 68;
    const cx = 80;
    const cy = 80;
    const angleDeg = (minutes / 60) * 360;
    const angleRad = (angleDeg - 90) * (Math.PI / 180);

    const x = cx + r * Math.cos(angleRad);
    const y = cy + r * Math.sin(angleRad);

    const hand = document.getElementById('hand');
    const hx = cx + (r - 12) * Math.cos(angleRad);
    const hy = cy + (r - 12) * Math.sin(angleRad);
    hand.setAttribute('x2', hx);
    hand.setAttribute('y2', hy);

    const sector = document.getElementById('sector');
    if (minutes === 0) {
      sector.setAttribute('d', '');
    } else if (minutes === 60) {
      sector.setAttribute('d', `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - 0.01} ${cy - r} Z`);
    } else {
      const largeArc = angleDeg > 180 ? 1 : 0;
      sector.setAttribute('d', `M ${cx} ${cy} L ${cx} ${cy - r} A ${r} ${r} 0 ${largeArc} 1 ${x} ${y} Z`);
    }

    document.getElementById('disp-min').textContent = `${minutes} min`;
    document.getElementById('disp-frac').innerHTML = formatFraction(minutes);
    const decVal = (minutes / 60);
    const decStr = Number.isInteger(decVal) ? decVal.toFixed(1) : parseFloat(decVal.toFixed(2)).toString();
    document.getElementById('disp-dec').textContent = `${decStr} hr`;

    const btns = document.querySelectorAll('.preset-btn');
    btns.forEach(b => {
      const match = b.getAttribute('onclick').includes(`(${minutes})`);
      b.classList.toggle('active', match);
    });
  }

  function setTime(m) {
    document.getElementById('timeSlider').value = m;
    updateVisuals(m);
  }

  function onSlide(v) {
    updateVisuals(parseInt(v, 10));
  }

  updateVisuals(30);
</script>
</body>
</html>

What if we slice the clock into four equal pieces?

One slice of time is **15 minutes**, which is **0.25 hours**. Three slices make **45 minutes**, which is **0.75 hours**.

<!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>Time to Decimals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

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

    /* Selector tabs */
    .slice-tabs {
      display: flex;
      width: 100%;
      background: #ffffff;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      gap: 4px;
    }

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

    .tab-btn.active {
      background: #3b82f6;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(59,130,246,0.3);
    }

    /* Diagram Center Stage */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 220px;
      height: 220px;
    }

    .clock-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .quadrant {
      cursor: pointer;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }

    /* Big Equivalence Cards */
    .conversion-card {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      background: #ffffff;
      padding: 14px 12px;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .eq-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .eq-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #9ca3af;
    }

    .eq-value {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      min-width: 60px;
      text-align: center;
    }

    .eq-val-accent {
      color: #2563eb;
    }

    .arrow {
      font-size: 16px;
      color: #9ca3af;
      font-weight: 600;
    }

    /* Clock tick marks & numbers */
    .tick-label {
      font-size: 10px;
      font-weight: 600;
      fill: #9ca3af;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="slice-tabs" role="tablist">
      <button class="tab-btn active" onclick="setStep(1)">15m</button>
      <button class="tab-btn" onclick="setStep(2)">30m</button>
      <button class="tab-btn" onclick="setStep(3)">45m</button>
      <button class="tab-btn" onclick="setStep(4)">60m</button>
    </div>

    
    <div class="stage">
      <svg class="clock-svg" viewBox="0 0 200 200">
        
        <circle cx="100" cy="100" r="90" fill="#ffffff" stroke="#e5e7eb" stroke-width="3" />

        
        
        <path id="q1" class="quadrant" d="M 100 100 L 100 10 A 90 90 0 0 1 190 100 Z" fill="#3b82f6" fill-opacity="0.9" onclick="setStep(1)" />
        
        
        <path id="q2" class="quadrant" d="M 100 100 L 190 100 A 90 90 0 0 1 100 190 Z" fill="#f1f5f9" onclick="setStep(2)" />

        
        <path id="q3" class="quadrant" d="M 100 100 L 100 190 A 90 90 0 0 1 10 100 Z" fill="#f1f5f9" onclick="setStep(3)" />

        
        <path id="q4" class="quadrant" d="M 100 100 L 10 100 A 90 90 0 0 1 100 10 Z" fill="#f1f5f9" onclick="setStep(4)" />

        
        <line x1="100" y1="10" x2="100" y2="190" stroke="#ffffff" stroke-width="2.5" />
        <line x1="10" y1="100" x2="190" y2="100" stroke="#ffffff" stroke-width="2.5" />

        
        <circle cx="100" cy="100" r="6" fill="#1e2945" />

        
        <text x="100" y="24" class="tick-label">0m / 60m</text>
        <text x="175" y="100" class="tick-label">15m</text>
        <text x="100" y="178" class="tick-label">30m</text>
        <text x="25" y="100" class="tick-label">45m</text>
      </svg>
    </div>

    
    <div class="conversion-card">
      <div class="eq-col">
        <span class="eq-label">Minutes</span>
        <span id="val-min" class="eq-value">15 min</span>
      </div>

      <span class="arrow">=</span>

      <div class="eq-col">
        <span class="eq-label">Fraction</span>
        <span id="val-frac" class="eq-value">¼ hr</span>
      </div>

      <span class="arrow">=</span>

      <div class="eq-col">
        <span class="eq-label">Decimal</span>
        <span id="val-dec" class="eq-value eq-val-accent">0.25 hr</span>
      </div>
    </div>
  </div>

  <script>
    const data = {
      1: { min: '15 min', frac: '¼ hr', dec: '0.25 hr' },
      2: { min: '30 min', frac: '½ hr', dec: '0.50 hr' },
      3: { min: '45 min', frac: '¾ hr', dec: '0.75 hr' },
      4: { min: '60 min', frac: '1 hr',  dec: '1.00 hr' }
    };

    const colors = ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b'];

    function setStep(step) {
      // Update Buttons
      const btns = document.querySelectorAll('.tab-btn');
      btns.forEach((btn, idx) => {
        if (idx + 1 === step) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Update Quadrant Colors
      for (let i = 1; i <= 4; i++) {
        const q = document.getElementById('q' + i);
        if (i <= step) {
          q.setAttribute('fill', colors[step - 1]);
          q.setAttribute('fill-opacity', '0.9');
        } else {
          q.setAttribute('fill', '#f1f5f9');
          q.setAttribute('fill-opacity', '1');
        }
      }

      // Update Text Displays
      document.getElementById('val-min').textContent = data[step].min;
      document.getElementById('val-frac').textContent = data[step].frac;
      document.getElementById('val-dec').textContent = data[step].dec;
    }
  </script>
</body>
</html>

What happens when you have hours AND extra minutes together?

If a trip takes 2 hours and 30 minutes, keep the 2 in front and turn the 30 minutes into **.5**.

So, 2 hours and 30 minutes is written as **2.5 hours**.

A common mistake is thinking 30 minutes means 0.3 hours. Remember: 30 minutes is half a clock, so it is always **0.5**!

<!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>Converting Minutes to Decimal Time</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100%;
  }

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

  .presets {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }

  .preset-btn {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
  }

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

  .content-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  .clock-box {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
  }

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

  .clock-face {
    fill: #f8fafc;
    stroke: #cbd5e1;
    stroke-width: 3;
  }

  .clock-sector {
    fill: rgba(2, 132, 199, 0.25);
    stroke: #0284c7;
    stroke-width: 2;
    transition: d 0.3s ease;
  }

  .clock-hand {
    stroke: #0f172a;
    stroke-width: 3;
    stroke-linecap: round;
    transition: transform 0.3s ease;
    transform-origin: 65px 65px;
  }

  .clock-center {
    fill: #0f172a;
  }

  .math-flow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
  }

  .fraction {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    line-height: 1.1;
  }

  .fraction .top {
    border-bottom: 1.5px solid #1e2945;
    padding: 0 3px;
  }

  .badge-correct {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
  }

  .badge-wrong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: line-through;
  }

  @media (max-width: 400px) {
    .content-grid {
      flex-direction: column;
      gap: 14px;
      padding: 12px;
    }
    .clock-box {
      width: 110px;
      height: 110px;
    }
  }
</style>
</head>
<body>

<div class="main">
  <div class="presets">
    <button class="preset-btn" onclick="setTime(15)">15 min</button>
    <button class="preset-btn active" onclick="setTime(30)">30 min</button>
    <button class="preset-btn" onclick="setTime(45)">45 min</button>
    <button class="preset-btn" onclick="setTime(60)">60 min</button>
  </div>

  <div class="content-grid">
    <div class="clock-box">
      <svg class="clock" viewBox="0 0 130 130">
        <circle class="clock-face" cx="65" cy="65" r="58" />
        <path id="sector" class="clock-sector" d="" />
        <circle class="clock-center" cx="65" cy="65" r="4" />
        <line id="hand" class="clock-hand" x1="65" y1="65" x2="115" y2="65" />
      </svg>
    </div>

    <div class="math-flow">
      <div class="step-row">
        <div class="fraction">
          <span class="top" id="numMins">30</span>
          <span>60</span>
        </div>
        <span>=</span>
        <div class="fraction">
          <span class="top" id="fracNum">1</span>
          <span id="fracDen">2</span>
        </div>
        <span>hr</span>
      </div>

      <div class="step-row">
        <div class="badge-correct" id="correctBadge">0.5 hr ✓</div>
        <div class="badge-wrong" id="wrongBadge">0.3 hr</div>
      </div>
    </div>
  </div>
</div>

<script>
  const data = {
    15: { fracN: 1, fracD: 4, dec: "0.25 hr", wrong: "0.15 hr" },
    30: { fracN: 1, fracD: 2, dec: "0.5 hr",  wrong: "0.3 hr" },
    45: { fracN: 3, fracD: 4, dec: "0.75 hr", wrong: "0.45 hr" },
    60: { fracN: 1, fracD: 1, dec: "1.0 hr",  wrong: "0.60 hr" }
  };

  function getSectorPath(cx, cy, r, mins) {
    if (mins >= 60) {
      return `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - 0.01} ${cy - r} Z`;
    }
    const angle = (mins / 60) * 2 * Math.PI;
    const x = cx + r * Math.cos(angle);
    const y = cy + r * Math.sin(angle);
    const largeArc = mins > 30 ? 1 : 0;
    return `M ${cx} ${cy} L ${cx + r} ${cy} A ${r} ${r} 0 ${largeArc} 1 ${x} ${y} Z`;
  }

  function setTime(mins) {
    document.querySelectorAll('.preset-btn').forEach(btn => {
      btn.classList.toggle('active', btn.textContent.trim() === `${mins} min`);
    });

    const info = data[mins];
    document.getElementById('numMins').textContent = mins;
    document.getElementById('fracNum').textContent = info.fracN;
    document.getElementById('fracDen').textContent = info.fracD;
    document.getElementById('correctBadge').textContent = `${info.dec} ✓`;
    document.getElementById('wrongBadge').textContent = info.wrong;

    document.getElementById('sector').setAttribute('d', getSectorPath(65, 65, 58, mins));
    document.getElementById('hand').style.transform = `rotate(${(mins / 60) * 360}deg)`;
  }

  setTime(30);
</script>

</body>
</html>

How do you calculate decimal time for any number of minutes?

To convert time from hours and minutes into **Decimal Hours**, keep the whole hours as the integer part and divide the minutes by $60$:

$$\text{Decimal Hours} = \text{Hours} + \frac{\text{Minutes}}{60}$$

For example, 1 hour and 15 minutes becomes $1 + \frac{15}{60} = 1 + 0.25 = \mathbf{1.25\text{ hours}}$.

How do you switch decimal hours back into normal minutes?

To convert decimal hours into hours and minutes, keep the integer part as whole hours and multiply the **Decimal Part** by $60$:

$$\text{Minutes} = \text{Decimal Part} \times 60$$

For example, in $2.75$ hours, keep the $2$ whole hours and multiply $0.75 \times 60 = \mathbf{45\text{ minutes}}$.

How do you convert any amount of minutes into a decimal?

To find **Decimal Hours**, keep the whole hours as the integer part and divide the minutes by $60$: $\text{Decimal Hours} = \text{Hours} + \frac{\text{Minutes}}{60}$.

For example, for 1 hour and 12 minutes, divide $12 \div 60 = 0.2$ to get **1.2 Decimal Hours**.

How do you turn a decimal back into hours and minutes?

To convert into hours and minutes, keep the integer part as whole hours and multiply the **Decimal Part** by $60$: $\text{Minutes} = \text{Decimal Part} \times 60$.

For example, in 3.25 hours, multiply the decimal part $0.25 \times 60 = 15$ to get **3 hours and 15 minutes**.

Next time you play outside for 1 hour and 30 minutes, see if you can tell a friend you played for **1.5 hours**!

math

Converting Between Hours, Minutes, and Decimal Time. Convert time expressed in hours and minutes to decimal hours and vice versa.

Third Level Maths and Numeracy: Distance, Speed and Time

Speed, Distance, Time Practice Questions and Video Tutorials

Convert Between Time Units and Calculate Speed, Distance, and Time

Curriculum Alignment Note: While the prompt mentions 'Early Level (P1)', the standard 'MNU 3-10a' and the topic of 'Converting Between Hours, Minutes, and Decimal Time for Speed Calculations' belong to Third Level (Broad General Education, S1–S3 / Grade 7–9 equivalent) in the Scottish Curriculum for Excellence. Pedagogical best practice for this standard involves: (1) establishing conceptual base-60 vs. base-10 links using visual clock/bar models before introducing the $\div 60$ and $\times 60$ rules, (2) cementing non-calculator benchmarks ($15, 30, 45, 6, 12, 20\text{ minutes}$), and (3) reinforcing that compound formulas ($D=S \times T$) require uniform metric decimal units.

Converting Between Hours, Minutes, and Decimal Time

One Whole Hour

Cutting Time in Half

The Four Pizza Slices