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 clap your hands once every second, how many claps make a full minute?

It takes exactly **60 seconds** to make **1 minute**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Seconds and Minutes Conversion</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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;
      gap: 16px;
    }

    .rule-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #ffffff;
      padding: 10px 18px;
      border-radius: 24px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      font-size: 15px;
      font-weight: 600;
    }

    .badge {
      background: #e1f5fe;
      color: #0288d1;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
    }

    .rule-op {
      color: #22b7ff;
      font-weight: 800;
    }

    .main-stage {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 16px;
      padding: 20px 16px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

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

    .step-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-btn:hover:not(:disabled) {
      border-color: #22b7ff;
      color: #22b7ff;
    }

    .step-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .time-pill {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      min-width: 110px;
      text-align: center;
    }

    .blocks-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      min-height: 140px;
      justify-content: center;
    }

    .bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .bar-row.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .bar-label {
      width: 45px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-align: right;
      flex-shrink: 0;
    }

    .bar-track {
      flex: 1;
      height: 28px;
      background: #e0f2fe;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0369a1;
      font-weight: 700;
      font-size: 14px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
      border: 1px solid #bae6fd;
    }

    .total-card {
      width: 100%;
      border-top: 1px dashed #e2e8f0;
      padding-top: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-weight: 600;
    }

    .calc-text {
      color: #64748b;
      font-size: 14px;
    }

    .calc-text span {
      color: #1e2945;
      font-weight: 700;
    }

    .result-val {
      font-size: 20px;
      font-weight: 800;
      color: #0288d1;
    }

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

    .preset-btn {
      flex: 1;
      padding: 8px 0;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .preset-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="rule-bar">
    <span class="badge">1 min = 60 s</span>
    <span class="rule-op">× 60 →</span>
  </div>

  <div class="main-stage">
    <div class="stepper-row">
      <button class="step-btn" id="btnMinus" aria-label="Decrease minutes">−</button>
      <div class="time-pill" id="minuteDisplay">1 min</div>
      <button class="step-btn" id="btnPlus" aria-label="Increase minutes">+</button>
    </div>

    <div class="blocks-container" id="blocksContainer">
      
    </div>

    <div class="total-card">
      <div class="calc-text" id="calcDisplay">1 × 60 s</div>
      <div class="result-val" id="resultDisplay">= 60 s</div>
    </div>
  </div>

  <div class="presets">
    <button class="preset-btn active" data-val="1">1 min</button>
    <button class="preset-btn" data-val="2">2 min</button>
    <button class="preset-btn" data-val="3">3 min</button>
    <button class="preset-btn" data-val="4">4 min</button>
  </div>

  <script>
    let minutes = 1;
    const MAX_MINUTES = 4;
    const MIN_MINUTES = 1;

    const minuteDisplay = document.getElementById('minuteDisplay');
    const calcDisplay = document.getElementById('calcDisplay');
    const resultDisplay = document.getElementById('resultDisplay');
    const blocksContainer = document.getElementById('blocksContainer');
    const btnMinus = document.getElementById('btnMinus');
    const btnPlus = document.getElementById('btnPlus');
    const presetBtns = document.querySelectorAll('.preset-btn');

    function render() {
      // Update text
      minuteDisplay.textContent = `${minutes} min`;
      calcDisplay.innerHTML = `${minutes} × 60 s`;
      resultDisplay.textContent = `= ${minutes * 60} s`;

      // Update button states
      btnMinus.disabled = minutes <= MIN_MINUTES;
      btnPlus.disabled = minutes >= MAX_MINUTES;

      // Update presets
      presetBtns.forEach(btn => {
        const val = parseInt(btn.dataset.val, 10);
        btn.classList.toggle('active', val === minutes);
      });

      // Render blocks
      blocksContainer.innerHTML = '';
      for (let i = 1; i <= minutes; i++) {
        const row = document.createElement('div');
        row.className = 'bar-row';
        row.innerHTML = `
          <div class="bar-label">Min ${i}</div>
          <div class="bar-track">+60 s</div>
        `;
        blocksContainer.appendChild(row);
        
        // Trigger smooth fade/slide in
        requestAnimationFrame(() => {
          setTimeout(() => {
            row.classList.add('visible');
          }, (i - 1) * 40);
        });
      }
    }

    btnMinus.addEventListener('click', () => {
      if (minutes > MIN_MINUTES) {
        minutes--;
        render();
      }
    });

    btnPlus.addEventListener('click', () => {
      if (minutes < MAX_MINUTES) {
        minutes++;
        render();
      }
    });

    presetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        minutes = parseInt(btn.dataset.val, 10);
        render();
      });
    });

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

What happens if a timer shows 2 minutes? How many seconds have ticked by?

To change minutes into seconds, we **multiply by 60** because each minute has 60 seconds.

