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 leave your house on a scooter at 12 miles per hour, and your friend leaves 15 minutes later on a bike at 18 miles per hour, exactly when will they catch up to you?

You can predict the exact second they meet by turning motion into a single linear equation.

Every motion problem is built on one simple rule: **distance equals rate multiplied by time**, written algebraically as $d = r \cdot t$.

A **rate** is how fast distance changes per unit of time—like miles per hour (mph)—so traveling at $60\text{ mph}$ for $2\text{ hours}$ yields $60 \times 2 = 120\text{ miles}$.

<!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">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 16px 12px;
      gap: 12px;
    }

    .eq-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      font-size: 1.15rem;
      min-height: 52px;
    }

    .track-container {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px 16px 14px;
      position: relative;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .track {
      position: relative;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      margin: 28px 18px 24px 18px;
    }

    .track-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #22b7ff;
      border-radius: 3px;
      width: 0%;
      transition: width 0.4s ease;
    }

    .marker {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      transition: background 0.3s;
    }

    .marker.active {
      background: #22b7ff;
    }

    .marker-label {
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      color: #64748b;
      white-space: nowrap;
      font-weight: 500;
    }

    .runner {
      position: absolute;
      top: -24px;
      left: 0%;
      transform: translateX(-50%);
      font-size: 24px;
      transition: left 0.4s ease;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
      pointer-events: none;
    }

    .controls-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 520px;
    }

    .ctrl-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .ctrl-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .ctrl-val {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .btn-group {
      display: flex;
      gap: 4px;
    }

    .btn-opt {
      flex: 1;
      padding: 6px 0;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      text-align: center;
      user-select: none;
    }

    .btn-opt.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }

    .val-d { color: #0284c7; font-weight: 700; }
    .val-r { color: #d97706; font-weight: 700; }
    .val-t { color: #16a34a; font-weight: 700; }
  </style>
</head>
<body>

  <div class="eq-panel" id="math-display"></div>

  <div class="track-container">
    <div class="track">
      <div class="track-fill" id="track-fill"></div>
      <div class="marker" style="left: 0%;"><span class="marker-label">0 mi</span></div>
      <div class="marker" style="left: 25%;"><span class="marker-label">60</span></div>
      <div class="marker" style="left: 50%;"><span class="marker-label">120</span></div>
      <div class="marker" style="left: 75%;"><span class="marker-label">180</span></div>
      <div class="marker" style="left: 100%;"><span class="marker-label">240 mi</span></div>
      <div class="runner" id="runner">🚗</div>
    </div>
  </div>

  <div class="controls-grid">
    <div class="ctrl-card">
      <div class="ctrl-header">
        <span class="val-r">Rate (r)</span>
        <span class="ctrl-val" id="val-r-text">60 mph</span>
      </div>
      <div class="btn-group">
        <button class="btn-opt" data-r="30">30</button>
        <button class="btn-opt active" data-r="60">60</button>
        <button class="btn-opt" data-r="80">80</button>
      </div>
    </div>

    <div class="ctrl-card">
      <div class="ctrl-header">
        <span class="val-t">Time (t)</span>
        <span class="ctrl-val" id="val-t-text">2 hr</span>
      </div>
      <div class="btn-group">
        <button class="btn-opt" data-t="1">1h</button>
        <button class="btn-opt active" data-t="2">2h</button>
        <button class="btn-opt" data-t="3">3h</button>
      </div>
    </div>
  </div>

  <script>
    let rate = 60;
    let time = 2;
    const maxDist = 240;

    const mathDisplay = document.getElementById('math-display');
    const runner = document.getElementById('runner');
    const trackFill = document.getElementById('track-fill');
    const valRText = document.getElementById('val-r-text');
    const valTText = document.getElementById('val-t-text');

    function update() {
      const distance = rate * time;
      const pct = Math.min(100, Math.max(0, (distance / maxDist) * 100));

      runner.style.left = pct + '%';
      trackFill.style.width = pct + '%';

      valRText.textContent = rate + ' mph';
      valTText.textContent = time + ' hr';

      const latex = `\\color{#0284c7}{\\mathbf{${distance}\\text{ mi}}} = \\color{#d97706}{\\mathbf{${rate}\\text{ mph}}} \\times \\color{#16a34a}{\\mathbf{${time}\\text{ hr}}}`;
      katex.render(latex, mathDisplay, { throwOnError: false });

      document.querySelectorAll('.marker').forEach(m => {
        const mPos = parseFloat(m.style.left);
        if (pct >= mPos - 0.5) {
          m.classList.add('active');
        } else {
          m.classList.remove('active');
        }
      });
    }

    document.querySelectorAll('[data-r]').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('[data-r]').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        rate = parseInt(btn.dataset.r, 10);
        update();
      });
    });

    document.querySelectorAll('[data-t]').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('[data-t]').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        time = parseInt(btn.dataset.t, 10);
        update();
      });
    });

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

