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 push against a solid brick wall until you are sweating and exhausted, how much physics "work" did you actually do? The surprising answer is exactly zero.

In physics, **work done** is a precise measure of energy transferred when a force causes an object to move across a distance.

How do we quantify this transfer of energy mathematically?

We calculate mechanical work using the relationship $W = F \times s$, where $F$ is the applied force and $s$ is the distance moved.

<!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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Scene Stage */
    .stage {
      position: relative;
      height: 170px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      overflow: hidden;
    }

    /* Floor track */
    .floor {
      position: absolute;
      bottom: 34px;
      left: 0;
      right: 0;
      height: 4px;
      background: #cbd5e1;
    }
    .floor-stripes {
      position: absolute;
      bottom: 18px;
      left: 0;
      right: 0;
      height: 16px;
      background: repeating-linear-gradient(135deg, transparent, transparent 6px, #f1f5f9 6px, #f1f5f9 12px);
    }

    /* Ghost/Start outline */
    .ghost-box {
      position: absolute;
      bottom: 38px;
      left: 36px;
      width: 58px;
      height: 58px;
      border: 2px dashed #94a3b8;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 600;
    }

    /* Interactive Box & Force Arrow */
    .box-mover {
      position: absolute;
      bottom: 38px;
      left: 36px;
      width: 58px;
      height: 58px;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 5;
    }
    .box {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
    }

    /* Force Vector */
    .force-arrow {
      position: absolute;
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      padding-right: 6px;
      opacity: 0.95;
    }
    .force-line {
      width: 42px;
      height: 4px;
      background: #f59e0b;
      border-radius: 2px;
    }
    .force-head {
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid #f59e0b;
    }
    .force-label {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 700;
      color: #d97706;
      white-space: nowrap;
    }

    /* Displacement measurement line */
    .ruler-container {
      position: absolute;
      bottom: 6px;
      left: 65px;
      width: calc(100% - 130px);
      height: 24px;
    }
    .ruler-bar {
      position: absolute;
      top: 6px;
      left: 0;
      height: 2px;
      background: #2563eb;
      transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .ruler-bar::before, .ruler-bar::after {
      content: '';
      position: absolute;
      top: -4px;
      width: 2px;
      height: 10px;
      background: #2563eb;
    }
    .ruler-bar::before { left: 0; }
    .ruler-bar::after { right: 0; }
    .ruler-text {
      position: absolute;
      top: 9px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 700;
      color: #2563eb;
    }

    /* Calculation & Info Cards */
    .card-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 10px;
    }
    @media (max-width: 480px) {
      .card-grid {
        grid-template-columns: 1fr;
      }
    }

    .info-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .formula-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 700;
    }
    .var-w { color: #1e2945; }
    .var-f { color: #d97706; }
    .var-s { color: #2563eb; }
    .var-res {
      color: #1e2945;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 6px;
      transition: background 0.3s, color 0.3s;
    }
    .var-res.active {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .badge-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .badge-pill {
      background: #fef3c7;
      border: 1px solid #fde68a;
      color: #92400e;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn:active {
      background: #f8fafc;
    }
    .btn.primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .btn.primary:active {
      background: #1d4ed8;
    }
  </style>
</head>
<body>

  
  <div class="stage" id="stage">
    
    <div class="ghost-box">s = 0</div>

    
    <div class="box-mover" id="boxMover">
      <div class="force-arrow">
        <div class="force-label">F = 10 N</div>
        <div class="force-line"></div>
        <div class="force-head"></div>
      </div>
      <div class="box">m</div>
    </div>

    
    <div class="floor-stripes"></div>
    <div class="floor"></div>

    
    <div class="ruler-container" id="rulerContainer">
      <div class="ruler-bar" id="rulerBar" style="width: 0%;">
        <div class="ruler-text" id="rulerText">s = 0 m</div>
      </div>
    </div>
  </div>

  
  <div class="card-grid">
    <div class="info-card">
      <div class="formula-row">
        <span class="var-w">W</span> = 
        <span class="var-f">F</span> × 
        <span class="var-s">s</span>
      </div>
      <div class="formula-row" style="margin-top: 4px; font-size: 14px;">
        <span class="var-w">W</span> = 
        <span class="var-f">10 N</span> × 
        <span class="var-s" id="calcDist">0 m</span> = 
        <span class="var-res" id="calcResult">0 J</span>
      </div>
    </div>

    <div class="badge-card">
      <div class="badge-pill">
        <span>✦</span> 1 J = 1 N·m
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn primary" id="pushBtn">▶ Push (s = 3 m)</button>
    <button class="btn" id="resetBtn">↺ Reset</button>
  </div>

  <script>
    const boxMover = document.getElementById('boxMover');
    const rulerBar = document.getElementById('rulerBar');
    const rulerText = document.getElementById('rulerText');
    const calcDist = document.getElementById('calcDist');
    const calcResult = document.getElementById('calcResult');
    const pushBtn = document.getElementById('pushBtn');
    const resetBtn = document.getElementById('resetBtn');
    const stage = document.getElementById('stage');

    let isPushed = false;

    function applyState(moved) {
      isPushed = moved;
      if (moved) {
        // Calculate max travel distance relative to stage width
        const stageWidth = stage.clientWidth;
        const travelPx = Math.max(stageWidth - 130, 140);

        boxMover.style.transform = `translateX(${travelPx}px)`;
        rulerBar.style.width = '100%';
        rulerText.textContent = 's = 3 m';
        calcDist.textContent = '3 m';
        calcResult.textContent = '30 J';
        calcResult.classList.add('active');
        pushBtn.textContent = '⏸ Pause';
      } else {
        boxMover.style.transform = 'translateX(0px)';
        rulerBar.style.width = '0%';
        rulerText.textContent = 's = 0 m';
        calcDist.textContent = '0 m';
        calcResult.textContent = '0 J';
        calcResult.classList.remove('active');
        pushBtn.textContent = '▶ Push (s = 3 m)';
      }
    }

    pushBtn.addEventListener('click', () => {
      applyState(!isPushed);
    });

    resetBtn.addEventListener('click', () => {
      applyState(false);
    });

    // Auto-cycle gently on initial load to show concept
    let initialTimer = setTimeout(() => {
      applyState(true);
    }, 800);

    // Cancel auto on user interaction
    [pushBtn, resetBtn].forEach(el => {
      el.addEventListener('pointerdown', () => clearTimeout(initialTimer));
    });
  </script>
</body>
</html>

In 1826, French mathematician **Gaspard-Gustave de Coriolis** coined the term "work" to describe the quantity of force acting through a distance, helping engineers measure the output of early steam engines.

Work and energy are measured in **joules** ($\text{J}$), where exerting a force of $1\text{ newton}$ over a distance of $1\text{ meter}$ transfers exactly $1\text{ joule}$ of energy ($1\text{ J} = 1\text{ N}\cdot\text{m}$).

What does a complete calculation look like in a real-world scenario?

Suppose a warehouse worker applies a constant horizontal force of $250\text{ N}$ to push a heavy shipping crate across a flat floor for a distance of $4.0\text{ m}$.

Substituting our values into the formula gives $W = 250\text{ N} \times 4.0\text{ m} = 1000\text{ J}$, meaning $1.0\text{ kJ}$ of energy was mechanically transferred to move the crate.

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    /* Top Given Values Bar */
    .given-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 480px;
      flex-wrap: wrap;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .pill-f {
      background: #eff6ff;
      color: #2563eb;
      border: 1.5px solid #bfdbfe;
    }

    .pill-s {
      background: #ecfdf5;
      color: #10b981;
      border: 1.5px solid #a7f3d0;
    }

    /* Visual mini-diagram */
    .visual-stage {
      width: 100%;
      max-width: 480px;
      height: 64px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: 0 16px 8px;
    }

    .ground-line {
      position: absolute;
      bottom: 8px;
      left: 12px;
      right: 12px;
      height: 2px;
      background: #cbd5e1;
    }

    .track {
      position: absolute;
      bottom: 10px;
      left: 30px;
      right: 50px;
      height: 40px;
    }

    .box {
      position: absolute;
      bottom: 0;
      left: 0%;
      width: 38px;
      height: 30px;
      background: #ffffff;
      border: 2px solid #1e2945;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    .force-arrow {
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 2px;
      color: #2563eb;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      padding-right: 4px;
    }

    .disp-marker {
      position: absolute;
      bottom: -1px;
      left: 30px;
      width: 0%;
      height: 2px;
      background: #10b981;
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .disp-label {
      position: absolute;
      top: 4px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 700;
      color: #10b981;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    /* Worked Steps Container */
    .steps-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .step-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
      opacity: 0.35;
    }

    .step-card.active {
      opacity: 1;
      border-color: #cbd5e1;
      box-shadow: 0 3px 8px rgba(0,0,0,0.04);
    }

    .step-card.active.step-3-active {
      border-color: #fcd34d;
      background: #fffbeb;
    }

    .step-badge {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .step-math {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.3px;
    }

    .val-f { color: #2563eb; }
    .val-s { color: #10b981; }
    .val-w { color: #f59e0b; }

    /* Interactive Stepper Navigation */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .step-btn {
      flex: 1;
      padding: 8px 10px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .step-btn.selected {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .play-btn {
      width: 36px;
      height: 34px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      color: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="given-row">
    <div class="pill pill-f">
      <span>Force <i>F</i> = 250 N</span>
    </div>
    <div class="pill pill-s">
      <span>Distance <i>s</i> = 4.0 m</span>
    </div>
  </div>

  
  <div class="visual-stage">
    <div class="ground-line"></div>
    <div class="disp-marker" id="dispMarker"></div>
    <div class="track">
      <div class="box" id="box">
        <div class="force-arrow">250 N →</div>
        <i>m</i>
      </div>
    </div>
    <span class="disp-label" id="dispLabel"><i>s</i> = 4.0 m</span>
  </div>

  
  <div class="steps-container">
    
    <div class="step-card active" id="card-0">
      <span class="step-badge">1. Formula</span>
      <div class="step-math">
        <i>W</i> = <span class="val-f"><i>F</i></span> × <span class="val-s"><i>s</i></span>
      </div>
    </div>

    
    <div class="step-card" id="card-1">
      <span class="step-badge">2. Substitute</span>
      <div class="step-math">
        <i>W</i> = (<span class="val-f">250 N</span>) × (<span class="val-s">4.0 m</span>)
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <span class="step-badge">3. Calculate</span>
      <div class="step-math">
        <i>W</i> = 1000 J = <span class="val-w">1.0 kJ</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn selected" id="btn-0" onclick="setStep(0)">Step 1</button>
    <button class="step-btn" id="btn-1" onclick="setStep(1)">Step 2</button>
    <button class="step-btn" id="btn-2" onclick="setStep(2)">Step 3</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Auto play">⏸</button>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const box = document.getElementById('box');
    const dispMarker = document.getElementById('dispMarker');
    const dispLabel = document.getElementById('dispLabel');
    const playBtn = document.getElementById('playBtn');

    function updateView() {
      // Update Buttons
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById(`btn-${i}`);
        const card = document.getElementById(`card-${i}`);
        
        if (i <= currentStep) {
          card.classList.add('active');
          if (i === 2 && currentStep === 2) {
            card.classList.add('step-3-active');
          } else {
            card.classList.remove('step-3-active');
          }
        } else {
          card.classList.remove('active');
          card.classList.remove('step-3-active');
        }

        if (i === currentStep) {
          btn.classList.add('selected');
        } else {
          btn.classList.remove('selected');
        }
      }

      // Update Mini Simulation
      if (currentStep === 0) {
        box.style.left = '0%';
        dispMarker.style.width = '0%';
        dispLabel.style.opacity = '0';
      } else if (currentStep === 1) {
        box.style.left = '50%';
        dispMarker.style.width = 'calc(50% - 20px)';
        dispLabel.style.opacity = '0.7';
      } else {
        box.style.left = 'calc(100% - 38px)';
        dispMarker.style.width = 'calc(100% - 70px)';
        dispLabel.style.opacity = '1';
      }
    }

    function setStep(step) {
      currentStep = step;
      updateView();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateView();
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸';
        startTimer();
      } else {
        playBtn.textContent = '▶';
        clearInterval(timer);
      }
    }

    // Initialize
    updateView();
    startTimer();
  </script>
</body>
</html>

What happens if the object moves in a different direction from the force, or does not move at all?

For work to occur, the distance must be traveled along the **line of action** of the force — the exact direction in which the force acts.

<!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; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    @media (max-width: 520px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .panel.success {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .panel.fail {
      border-color: #fca5a5;
      background: #fef2f2;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      font-size: 13px;
      font-weight: bold;
      margin-bottom: 6px;
    }

    .success .status-badge {
      background: #22c55e;
      color: #ffffff;
    }

    .fail .status-badge {
      background: #ef4444;
      color: #ffffff;
    }

    .title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
      line-height: 1.2;
    }

    .success .title { color: #15803d; }
    .fail .title { color: #b91c1c; }

    .stage {
      width: 100%;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .formula {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.08);
      color: #0f172a;
    }

    /* SVG styling */
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .force-arrow { stroke: #2563eb; stroke-width: 3; fill: none; }
    .force-head { fill: #2563eb; }
    .dist-arrow { stroke: #16a34a; stroke-width: 2.5; stroke-dasharray: 4,3; fill: none; }
    .dist-head { fill: #16a34a; }
    .wall { fill: #94a3b8; stroke: #64748b; stroke-width: 1.5; }
    .box { fill: #fde047; stroke: #ca8a04; stroke-width: 2; rx: 4; }
    .char { font-size: 26px; user-select: none; }
    .lbl { font-size: 11px; font-weight: 700; font-family: sans-serif; }
    .lbl-f { fill: #2563eb; }
    .lbl-s { fill: #16a34a; }
    .lbl-zero { fill: #ef4444; font-size: 12px; font-weight: 800; }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel success">
      <div class="status-badge">✓</div>
      <div class="title">Work Done</div>
      <div class="stage">
        <svg viewBox="0 0 160 110">
          
          <line x1="10" y1="90" x2="150" y2="90" stroke="#cbd5e1" stroke-width="2" />
          
          
          <rect class="box" x="45" y="46" width="36" height="36" />
          
          
          <line class="force-arrow" x1="50" y1="34" x2="105" y2="34" />
          <polygon class="force-head" points="112,34 104,30 104,38" />
          <text x="76" y="26" class="lbl lbl-f" text-anchor="middle">Force (F)</text>

          
          <line class="dist-arrow" x1="45" y1="98" x2="115" y2="98" />
          <polygon class="dist-head" points="122,98 114,95 114,101" />
          <text x="80" y="109" class="lbl lbl-s" text-anchor="middle">Distance (s)</text>
        </svg>
      </div>
      <div class="formula">W = F × s &gt; 0</div>
    </div>

    
    <div class="panel fail">
      <div class="status-badge">✗</div>
      <div class="title">Zero Distance</div>
      <div class="stage">
        <svg viewBox="0 0 160 110">
          
          <line x1="10" y1="90" x2="150" y2="90" stroke="#cbd5e1" stroke-width="2" />

          
          <rect class="wall" x="110" y="20" width="26" height="70" rx="2" />
          
          <line x1="110" y1="38" x2="136" y2="38" stroke="#64748b" stroke-width="1.5" />
          <line x1="110" y1="56" x2="136" y2="56" stroke="#64748b" stroke-width="1.5" />
          <line x1="110" y1="74" x2="136" y2="74" stroke="#64748b" stroke-width="1.5" />
          
          
          <text x="35" y="80" class="char">🏃</text>

          
          <line class="force-arrow" x1="72" y1="56" x2="102" y2="56" />
          <polygon class="force-head" points="108,56 101,52 101,60" />
          <text x="88" y="48" class="lbl lbl-f" text-anchor="middle">F</text>

          
          <text x="80" y="104" class="lbl-zero" text-anchor="middle">s = 0</text>
        </svg>
      </div>
      <div class="formula">W = F × 0 = 0</div>
    </div>

    
    <div class="panel fail">
      <div class="status-badge">✗</div>
      <div class="title">90° Angle</div>
      <div class="stage">
        <svg viewBox="0 0 160 110">
          
          <line x1="10" y1="90" x2="150" y2="90" stroke="#cbd5e1" stroke-width="2" />

          
          <text x="40" y="80" class="char">🚶</text>
          <rect class="box" x="70" y="45" width="22" height="22" />

          
          <line class="force-arrow" x1="81" y1="42" x2="81" y2="18" />
          <polygon class="force-head" points="81,12 77,19 85,19" />
          <text x="94" y="24" class="lbl lbl-f">F</text>

          
          <polyline points="81,60 92,60 92,72" fill="none" stroke="#64748b" stroke-width="1.5" />
          <circle cx="86.5" cy="66" r="1.5" fill="#64748b" />

          
          <line class="dist-arrow" x1="70" y1="98" x2="130" y2="98" />
          <polygon class="dist-head" points="136,98 129,95 129,101" />
          <text x="100" y="109" class="lbl lbl-s" text-anchor="middle">s</text>
        </svg>
      </div>
      <div class="formula">W = 0 (⊥ Force)</div>
    </div>
  </div>

</body>
</html>

A common misconception is confusing muscular fatigue with physical work: holding a $50\text{ kg}$ barbell stationary overhead tires your muscles, but does zero mechanical work because $s = 0\text{ m}$.

Similarly, carrying a backpack while walking horizontally does no work against gravity, because the upward lifting force is perpendicular to your horizontal path.

Why does multiplying force by distance give us energy? Where does this formula originate?

From Newton's second law, net force equals mass times acceleration ($F = ma$), and the kinematic relationship for motion is $v^2 = u^2 + 2as$.

Rearranging acceleration gives $as = \frac{1}{2}v^2 - \frac{1}{2}u^2$, so multiplying both sides by mass yields $Fs = mas = \frac{1}{2}mv^2 - \frac{1}{2}mu^2$.

This confirms that work done on an object by a resultant force equals the exact change in its **kinetic energy**.

Whenever you solve an exam question, verify that distance is converted to meters and that the force is parallel to the displacement before calculating.

science

Work: Force Applied Over a Distance. Define work done as the product of force and distance moved along the line of action of the force (1 J = 1 N m).

GCSE Physics: Work Done, Forces and Energy Transfer

Work Done (W = F × s) - KS4 Physics

Work Done and Energy Transfer Revision Notes

When teaching this objective to GCSE students, emphasize the physical meaning of $1\text{ J} = 1\text{ N m}$ as the foundational link between mechanics and energy. Use dual-coding by pairing free-body force diagrams with energy transfer pathways (e.g., Sankey diagrams or energy store bar charts). Explicitly scaffold the distinction between mass ($m$) and weight ($W_{\text{weight}}$) in lifting problems, and insist on metric SI unit conversions (such as $\text{cm}$ or $\text{km}$ to $\text{m}$, and $\text{kJ}$ to $\text{J}$) before substituting into $W = F \times s$.

Work: Force Applied Over a Distance

The Work Equation

Calculating Work Done