For 2 minutes, we calculate $2 \times 60 = 120$ seconds.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      min-height: 100%;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 20px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

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

    .stepper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .step-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 16px;
      font-weight: 700;
      color: #0284c7;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .step-btn:active {
      background: #f1f5f9;
    }

    .step-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .value-display {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      min-width: 90px;
      text-align: center;
    }

    .calc-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .node {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    .node-title {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .node-value {
      font-size: 22px;
      font-weight: 800;
      color: #0284c7;
      margin-top: 2px;
    }

    .arrow-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 0 4px;
    }

    .op-badge {
      background: #0284c7;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
    }

    .arrow-icon {
      font-size: 18px;
      color: #0284c7;
      line-height: 1;
    }

    .blocks-container {
      width: 100%;
      min-height: 72px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 12px;
      padding: 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .minute-block {
      background: #ffffff;
      border: 1.5px solid #38bdf8;
      border-radius: 8px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(56, 189, 248, 0.15);
      animation: popIn 0.25s ease-out;
    }

    .block-tag {
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 5px;
      border-radius: 4px;
    }

    .block-val {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }

    @keyframes popIn {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="tabMinToSec">Min → Sec</button>
    <button class="tab-btn" id="tabSecToMin">Sec → Min</button>
  </div>

  <div class="main-stage">
    <div class="stepper">
      <button class="step-btn" id="decBtn">−</button>
      <div class="value-display" id="controlVal">2 min</div>
      <button class="step-btn" id="incBtn">+</button>
    </div>

    <div class="calc-row">
      <div class="node">
        <div class="node-title" id="leftTitle">Minutes</div>
        <div class="node-value" id="leftVal">2</div>
      </div>

      <div class="arrow-box">
        <div class="op-badge" id="opBadge">× 60</div>
        <div class="arrow-icon">➔</div>
      </div>

      <div class="node">
        <div class="node-title" id="rightTitle">Seconds</div>
        <div class="node-value" id="rightVal">120</div>
      </div>
    </div>

    <div class="blocks-container" id="blocks"></div>
  </div>

  <script>
    let mode = 'minToSec'; // 'minToSec' or 'secToMin'
    let units = 2; // 1 to 5

    const tabMinToSec = document.getElementById('tabMinToSec');
    const tabSecToMin = document.getElementById('tabSecToMin');
    const decBtn = document.getElementById('decBtn');
    const incBtn = document.getElementById('incBtn');
    const controlVal = document.getElementById('controlVal');
    const leftTitle = document.getElementById('leftTitle');
    const leftVal = document.getElementById('leftVal');
    const opBadge = document.getElementById('opBadge');
    const rightTitle = document.getElementById('rightTitle');
    const rightVal = document.getElementById('rightVal');
    const blocksContainer = document.getElementById('blocks');

    function update() {
      decBtn.disabled = units <= 1;
      incBtn.disabled = units >= 5;

      const seconds = units * 60;

      if (mode === 'minToSec') {
        controlVal.textContent = units + ' min';
        leftTitle.textContent = 'Minutes';
        leftVal.textContent = units;
        opBadge.textContent = '× 60';
        rightTitle.textContent = 'Seconds';
        rightVal.textContent = seconds;
      } else {
        controlVal.textContent = seconds + ' s';
        leftTitle.textContent = 'Seconds';
        leftVal.textContent = seconds;
        opBadge.textContent = '÷ 60';
        rightTitle.textContent = 'Minutes';
        rightVal.textContent = units;
      }

      blocksContainer.innerHTML = '';
      for (let i = 1; i <= units; i++) {
        const blk = document.createElement('div');
        blk.className = 'minute-block';
        blk.innerHTML = `<span class="block-tag">1 min</span><span class="block-val">= 60 s</span>`;
        blocksContainer.appendChild(blk);
      }
    }

    tabMinToSec.addEventListener('click', () => {
      if (mode !== 'minToSec') {
        mode = 'minToSec';
        tabMinToSec.classList.add('active');
        tabSecToMin.classList.remove('active');
        update();
      }
    });

    tabSecToMin.addEventListener('click', () => {
      if (mode !== 'secToMin') {
        mode = 'secToMin';
        tabSecToMin.classList.add('active');
        tabMinToSec.classList.remove('active');
        update();
      }
    });

    decBtn.addEventListener('click', () => {
      if (units > 1) {
        units--;
        update();
      }
    });

    incBtn.addEventListener('click', () => {
      if (units < 5) {
        units++;
        update();
      }
    });

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

Now, what if we know the seconds first and want to find the minutes?

To turn seconds into minutes, we **divide by 60** to see how many groups of 60 seconds we have.

If a race lasts 180 seconds, we divide $180 \div 60 = 3$ minutes.

<!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 Seconds and Minutes</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }
    /* Rule Flow */
    .conversion-rule {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .unit-pill {
      font-weight: 700;
      font-size: 16px;
      padding: 6px 14px;
      border-radius: 8px;
      background: #f1f5f9;
      color: #1e2945;
      min-width: 80px;
      text-align: center;
    }
    .op-paths {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
      padding: 0 8px;
    }
    .op-line {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      gap: 6px;
    }
    .op-line.to-sec {
      color: #0284c7;
    }
    .op-line.to-min {
      color: #7c3aed;
    }
    .op-badge {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
    }
    .to-sec .op-badge {
      background: #e0f2fe;
    }
    .to-min .op-badge {
      background: #ede9fe;
    }

    /* Interactive Display Card */
    .display-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    /* Blocks visual */
    .blocks-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 120px;
      justify-content: center;
    }
    .block-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      animation: fadeIn 0.25s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .min-label {
      width: 70px;
      font-size: 13px;
      font-weight: 700;
      color: #7c3aed;
      text-align: right;
      flex-shrink: 0;
    }
    .bar-wrap {
      flex: 1;
      height: 26px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bar-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      background: #38bdf8;
      opacity: 0.25;
    }
    .bar-text {
      position: relative;
      font-size: 12px;
      font-weight: 700;
      color: #0369a1;
      z-index: 1;
    }

    /* Math Equation Display */
    .math-bar {
      font-size: 16px;
      min-height: 28px;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Stepper Buttons */
    .selector-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }
    .preset-btn {
      flex: 1;
      max-width: 80px;
      padding: 8px 0;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #475569;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      box-shadow: none;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="conversion-rule">
      <div class="unit-pill">Minutes</div>
      <div class="op-paths">
        <div class="op-line to-sec">
          <span class="op-badge">× 60</span>
          <span>→</span>
        </div>
        <div class="op-line to-min">
          <span>←</span>
          <span class="op-badge">÷ 60</span>
        </div>
      </div>
      <div class="unit-pill">Seconds</div>
    </div>

    
    <div class="display-card">
      <div class="blocks-container" id="blocksContainer">
        
      </div>

      <div class="math-bar" id="mathDisplay"></div>

      
      <div class="selector-bar" id="selectorBar">
        <button class="preset-btn" data-val="1">1 min</button>
        <button class="preset-btn" data-val="2">2 min</button>
        <button class="preset-btn active" data-val="3">3 min</button>
        <button class="preset-btn" data-val="4">4 min</button>
      </div>
    </div>
  </div>

  <script>
    let currentMin = 3;

    function render(val) {
      currentMin = val;

      // Update Buttons
      document.querySelectorAll('.preset-btn').forEach(btn => {
        const btnVal = parseInt(btn.dataset.val);
        btn.classList.toggle('active', btnVal === currentMin);
      });

      // Update Bars
      const container = document.getElementById('blocksContainer');
      container.innerHTML = '';
      for (let i = 1; i <= currentMin; i++) {
        const row = document.createElement('div');
        row.className = 'block-row';
        row.innerHTML = `
          <div class="min-label">Min ${i}</div>
          <div class="bar-wrap">
            <div class="bar-fill"></div>
            <div class="bar-text">60 s</div>
          </div>
        `;
        container.appendChild(row);
      }

      // Update Math
      const totalSec = currentMin * 60;
      const mathEl = document.getElementById('mathDisplay');
      if (window.katex) {
        const latex = `${currentMin} \\times 60 = ${totalSec}\\text{ s} \\quad\\Longleftrightarrow\\quad ${totalSec} \\div 60 = ${currentMin}\\text{ min}`;
        katex.render(latex, mathEl, { throwOnError: false });
      } else {
        mathEl.textContent = `${currentMin} × 60 = ${totalSec} s   |   ${totalSec} ÷ 60 = ${currentMin} min`;
      }
    }

    // Bind clicks
    document.querySelectorAll('.preset-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        render(parseInt(btn.dataset.val));
      });
    });

    // Initial render
    window.addEventListener('DOMContentLoaded', () => {
      render(3);
    });
  </script>
</body>
</html>

A common mistake is thinking that 1 minute equals 100 seconds because we often count to 100 in math.

Clocks are special — they always count in groups of **60**, not 100!

Try counting out 60 slow claps the next time you wait for one full minute to pass.

math

Converting Between Seconds and Minutes. Convert measurements between seconds and minutes using multiplication and division by 60.

Converting Units of Time: Minutes to Seconds and Hours

Convert Time Units: Hours, Minutes, and Seconds

Units of Measurement and Converting Time (CfE Second Level)

Pedagogical progression should begin with concrete timing activities (using stopwatches during STEM experiments) so students build an intuitive benchmark for 1 second versus 60 seconds. Progress to dual number lines and ratio tables before introducing purely procedural arithmetic ($\times 60$ and $\div 60$). Emphasize remainders in practical contexts to prevent students from defaulting to standard base-10 decimal representations.

Converting Between Seconds and Minutes

Minutes to Seconds

Seconds to Minutes