What happens when two people start at opposite ends of a trail and move toward each other? Let's build our first model.

## Opposite Directions: Meeting in the Middle

Imagine Maya and Leo start $45\text{ miles}$ apart on a straight bike path and ride toward each other at the exact same time. Maya rides at $12\text{ mph}$ and Leo rides at $18\text{ mph}$.

<!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>Distance, Rate, Time: Moving Toward Each Other</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* Path track visual */
  .track-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 14px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e6e6e6;
  }
  .header-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .maya-color { color: #0284c7; }
  .leo-color { color: #d97706; }
  
  .total-label {
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .road-outer {
    position: relative;
    height: 48px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    border: 1px solid #cbd5e1;
  }
  .road-center-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, #94a3b8 0, #94a3b8 8px, transparent 8px, transparent 16px);
    transform: translateY(-50%);
    z-index: 1;
  }
  .bar-maya {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(2, 132, 199, 0.22);
    border-right: 3px solid #0284c7;
    transition: width 0.3s ease;
    z-index: 2;
  }
  .bar-leo {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(217, 119, 6, 0.22);
    border-left: 3px solid #d97706;
    transition: width 0.3s ease;
    z-index: 2;
  }
  
  /* Bikers */
  .rider {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    z-index: 3;
    transition: left 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    line-height: 1;
  }
  .rider-leo {
    transform: translate(-50%, -50%) scaleX(-1);
  }

  /* Distance readout badges directly under track */
  .track-readouts {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
  }

  /* Equation summary box */
  .math-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .formula-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
  }
  .pill {
    padding: 3px 8px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
  }
  .pill-maya { background: #e0f2fe; color: #0369a1; }
  .pill-leo { background: #fef3c7; color: #b45309; }
  .pill-total { background: #f1f5f9; color: #334155; }
  
  .status-text {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    min-height: 20px;
  }
  .status-text.meet {
    color: #16a34a;
  }

  /* Interactive Controls */
  .controls-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .time-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .time-slider {
    flex: 1;
    height: 8px;
    accent-color: #0284c7;
    cursor: pointer;
  }
  .time-display {
    font-weight: 700;
    font-size: 15px;
    min-width: 68px;
    text-align: right;
    color: #1e2945;
  }
  
  .btn-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .step-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 6px 4px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-align: center;
  }
  .step-btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0284c7;
  }
</style>
</head>
<body>

<div class="app-container">
  
  <div class="track-card">
    <div class="header-row">
      <span class="maya-color">Maya (12 mph →)</span>
      <span class="leo-color">(← 18 mph) Leo</span>
    </div>
    
    <div class="total-label">Total Distance: 45 miles</div>
    
    <div class="road-outer">
      <div class="road-center-line"></div>
      <div class="bar-maya" id="barMaya" style="width: 0%;"></div>
      <div class="bar-leo" id="barLeo" style="width: 0%;"></div>
      
      <div class="rider" id="riderMaya" style="left: 3%;">🚴‍♀️</div>
      <div class="rider rider-leo" id="riderLeo" style="left: 97%;">🚴</div>
    </div>
    
    <div class="track-readouts">
      <span class="maya-color" id="lblDistMaya">0.0 mi</span>
      <span class="leo-color" id="lblDistLeo">0.0 mi</span>
    </div>
  </div>

  
  <div class="math-card">
    <div class="formula-row">
      <span class="pill pill-maya" id="mathMaya">12(0) = 0 mi</span>
      <span>+</span>
      <span class="pill pill-leo" id="mathLeo">18(0) = 0 mi</span>
      <span>=</span>
      <span class="pill pill-total" id="mathSum">0 mi / 45 mi</span>
    </div>
    <div class="status-text" id="statusMsg">Start: 45 miles apart</div>
  </div>

  
  <div class="controls-card">
    <div class="time-slider-row">
      <span style="font-size: 13px; font-weight: 600; color: #6b7280;">Time (t):</span>
      <input type="range" class="time-slider" id="timeSlider" min="0" max="1.5" step="0.25" value="0">
      <span class="time-display" id="timeValue">0.0 hr</span>
    </div>
    
    <div class="btn-group">
      <button class="step-btn active" onclick="setTime(0)">0 hr</button>
      <button class="step-btn" onclick="setTime(0.5)">0.5 hr</button>
      <button class="step-btn" onclick="setTime(1.0)">1.0 hr</button>
      <button class="step-btn" onclick="setTime(1.5)">1.5 hr 🎯</button>
    </div>
  </div>
</div>

<script>
  const slider = document.getElementById('timeSlider');
  const timeVal = document.getElementById('timeValue');
  const barMaya = document.getElementById('barMaya');
  const barLeo = document.getElementById('barLeo');
  const riderMaya = document.getElementById('riderMaya');
  const riderLeo = document.getElementById('riderLeo');
  const lblDistMaya = document.getElementById('lblDistMaya');
  const lblDistLeo = document.getElementById('lblDistLeo');
  const mathMaya = document.getElementById('mathMaya');
  const mathLeo = document.getElementById('mathLeo');
  const mathSum = document.getElementById('mathSum');
  const statusMsg = document.getElementById('statusMsg');
  const buttons = document.querySelectorAll('.step-btn');

  const TOTAL_DIST = 45;
  const RATE_MAYA = 12;
  const RATE_LEO = 18;

  function update(t) {
    slider.value = t;
    timeVal.textContent = t.toFixed(2).replace(/\.00$/, '.0') + ' hr';
    
    const dMaya = RATE_MAYA * t;
    const dLeo = RATE_LEO * t;
    const sum = dMaya + dLeo;
    
    // Width percentages along 45-mile path
    const pctMaya = Math.min(100, (dMaya / TOTAL_DIST) * 100);
    const pctLeo = Math.min(100, (dLeo / TOTAL_DIST) * 100);
    
    barMaya.style.width = pctMaya + '%';
    barLeo.style.width = pctLeo + '%';
    
    // Clamp rider icon positions slightly so they don't clip outside container edges
    const posMaya = Math.max(3, Math.min(97, pctMaya));
    const posLeo = Math.max(3, Math.min(97, 100 - pctLeo));
    riderMaya.style.left = posMaya + '%';
    riderLeo.style.left = posLeo + '%';
    
    lblDistMaya.textContent = dMaya.toFixed(1) + ' mi';
    lblDistLeo.textContent = dLeo.toFixed(1) + ' mi';
    
    mathMaya.textContent = `12(${t}) = ${dMaya.toFixed(1)} mi`;
    mathLeo.textContent = `18(${t}) = ${dLeo.toFixed(1)} mi`;
    mathSum.textContent = `${sum.toFixed(1)} mi / 45 mi`;

    if (t >= 1.5) {
      statusMsg.className = 'status-text meet';
      statusMsg.textContent = '🎉 Meeting point: 18 mi + 27 mi = 45 mi';
    } else if (t === 0) {
      statusMsg.className = 'status-text';
      statusMsg.textContent = 'Start: 45 miles apart';
    } else {
      const remaining = (TOTAL_DIST - sum).toFixed(1);
      statusMsg.className = 'status-text';
      statusMsg.textContent = `${remaining} miles apart`;
    }

    // Highlight button matching current preset
    buttons.forEach(btn => {
      const btnT = parseFloat(btn.textContent);
      btn.classList.toggle('active', Math.abs(btnT - t) < 0.05);
    });
  }

  function setTime(val) {
    update(parseFloat(val));
  }

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

  // Initial call
  update(0);
</script>

</body>
</html>

Because they travel toward each other, their individual distances must add up to the total starting distance: $d_{\text{Maya}} + d_{\text{Leo}} = 45$.

Substituting $d = r \cdot t$ gives the linear equation $12t + 18t = 45$, which simplifies to $30t = 45$, giving $t = 1.5\text{ hours}$ (or 1 hour and 30 minutes).

What if one person gets a head start, and the other person has to chase them down?

Suppose a delivery van leaves a depot traveling at $40\text{ mph}$. Two hours later, an express courier leaves the same depot along the same route traveling at $60\text{ mph}$.

<!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>Distance, Rate, Time Catch-Up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e6e6e6;
  }

  .time-badge {
    background: #22b7ff;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    letter-spacing: 0.3px;
  }

  .stage {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    padding: 16px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
  }

  .track-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
  }

  .track-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .row-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
  }

  .label-van { color: #0284c7; }
  .label-courier { color: #d97706; }

  .track-bar {
    position: relative;
    height: 32px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: visible;
  }

  .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 8px;
    transition: width 0.35s ease;
  }

  .fill-van { background: #bae6fd; }
  .fill-courier { background: #fde68a; }

  .vehicle-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: left 0.35s ease;
    z-index: 2;
  }

  .axis {
    position: relative;
    height: 18px;
    margin-top: 2px;
    border-top: 1.5px solid #cbd5e1;
  }

  .tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11px;
    color: #64748b;
    padding-top: 2px;
    font-weight: 500;
  }

  .tick::before {
    content: "";
    position: absolute;
    top: -1.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 4px;
    background: #94a3b8;
  }

  .catch-banner {
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .catch-banner.visible {
    opacity: 1;
  }

  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1e2945;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .btn:hover {
    background: #f1f5f9;
  }

  .btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
  }

  .btn-play {
    min-width: 70px;
  }
</style>
</head>
<body>

  <div class="hud">
    <span>Depot Route</span>
    <span class="time-badge" id="timeLabel">t = 0 h</span>
  </div>

  <div class="stage">
    <div class="track-container">
      
      
      <div class="track-row">
        <div class="row-meta">
          <span class="label-van">🚐 40 mph &times; t</span>
          <span id="distVan">0 mi</span>
        </div>
        <div class="track-bar">
          <div class="progress-fill fill-van" id="fillVan" style="width: 0%;"></div>
          <div class="vehicle-marker" id="markerVan" style="left: 0%;">🚐</div>
        </div>
      </div>

      
      <div class="track-row">
        <div class="row-meta">
          <span class="label-courier">⚡ 60 mph &times; (t − 2)</span>
          <span id="distCourier">0 mi</span>
        </div>
        <div class="track-bar">
          <div class="progress-fill fill-courier" id="fillCourier" style="width: 0%;"></div>
          <div class="vehicle-marker" id="markerCourier" style="left: 0%;">⚡</div>
        </div>
      </div>

      
      <div class="axis">
        <div class="tick" style="left: 0%;">0</div>
        <div class="tick" style="left: 25%;">60</div>
        <div class="tick" style="left: 50%;">120</div>
        <div class="tick" style="left: 75%;">180</div>
        <div class="tick" style="left: 100%;">240 mi</div>
      </div>

    </div>

    
    <div class="catch-banner" id="catchBanner">
      ✦ Catch-up: 240 mi = 240 mi
    </div>
  </div>

  
  <div class="controls">
    <button class="btn btn-play" id="playBtn">▶ Play</button>
    <button class="btn time-btn active" data-t="0">0h</button>
    <button class="btn time-btn" data-t="2">2h</button>
    <button class="btn time-btn" data-t="4">4h</button>
    <button class="btn time-btn" data-t="6">6h</button>
  </div>

<script>
  const MAX_DIST = 240; // max track miles
  const times = [0, 2, 4, 6];
  let currentIndex = 0;
  let timer = null;

  const timeLabel = document.getElementById('timeLabel');
  const distVan = document.getElementById('distVan');
  const distCourier = document.getElementById('distCourier');
  const fillVan = document.getElementById('fillVan');
  const fillCourier = document.getElementById('fillCourier');
  const markerVan = document.getElementById('markerVan');
  const markerCourier = document.getElementById('markerCourier');
  const catchBanner = document.getElementById('catchBanner');
  const playBtn = document.getElementById('playBtn');
  const timeBtns = document.querySelectorAll('.time-btn');

  function updateState(t) {
    // Van calculation
    const dVan = 40 * t;
    // Courier calculation (starts at t=2)
    const dCourier = t >= 2 ? 60 * (t - 2) : 0;

    const pVan = Math.min(100, (dVan / MAX_DIST) * 100);
    const pCourier = Math.min(100, (dCourier / MAX_DIST) * 100);

    timeLabel.textContent = `t = ${t} h`;
    distVan.textContent = `${dVan} mi`;
    distCourier.textContent = t < 2 ? 'Depot' : `${dCourier} mi`;

    fillVan.style.width = `${pVan}%`;
    markerVan.style.left = `${pVan}%`;

    fillCourier.style.width = `${pCourier}%`;
    markerCourier.style.left = `${pCourier}%`;

    if (t === 6) {
      catchBanner.classList.add('visible');
    } else {
      catchBanner.classList.remove('visible');
    }

    timeBtns.forEach(btn => {
      btn.classList.toggle('active', parseFloat(btn.dataset.t) === t);
    });
  }

  function setIndex(idx) {
    currentIndex = idx;
    updateState(times[currentIndex]);
  }

  function nextStep() {
    currentIndex = (currentIndex + 1) % times.length;
    setIndex(currentIndex);
  }

  function togglePlay() {
    if (timer) {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Play';
    } else {
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(nextStep, 2200);
    }
  }

  playBtn.addEventListener('click', togglePlay);

  timeBtns.forEach((btn, idx) => {
    btn.addEventListener('click', () => {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Play';
      }
      setIndex(idx);
    });
  });

  // Initialize
  updateState(0);
