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

A deer leaps into the road ahead, but your car does not freeze in place the instant you see it.

Before the car even begins to slow down, your eyes have to detect the hazard, your brain has to process it, and your foot has to hit the pedal.

How do physics and human biology combine to determine the total ground covered before coming to a complete standstill?

**Stopping distance** is the total distance a vehicle travels from the exact moment a driver spots a hazard until the vehicle comes to a complete rest.

It consists of two separate phases added together: **thinking distance** and **braking distance**.

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      margin: 0;
    }

    .container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Speed Switcher */
    .controls-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

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

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

    .btn-speed {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      color: #475569;
      padding: 6px 18px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-speed:hover {
      background: #e2e8f0;
    }

    .btn-speed.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
    }

    /* Road Section */
    .road-scene {
      position: relative;
      width: 100%;
      height: 58px;
      background: #334155;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .road-markings {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      transform: translateY(-50%);
      background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 16px, transparent 16px, transparent 32px);
      opacity: 0.6;
    }

    .hazard {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      z-index: 2;
      line-height: 1;
    }

    .car {
      position: absolute;
      left: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 26px;
      z-index: 3;
      transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
      line-height: 1;
    }

    /* Visualization Tracks */
    .diagram-area {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .track-outer {
      position: relative;
      width: 100%;
      height: 38px;
      background: #f8fafc;
      border-radius: 6px;
      display: flex;
      overflow: hidden;
      border: 1px solid #cbd5e1;
    }

    .segment {
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 4px;
      padding: 0 4px;
      text-align: center;
      transition: width 0.4s ease;
      white-space: nowrap;
      overflow: hidden;
    }

    .segment-thinking {
      background: #fef3c7;
      border-right: 2px dashed #d97706;
      color: #78350f;
    }

    .segment-braking {
      background: #fee2e2;
      border-right: 2px solid #dc2626;
      color: #991b1b;
    }

    .seg-title {
      font-size: 11px;
      font-weight: 700;
    }

    .seg-value {
      font-size: 11px;
      font-weight: 800;
      background: rgba(255, 255, 255, 0.7);
      padding: 1px 5px;
      border-radius: 4px;
    }

    /* Total Bracket Bar */
    .total-container {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-top: 2px;
    }

    .total-bracket {
      height: 8px;
      border-left: 2px solid #2563eb;
      border-right: 2px solid #2563eb;
      border-bottom: 2px solid #2563eb;
      transition: width 0.4s ease;
      margin-bottom: 4px;
    }

    /* Scale Reference Line */
    .scale-bar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #cbd5e1;
      padding-top: 2px;
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
    }

    /* Formula Banner */
    .formula-banner {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .formula-title {
      font-size: 11px;
      font-weight: 700;
      color: #1e40af;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .formula-calc {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }

    .calc-total {
      color: #1d4ed8;
      font-weight: 800;
    }

    .calc-thinking {
      color: #b45309;
      background: #fef3c7;
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid #fde68a;
    }

    .calc-braking {
      color: #b91c1c;
      background: #fee2e2;
      padding: 1px 6px;
      border-radius: 4px;
      border: 1px solid #fecaca;
    }

    /* Explanatory Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .info-card {
      padding: 8px 10px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .info-card-thinking {
      background: #fffbeb;
      border: 1px solid #fde68a;
    }

    .info-card-braking {
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4px;
    }

    .card-title {
      font-size: 12px;
      font-weight: 700;
    }

    .info-card-thinking .card-title {
      color: #78350f;
    }

    .info-card-braking .card-title {
      color: #991b1b;
    }

    .card-badge {
      font-size: 11px;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
    }

    .info-card-thinking .card-badge {
      background: #fef3c7;
      color: #78350f;
      border: 1px solid #fcd34d;
    }

    .info-card-braking .card-badge {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }

    .card-desc {
      font-size: 11px;
      line-height: 1.35;
      color: #334155;
      font-weight: 500;
    }

    @media (max-width: 400px) {
      .seg-title {
        display: none;
      }
      .seg-value {
        font-size: 10px;
        padding: 0 3px;
      }
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    
    <div class="controls-wrapper">
      <span class="controls-label">Select Vehicle Speed:</span>
      <div class="controls">
        <button class="btn-speed active" id="btn30" onclick="setSpeed(30)">30 mph</button>
        <button class="btn-speed" id="btn50" onclick="setSpeed(50)">50 mph</button>
      </div>
    </div>

    
    <div class="road-scene">
      <div class="road-markings"></div>
      <div class="car" id="car">🚗</div>
      <div class="hazard" title="Hazard ahead">🦌</div>
    </div>

    
    <div class="diagram-area">
      <div class="track-outer">
        <div class="segment segment-thinking" id="segThinking">
          <span class="seg-title">Thinking</span>
          <span class="seg-value" id="valThinking">9 m</span>
        </div>
        <div class="segment segment-braking" id="segBraking">
          <span class="seg-title">Braking</span>
          <span class="seg-value" id="valBraking">14 m</span>
        </div>
      </div>

      
      <div class="total-container">
        <div class="total-bracket" id="totalBracket"></div>
      </div>

      
      <div class="scale-bar">
        <span>0 m</span>
        <span>15 m</span>
        <span>30 m</span>
        <span>45 m</span>
        <span>60 m</span>
      </div>
    </div>

    
    <div class="formula-banner">
      <div class="formula-title">Total Stopping Distance = Thinking + Braking</div>
      <div class="formula-calc">
        <span class="calc-total" id="formulaTotal">23 m</span>
        <span>=</span>
        <span class="calc-thinking" id="formulaThinking">9 m (Thinking)</span>
        <span>+</span>
        <span class="calc-braking" id="formulaBraking">14 m (Braking)</span>
      </div>
    </div>

    
    <div class="cards-grid">
      <div class="info-card info-card-thinking">
        <div class="card-header">
          <span class="card-title">Thinking Distance</span>
          <span class="card-badge" id="cardValThinking">9 m</span>
        </div>
        <p class="card-desc">Driver perceives hazard and reacts (before brakes are touched).</p>
      </div>

      <div class="info-card info-card-braking">
        <div class="card-header">
          <span class="card-title">Braking Distance</span>
          <span class="card-badge" id="cardValBraking">14 m</span>
        </div>
        <p class="card-desc">Brakes applied, car decelerates to a full stop (0 m/s).</p>
      </div>
    </div>
  </div>

  <script>
    // Max scale mapped to 60m for proportional visual comparison
    const MAX_METRES = 60;

    const DATA = {
      30: { thinking: 9, braking: 14, total: 23 },
      50: { thinking: 15, braking: 38, total: 53 }
    };

    function setSpeed(speed) {
      document.getElementById('btn30').classList.toggle('active', speed === 30);
      document.getElementById('btn50').classList.toggle('active', speed === 50);

      const d = DATA[speed];
      const thinkingPct = (d.thinking / MAX_METRES) * 100;
      const brakingPct = (d.braking / MAX_METRES) * 100;
      const totalPct = (d.total / MAX_METRES) * 100;

      // Update segment widths & bar text
      const segT = document.getElementById('segThinking');
      const segB = document.getElementById('segBraking');
      
      segT.style.width = thinkingPct + '%';
      segB.style.width = brakingPct + '%';
      
      document.getElementById('valThinking').textContent = d.thinking + ' m';
      document.getElementById('valBraking').textContent = d.braking + ' m';

      // Update total bracket
      document.getElementById('totalBracket').style.width = totalPct + '%';

      // Update formula banner
      document.getElementById('formulaTotal').textContent = d.total + ' m Total';
      document.getElementById('formulaThinking').textContent = d.thinking + ' m Thinking';
      document.getElementById('formulaBraking').textContent = d.braking + ' m Braking';

      // Update explanatory card badges
      document.getElementById('cardValThinking').textContent = d.thinking + ' m';
      document.getElementById('cardValBraking').textContent = d.braking + ' m';

      // Animate car position on the road
      const car = document.getElementById('car');
      car.style.left = '4px';
      
      setTimeout(() => {
        // Car travels total stopping distance (adjusted for car width)
        const stopPosition = Math.min((d.total / MAX_METRES) * 82, 82);
        car.style.left = stopPosition + '%';
      }, 50);
    }

    // Initialize with 30 mph
    setSpeed(30);
  </script>
</body>
</html>

$$\text{stopping distance} = \text{thinking distance} + \text{braking distance}$$

Thinking distance is how far the vehicle rolls at constant speed during the driver's reaction time, while braking distance is how far it skids or decelerates under the braking force.

How do we apply this formula when analyzing a real road scenario on an exam?

A car traveling along a suburban road has a thinking distance of $9\text{ m}$ and a braking distance of $14\text{ m}$.

To find the total stopping distance, substitute the values into the equation: $$\text{stopping distance} = 9\text{ m} + 14\text{ m} = 23\text{ m}$$

A common mistake is confusing thinking *distance* with reaction *time* — remember that reaction time is measured in seconds ($\text{s}$), whereas thinking distance is a physical length measured in meters ($\text{m}$).

If an exam question provides the total stopping distance and one component, you simply rearrange the formula by subtracting to solve for the missing distance.

science

Defining Stopping Distance: Thinking Distance plus Braking Distance. State the stopping distance equation: stopping distance = thinking distance + braking distance.

Stopping (and Estimating Stopping Distances) - Key Stage 4 Physics

GCSE Physics: Stopping Distances and Factors Affecting Braking

GCSE Physics Revision Notes: Stopping Distance, Thinking Distance & Braking Distance

When teaching this objective to GCSE students, emphasize the physical chronological timeline: Hazard Appears -> Brain Processes & Acts (Thinking Distance) -> Brakes Applied -> Vehicle Halts (Braking Distance). Explicitly contrast 'driver-related factors' with 'vehicle/environment-related factors' using Venn diagrams or sorting tables to prevent cross-contamination of variables in 4-mark and 6-mark exam questions. Reinforce velocity-time graph area interpretation to connect linear motion kinematic formulas to real-world highway safety.

Defining Stopping Distance: Thinking Distance plus Braking Distance

The Stopping Distance Formula

Worked Example