<!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>Forces and Motion</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;
      gap: 12px;
    }

    /* Top outcome label banner */
    .status-card {
      width: 100%;
      max-width: 520px;
      min-height: 48px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    /* Track stage area */
    .stage {
      width: 100%;
      max-width: 520px;
      height: 190px;
      background: #f1f5f9;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* Road floor */
    .road {
      width: 100%;
      height: 70px;
      background: #334155;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .road-line {
      position: absolute;
      width: 200%;
      height: 4px;
      top: 50%;
      transform: translateY(-50%);
      background: repeating-linear-gradient(
        90deg,
        #f8fafc 0px,
        #f8fafc 24px,
        transparent 24px,
        transparent 48px
      );
      animation: roadScroll 1.2s linear infinite;
    }

    @keyframes roadScroll {
      0% { transform: translate(0, -50%); }
      100% { transform: translate(-48px, -50%); }
    }

    .stage.stopped .road-line {
      animation-play-state: paused;
    }

    .stage.fast .road-line {
      animation-duration: 0.35s;
    }

    /* Car assembly */
    .car-wrapper {
      position: absolute;
      bottom: 24px;
      left: 36%;
      width: 120px;
      height: 60px;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), left 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
      z-index: 5;
    }

    .car-body {
      width: 100%;
      height: 100%;
      position: relative;
    }

    /* Force visualizers */
    .force-push {
      position: absolute;
      left: -54px;
      top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      opacity: 0;
      transform: translateX(-10px) scale(0.9);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .force-oppose {
      position: absolute;
      right: -52px;
      top: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      opacity: 0;
      transform: translateX(10px) scale(0.9);
      transition: all 0.3s ease;
      pointer-events: none;
    }

    .force-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 1px 5px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .force-push .force-label {
      background: #dcfce7;
      color: #15803d;
    }

    .force-oppose .force-label {
      background: #fee2e2;
      color: #b91c1c;
    }

    /* Speed effect lines behind car */
    .speed-lines {
      position: absolute;
      left: -40px;
      top: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }

    .speed-line {
      height: 3px;
      background: #22c55e;
      border-radius: 2px;
      animation: speedPulse 0.3s linear infinite alternate;
    }
    .speed-line:nth-child(1) { width: 28px; }
    .speed-line:nth-child(2) { width: 38px; }
    .speed-line:nth-child(3) { width: 22px; }

    @keyframes speedPulse {
      0% { opacity: 0.4; transform: scaleX(0.7); }
      100% { opacity: 1; transform: scaleX(1.1); }
    }

    /* Squeak / Skid marks & icon */
    .squeak-indicator {
      position: absolute;
      top: -24px;
      right: 10px;
      background: #fef08a;
      border: 1px solid #ca8a04;
      color: #854d0e;
      font-size: 12px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.25s ease;
    }

    /* Active states */
    .mode-fast .force-push {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    .mode-fast .speed-lines {
      opacity: 1;
    }
    .mode-fast .car-wrapper {
      transform: translateX(65px);
    }

    .mode-stop .force-oppose {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    .mode-stop .squeak-indicator {
      opacity: 1;
      transform: scale(1);
    }
    .mode-stop .car-wrapper {
      transform: translateX(-15px);
    }

    /* Control buttons */
    .controls {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .btn {
      flex: 1 1 140px;
      min-height: 44px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      border: 1.5px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      background: #f8fafc;
      color: #1e2945;
      border-color: #cbd5e1;
    }

    .btn:active {
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn-green.active {
      background: #16a34a;
      color: #ffffff;
      border-color: #15803d;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    }

    .btn-red.active {
      background: #dc2626;
      color: #ffffff;
      border-color: #b91c1c;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
    }

    .btn-reset {
      flex: 0 0 auto;
      min-width: 44px;
      padding: 10px 14px;
      background: #f1f5f9;
      color: #64748b;
      border-color: #cbd5e1;
    }
    .btn-reset.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0369a1;
    }
  </style>
</head>
<body>

  
  <div id="statusLabel" class="status-card">
    Car is rolling at a normal speed.
  </div>

  
  <div id="stage" class="stage">
    <div id="carWrapper" class="car-wrapper">
      
      
      <div class="force-push">
        <svg width="42" height="24" viewBox="0 0 42 24" fill="none">
          <path d="M4 12H32M32 12L22 4M32 12L22 20" stroke="#16a34a" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="force-label">Push</span>
      </div>

      
      <div class="speed-lines">
        <div class="speed-line"></div>
        <div class="speed-line"></div>
        <div class="speed-line"></div>
      </div>

      
      <div class="squeak-indicator">SKID! 🛑</div>

      
      <svg class="car-body" viewBox="0 0 120 60" fill="none">
        
        <rect x="8" y="24" width="104" height="22" rx="7" fill="#ef4444"/>
        
        <path d="M28 24L42 8H80L94 24H28Z" fill="#dc2626"/>
        
        <polygon points="44,11 60,11 60,22 34,22" fill="#bae6fd"/>
        <polygon points="65,11 78,11 88,22 65,22" fill="#bae6fd"/>
        
        <path d="M110 28H113V34H110C108.5 34 108.5 28 110 28Z" fill="#fef08a"/>
        
        <circle cx="32" cy="46" r="11" fill="#1e293b"/>
        <circle cx="32" cy="46" r="5" fill="#94a3b8"/>
        <circle cx="88" cy="46" r="11" fill="#1e293b"/>
        <circle cx="88" cy="46" r="5" fill="#94a3b8"/>
      </svg>

      
      <div class="force-oppose">
        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
          
          <circle cx="18" cy="18" r="16" fill="#fee2e2" stroke="#dc2626" stroke-width="2"/>
          <path d="M12 18H24M12 18L17 13M12 18L17 23" stroke="#dc2626" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="force-label">Block</span>
      </div>

    </div>

    
    <div class="road">
      <div class="road-line"></div>
    </div>
  </div>

  
  <div class="controls">
    <button id="btnBehind" class="btn btn-green" onclick="applyForce('fast')">
      <span>🟢</span> Push Behind (Speed Up)
    </button>
    <button id="btnFront" class="btn btn-red" onclick="applyForce('stop')">
      <span>🛑</span> Push Front (Stop)
    </button>
    <button id="btnReset" class="btn btn-reset active" onclick="applyForce('normal')" title="Reset">
      <span>↺</span> Normal
    </button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const statusLabel = document.getElementById('statusLabel');
    const btnBehind = document.getElementById('btnBehind');
    const btnFront = document.getElementById('btnFront');
    const btnReset = document.getElementById('btnReset');

    function applyForce(mode) {
      // Reset classes
      stage.classList.remove('mode-fast', 'mode-stop', 'fast', 'stopped');
      btnBehind.classList.remove('active');
      btnFront.classList.remove('active');
      btnReset.classList.remove('active');

      if (mode === 'fast') {
        stage.classList.add('mode-fast', 'fast');
        btnBehind.classList.add('active');
        statusLabel.textContent = "Force in same direction: SPEEDS UP!";
        statusLabel.style.borderColor = "#86efac";
        statusLabel.style.backgroundColor = "#f0fdf4";
        statusLabel.style.color = "#15803d";
      } else if (mode === 'stop') {
        stage.classList.add('mode-stop', 'stopped');
        btnFront.classList.add('active');
        statusLabel.textContent = "Force against motion: SLOWS & STOPS!";
        statusLabel.style.borderColor = "#fca5a5";
        statusLabel.style.backgroundColor = "#fef2f2";
        statusLabel.style.color = "#b91c1c";
      } else {
        btnReset.classList.add('active');
        statusLabel.textContent = "Car is rolling at a steady speed.";
        statusLabel.style.borderColor = "#e2e8f0";
        statusLabel.style.backgroundColor = "#f8fafc";
        statusLabel.style.color = "#1e2945";
      }
    }
  </script>
</body>
</html>

Starting, Stopping, and Changing Direction with 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">
  <script src="{{VENDOR_CDN}}/gsap.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 10px;
    }
    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <div class="diagram-area">
    <svg viewBox="0 0 400 300">
      <defs>
        
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" 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-gray" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#94a3b8" />
        </marker>
        <marker id="arrow-cyan" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 1 L 10 5 L 0 9 z" fill="#0284c7" />
        </marker>
      </defs>

      
      <line x1="50" y1="160" x2="350" y2="160" stroke="#f1f5f9" stroke-width="2" />
      <line x1="200" y1="30" x2="200" y2="270" stroke="#f1f5f9" stroke-width="2" />

      
      <line x1="200" y1="270" x2="200" y2="160" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="5 4" />

      
      <line x1="200" y1="160" x2="200" y2="40" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4 4" marker-end="url(#arrow-gray)" />
      <text x="195" y="32" font-size="12" fill="#94a3b8" font-weight="600" text-anchor="end">Original Path</text>

      
      <line x1="200" y1="160" x2="330" y2="55" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="5 4" marker-end="url(#arrow-cyan)" />
      <text x="335" y="48" font-size="13" fill="#0284c7" font-weight="700" text-anchor="end">New Path</text>

      
      <g id="forceGroup" opacity="0">
        <line x1="100" y1="160" x2="182" y2="160" stroke="#0284c7" stroke-width="3.5" marker-end="url(#arrow-blue)" />
        <rect x="80" y="128" width="105" height="22" rx="4" fill="#e0f2fe" />
        <text x="132.5" y="143" font-size="12" fill="#0369a1" font-weight="700" text-anchor="middle">Sideways Push</text>
      </g>

      
      <g id="hockeyStick" transform="translate(100, 160)">
        <path d="M -50 -12 L 0 0 L -8 18" stroke="#b45309" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none" />
        <path d="M -5 -6 L 0 0 L -6 14" stroke="#d97706" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none" />
      </g>

      
      <g id="impactRing" transform="translate(200, 160)" opacity="0">
        <circle r="16" fill="none" stroke="#38bdf8" stroke-width="2.5" />
      </g>

      
      <g id="puck" transform="translate(200, 270)">
        <circle r="14" fill="#0f172a" stroke="#475569" stroke-width="2" />
        <ellipse cx="-4" cy="-4" rx="4" ry="2.5" fill="#94a3b8" opacity="0.6" />
      </g>
    </svg>
  </div>

  <div class="controls">
    <button id="replayBtn" class="btn">↺ Replay</button>
  </div>

  <script>
    const tl = gsap.timeline({ repeat: -1, repeatDelay: 1.5 });

    function initAnimation() {
      tl.clear();
      
      // Step 1: Puck glides straight up to center
      tl.set("#puck", { x: 200, y: 270 })
        .set("#hockeyStick", { x: 130, y: 160, opacity: 0.4 })
        .set("#forceGroup", { opacity: 0, x: -10 })
        .set("#impactRing", { opacity: 0, scale: 0.5 })
        .to("#puck", {
          x: 200,
          y: 160,
          duration: 1.3,
          ease: "none"
        })
        
        // Step 2: Stick taps puck & Sideways Push force appears
        .to("#hockeyStick", {
          x: 184,
          opacity: 1,
          duration: 0.25,
          ease: "power2.out"
        }, "-=0.1")
        .to("#forceGroup", {
          opacity: 1,
          x: 0,
          duration: 0.2,
          ease: "back.out(1.5)"
        }, "<")
        .to("#impactRing", {
          opacity: 1,
          scale: 1.4,
          duration: 0.3,
          ease: "power1.out"
        }, "<")
        .to("#impactRing", {
          opacity: 0,
          duration: 0.2
        })

        // Step 3: Stick pulls back slightly
        .to("#hockeyStick", {
          x: 150,
          opacity: 0.5,
          duration: 0.4,
          ease: "power1.inOut"
        })

        // Step 4: Puck veers diagonally right along new path
        .to("#puck", {
          x: 330,
          y: 55,
          duration: 1.3,
          ease: "power1.out"
        }, "-=0.3")
        .to("#forceGroup", {
          opacity: 0.3,
          duration: 0.6
        }, "-=1.0");
    }

    initAnimation();

    document.getElementById("replayBtn").addEventListener("click", () => {
      tl.restart();
    });
  </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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
    }
    .widget {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    /* Status Badge */
    .status-bar {
      display: flex;
      justify-content: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      background: #e2e8f0;
      color: #475569;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }
    .badge.active {
      background: #fef08a;
      color: #854d0e;
      box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
    }
    /* Field Stage */
    .stage {
      position: relative;
      width: 100%;
      height: 240px;
      background: linear-gradient(to bottom, #e0f2fe 0%, #e0f2fe 65%, #86efac 65%, #4ade80 100%);
      border-radius: 16px;
      overflow: hidden;
      border: 2px solid #cbd5e1;
    }
    /* Grass details */
    .ground-line {
      position: absolute;
      top: 65%;
      left: 0;
      right: 0;
      height: 3px;
      background: #22c55e;
    }
    /* Foot/Shoe */
    .shoe-wrap {
      position: absolute;
      left: 6%;
      top: 48%;
      transform-origin: 30% 10%;
      font-size: 54px;
      line-height: 1;
      transform: scaleX(-1) rotate(0deg);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 5;
      pointer-events: none;
    }
    .shoe-wrap.windup {
      transform: scaleX(-1) translate(-18px, -15px) rotate(35deg);
    }
    .shoe-wrap.kick {
      transform: scaleX(-1) translate(28px, 6px) rotate(-20deg);
    }
    .shoe-wrap.recoil {
      transform: scaleX(-1) translate(0px, 0px) rotate(0deg);
      transition: transform 0.5s ease-out;
    }
    /* Push Force Arrow */
    .force-arrow {
      position: absolute;
      left: 21%;
      top: 43%;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transform: scale(0.6) translateX(-10px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 4;
      pointer-events: none;
    }
    .force-arrow.visible {
      opacity: 1;
      transform: scale(1) translateX(0);
    }
    .arrow-tag {
      background: #facc15;
      color: #713f12;
      font-size: 13px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      white-space: nowrap;
      margin-bottom: 2px;
      letter-spacing: 0.2px;
    }
    .arrow-svg {
      width: 70px;
      height: 24px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }
    /* Soccer Ball */
    .ball {
      position: absolute;
      left: 20%;
      top: 51%;
      font-size: 46px;
      line-height: 1;
      transform: translateX(0) rotate(0deg);
      transition: none;
      z-index: 6;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
    }
    .ball.rolling {
      left: 82%;
      transform: rotate(720deg);
      transition: left 1.3s cubic-bezier(0.2, 0.8, 0.4, 1), transform 1.3s cubic-bezier(0.2, 0.8, 0.4, 1);
    }
    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 12px;
    }
    .btn {
      appearance: none;
      border: none;
      outline: none;
      cursor: pointer;
      font-size: 15px;
      font-weight: 700;
      padding: 10px 22px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-primary {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
    }
    .btn-primary:active {
      opacity: 0.85;
    }
    .btn-secondary {
      background: #e2e8f0;
      color: #334155;
    }
    .btn-secondary:active {
      opacity: 0.85;
    }
    .btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }
  </style>
</head>
<body>

  <div class="widget">
    
    <div class="status-bar">
      <div id="statusBadge" class="badge">
        <span>⚪</span> No Force = Still
      </div>
    </div>

    
    <div class="stage">
      <div class="ground-line"></div>

      
      <div id="shoe" class="shoe-wrap">👟</div>

      
      <div id="arrow" class="force-arrow">
        <span class="arrow-tag">Push Force</span>
        <svg class="arrow-svg" viewBox="0 0 70 24" fill="none">
          <path d="M0 12H54M54 12L42 4M54 12L42 20" stroke="#facc15" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>

      
      <div id="ball" class="ball">⚽</div>
    </div>

    
    <div class="controls">
      <button id="kickBtn" class="btn btn-primary" onclick="kickBall()">
        Kick Ball! 👟
      </button>
      <button id="resetBtn" class="btn btn-secondary" onclick="resetBall()" disabled>
        Reset ↺
      </button>
    </div>
  </div>

  <script>
    const shoe = document.getElementById('shoe');
    const ball = document.getElementById('ball');
    const arrow = document.getElementById('arrow');
    const badge = document.getElementById('statusBadge');
    const kickBtn = document.getElementById('kickBtn');
    const resetBtn = document.getElementById('resetBtn');

    let isAnimating = false;

    function playTone(freq, type = 'sine', duration = 0.15) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
        osc.start();
        osc.stop(ctx.currentTime + duration);
      } catch (e) {}
    }

    function kickBall() {
      if (isAnimating) return;
      isAnimating = true;
      kickBtn.disabled = true;

      // 1. Wind up leg
      shoe.className = 'shoe-wrap windup';

      setTimeout(() => {
        // 2. Swing forward and impact
        shoe.className = 'shoe-wrap kick';
        playTone(180, 'triangle', 0.12);

        setTimeout(() => {
          // 3. Show Push Force & roll ball
          arrow.classList.add('visible');
          ball.classList.add('rolling');
          badge.className = 'badge active';
          badge.innerHTML = '<span>⚡</span> Push Force = Motion';

          // 4. Return foot
          setTimeout(() => {
            shoe.className = 'shoe-wrap recoil';
          }, 200);

          // 5. Hide arrow smoothly after initial impulse
          setTimeout(() => {
            arrow.classList.remove('visible');
          }, 800);

          // 6. Finish roll & enable reset
          setTimeout(() => {
            isAnimating = false;
            resetBtn.disabled = false;
          }, 1300);

        }, 150);
      }, 250);
    }

    function resetBall() {
      if (isAnimating) return;
      
      shoe.className = 'shoe-wrap';
      arrow.classList.remove('visible');
      ball.className = 'ball';
      
      badge.className = 'badge';
      badge.innerHTML = '<span>⚪</span> No Force = Still';

      kickBtn.disabled = false;
      resetBtn.disabled = true;
    }
  </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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
      user-select: none;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    .panel {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .panel:hover {
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.08);
    }

    .panel.p-start { border-color: #22c55e33; }
    .panel.p-speed { border-color: #22b7ff33; }
    .panel.p-stop { border-color: #ef444433; }
    .panel.p-turn { border-color: #f59e0b33; }

    .panel.active.p-start { border-color: #22c55e; box-shadow: 0 0 0 2px #22c55e22; }
    .panel.active.p-speed { border-color: #22b7ff; box-shadow: 0 0 0 2px #22b7ff22; }
    .panel.active.p-stop { border-color: #ef4444; box-shadow: 0 0 0 2px #ef444422; }
    .panel.active.p-turn { border-color: #f59e0b; box-shadow: 0 0 0 2px #f59e0b22; }

    .label-badge {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.2px;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .p-start .label-badge { background: #dcfce7; color: #15803d; }
    .p-speed .label-badge { background: #e0f2fe; color: #0369a1; }
    .p-stop .label-badge { background: #fee2e2; color: #b91c1c; }
    .p-turn .label-badge { background: #fef3c7; color: #b45309; }

    .scene-box {
      width: 100%;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Animated elements */
    .foot-kick {
      transform-origin: 30px 40px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .panel.active .foot-kick {
      transform: rotate(-16deg) translate(6px, -2px);
    }

    .ball-start {
      transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .panel.active .ball-start {
      transform: translateX(45px);
    }

    .wagon-group {
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .panel.active .wagon-group {
      transform: translateX(32px);
    }

    .hand-push {
      transition: transform 0.4s ease;
    }
    .panel.active .hand-push {
      transform: translateX(12px);
    }

    .ball-incoming {
      transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    .panel.active .ball-incoming {
      transform: translateX(38px);
    }

    .ball-deflect {
      transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
    .panel.active .ball-deflect {
      transform: translate(22px, -36px);
    }

    .racket-swing {
      transform-origin: 130px 75px;
      transition: transform 0.3s ease;
    }
    .panel.active .racket-swing {
      transform: rotate(-15deg);
    }

    .arrow-pulse {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .panel.active .arrow-pulse {
      opacity: 1;
    }

    @media (max-width: 400px) {
      .scene-box {
        height: 95px;
      }
      .label-badge {
        font-size: 13px;
        padding: 3px 8px;
      }
      .grid {
        gap: 8px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel p-start active" id="p1">
      <div class="label-badge">Start</div>
      <div class="scene-box">
        <svg viewBox="0 0 200 110">
          <line x1="15" y1="92" x2="185" y2="92" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>
          
          
          <g class="foot-kick">
            <path d="M 25,25 L 38,58 L 68,68 C 73,70 73,78 68,82 L 32,82 C 24,82 20,76 20,68 L 15,30 Z" fill="#22c55e" stroke="#16a34a" stroke-width="2" stroke-linejoin="round"/>
            <path d="M 32,82 L 68,82 C 72,82 72,88 68,88 L 32,88 Z" fill="#1e2945"/>
            
            <path d="M 45,55 L 75,55 M 68,48 L 76,55 L 68,62" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </g>

          
          <g class="ball-start" transform="translate(85, 70)">
            <circle cx="0" cy="0" r="16" fill="#ffffff" stroke="#1e2945" stroke-width="2.5"/>
            <polygon points="0,-7 6,-2 4,6 -4,6 -6,-2" fill="#1e2945"/>
            <line x1="0" y1="-7" x2="0" y2="-16" stroke="#1e2945" stroke-width="1.5"/>
            <line x1="6" y1="-2" x2="14" y2="-6" stroke="#1e2945" stroke-width="1.5"/>
            <line x1="4" y1="6" x2="10" y2="12" stroke="#1e2945" stroke-width="1.5"/>
            <line x1="-4" y1="6" x2="-10" y2="12" stroke="#1e2945" stroke-width="1.5"/>
            <line x1="-6" y1="-2" x2="-14" y2="-6" stroke="#1e2945" stroke-width="1.5"/>
          </g>

          
          <g class="arrow-pulse" opacity="0.6">
            <line x1="125" y1="70" x2="165" y2="70" stroke="#22c55e" stroke-width="3" stroke-dasharray="4,4"/>
            <polyline points="160,63 168,70 160,77" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="panel p-speed" id="p2">
      <div class="label-badge">Speed Up</div>
      <div class="scene-box">
        <svg viewBox="0 0 200 110">
          <line x1="15" y1="92" x2="185" y2="92" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>

          
          <g class="hand-push">
            <path d="M 15,52 C 25,52 35,50 48,54 C 52,56 54,62 50,65 L 45,66 C 50,67 52,72 48,74 L 43,75 C 47,77 48,81 44,83 L 32,83 L 15,74 Z" fill="#ffd199" stroke="#ea580c" stroke-width="1.5"/>
            <path d="M 28,45 L 48,50" stroke="#22b7ff" stroke-width="3" stroke-linecap="round"/>
            <path d="M 20,70 L 40,70 M 35,64 L 42,70 L 35,76" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </g>

          
          <g class="wagon-group" transform="translate(65, 0)">
            <rect x="0" y="46" width="56" height="28" rx="4" fill="#22b7ff" stroke="#0284c7" stroke-width="2"/>
            <line x1="56" y1="58" x2="72" y2="48" stroke="#0284c7" stroke-width="3" stroke-linecap="round"/>
            <circle cx="14" cy="80" r="8" fill="#1e2945"/>
            <circle cx="14" cy="80" r="3" fill="#ffffff"/>
            <circle cx="42" cy="80" r="8" fill="#1e2945"/>
            <circle cx="42" cy="80" r="3" fill="#ffffff"/>
            
            <path d="M -12,54 L -4,54 M -18,62 L -6,62 M -10,70 L -2,70" stroke="#22b7ff" stroke-width="2.5" stroke-linecap="round"/>
          </g>

          <g class="arrow-pulse" opacity="0.8">
            <path d="M 140,56 L 155,56 M 150,50 L 157,56 L 150,62" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M 158,56 L 173,56 M 168,50 L 175,56 L 168,62" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="panel p-stop" id="p3">
      <div class="label-badge">Stop</div>
      <div class="scene-box">
        <svg viewBox="0 0 200 110">
          <line x1="15" y1="92" x2="185" y2="92" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>

          
          <g class="ball-incoming" transform="translate(42, 68)">
            <circle cx="0" cy="0" r="16" fill="#ffffff" stroke="#1e2945" stroke-width="2.5"/>
            <polygon points="0,-7 6,-2 4,6 -4,6 -6,-2" fill="#ef4444"/>
            
            <line x1="-26" y1="-5" x2="-18" y2="-5" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/>
            <line x1="-30" y1="2" x2="-20" y2="2" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/>
            <line x1="-24" y1="9" x2="-16" y2="9" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/>
          </g>

          
          <g transform="translate(125, 45)">
            
            <path d="M 0,0 L 0,46" stroke="#ef4444" stroke-width="4" stroke-linecap="round"/>
            <path d="M 6,5 C 16,5 24,12 24,23 C 24,34 16,41 6,41" fill="#fee2e2" stroke="#ef4444" stroke-width="2.5"/>
            <path d="M 6,10 L 16,14 M 6,19 L 18,21 M 6,28 L 18,28 M 6,36 L 15,34" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
            
            
            <path d="M -8,12 L -14,8 M -8,34 L -14,38 M -6,23 L -14,23" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round"/>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="panel p-turn" id="p4">
      <div class="label-badge">Change Direction</div>
      <div class="scene-box">
        <svg viewBox="0 0 200 110">
          <line x1="15" y1="92" x2="185" y2="92" stroke="#cbd5e1" stroke-width="3" stroke-linecap="round"/>

          
          <path d="M 35,74 Q 95,74 102,40" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="4,4"/>
          <polyline points="96,44 102,36 109,42" fill="none" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

          
          <g class="ball-deflect" transform="translate(70, 72)">
            <circle cx="0" cy="0" r="14" fill="#fef08a" stroke="#ca8a04" stroke-width="2"/>
            <path d="M -10,-6 C -2,-4 -2,4 -10,6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
            <path d="M 10,-6 C 2,-4 2,4 10,6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
          </g>

          
          <g class="racket-swing">
            <g transform="translate(108, 48) rotate(-25)">
              
              <rect x="36" y="-3" width="34" height="6" rx="2" fill="#1e2945"/>
              
              <ellipse cx="16" cy="0" rx="22" ry="16" fill="none" stroke="#f59e0b" stroke-width="4"/>
              
              <line x1="4" y1="-10" x2="28" y2="10" stroke="#fde047" stroke-width="1.5"/>
              <line x1="4" y1="10" x2="28" y2="-10" stroke="#fde047" stroke-width="1.5"/>
              <line x1="16" y1="-15" x2="16" y2="15" stroke="#fde047" stroke-width="1.5"/>
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>

  <script>
    const panels = document.querySelectorAll('.panel');
    let currentIndex = 0;
    let timer = null;

    function activate(index) {
      panels.forEach((p, i) => {
        if (i === index) {
          p.classList.add('active');
        } else {
          p.classList.remove('active');
        }
      });
      currentIndex = index;
    }

    function nextStep() {
      const next = (currentIndex + 1) % panels.length;
      activate(next);
    }

    panels.forEach((panel, i) => {
      panel.addEventListener('click', () => {
        clearInterval(timer);
        activate(i);
        timer = setInterval(nextStep, 3200);
      });
    });

    // Auto-cycle gently
    timer = setInterval(nextStep, 3200);
  </script>
</body>
</html>

Air Takes Up Space and Has Volume

Proving Air Has Weight and Mass

Feeling Air Pressure and Wind Resistance

Water Takes the Shape of Its Container

Exploring Water Surface Tension and Droplets

Solid Ice, Liquid Water, and Invisible Vapor

Floating and Upward Water Force

science

Investigating Air and Water

Identifying Parts of Everyday Objects

How Parts Work Together as a System

Disassembling and Assembling Block Structures

Reconfiguring a Set of Pieces into New Designs

Simple Machines as Useful System Parts

Twisting Materials to Change Their Shape

Building Systems and Reconfigurable Objects

What Is a Force? Push and Pull in Everyday Life

Strong and Gentle Forces

Direction of Pushes and Pulls

How Forces Make Things Move

How Forces Change Shape

Gravity Pulls Objects Toward Earth

Pushes and Pulls in the Playground

Pushes and Pulls

Using Magnets in Scientific Investigations

Magnets Push and Pull at a Distance

Increasing and Reducing Friction in Daily Life

Predicting How Forces Affect Objects

Finding Patterns in Force and Motion Data

Investigating Forces: Magnets and Friction

What Are Pushes and Pulls?

How Pushes and Pulls Start Things Moving

How Pushes and Pulls Stop Things

How Pushes and Pulls Change How Fast Things Go

How Pushes and Pulls Change Direction

Big Push, Big Change: Small Push, Small Change

Predicting What a Push or Pull Will Do

Planning Our Push and Pull Investigation

Doing Our Push and Pull Investigation

Sharing What We Learned About Pushes and Pulls

Pushes and Pulls Change Motion

Big Pushes Versus Small Pushes: Force and Speed

Investigating Friction Across Different Surfaces

Reducing and Increasing Friction: Rollers and Treads

Gravity: The Downward Pull on All Objects

Air Resistance: Parachutes and Falling Shapes

Changing Object Shapes with Squashing and Stretching

Pushes, Pulls, and Forces in Motion

Ruch, względność ruchu, droga i czas

Pojęcie układu odniesienia i ciała odniesienia

Względność spoczynku i ruchu w przykładach z życia

Punkt materialny jako model ciała w fizyce

Tor ruchu — linie proste i krzywe

Względność toru ruchu w zależności od obserwatora

Względność ruchu i układ odniesienia

Droga jako długość toru ruchu i jej jednostki

Różnica między drogą a przemieszczeniem

Pomiary drogi w laboratorium i na mapie

Przeliczanie jednostek drogi w zadaniach fizycznych

Analiza złożonych torów ruchu — ruchy obrotowe i postępowe

Studium przypadku — opis ruchu pojazdów w różnych układach odniesienia

Droga, przemieszczenie i rodzaje ruchu

选择参照物：判断物体的运动与静止状态

用方向和距离准确描述物体在空间中的位置

运动路线的分类：直线运动与曲线运动

丰富多样的运动形式：平移、转动、滚动与摆动

运用皮尺与秒表定量测量运动距离与经过时间

比较物体运动快慢：相同距离比时间与相同时间比距离

速度的初步概念与简单计算（速度=距离÷时间）

综合实践：设计过山车轨道并测量小球运动速度

物体运动状态、路径分类与速度测量

Jednostki czasu – doba, godzina, minuta, sekunda

Chwila czasu a przedział czasu Δt

Pomiary czasu — stoper ręczny, bramki fotooptyczne i czujniki ruchu

Przeliczanie godzin i minut na sekundy

Przeliczanie sekund na minuty i godziny — ułamki dziesiętne i zwykłe

Podwielokrotności sekundy — milisekundy i mikrosekundy

Obliczanie czasu trwania podróży z rozkładów jazdy

Czas reakcji kierowcy jako parametr bezpieczeństwa ruchu

Zaokrąglanie i szacowanie przedziałów czasu w obliczeniach

Trening płynności przeliczania jednostek czasu w zadaniach

Czas i jednostki czasu w kinematyce

¿Qué es una fuerza?: empujar y jalar objetos

Fuerzas de contacto y fuerzas a distancia

Iniciar, detener y cambiar la dirección del movimiento

Fuerzas fuertes y débiles: rapidez y distancia recorrida

Cambiar la forma de los objetos: aplastar, estirar y torcer

La gravedad: la fuerza que hace caer las cosas al suelo

La fricción: cómo frena el movimiento el suelo rugoso

Fuerzas y sus efectos en los objetos

Opis ruchu prostoliniowego — prędkość i przyspieszenie

Pojęcie prędkości jako ilorazu drogi i czasu

Jednostka prędkości w układzie SI — metr na sekundę (m/s)

Praktyczna jednostka prędkości — kilometr na godzinę (km/h)

Wyprowadzenie przelicznika między m/s a km/h — reguła 3,6

Przeliczanie prędkości z km/h na m/s w praktyce

Przeliczanie prędkości z m/s na km/h w praktyce

Wprowadzenie do prędkości i przeliczanie jednostek (m/s i km/h)

Prędkość chwilowa a prędkość średnia

Obliczanie prędkości średniej w ruchu wieloodcinkowym

Przekształcanie wzoru na prędkość — wyznaczanie drogi i czasu

Obliczenia szacunkowe prędkości w przyrodzie i technice

Zadania tekstowe z prędkości, drogi i czasu

Prędkość średnia i obliczenia ze wzoru v = s/t

Movimiento en línea recta, zig-zag y circular

Movimientos periódicos: el balanceo y el rebote

¿Cómo se mueven los animales?: caminar, volar, nadar y reptar

¿Cómo se mueven las partes de nuestro cuerpo?: huesos y músculos

Rampas y planos inclinados para facilitar el movimiento

Carrera de carros con rampas y texturas: experimento

Tipos de movimiento y locomoción

Definicja ruchu jednostajnego prostoliniowego

Stała wartość prędkości w ruchu jednostajnym

Doświadczenie: Badanie ruchu pęcherzyka powietrza w rurce z wodą

Droga w kolejnych sekundach ruchu jednostajnego

Obliczanie drogi w ruchu jednostajnym s = v·t

Obliczanie czasu ruchu jednostajnego t = s/v

Proporcjonalność prosta drogi do czasu w ruchu jednostajnym

Ruch jednostajny prostoliniowy — pojęcia i podstawowe zależności

Zadania ze spotkaniem dwóch ciał poruszających się naprzeciw siebie

Zadania z doganianiem ciała poruszającego się w tę samą stronę

Ruch wieloodcinkowy ze stałymi prędkościami na odcinkach

Niepewność pomiaru prędkości w szkolnym doświadczeniu

Sprawdzian biegłości obliczeń w ruchu jednostajnym prostoliniowym

Ruch jednostajny prostoliniowy — zadania złożone i analiza ruchu

Konstruowanie wykresu zależności drogi od czasu s(t)

Interpretacja nachylenia wykresu s(t) — stromość a wartość prędkości

Odczytywanie prędkości i drogi z wykresu s(t)

Odcinki postoju na wykresie drogi od czasu — linie poziome

Konstruowanie wykresu zależności prędkości od czasu v(t) w ruchu jednostajnym

Pole pod wykresem v(t) jako miara przebytej drogi

Odczytywanie drogi z wykresu v(t) dla ruchu jednostajnego

Podstawy wykresów s(t) i v(t) w ruchu jednostajnym

Wykresy s(t) i v(t) dla ruchu odcinkami jednostajnego

Przekształcanie wykresu s(t) w wykres v(t)

Przekształcanie wykresu v(t) w wykres s(t)

Analiza wykresów ruchu dwóch ciał na jednym rysunku

Trening interpretacji złożonych wykresów kinematycznych

Zaawansowana analiza i przekształcanie wykresów s(t) oraz v(t)

Definicja ruchu jednostajnie przyspieszonego

Pojęcie zmiany prędkości Δv

Definicja i wzór na przyspieszenie a = Δv / Δt

Jednostka przyspieszenia w układzie SI — metr na sekundę do kwadratu (m/s²)

Stałe przyspieszenie w ruchu jednostajnie przyspieszonym (a = const)

Obliczanie przyspieszenia dla ruchu rozpoczynającego się od spoczynku

Obliczanie przyspieszenia z niezerową prędkością początkową v₀

Pojęcie przyspieszenia w ruchu prostoliniowym jednostajnie przyspieszonym

Obliczanie prędkości końcowej ze wzoru v_k = v₀ + a·t

Obliczanie czasu trwania przyspieszania t = Δv / a

Droga w ruchu jednostajnie przyspieszonym od spoczynku s = (a·t²)/2

Stosunek dróg przebytych w kolejnych sekundach ruchu przyspieszonego — reguła Galileusza

Zadania rachunkowe z ruchu jednostajnie przyspieszonego pojazdów

Prędkość, czas i droga w ruchu jednostajnie przyspieszonym

Definicja ruchu jednostajnie opóźnionego

Pojęcie opóźnienia jako ujemnego przyspieszenia

Obliczanie wartości opóźnienia ze zmiany prędkości i czasu

Obliczanie czasu hamowania pojazdu do całkowitego zatrzymania

Obliczanie prędkości w ruchu opóźnionym ze wzoru v_k = v₀ - a·t

Droga hamowania jako pole pod wykresem v(t) s = (v₀·t)/2

Zależność drogi hamowania od prędkości początkowej — wpływ kwadratu prędkości

Całkowita droga zatrzymania pojazdu — droga reakcji plus droga hamowania

Wpływ warunków na drodze na opóźnienie i drogę hamowania

Zadania z ruchu jednostajnie opóźnionego w ruchach pojazdów

Porównanie cech ruchu jednostajnie przyspieszonego i opóźnionego

Ruch prostoliniowy jednostajnie opóźniony — hamowanie i obliczenia

Wykres zależności prędkości od czasu v(t) w ruchu przyspieszonym od spoczynku

Wykres v(t) w ruchu przyspieszonym z prędkością początkową v₀

Wyznaczanie zmiany prędkości Δv z wykresu v(t)

Wyznaczanie przyspieszenia ze stromości wykresu v(t)

Wykres v(t) dla ruchu jednostajnie opóźnionego — linia opadająca

Wyznaczanie opóźnienia z wykresu v(t)

Wykresy v(t) — wyznaczanie przyspieszenia i opóźnienia

Obliczanie drogi jako pola trójkąta pod wykresem v(t)

Obliczanie drogi jako pola trapezu pod wykresem v(t)

Wykres przyspieszenia od czasu a(t) w ruchu jednostajnie zmiennym

Złożone wykresy v(t) — przyspieszanie, ruch jednostajny i hamowanie

Parabola na wykresie drogi od czasu s(t) w ruchu przyspieszonym

Trening egzaminacyjny z wykresów ruchów prostoliniowych

Obliczanie drogi z wykresów i analiza wykresów s(t) oraz a(t)

Spadek swobodny jako model ruchu bez oporów powietrza

Doświadczenie z rurą Newtona — spadanie piórka i monety w próżni

Przyspieszenie ziemskie g — wartość i jednostka

Spadek swobodny jako ruch jednostajnie przyspieszony z a = g

Obliczanie prędkości w spadku swobodnym v = g·t

Obliczanie wysokości i drogi w spadku swobodnym h = (g·t²)/2

Wyznaczanie czasu spadania z danej wysokości

Wpływ oporów powietrza na spadanie ciał w atmosferze

Prędkość graniczna w spadku w powietrzu

Pomiary czasu spadania w laboratorium szkolnym

Zadania z kinematyki spadku swobodnego ciał

Spadek swobodny ciał i przyspieszenie ziemskie

Siła jako wielkość wektorowa — wartość, kierunek, zwrot i punkt przyłożenia

OGS.2.PS.6

Aligned learning resources

Related diagrams