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

Have you ever looked out the car window and noticed cars zoom super fast on the big highway, but stop and go slowly downtown?

A car's **speed** tells us how far it travels in one hour, measured in **miles per hour** (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">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    
    :root {
      --primary: #22b7ff;
      --highway: #0284c7;
      --city: #d97706;
      --bg: #f8f9fa;
      --card: #ffffff;
      --text: #1e2945;
      --border: #e2e8f0;
    }

    body {
      background: transparent;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

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

    .selector-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .dist-btn {
      background: var(--card);
      border: 2px solid var(--border);
      color: var(--text);
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .dist-btn.active {
      background: #eff6ff;
      border-color: var(--primary);
      color: #0369a1;
    }

    .lane-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .lane-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
    }

    .highway-tag {
      color: var(--highway);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .city-tag {
      color: var(--city);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .rate-badge {
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
    }

    .track-wrapper {
      position: relative;
      height: 38px;
      background: #334155;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 0 6px;
    }

    .lane-line {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 2px;
      background: repeating-linear-gradient(90deg, #94a3b8 0, #94a3b8 10px, transparent 10px, transparent 20px);
      transform: translateY(-50%);
    }

    .car {
      position: absolute;
      left: 6px;
      font-size: 22px;
      line-height: 1;
      transform: translateY(1px);
      transition: left linear;
      z-index: 2;
    }

    .finish-flag {
      position: absolute;
      right: 10px;
      font-size: 16px;
      z-index: 1;
    }

    .stats-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-top: 2px;
    }

    .dist-label {
      font-size: 13px;
      color: #64748b;
      font-weight: 600;
    }

    .time-value {
      font-size: 18px;
      font-weight: 800;
    }

    .time-highway { color: var(--highway); }
    .time-city { color: var(--city); }
  </style>
</head>
<body>
  <div class="container">
    <div class="selector-row">
      <button class="dist-btn active" data-miles="10">10 miles</button>
      <button class="dist-btn" data-miles="20">20 miles</button>
      <button class="dist-btn" data-miles="30">30 miles</button>
    </div>

    
    <div class="lane-card">
      <div class="lane-header">
        <span class="highway-tag">🛣️ Highway (60 mph)</span>
        <span class="rate-badge">1 mi = 1 min</span>
      </div>
      <div class="track-wrapper">
        <div class="lane-line"></div>
        <div class="car" id="carHighway">🚗</div>
        <div class="finish-flag">🏁</div>
      </div>
      <div class="stats-row">
        <span class="dist-label" id="labelHighway">10 miles</span>
        <span class="time-value time-highway" id="timeHighway">10 min</span>
      </div>
    </div>

    
    <div class="lane-card">
      <div class="lane-header">
        <span class="city-tag">🏙️ City (30 mph)</span>
        <span class="rate-badge">1 mi = 2 min</span>
      </div>
      <div class="track-wrapper">
        <div class="lane-line"></div>
        <div class="car" id="carCity">🚙</div>
        <div class="finish-flag">🏁</div>
      </div>
      <div class="stats-row">
        <span class="dist-label" id="labelCity">10 miles</span>
        <span class="time-value time-city" id="timeCity">20 min</span>
      </div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.dist-btn');
    const carHighway = document.getElementById('carHighway');
    const carCity = document.getElementById('carCity');
    const timeHighway = document.getElementById('timeHighway');
    const timeCity = document.getElementById('timeCity');
    const labelHighway = document.getElementById('labelHighway');
    const labelCity = document.getElementById('labelCity');

    let animInterval = null;

    function runSimulation(miles) {
      labelHighway.textContent = miles + ' miles';
      labelCity.textContent = miles + ' miles';

      const highwayTargetMin = miles;
      const cityTargetMin = miles * 2;

      // Reset positions instantly
      carHighway.style.transition = 'none';
      carCity.style.transition = 'none';
      carHighway.style.left = '6px';
      carCity.style.left = '6px';

      timeHighway.textContent = '0 min';
      timeCity.textContent = '0 min';

      if (animInterval) clearInterval(animInterval);

      // Force reflow
      void carHighway.offsetWidth;

      const durationSec = 2.4; // visual animation duration

      // Highway moves at full speed (arrives at durationSec / 2)
      carHighway.style.transition = `left ${durationSec / 2}s ease-out`;
      carCity.style.transition = `left ${durationSec}s ease-out`;

      carHighway.style.left = 'calc(100% - 36px)';
      carCity.style.left = 'calc(100% - 36px)';

      const startTime = performance.now();
      const totalMs = durationSec * 1000;

      animInterval = setInterval(() => {
        const elapsed = performance.now() - startTime;
        const pCity = Math.min(elapsed / totalMs, 1);
        const pHighway = Math.min(elapsed / (totalMs / 2), 1);

        timeHighway.textContent = Math.round(pHighway * highwayTargetMin) + ' min';
        timeCity.textContent = Math.round(pCity * cityTargetMin) + ' min';

        if (pCity >= 1) {
          clearInterval(animInterval);
          timeHighway.textContent = highwayTargetMin + ' min';
          timeCity.textContent = cityTargetMin + ' min';
        }
      }, 30);
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        runSimulation(parseInt(btn.dataset.miles, 10));
      });
    });

    // Start on load
    runSimulation(10);
  </script>
