<!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="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/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: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      min-height: 100%;
    }
    .stepper-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .nav-btn {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }
    .nav-btn:hover {
      background: #edf2f7;
    }
    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
    .dot.active {
      background: #0284c7;
      transform: scale(1.25);
    }
    .cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }
    .calc-row {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      opacity: 0.55;
      transition: opacity 0.25s, box-shadow 0.25s, background-color 0.25s;
    }
    .calc-row.active {
      opacity: 1;
      box-shadow: 0 0 0 1.5px #0284c7;
      background: #f0f9ff;
    }
    .calc-row.highlight-net {
      background: #f0fdf4;
    }
    .calc-row.highlight-net.active {
      background: #e0f2fe;
      box-shadow: 0 0 0 2px #0284c7;
    }
    .formula-area {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .badge-pos {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }
    .badge-neg {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }
    .badge-zero {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }
    .badge-net {
      background: #0284c7;
      color: #ffffff;
      border: 1px solid #0284c7;
    }
    @media (max-width: 480px) {
      .calc-row {
        padding: 8px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
      .badge {
        align-self: flex-end;
      }
    }
  </style>
</head>
<body>
  <div class="stepper-bar">
    <div class="btn-group">
      <button class="nav-btn" id="prevBtn" aria-label="Previous">◀</button>
      <button class="nav-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
      <button class="nav-btn" id="nextBtn" aria-label="Next">▶</button>
    </div>
    <div class="dots" id="dotGroup">
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

  <div class="cards" id="cards">
    <div class="calc-row active" data-step="0">
      <div class="formula-area" id="math1"></div>
      <span class="badge badge-pos">+160 J</span>
    </div>
    <div class="calc-row" data-step="1">
      <div class="formula-area" id="math2"></div>
      <span class="badge badge-neg">-60 J</span>
    </div>
    <div class="calc-row" data-step="2">
      <div class="formula-area" id="math3"></div>
      <span class="badge badge-zero">0 J</span>
    </div>
    <div class="calc-row highlight-net" data-step="3">
      <div class="formula-area" id="math4"></div>
      <span class="badge badge-net">+100 J</span>
    </div>
  </div>

  <script>
    const renderMath = () => {
      if (window.katex) {
        katex.render("W_T = (50\\text{ N})(4.0\\text{ m})\\cos 37^\\circ", document.getElementById('math1'), { throwOnError: false });
        katex.render("W_f = (15\\text{ N})(4.0\\text{ m})\\cos 180^\\circ", document.getElementById('math2'), { throwOnError: false });
        katex.render("W_N = 0\\text{ J},\\quad W_g = 0\\text{ J}\\;(\\theta = 90^\\circ)", document.getElementById('math3'), { throwOnError: false });
        katex.render("W_{\\text{net}} = +160\\text{ J} + (-60\\text{ J})", document.getElementById('math4'), { throwOnError: false });
      } else {
        document.getElementById('math1').innerHTML = "<b>W<sub>T</sub></b> = (50 N)(4.0 m) cos 37°";
        document.getElementById('math2').innerHTML = "<b>W<sub>f</sub></b> = (15 N)(4.0 m) cos 180°";
        document.getElementById('math3').innerHTML = "<b>W<sub>N</sub></b> = 0 J,&nbsp; <b>W<sub>g</sub></b> = 0 J (θ = 90°)";
        document.getElementById('math4').innerHTML = "<b>W<sub>net</sub></b> = +160 J + (-60 J)";
      }
    };

    window.addEventListener('DOMContentLoaded', renderMath);
    if (document.readyState !== 'loading') renderMath();

    const rows = document.querySelectorAll('.calc-row');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let current = 0;
    let playing = true;
    let timer = null;

    function showStep(index) {
      current = (index + rows.length) % rows.length;
      rows.forEach((r, i) => r.classList.toggle('active', i === current));
      dots.forEach((d, i) => d.classList.toggle('active', i === current));
    }

    function startAuto() {
      stopAuto();
      playing = true;
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        showStep(current + 1);
      }, 3500);
    }

    function stopAuto() {
      playing = false;
      playBtn.textContent = '▶';
      if (timer) clearInterval(timer);
      timer = null;
    }

    playBtn.addEventListener('click', () => {
      if (playing) stopAuto();
      else {
        showStep(current + 1);
        startAuto();
      }
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      showStep(current - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      showStep(current + 1);
    });

    rows.forEach((row, i) => {
      row.addEventListener('click', () => {
        stopAuto();
        showStep(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopAuto();
        showStep(i);
      });
    });

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

Work Done by Constant and Variable Forces

<!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="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <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: #ffffff;
      padding: 12px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }
    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .graph-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .graph-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
      min-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .graph-svg {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      max-height: 190px;
      overflow: visible;
    }
    .formula-badge {
      margin-top: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 13px;
      color: #1e2945;
      font-weight: 600;
      text-align: center;
    }
    .axis { stroke: #64748b; stroke-width: 1.5; stroke-linecap: round; }
    .axis-tick { stroke: #94a3b8; stroke-width: 1; }
    .axis-label { font-size: 11px; fill: #1e2945; font-weight: 600; }
    .force-curve { fill: none; stroke: #0284c7; stroke-width: 2.5; stroke-linecap: round; }
    .rect-pos { fill: rgba(34, 183, 255, 0.25); stroke: #0284c7; stroke-width: 1; }
    .rect-neg { fill: rgba(239, 68, 68, 0.22); stroke: #dc2626; stroke-width: 1; }
    .area-pos { fill: rgba(34, 183, 255, 0.3); }
    .area-neg { fill: rgba(239, 68, 68, 0.25); }
    .sign-pill {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .pill-pos { fill: #0369a1; }
    .pill-neg { fill: #b91c1c; }
    .delta-bracket { stroke: #475569; stroke-width: 1.2; fill: none; }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="graph-card">
      <div class="graph-title" id="title1"></div>
      <svg id="svg1" class="graph-svg" viewBox="0 0 280 200"></svg>
      <div class="formula-badge" id="math1"></div>
    </div>

    
    <div class="graph-card">
      <div class="graph-title" id="title2"></div>
      <svg id="svg2" class="graph-svg" viewBox="0 0 280 200"></svg>
      <div class="formula-badge" id="math2"></div>
    </div>
  </div>

  <script>
    // Mathematical function for force F(x)
    // Domain: x in [0, 10], x_i = 1.2, x_f = 9.2
    // Screen mapping: x:[30, 260], y:[25, 175], zero-line y_0 = 135
    const X_MIN = 35, X_MAX = 255;
    const Y_ZERO = 132;
    const XI = 45, XF = 245;

    function getForceY(svgX) {
      // Normalized u from 0 to 1 across [XI, XF]
      const u = (svgX - XI) / (XF - XI);
      // Smooth curve starting positive, peaking, then dropping below zero
      const val = 100 * Math.sin(u * 2.85 + 0.25) - 22;
      return Y_ZERO - val;
    }

    // Find zero-crossing point where curve intersects x-axis
    let xZero = XI;
    for (let x = XI; x <= XF; x += 0.2) {
      if (getForceY(x) >= Y_ZERO) {
        xZero = x;
        break;
      }
    }

    // Build Curve Path
    function buildCurveD() {
      let d = `M ${XI} ${getForceY(XI).toFixed(1)}`;
      for (let x = XI + 2; x <= XF; x += 2) {
        d += ` L ${x.toFixed(1)} ${getForceY(x).toFixed(1)}`;
      }
      return d;
    }

    // Render Graph 1 (Riemann Rectangles)
    function renderGraph1() {
      const svg = document.getElementById('svg1');
      const numRects = 10;
      const dx = (XF - XI) / numRects;
      let rectsHtml = '';

      for (let i = 0; i < numRects; i++) {
        const rx = XI + i * dx;
        const midX = rx + dx / 2;
        const fy = getForceY(midX);
        const isPos = fy <= Y_ZERO;
        const ry = isPos ? fy : Y_ZERO;
        const rh = Math.abs(Y_ZERO - fy);
        const cls = isPos ? 'rect-pos' : 'rect-neg';

        rectsHtml += `<rect class="${cls}" x="${rx.toFixed(1)}" y="${ry.toFixed(1)}" width="${dx.toFixed(1)}" height="${rh.toFixed(1)}"/>`;
      }

      // Bracket for dx on one rectangle (e.g. index 3)
      const bx1 = XI + 3 * dx;
      const bx2 = bx1 + dx;
      const by = Y_ZERO + 14;

      svg.innerHTML = `
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#64748b"/>
          </marker>
        </defs>

        
        <line class="axis" x1="${X_MIN - 10}" y1="${Y_ZERO}" x2="${X_MAX + 15}" y2="${Y_ZERO}" marker-end="url(#arrow)"/>
        <line class="axis" x1="${X_MIN}" y1="185" x2="${X_MIN}" y2="20" marker-end="url(#arrow)"/>

        
        <text class="axis-label" x="${X_MAX + 12}" y="${Y_ZERO - 6}">x</text>
        <text class="axis-label" x="${X_MIN - 6}" y="22" text-anchor="end">F(x)</text>
        <text class="axis-label" x="${XI}" y="${Y_ZERO + 13}" text-anchor="middle">x<tspan dy="3" font-size="8">i</tspan></text>
        <text class="axis-label" x="${XF}" y="${Y_ZERO + 13}" text-anchor="middle">x<tspan dy="3" font-size="8">f</tspan></text>

        
        ${rectsHtml}

        
        <path class="force-curve" d="${buildCurveD()}"/>

        
        <path class="delta-bracket" d="M ${bx1} ${by - 3} L ${bx1} ${by} L ${bx2} ${by} L ${bx2} ${by - 3}"/>
        <text class="axis-label" x="${(bx1 + bx2)/2}" y="${by + 11}" text-anchor="middle" font-size="10">Δx</text>

        
        <g transform="translate(125, 78)">
          <rect x="-18" y="-10" width="36" height="17" rx="4" fill="#e0f2fe" stroke="#38bdf8" stroke-width="0.8"/>
          <text class="sign-pill pill-pos" text-anchor="middle" y="2">+W</text>
        </g>
        <g transform="translate(230, 160)">
          <rect x="-16" y="-9" width="32" height="16" rx="4" fill="#fee2e2" stroke="#f87171" stroke-width="0.8"/>
          <text class="sign-pill pill-neg" text-anchor="middle" y="2">-W</text>
        </g>
      `;
    }

    // Render Graph 2 (Continuous Integral Area)
    function renderGraph2() {
      const svg = document.getElementById('svg2');

      // Positive Area Path (XI to xZero)
      let dPos = `M ${XI} ${Y_ZERO}`;
      for (let x = XI; x <= xZero; x += 1.5) {
        dPos += ` L ${x.toFixed(1)} ${getForceY(x).toFixed(1)}`;
      }
      dPos += ` L ${xZero.toFixed(1)} ${Y_ZERO} Z`;

      // Negative Area Path (xZero to XF)
      let dNeg = `M ${xZero.toFixed(1)} ${Y_ZERO}`;
      for (let x = xZero; x <= XF; x += 1.5) {
        dNeg += ` L ${x.toFixed(1)} ${getForceY(x).toFixed(1)}`;
      }
      dNeg += ` L ${XF} ${Y_ZERO} Z`;

      svg.innerHTML = `
        <defs>
          <marker id="arrow2" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#64748b"/>
          </marker>
        </defs>

        
        <line class="axis" x1="${X_MIN - 10}" y1="${Y_ZERO}" x2="${X_MAX + 15}" y2="${Y_ZERO}" marker-end="url(#arrow2)"/>
        <line class="axis" x1="${X_MIN}" y1="185" x2="${X_MIN}" y2="20" marker-end="url(#arrow2)"/>

        
        <text class="axis-label" x="${X_MAX + 12}" y="${Y_ZERO - 6}">x</text>
        <text class="axis-label" x="${X_MIN - 6}" y="22" text-anchor="end">F(x)</text>
        <text class="axis-label" x="${XI}" y="${Y_ZERO + 13}" text-anchor="middle">x<tspan dy="3" font-size="8">i</tspan></text>
        <text class="axis-label" x="${XF}" y="${Y_ZERO + 13}" text-anchor="middle">x<tspan dy="3" font-size="8">f</tspan></text>

        
        <path class="area-pos" d="${dPos}"/>
        <path class="area-neg" d="${dNeg}"/>

        
        <line class="axis-tick" stroke-dasharray="3,3" x1="${XI}" y1="${Y_ZERO}" x2="${XI}" y2="${getForceY(XI)}"/>
        <line class="axis-tick" stroke-dasharray="3,3" x1="${XF}" y1="${Y_ZERO}" x2="${XF}" y2="${getForceY(XF)}"/>

        
        <path class="force-curve" d="${buildCurveD()}"/>

        
        <g transform="translate(125, 78)">
          <rect x="-24" y="-10" width="48" height="18" rx="4" fill="#ffffff" stroke="#0284c7" stroke-width="1.2"/>
          <text class="sign-pill pill-pos" text-anchor="middle" y="2.5" font-size="11">+ Work</text>
        </g>
        <g transform="translate(230, 160)">
          <rect x="-22" y="-9" width="44" height="17" rx="4" fill="#ffffff" stroke="#dc2626" stroke-width="1.2"/>
          <text class="sign-pill pill-neg" text-anchor="middle" y="2.5" font-size="11">- Work</text>
        </g>
      `;
    }

    // Render KaTeX Math Labels
    function renderMath() {
      katex.render("\\text{Approximation: } \\Delta x \\text{ slices}", document.getElementById('title1'));
      katex.render("\\text{Exact Area under Curve}", document.getElementById('title2'));

      katex.render("W \\approx \\sum F(x)\\,\\Delta x", document.getElementById('math1'), { displayMode: false });
      katex.render("W = \\int_{x_i}^{x_f} F(x)\\,dx", document.getElementById('math2'), { displayMode: false });
    }

    renderGraph1();
    renderGraph2();
    renderMath();
  </script>
</body>
</html>

<!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="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 12px;
      align-items: stretch;
    }
    @media (max-width: 520px) {
      .grid { grid-template-columns: 1fr; }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .panel-header {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #6b7280;
      text-transform: uppercase;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tag {
      font-size: 11px;
      padding: 2px 6px;
      background: rgba(34, 183, 255, 0.12);
      color: #0284c7;
      border-radius: 4px;
      font-weight: 600;
    }
    .step-card {
      padding: 8px 10px;
      border-radius: 6px;
      border: 1px solid #f1f5f9;
      background: #f8fafc;
      margin-bottom: 6px;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .step-card:last-child { margin-bottom: 0; }
    .step-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff;
    }
    .step-num {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 2px;
    }
    .step-card.active .step-num { color: #0284c7; }
    .math-row {
      font-size: 14px;
      display: flex;
      align-items: center;
      overflow-x: auto;
    }
    .graph-container {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 200px;
      overflow: visible;
    }
    .geom-result {
      margin-top: 6px;
      padding: 6px 8px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
    }
    .geom-result.highlight {
      background: #f0f9ff;
      border-color: #22b7ff;
      border-style: solid;
      color: #0284c7;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding-top: 2px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }
    .btn:hover { background: #f8fafc; }
    .dots { display: flex; gap: 6px; }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .dot.active { background: #22b7ff; }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div class="panel-header">
        <span>Calculus Method</span>
        <span class="tag">Variable Force</span>
      </div>

      <div>
        <div class="step-card active" id="step-0" onclick="goToStep(0)">
          <div class="step-num">STEP 1 · SETUP INTEGRAL</div>
          <div class="math-row" id="eq-1"></div>
        </div>

        <div class="step-card" id="step-1" onclick="goToStep(1)">
          <div class="step-num">STEP 2 · ANTIDERIVATIVE</div>
          <div class="math-row" id="eq-2"></div>
        </div>

        <div class="step-card" id="step-2" onclick="goToStep(2)">
          <div class="step-num">STEP 3 · EVALUATE LIMITS</div>
          <div class="math-row" id="eq-3"></div>
        </div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">
        <span>Geometric Area</span>
        <span class="tag">F = 300x</span>
      </div>

      <div class="graph-container">
        <svg viewBox="0 0 240 160">
          
          <line x1="40" y1="20" x2="220" y2="20" stroke="#f1f5f9" stroke-width="1" />
          <line x1="40" y1="75" x2="220" y2="75" stroke="#f1f5f9" stroke-width="1" />
          <line x1="130" y1="20" x2="130" y2="130" stroke="#f1f5f9" stroke-width="1" />
          <line x1="200" y1="20" x2="200" y2="130" stroke="#f1f5f9" stroke-width="1" />

          
          <polygon id="areaTriangle" points="40,130 200,130 200,20" fill="rgba(34, 183, 255, 0.25)" stroke="#22b7ff" stroke-width="1.5" />

          
          <rect id="dxSlice" x="140" y="61.25" width="8" height="68.75" fill="rgba(34, 183, 255, 0.6)" stroke="#0284c7" stroke-width="1" opacity="0" />

          
          <line x1="40" y1="130" x2="215" y2="9.375" stroke="#1e2945" stroke-width="2" stroke-linecap="round" />

          
          <line x1="40" y1="130" x2="225" y2="130" stroke="#64748b" stroke-width="1.5" />
          <line x1="40" y1="130" x2="40" y2="15" stroke="#64748b" stroke-width="1.5" />

          
          <polygon points="225,128 230,130 225,132" fill="#64748b" />
          <polygon points="38,15 40,10 42,15" fill="#64748b" />

          
          <line x1="40" y1="20" x2="36" y2="20" stroke="#64748b" stroke-width="1.5" />
          <text x="32" y="24" font-size="10" font-weight="600" fill="#64748b" text-anchor="end">60</text>

          <line x1="200" y1="130" x2="200" y2="134" stroke="#64748b" stroke-width="1.5" />
          <text x="200" y="146" font-size="10" font-weight="600" fill="#64748b" text-anchor="middle">0.20</text>

          <text x="40" y="146" font-size="10" font-weight="600" fill="#64748b" text-anchor="middle">0</text>

          
          <text x="228" y="144" font-size="10" font-weight="700" fill="#1e2945">x (m)</text>
          <text x="36" y="8" font-size="10" font-weight="700" fill="#1e2945" text-anchor="middle">F (N)</text>

          
          <line x1="204" y1="22" x2="204" y2="128" stroke="#0284c7" stroke-width="1" stroke-dasharray="2,2" />
          <text x="208" y="78" font-size="10" font-weight="600" fill="#0284c7">60 N</text>

          
          <text id="areaText" x="145" y="105" font-size="11" font-weight="700" fill="#0284c7" text-anchor="middle">W = 6.0 J</text>
        </svg>

        <div class="geom-result" id="geomBox">
          <span id="geom-math"></span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" onclick="prevStep()">← Prev</button>
    <div class="dots">
      <div class="dot active" onclick="goToStep(0)"></div>
      <div class="dot" onclick="goToStep(1)"></div>
      <div class="dot" onclick="goToStep(2)"></div>
    </div>
    <button class="btn" id="nextBtn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    // KaTeX render equations
    const math1 = "W = \\int_{0}^{0.20} 300x \\, dx";
    const math2 = "= \\left[ 150x^2 \\right]_{0}^{0.20}";
    const math3 = "= 150(0.20)^2 - 0 = \\mathbf{6.0\\text{ J}}";
    const geomMath = "\\text{Area} = \\tfrac{1}{2} \\cdot (0.20\\text{ m}) \\cdot (60\\text{ N}) = \\mathbf{6.0\\text{ J}}";

    katex.render(math1, document.getElementById('eq-1'), { throwOnError: false });
    katex.render(math2, document.getElementById('eq-2'), { throwOnError: false });
    katex.render(math3, document.getElementById('eq-3'), { throwOnError: false });
    katex.render(geomMath, document.getElementById('geom-math'), { throwOnError: false });

    let currentStep = 0;
    const totalSteps = 3;

    const dxSlice = document.getElementById('dxSlice');
    const areaTriangle = document.getElementById('areaTriangle');
    const areaText = document.getElementById('areaText');
    const geomBox = document.getElementById('geomBox');

    function updateView() {
      for (let i = 0; i < totalSteps; i++) {
        document.getElementById(`step-${i}`).classList.toggle('active', i === currentStep);
        document.querySelectorAll('.dot')[i].classList.toggle('active', i === currentStep);
      }

      if (currentStep === 0) {
        // Step 1: Setup differential slice / integral bounds
        dxSlice.setAttribute('opacity', '1');
        areaTriangle.setAttribute('fill', 'rgba(34, 183, 255, 0.12)');
        areaText.textContent = '∫ F dx';
        geomBox.classList.remove('highlight');
      } else if (currentStep === 1) {
        // Step 2: Accumulating antiderivative
        dxSlice.setAttribute('opacity', '0');
        areaTriangle.setAttribute('fill', 'rgba(34, 183, 255, 0.25)');
        areaText.textContent = '[ 150x² ]';
        geomBox.classList.remove('highlight');
      } else {
        // Step 3: Total Work = Area
        dxSlice.setAttribute('opacity', '0');
        areaTriangle.setAttribute('fill', 'rgba(34, 183, 255, 0.35)');
        areaText.textContent = 'W = 6.0 J';
        geomBox.classList.add('highlight');
      }
    }

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

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

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      updateView();
    }

    // Auto cycle gently
    let timer = setInterval(nextStep, 4500);

    // Pause auto-cycle on direct user click
    document.body.addEventListener('pointerdown', () => {
      clearInterval(timer);
    }, { once: true });

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

<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 350px;
    }
    .btn-group {
      display: flex;
      gap: 4px;
    }
    .angle-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
    }
    .angle-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
    }
    input[type=range] {
      flex: 1;
      accent-color: #22b7ff;
      cursor: pointer;
    }
    .svg-container {
      width: 100%;
      max-width: 350px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .formula-card {
      width: 100%;
      max-width: 350px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 14px;
      text-align: center;
    }
    .formula-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-weight: 700;
    }
    .val-blue { color: #0284c7; }
    .val-red { color: #dc2626; }
    .legend {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      font-weight: 600;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <input type="range" id="angleSlider" min="0" max="90" value="35" />
    <div class="btn-group">
      <button class="angle-btn" onclick="setAngle(0)">0°</button>
      <button class="angle-btn active" id="btn35" onclick="setAngle(35)">35°</button>
      <button class="angle-btn" onclick="setAngle(60)">60°</button>
      <button class="angle-btn" onclick="setAngle(90)">90°</button>
    </div>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 350 200">
      <defs>
        
        <marker id="arrow-main" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#1e2945" />
        </marker>
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#0284c7" />
        </marker>
        <marker id="arrow-red" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#dc2626" />
        </marker>
        <marker id="arrow-d" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#475569" />
        </marker>
      </defs>

      
      <line x1="10" y1="150" x2="340" y2="150" stroke="#cbd5e1" stroke-width="2" />
      <pattern id="floor-hatch" width="8" height="8" patternUnits="userSpaceOnUse">
        <line x1="0" y1="8" x2="8" y2="0" stroke="#e2e8f0" stroke-width="1.5" />
      </pattern>
      <rect x="10" y="151" width="330" height="8" fill="url(#floor-hatch)" />

      
      <rect x="40" y="100" width="50" height="50" rx="3" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2" />
      <line x1="40" y1="100" x2="90" y2="150" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="40" y1="150" x2="90" y2="100" stroke="#cbd5e1" stroke-width="1.5" />

      
      <line x1="40" y1="175" x2="160" y2="175" stroke="#475569" stroke-width="2.5" marker-end="url(#arrow-d)" />
      <text x="100" y="192" fill="#475569" font-size="12" font-weight="700" text-anchor="middle">Displacement d</text>

      
      <line id="dashX" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />
      <line id="dashY" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3" />

      
      <path id="angleArc" fill="none" stroke="#22b7ff" stroke-width="2" />
      <text id="angleText" fill="#0284c7" font-size="12" font-weight="700">θ</text>

      
      <line id="vecFx" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arrow-blue)" />
      <text id="labelFx" fill="#0284c7" font-size="12" font-weight="700" text-anchor="middle">F cos θ</text>

      
      <line id="vecFy" stroke="#dc2626" stroke-width="3" marker-end="url(#arrow-red)" />
      <text id="labelFy" fill="#dc2626" font-size="12" font-weight="700" text-anchor="end">F sin θ</text>

      
      <line id="vecF" stroke="#1e2945" stroke-width="3" marker-end="url(#arrow-main)" />
      <text id="labelF" fill="#1e2945" font-size="13" font-weight="800">F</text>
    </svg>
  </div>

  
  <div class="formula-card">
    <div class="formula-row">
      <span>W = </span>
      <span class="val-blue">(F cos θ)</span>
      <span>· d</span>
      <span id="workResult" style="margin-left: 6px;">= 81.9 J</span>
    </div>
    <div class="legend">
      <span class="val-blue">● F cos θ (does work)</span>
      <span class="val-red">● F sin θ (zero work)</span>
    </div>
  </div>

  <script>
    const slider = document.getElementById('angleSlider');
    const ox = 90; // crate pull origin
    const oy = 125;
    const len = 110; // vector length

    function updateDiagram(deg) {
      const rad = (deg * Math.PI) / 180;
      const fx = len * Math.cos(rad);
      const fy = len * Math.sin(rad);

      const targetX = ox + fx;
      const targetY = oy - fy;

      // Tension vector F
      const vecF = document.getElementById('vecF');
      vecF.setAttribute('x1', ox);
      vecF.setAttribute('y1', oy);
      vecF.setAttribute('x2', targetX);
      vecF.setAttribute('y2', targetY);

      const labelF = document.getElementById('labelF');
      labelF.setAttribute('x', targetX + 6);
      labelF.setAttribute('y', targetY - 4);

      // Component Fx
      const vecFx = document.getElementById('vecFx');
      vecFx.setAttribute('x1', ox);
      vecFx.setAttribute('y1', oy);
      vecFx.setAttribute('x2', ox + fx);
      vecFx.setAttribute('y2', oy);
      vecFx.style.display = fx > 5 ? 'inline' : 'none';

      const labelFx = document.getElementById('labelFx');
      labelFx.setAttribute('x', ox + fx / 2);
      labelFx.setAttribute('y', oy + 18);
      labelFx.textContent = `F cos(${deg}°)`;
      labelFx.style.display = fx > 20 ? 'inline' : 'none';

      // Component Fy
      const vecFy = document.getElementById('vecFy');
      vecFy.setAttribute('x1', ox);
      vecFy.setAttribute('y1', oy);
      vecFy.setAttribute('x2', ox);
      vecFy.setAttribute('y2', oy - fy);
      vecFy.style.display = fy > 5 ? 'inline' : 'none';

      const labelFy = document.getElementById('labelFy');
      labelFy.setAttribute('x', ox - 8);
      labelFy.setAttribute('y', oy - fy / 2 + 4);
      labelFy.textContent = `F sin(${deg}°)`;
      labelFy.style.display = fy > 20 ? 'inline' : 'none';

      // Dashed lines
      const dashX = document.getElementById('dashX');
      dashX.setAttribute('x1', ox + fx);
      dashX.setAttribute('y1', oy);
      dashX.setAttribute('x2', targetX);
      dashX.setAttribute('y2', targetY);
      dashX.style.display = deg > 0 && deg < 90 ? 'inline' : 'none';

      const dashY = document.getElementById('dashY');
      dashY.setAttribute('x1', ox);
      dashY.setAttribute('y1', oy - fy);
      dashY.setAttribute('x2', targetX);
      dashY.setAttribute('y2', targetY);
      dashY.style.display = deg > 0 && deg < 90 ? 'inline' : 'none';

      // Angle arc
      const arc = document.getElementById('angleArc');
      const arcTxt = document.getElementById('angleText');
      if (deg > 5) {
        const r = 32;
        const ax = ox + r * Math.cos(rad);
        const ay = oy - r * Math.sin(rad);
        arc.setAttribute('d', `M ${ox + r} ${oy} A ${r} ${r} 0 0 0 ${ax} ${ay}`);
        arc.style.display = 'inline';

        const midRad = rad / 2;
        arcTxt.setAttribute('x', ox + (r + 14) * Math.cos(midRad));
        arcTxt.setAttribute('y', oy - (r + 14) * Math.sin(midRad) + 4);
        arcTxt.textContent = `${deg}°`;
        arcTxt.style.display = 'inline';
      } else {
        arc.style.display = 'none';
        arcTxt.style.display = 'none';
      }

      // Calculate sample work (F=100 N, d=1 m)
      const workVal = (100 * Math.cos(rad)).toFixed(1);
      document.getElementById('workResult').textContent = `= ${workVal} J`;
    }

    function setAngle(deg) {
      slider.value = deg;
      document.querySelectorAll('.angle-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.trim() === `${deg}°`);
      });
      updateDiagram(deg);
    }

    slider.addEventListener('input', (e) => {
      const val = parseInt(e.target.value, 10);
      document.querySelectorAll('.angle-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.trim() === `${val}°`);
      });
      updateDiagram(val);
    });

    updateDiagram(35);
  </script>
</body>
</html>

Identifying Energy Stores in GCSE Physics

Energy Transfer Pathways: Mechanical, Electrical, Heating, and Radiation

Analysing Energy Changes in Projected Objects and Slopes

Energy Changes in Vehicle Braking and Collisions

Energy Changes in Electrical Heating and Boiling Systems

Energy Transfers in Accelerating and Driven Systems

science

Energy Stores and System Changes

Evolución de los modelos atómicos

Partículas subatómicas e isótopos

Modelo cuántico y números cuánticos

Configuración electrónica y diagramas de orbitales

Organización de la tabla periódica actual

Tendencias periódicas: radio atómico e iónico

Energía de ionización y afinidad electrónica

Electronegatividad y carácter metálico

Espectros de emisión y absorción

Aplicaciones de isótopos radiactivos

Estructura atómica y tabla periódica

Pole pod wykresem jako wielkość fizyczna — droga, praca, ładunek

Praca siły stałej na odcinku prostoliniowym — definicja i iloczyn skalarny

Interpretacja geometryczna pracy dla siły stałej — wykres F(s)

Praca siły liniowo zmiennej i pole trójkąta pod wykresem F(s)

Praca siły sprężystości przy rozciąganiu sprężyny — wyprowadzenie wzoru

Obliczanie pracy z wykresów odcinkami liniowych F(s)

Praca ze znakiem ujemnym — praca sił hamujących na wykresie F(s)

Metoda przybliżona szacowania pracy dla dowolnej krzywej F(s)

Praca mechaniczna i interpretacja wykresów F(s)

Work Done by a Constant Force

Work Done When Force and Displacement Are at an Angle

Distance Moved Along the Line of Action of a Force

Work Done on Inclined Planes and Against Friction

Calculating Gravitational Potential Energy Using Ep = mgh

Equating Gravitational Potential Energy and Kinetic Energy in Falling Bodies

Energy Conservation in Rollercoasters and Pendulums

Energy Cannot Be Created or Destroyed

The Work-Energy Principle in Non-Conservative Systems

Power and Mechanical Efficiency Calculations

Work, Energy, and Conservation Principles

Calculating Kinetic Energy Using Ek = ½mv²

Calculating Elastic Potential Energy Using Ee = ½ke²

Rearranging Kinetic, Gravitational, and Elastic Energy Equations

Calculating Thermal Energy Changes Using Specific Heat Capacity

Required Practical: Investigating Specific Heat Capacity of Materials

Calculating Energy in Stores

Regla del octeto y estructuras de Lewis

Enlace iónico y redes cristalinas

Enlace covalente simple, múltiple y coordinado

Polaridad del enlace y momento dipolar

Teoría de repulsión de pares electrónicos (RPECV)

Hibridación de orbitales sp, sp2 y sp3

Enlace metálico y conductividad

Fuerzas intermoleculares: dipolo-dipolo y dispersión de London

Puentes de hidrógeno y propiedades del agua

Relación entre enlace y propiedades macroscópicas

Enlace químico y geometría molecular

Hooke's Law and Spring Combinations

Force-Extension Graphs for Materials and Polymers

Elastic Strain Energy and Spring Deformation

Calculating Work Done in Stretching from Force-Extension Graphs

Plastic Deformation and Elastic Hysteresis

Strain Energy Density and Energy Absorption

Force-Extension Graphs, Hooke's Law, and Stored Elastic Energy

Defining Momentum as the Product of Mass and Velocity

Vector Nature of Linear Momentum

Newton's Second Law in Terms of Rate of Change of Momentum

Impulse and Force-Time Graphs

The Principle of Conservation of Momentum

Perfectly Elastic Collisions in One Dimension

Inelastic Collisions and Kinetic Energy Dissipation

Explosions and Recoil in One Dimension

Multi-Body and Sequential One-Dimensional Collisions

Experimental Investigation of Momentum Conservation

Linear Momentum and One-Dimensional Collisions

Moc chwilowa a moc średnia — definicje i związek ze zmianą energii

Interpretacja pola pod wykresem zależności mocy od czasu P(t)

Obliczanie energii i pracy z wykresów P(t) o różnych kształtach

Zależność mocy od prędkości w ruchu pojazdów pod obciążeniem

Zadania maturalne z obliczania pracy z wykresów F(s) i P(t)

Podsumowanie i autoewaluacja: interpretacja pól pod wykresami w mechanice

Moc mechaniczna i analiza wykresów P(t)

Nomenclatura de óxidos e hidróxidos

Nomenclatura de ácidos y sales

Clasificación de reacciones químicas

Balanceo por tanteo y método algebraico

Balanceo de reacciones óxido-reducción

Nomenclatura inorgánica y balanceo de ecuaciones

Pojęcie sprawności mechanicznej jako stosunku pracy użytecznej do włożonej

Bilans energii w maszynach — praca użyteczna i straty na tarcie oraz ciepło

Sprawność prostych maszyn mechanicznych: dźwignia i wielokrążek

Sprawność podnośników, wind i suwnic przy ruchu pionowym ze stałą prędkością

Sprawność podnośnika w ruchu przyspieszonym — wpływ bezwładności ładunku

Sprawność wypadkowa układów połączonych szeregowo — iloczyn sprawności

Podstawy sprawności mechanicznej i układów napędowych

Electrical Power: The Rate of Energy Transfer in Circuits

Calculating Energy Transferred Using E = P × t

Comparing Appliance Power Ratings and Energy Transfers

Calculating Power from Work Done and Time

Calculating Work Done When a Current Flows

Power and Domestic Appliance Energy

Defining Radian Measure

Angular Displacement, Period, and Angular Velocity

Angular Velocity and Linear Speed in Circular Motion

Uniform Circular Motion: Constant Speed, Changing Velocity

Centripetal Acceleration: Equations and Derivations

Centripetal Force as a Resultant Force

Horizontal Circular Motion: Friction and Conical Pendulums

Banked Tracks and Cornering Dynamics

Vertical Circular Motion and Critical Speed

Circular Orbits and Gravitational Centripetal Forces

Uniform Circular Motion and Centripetal Dynamics

Sprawność pomp hydraulicznych i turbin wodnych

Sprawność pojazdów samochodowych — bilans mocy silnika i oporów ruchu

Wpływ temperatury i smarowania na sprawność węzłów tarcia

Maksymalna moc użyteczna a straty mocy w układach mechanicznych

Obliczenia inżynierskie sprawności w zadaniach ze zmiennym obciążeniem

Zadania maturalne ze sprawności urządzeń mechanicznych

Podsumowanie i projekt badawczy: bilans energetyczny wybranego urządzenia

Bilans mocy i sprawność w złożonych układach inżynierskich

Isolated Systems: When Total Energy Stays Constant

Energy Dissipation and Wasted Thermal Energy

Calculating Efficiency and Reducing Unwanted Energy Transfers

Drawing and Interpreting Sankey Diagrams

Methods of Increasing Energy Efficiency in Machines and Buildings

Conservation, Dissipation, and Efficiency

Teoría cinético-molecular de los gases

Leyes de Boyle, Charles y Gay-Lussac

Ley combinada y ecuación del gas ideal

Mezclas gaseosas y ley de Dalton

Componentes y tipos de disoluciones

Unidades físicas de concentración

Molaridad, molalidad y fracción molar

Dilución y mezcla de disoluciones

Estequiometría en disolución acuosa

Propiedades coligativas de las disoluciones

Sistemas coloidales y suspensiones

Gases y disoluciones

Work Done by Constant and Angled Forces: W = F s cos(θ)

Work Done from Force-Displacement Graphs: Area Analysis

Kinetic Energy Derivation and the Work-Energy Principle

Gravitational Potential Energy in Uniform Fields: ΔEp = mgΔh

Conservation of Mechanical Energy with Dissipative Forces

Mechanical Power and the Relationship P = Fv

Efficiency Calculations in Mechanical and Transport Systems

Work, Energy, and Power in Mechanical Systems

Praca mechaniczna jako iloczyn skalarny siły i przemieszczenia: W = F · s · cos(α)

Praca sił prostopadłych do toru — dlaczego siła dośrodkowa nie wykonuje pracy

Graficzna interpretacja pracy — pole pod wykresem siły F(s)

Praca siły sprężystości podczas naciągania sprężyny: W = ½ · k · x²

Pojęcie mocy jako szybkości wykonywania pracy

Związek mocy z siłą i prędkością w ruchu jednostajnym: P = F·v

Zestaw zadań maturalnych z pracy mechanicznej i mocy

Praca mechaniczna i moc w układach fizycznych

Sistemas termodinámicos y primera ley

Entalpía y reacciones endotérmicas y exotérmicas

Ley de Hess y entalpías de formación

Entropía y segunda ley de la termodinámica

Energía libre de Gibbs y espontaneidad

Velocidad de reacción y teoría de colisiones

Factores que afectan la cinética química

Concepto de equilibrio químico y constante Kc

Cociente de reacción y predicción del equilibrio

Principio de Le Chatelier

Equilibrio de solubilidad y producto Kps

Termodinámica y equilibrio químico

Energia kinetyczna ciała w ruchu postępowym: E_k = ½ · m · v²

Praca wypadkowa a twierdzenie o pracy i energii kinetycznej: W_wyp = ΔE_k

Energia potencjalna ciężkości w jednorodnym polu: E_p = m · g · h

Energia potencjalna sprężystości: E_p = ½ · k · x²

Siły zachowawcze i niezachowawcze — pojęcie pola potencjalnego

Praca siły tarcia jako przykład siły niezachowawczej (dysypatywnej)

Wykresy energii kinetycznej, potencjalnej i całkowitej w funkcji położenia i czasu

Energia mechaniczna i twierdzenie o pracy

Tarcie statyczne na równi — warunek spoczynku i kąt zsypu

Tarcie kinetyczne na równi — wzór na siłę tarcia T = μ mg cos(α)

Przyspieszenie zsuwania się ciała z tarciem: a = g(sin α − μ cos α)

Prędkość końcowa i czas zsuwania z uwzględnieniem tarcia

Bilans energii mechanicznej z pracą siły tarcia na równi

Ruch ciała pchniętego w górę równi szorstkiej — opóźnienie a = g(sin α + μ cos α)

Asymetria czasów i prędkości ruchu w górę i w dół na równi z tarciem

Wciąganie ciała po równi z tarciem siłą ciągu — ze stałą prędkością i z przyspieszeniem

OGS.12.PS1.7

Aligned learning resources

Related diagrams