</script>
</body>
</html>

At the moment of catch-up, both vehicles have traveled the exact **same distance**, so we set their distance expressions equal: $d_{\text{van}} = d_{\text{courier}}$.

If $t$ is the van's total time on the road, then the courier's time is $t - 2$ because they left 2 hours later, producing $40t = 60(t - 2)$.

Distribute and solve: $40t = 60t - 120 \implies -20t = -120 \implies t = 6\text{ hours}$ for the van (meaning the courier catches up in $6 - 2 = 4\text{ hours}$).

A common mistake is forgetting to match units before writing your equation. If a head start is given in **minutes**, you must convert it to **hours** (e.g., $15\text{ minutes} = \frac{15}{60} = 0.25\text{ hours}$) whenever rates are in miles per hour.

Whenever you tackle any motion problem, ask yourself one question first: are the distances **adding to a total**, or are the two distances **equal**?

math

Modeling with Linear Equations: Distance, Rate, and Time. Create and solve linear equations modeling distance, rate, and time scenarios.

Linear Equation Word Problems (Distance, Rate, and Time)

Distance, Rate, and Time Word Problems with Two Vehicles (Algebra 1)

Using the Distance, Rate, and Time Formula in Linear Modeling

Effective instruction for HSA.CED.A.1 with distance-rate-time models relies on shifting students from trial-and-error guessing to structured algebraic representation. Teachers should introduce a 4-phase modeling protocol: (1) Scenario Classification (Opposite Direction, Catch-Up, or Round Trip), (2) Information Organization using DRT Tables with explicit unit checks, (3) Equation Formulation using algebraic relationships ($d_1 + d_2 = D_{\text{total}}$ or $d_1 = d_2$), and (4) Contextual Verification (evaluating whether resulting values are positive, realistic, and correctly labeled with units). Connecting algebraic solutions to graphical representations (position vs. time) reinforces the conceptual meaning of slopes as speeds and intersections as meeting/overtake points.

Modeling with Linear Equations: Distance, Rate, and Time

The Core Motion Formula

Opposite Directions: Meeting in the Middle