</body>
</html>

How does driving on a highway help us figure out travel time in minutes?

On an open highway with no stoplights, cars usually cruise at **60 miles per hour**.

Because there are 60 minutes in 1 hour, driving 60 mph means you travel **1 mile every 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>Highway vs City Driving</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
  }

  .main-wrap {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Time control buttons */
  .controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .btn-time {
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-time:hover {
    background: #e2e8f0;
  }
  .btn-time.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
  }

  /* Environment panels */
  .track-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }

  .track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
  }
  .badge-speed {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
  }
  .badge-dist {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #0f172a;
  }
  .hw-dist { color: #0284c7; }
  .ct-dist { color: #d97706; }

  /* Road visualization */
  .road-container {
    position: relative;
    height: 36px;
    background: #334155;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .lane-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #94a3b8 0, #94a3b8 14px, transparent 14px, transparent 28px);
    top: 50%;
    transform: translateY(-50%);
  }
  .car {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    line-height: 1;
    transition: left 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  }

  /* Ruler / Axis */
  .ruler {
    position: relative;
    width: 100%;
    height: 22px;
    margin-top: -4px;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
  }
  .tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
  }
  .tick::before {
    content: '';
    width: 1px;
    height: 5px;
    background: #cbd5e1;
    margin-bottom: 2px;
  }
</style>
</head>
<body>

<div class="main-wrap">
  
  <div class="controls">
    <button class="btn-time" data-min="10">10 min</button>
    <button class="btn-time active" data-min="30">30 min</button>
    <button class="btn-time" data-min="45">45 min</button>
    <button class="btn-time" data-min="60">60 min</button>
  </div>

  
  <div class="track-card">
    <div class="track-header">
      <span>🛣️ Highway <span class="badge-speed">(60 mph)</span></span>
      <span class="badge-dist hw-dist" id="hwLabel">30 mi</span>
    </div>
    <div class="road-container">
      <div class="lane-line"></div>
      <div class="car" id="hwCar">🚗</div>
    </div>
  </div>

  
  <div class="track-card">
    <div class="track-header">
      <span>🏙️ City <span class="badge-speed">(30 mph)</span></span>
      <span class="badge-dist ct-dist" id="ctLabel">15 mi</span>
    </div>
    <div class="road-container">
      <div class="lane-line"></div>
      <div class="car" id="ctCar">🚙</div>
    </div>
  </div>

  
  <div class="ruler">
    <div class="tick">0 mi</div>
    <div class="tick">15 mi</div>
    <div class="tick">30 mi</div>
    <div class="tick">45 mi</div>
    <div class="tick">60 mi</div>
  </div>
</div>

<script>
  const buttons = document.querySelectorAll('.btn-time');
  const hwCar = document.getElementById('hwCar');
  const ctCar = document.getElementById('ctCar');
  const hwLabel = document.getElementById('hwLabel');
  const ctLabel = document.getElementById('ctLabel');

  function update(minutes) {
    // 60 mph = 1 mile/minute; 30 mph = 0.5 miles/minute
    const hwDist = minutes * 1.0;
    const ctDist = minutes * 0.5;

    // Map 0-60 miles to 5% - 95% track width
    const hwPercent = 5 + (hwDist / 60) * 90;
    const ctPercent = 5 + (ctDist / 60) * 90;

    hwCar.style.left = hwPercent + '%';
    ctCar.style.left = ctPercent + '%';

    hwLabel.textContent = hwDist + ' mi';
    ctLabel.textContent = ctDist + ' mi';
  }

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      update(parseInt(btn.dataset.min, 10));
    });
  });

  // Initialize
  update(30);
</script>

</body>
</html>

What happens when your car leaves the highway and enters a busy city?

City streets have stoplights, crosswalks, and turns, so cars drive much slower at about **30 miles per hour**.

Since 30 is half of 60, traveling through the city takes **twice as long** as on the highway.

<!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">
  <script src="{{VENDOR_CDN}}/gsap.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    body {
      background: transparent;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      user-select: none;
      -webkit-user-select: none;
    }
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .btn {
      padding: 6px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
    .play-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .lane-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }
    .lane-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
    }
    .speed-badge {
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
      margin-left: 4px;
    }
    .timer-badge {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
      font-variant-numeric: tabular-nums;
    }
    .timer-badge.highlight {
      background: #e0f2fe;
      color: #0284c7;
    }
    .timer-badge.city-highlight {
      background: #fef3c7;
      color: #d97706;
    }

    .track {
      position: relative;
      height: 38px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px solid #ebecef;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .lane-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 2px;
      border-top: 2px dashed #cbd5e1;
    }
    .finish-flag {
      position: absolute;
      right: 8px;
      font-size: 16px;
      z-index: 1;
      opacity: 0.8;
    }
    .car {
      position: absolute;
      left: 6px;
      font-size: 24px;
      line-height: 1;
      z-index: 2;
      transform: translateX(0%);
    }

    .ratio-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      padding: 4px 0;
    }
    .tag {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <div class="btn-group">
      <button class="btn active" id="btn10" onclick="setDistance(10)">10 mi</button>
      <button class="btn" id="btn20" onclick="setDistance(20)">20 mi</button>
      <button class="btn" id="btn30" onclick="setDistance(30)">30 mi</button>
    </div>
    <button class="btn play-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">▶</span>
    </button>
  </div>

  <div class="lane-card">
    <div class="lane-header">
      <div>🛣️ Highway <span class="speed-badge">(60 mph)</span></div>
      <div class="timer-badge highlight" id="hwTime">0 min</div>
    </div>
    <div class="track" id="hwTrack">
      <div class="lane-line"></div>
      <div class="finish-flag">🏁</div>
      <div class="car" id="hwCar">🚗</div>
    </div>
  </div>

  <div class="lane-card">
    <div class="lane-header">
      <div>🏙️ City <span class="speed-badge">(30 mph)</span></div>
      <div class="timer-badge city-highlight" id="cityTime">0 min</div>
    </div>
    <div class="track" id="cityTrack">
      <div class="lane-line"></div>
      <div class="finish-flag">🏁</div>
      <div class="car" id="cityCar">🚙</div>
    </div>
  </div>

  <div class="ratio-bar">
    <span>⏱️ City takes <strong>2×</strong> as long</span>
  </div>

  <script>
    let distance = 10;
    let tl = null;
    let isPlaying = false;

    function getTrackWidth() {
      const track = document.getElementById('hwTrack');
      return track.clientWidth - 44;
    }

    function initTimeline() {
      if (tl) tl.kill();

      const hwTarget = distance;
      const cityTarget = distance * 2;
      const hwCar = document.getElementById('hwCar');
      const cityCar = document.getElementById('cityCar');
      const hwTime = document.getElementById('hwTime');
      const cityTime = document.getElementById('cityTime');
      const playIcon = document.getElementById('playIcon');

      const maxDist = getTrackWidth();

      gsap.set([hwCar, cityCar], { x: 0 });
      hwTime.textContent = '0 min';
      cityTime.textContent = '0 min';

      const baseDuration = 2.2;

      tl = gsap.timeline({
        paused: true,
        onUpdate: () => {
          const hwProgress = tl.time() / baseDuration;
          const cityProgress = tl.time() / (baseDuration * 2);

          const currentHw = Math.min(hwTarget, Math.round(hwProgress * hwTarget));
          const currentCity = Math.min(cityTarget, Math.round(cityProgress * cityTarget));

          hwTime.textContent = `${currentHw} min`;
          cityTime.textContent = `${currentCity} min`;
        },
        onComplete: () => {
          isPlaying = false;
          playIcon.textContent = '⟳';
        }
      });

      tl.to(hwCar, {
        x: maxDist,
        duration: baseDuration,
        ease: 'none'
      }, 0);

      tl.to(cityCar, {
        x: maxDist,
        duration: baseDuration * 2,
        ease: 'none'
      }, 0);
    }

    function setDistance(d) {
      distance = d;
      document.querySelectorAll('.btn-group .btn').forEach(btn => btn.classList.remove('active'));
      document.getElementById('btn' + d).classList.add('active');
      
      initTimeline();
      playAnimation();
    }

    function playAnimation() {
      if (tl.progress() === 1) {
        tl.restart();
      } else {
        tl.play();
      }
      isPlaying = true;
      document.getElementById('playIcon').textContent = '⏸';
    }

    function pauseAnimation() {
      tl.pause();
      isPlaying = false;
      document.getElementById('playIcon').textContent = '▶';
    }

    function togglePlay() {
      if (isPlaying) {
        pauseAnimation();
      } else {
        playAnimation();
      }
    }

    window.addEventListener('resize', () => {
      const progress = tl ? tl.progress() : 0;
      initTimeline();
      if (progress > 0) tl.progress(progress);
    });

    initTimeline();
    playAnimation();
  </script>
</body>
</html>

Many people mistakenly think 10 miles always takes 10 minutes everywhere you drive.

While 10 miles takes only 10 minutes on a fast highway, city stops will stretch that same 10-mile trip to **20 or 30 minutes**.

How can you use these speeds to plan your family's next big adventure?

When estimating your travel time, count 1 minute for each highway mile, and **double the time** for city roads.

math

Estimating Highway and City Driving Durations. Compare highway driving (60 mph) and city driving (20-30 mph) to estimate journey times realistically.

Second Level Maths: Calculating Speed, Distance and Time (MNU 2-10c)

Speed, Distance and Journey Planning Rich Tasks

Rates, Constant Speed, and Journey Duration Estimation

Pedagogical Strategy: While the Curriculum for Excellence benchmark MNU 2-10c is formally seated at Second Level (ages 9–11), introducing intuitive journey planning starts with concrete benchmarks: establishing that $60\text{ mph} = 1\text{ mile per minute}$ provides a powerful mental arithmetic anchor. Teachers should transition learners through the Concrete-Pictorial-Abstract (CPA) continuum using bar models and comparative timelines to solidify inverse relationships (halving speed doubles duration) before moving to formal formulaic manipulation ($t = \frac{d}{s}$) and distance-time graphs.

Estimating Highway and City Driving Durations

Highway Driving

City Driving