<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .legend {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 12px;
      width: 100%;
    }
    .panel {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }
    .panel-header {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #1e2945;
    }
    .badge {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 20px;
      margin-bottom: 6px;
    }
    .badge-balanced {
      background: #e2e8f0;
      color: #475569;
    }
    .badge-unbalanced {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .stage {
      width: 100%;
      height: 110px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }
    svg.vector-stage {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .crate {
      fill: #fef3c7;
      stroke: #d97706;
      stroke-width: 2;
    }
    .crate-line {
      stroke: #d97706;
      stroke-width: 1.5;
    }
    .arrow-text {
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      dominant-baseline: auto;
    }
    .math-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.35;
    }
    .math-highlight {
      font-weight: 700;
      margin-top: 2px;
      font-size: 12px;
    }
    .text-green {
      color: #059669;
    }
    .text-blue {
      color: #2563eb;
    }
    .controls {
      display: flex;
      justify-content: center;
      margin-top: 2px;
    }
    .sim-btn {
      background: #2563eb;
      color: #ffffff;
      border: none;
      padding: 7px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.15s ease;
    }
    .sim-btn:active {
      opacity: 0.85;
    }
  </style>
</head>
<body>

  <div class="legend">
    <div class="legend-item">
      <div class="legend-color" style="background: #2563eb;"></div>
      <span>Applied Force (Right)</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background: #dc2626;"></div>
      <span>Opposing Force (Left)</span>
    </div>
  </div>

  <div class="grid">
    
    <div class="panel">
      <div class="panel-header">Balanced Forces</div>
      <div class="badge badge-balanced">No Change in Motion</div>
      
      <div class="stage">
        <svg class="vector-stage" viewBox="0 0 300 110">
          <defs>
            
            <marker id="arrow-blue-r" markerWidth="10" markerHeight="10" refX="9" refY="5" orient="auto" markerUnits="userSpaceOnUse">
              <path d="M 1 1 L 9 5 L 1 9 Z" fill="#2563eb" />
            </marker>
            
            <marker id="arrow-red-l" markerWidth="10" markerHeight="10" refX="1" refY="5" orient="auto" markerUnits="userSpaceOnUse">
              <path d="M 9 1 L 1 5 L 9 9 Z" fill="#dc2626" />
            </marker>
          </defs>

          
          <line x1="10" y1="88" x2="290" y2="88" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4,4" />

          
          <g id="crate-balanced" transform="translate(0, 0)">
            
            <line x1="126" y1="65" x2="52" y2="65" stroke="#dc2626" stroke-width="3" marker-end="url(#arrow-red-l)" />
            <text x="89" y="50" fill="#dc2626" text-anchor="middle" class="arrow-text">20 N</text>

            
            <rect x="126" y="40" width="48" height="48" rx="4" class="crate" />
            <line x1="126" y1="40" x2="174" y2="88" class="crate-line" />
            <line x1="174" y1="40" x2="126" y2="88" class="crate-line" />

            
            <line x1="174" y1="65" x2="248" y2="65" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow-blue-r)" />
            <text x="211" y="50" fill="#2563eb" text-anchor="middle" class="arrow-text">20 N</text>
          </g>
        </svg>
      </div>

      <div class="math-card">
        <div>F<sub>net</sub> = 20 N − 20 N = 0 N</div>
        <div class="math-highlight text-green">Velocity is Constant (a = 0)</div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-header">Unbalanced Forces</div>
      <div class="badge badge-unbalanced">Accelerates Right</div>

      <div class="stage">
        <svg class="vector-stage" viewBox="0 0 300 110">
          
          <line x1="10" y1="88" x2="290" y2="88" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="4,4" />

          
          <g id="crate-unbalanced" transform="translate(0, 0)">
            
            <line x1="126" y1="65" x2="88" y2="65" stroke="#dc2626" stroke-width="3" marker-end="url(#arrow-red-l)" />
            <text x="107" y="50" fill="#dc2626" text-anchor="middle" class="arrow-text">10 N</text>

            
            <rect x="126" y="40" width="48" height="48" rx="4" class="crate" />
            <line x1="126" y1="40" x2="174" y2="88" class="crate-line" />
            <line x1="174" y1="40" x2="126" y2="88" class="crate-line" />

            
            <line x1="174" y1="65" x2="268" y2="65" stroke="#2563eb" stroke-width="3" marker-end="url(#arrow-blue-r)" />
            <text x="221" y="50" fill="#2563eb" text-anchor="middle" class="arrow-text">30 N</text>
          </g>
        </svg>
      </div>

      <div class="math-card">
        <div>F<sub>net</sub> = 30 N − 10 N = 20 N Right</div>
        <div class="math-highlight text-blue">Accelerates to the Right (a &gt; 0)</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="sim-btn" id="simBtn" onclick="toggleSim()">
      <span id="btnIcon">▶</span> <span id="btnText">Simulate Motion</span>
    </button>
  </div>

  <script>
    let animating = false;
    let animFrame = null;
    let startTime = null;

    const balancedEl = document.getElementById('crate-balanced');
    const unbalancedEl = document.getElementById('crate-unbalanced');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');

    function toggleSim() {
      if (animating) {
        resetSim();
      } else {
        startSim();
      }
    }

    function startSim() {
      animating = true;
      btnIcon.textContent = '↺';
      btnText.textContent = 'Reset';
      startTime = null;
      animFrame = requestAnimationFrame(step);
    }

    function resetSim() {
      animating = false;
      if (animFrame) cancelAnimationFrame(animFrame);
      balancedEl.setAttribute('transform', 'translate(0, 0)');
      unbalancedEl.setAttribute('transform', 'translate(0, 0)');
      btnIcon.textContent = '▶';
      btnText.textContent = 'Simulate Motion';
    }

    function step(timestamp) {
      if (!startTime) startTime = timestamp;
      const progress = (timestamp - startTime) / 1000;

      if (progress <= 1.6) {
        // Balanced: stays in place (a = 0)
        balancedEl.setAttribute('transform', 'translate(0, 0)');
        
        // Unbalanced: accelerates right (smooth quadratic motion, bounded)
        const offset = 0.5 * 22 * progress * progress;
        unbalancedEl.setAttribute('transform', `translate(${Math.min(offset, 26)}, 0)`);
        
        animFrame = requestAnimationFrame(step);
      } else {
        setTimeout(() => {
          if (animating) resetSim();
        }, 900);
      }
    }
  </script>
</body>
</html>

Newton's First Law and Inertia in Everyday Motion

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    .callout {
      background: #22b7ff;
      color: #ffffff;
      font-weight: 700;
      font-size: 15px;
      padding: 6px 16px;
      border-radius: 20px;
      letter-spacing: 0.3px;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
      text-align: center;
    }

    .panel-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .track-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }

    .badge-force {
      background: #e0f2fe;
      color: #0284c7;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
    }

    .track-lane {
      height: 48px;
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 2px dashed #cbd5e1;
    }

    .arrow-push {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      color: #22b7ff;
      font-size: 20px;
      font-weight: 900;
      opacity: 0.8;
      transition: transform 0.2s ease;
      z-index: 2;
    }

    .object-wrap {
      position: absolute;
      left: 36px;
      display: flex;
      align-items: center;
      transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 3;
    }

    .baseball {
      font-size: 24px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    .boulder {
      font-size: 38px;
      line-height: 1;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
    }

    /* Motion streaks */
    .streaks {
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      height: 16px;
      width: 0;
      opacity: 0;
      background: linear-gradient(90deg, rgba(34, 183, 255, 0), rgba(34, 183, 255, 0.7));
      border-radius: 8px;
      transition: width 0.8s ease, opacity 0.4s ease;
      pointer-events: none;
    }

    /* Active Animation States */
    .active .baseball-wrap {
      transform: translateX(240px);
    }

    .active .baseball-wrap .streaks {
      width: 140px;
      opacity: 1;
    }

    .active .boulder-wrap {
      transform: translateX(4px);
    }

    .status-tag {
      font-size: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .tag-fast {
      color: #0284c7;
    }

    .tag-slow {
      color: #64748b;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

    .btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s, background-color 0.2s;
    }

    .btn:active {
      opacity: 0.85;
    }

    @media (max-width: 380px) {
      .active .baseball-wrap {
        transform: translateX(170px);
      }
      .active .baseball-wrap .streaks {
        width: 90px;
      }
    }
  </style>
</head>
<body>

  <div class="callout">More Mass = More Inertia</div>

  <div class="panel-container" id="stage">
    
    <div class="track-card">
      <div class="card-header">
        <span>0.15 kg Baseball</span>
        <span class="badge-force">50 N Push</span>
      </div>
      <div class="track-lane">
        <div class="arrow-push">➜</div>
        <div class="object-wrap baseball-wrap">
          <div class="streaks"></div>
          <span class="baseball">⚾</span>
        </div>
      </div>
      <div class="status-tag tag-fast">
        <span>⚡ High Acceleration</span>
      </div>
    </div>

    
    <div class="track-card">
      <div class="card-header">
        <span>1000 kg Boulder</span>
        <span class="badge-force">50 N Push</span>
      </div>
      <div class="track-lane">
        <div class="arrow-push">➜</div>
        <div class="object-wrap boulder-wrap">
          <span class="boulder">🪨</span>
        </div>
      </div>
      <div class="status-tag tag-slow">
        <span>🛑 Resists Change (Huge Inertia)</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="actionBtn" onclick="togglePush()">
      <span id="btnIcon">▶</span> <span id="btnText">Push (50 N)</span>
    </button>
  </div>

  <script>
    let isPushed = false;
    let autoTimer = null;
    const stage = document.getElementById('stage');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');

    function applyPush(state) {
      isPushed = state;
      if (isPushed) {
        stage.classList.add('active');
        btnIcon.textContent = '↺';
        btnText.textContent = 'Reset';
      } else {
        stage.classList.remove('active');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Push (50 N)';
      }
    }

    function togglePush() {
      if (autoTimer) clearInterval(autoTimer);
      applyPush(!isPushed);
    }

    // Pedagogical loop: push, hold, reset
    function startAutoLoop() {
      let step = 0;
      autoTimer = setInterval(() => {
        step = (step + 1) % 2;
        applyPush(step === 1);
      }, 2600);
    }

    // Start running smoothly after brief initial pause
    setTimeout(startAutoLoop, 600);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Newton's First Law Comparison</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    .cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

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

    .scene-card {
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-height: 175px;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .viewport {
      width: 100%;
      height: 85px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      overflow: hidden;
    }

    /* Left Card: Turf & Soccer Ball */
    .turf-bg {
      background: linear-gradient(180deg, #e2f4df 0%, #c8ebc2 100%);
      border-bottom: 4px solid #82c974;
    }

    .ball {
      font-size: 32px;
      line-height: 1;
      transform: translateY(8px) rotate(0deg);
      filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.15));
      transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Right Card: Deep Space & Space Probe */
    .space-bg {
      background: radial-gradient(circle at 50% 50%, #1e2945 0%, #0a1122 100%);
      position: relative;
    }

    .stars-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .star {
      position: absolute;
      background: #ffffff;
      border-radius: 50%;
      opacity: 0.7;
      animation: starDrift 3s linear infinite;
    }

    @keyframes starDrift {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-160px);
      }
    }

    /* Space probe stays safely in viewport */
    .probe-container {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      max-width: 95%;
      padding: 0 4px;
      animation: gentleDrift 3.5s ease-in-out infinite alternate;
      transition: transform 0.5s ease;
    }

    @keyframes gentleDrift {
      0% {
        transform: translateX(-6px) translateY(0px);
      }
      100% {
        transform: translateX(8px) translateY(-3px);
      }
    }

    .probe {
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 0 6px rgba(34, 183, 255, 0.6));
      flex-shrink: 0;
    }

    .vector-arrow {
      display: inline-flex;
      align-items: center;
      color: #22b7ff;
      font-size: 10.5px;
      font-weight: 700;
      white-space: nowrap;
      background: rgba(34, 183, 255, 0.15);
      padding: 3px 6px;
      border-radius: 4px;
      border: 1px solid rgba(34, 183, 255, 0.4);
      box-shadow: 0 0 8px rgba(34, 183, 255, 0.15);
      transition: all 0.4s ease;
    }

    .info-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      width: 100%;
    }

    .badge-tag {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      white-space: nowrap;
      text-align: center;
      transition: all 0.4s ease;
    }

    .badge-tag.highlight {
      border-color: #22b7ff;
      color: #0284c7;
      background: #f0f9ff;
    }

    .status-subtext {
      font-size: 11px;
      color: #6b7280;
      text-align: center;
      line-height: 1.25;
      transition: color 0.4s ease;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .btn-toggle {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 11.5px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
      white-space: nowrap;
    }

    .btn-toggle:focus-visible {
      outline: 2px solid #22b7ff;
    }

    .btn-toggle.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* Mathematical Condition Banner */
    .math-banner {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 8px;
      padding: 7px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 10px;
      font-weight: 700;
      font-size: 12px;
      color: #0369a1;
      text-align: center;
      line-height: 1.3;
      transition: all 0.4s ease;
    }

    .math-group {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }

    .math-eq {
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 1px 6px;
      font-family: ui-monospace, "SF Mono", monospace;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      transition: all 0.4s ease;
    }

    .arrow-icon {
      color: #22b7ff;
      font-size: 13px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  
  <div class="cards-row">
    
    
    <div class="scene-card" id="cardRest">
      <div class="card-title">
        <span>Object at Rest</span>
      </div>

      <div class="viewport turf-bg">
        <div class="ball" id="soccerBall">⚽</div>
      </div>

      <div class="info-group">
        <div class="badge-tag highlight" id="badgeRest">v = 0 m/s</div>
        <div class="status-subtext" id="labelRest">Stays at rest forever until kicked</div>
      </div>
    </div>

    
    <div class="scene-card" id="cardMotion">
      <div class="card-title">
        <span>Object in Motion</span>
      </div>

      <div class="viewport space-bg" id="spaceViewport">
        <div class="stars-layer" id="starsContainer"></div>
        <div class="probe-container" id="probeContainer">
          <div class="probe" id="probeEmoji">🛰️</div>
          <div class="vector-arrow" id="vectorArrow">v = 15,000 m/s (Constant) ➔</div>
        </div>
      </div>

      <div class="info-group">
        <div class="badge-tag highlight" id="badgeMotion">No friction, No engine needed</div>
        <div class="status-subtext" id="labelMotion">Glides continuously through deep space</div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn-toggle active" id="btnBalanced" onclick="setForceState(false)">
      <span>✓ Net Force = 0</span>
    </button>
    <button class="btn-toggle" id="btnUnbalanced" onclick="setForceState(true)">
      <span>⚡ Apply External Force</span>
    </button>
  </div>

  
  <div class="math-banner" id="bannerLaw">
    <div class="math-group">
      <span>Net Force (</span><span class="math-eq" id="fnetText">F<sub>net</sub> = 0</span><span>)</span>
    </div>
    <span class="arrow-icon">➔</span>
    <div class="math-group">
      <span>Acceleration (</span><span class="math-eq" id="accelText">a = 0</span><span>)</span>
    </div>
  </div>

  <script>
    // Populate deep space star field
    const starsContainer = document.getElementById('starsContainer');
    const starCount = 20;
    for (let i = 0; i < starCount; i++) {
      const star = document.createElement('div');
      star.className = 'star';
      const size = Math.random() * 2 + 1;
      star.style.width = size + 'px';
      star.style.height = size + 'px';
      star.style.top = (Math.random() * 90) + '%';
      star.style.left = (Math.random() * 140) + '%';
      star.style.opacity = (Math.random() * 0.6 + 0.4).toFixed(2);
      star.style.animationDuration = (Math.random() * 2 + 2.5) + 's';
      star.style.animationDelay = (-Math.random() * 3) + 's';
      starsContainer.appendChild(star);
    }

    function setForceState(isForced) {
      const btnB = document.getElementById('btnBalanced');
      const btnU = document.getElementById('btnUnbalanced');
      const ball = document.getElementById('soccerBall');
      const badgeRest = document.getElementById('badgeRest');
      const labelRest = document.getElementById('labelRest');
      const badgeMotion = document.getElementById('badgeMotion');
      const labelMotion = document.getElementById('labelMotion');
      const probeContainer = document.getElementById('probeContainer');
      const vector = document.getElementById('vectorArrow');
      const fnetText = document.getElementById('fnetText');
      const accelText = document.getElementById('accelText');
      const banner = document.getElementById('bannerLaw');
      const stars = document.querySelectorAll('.star');

      if (isForced) {
        btnB.classList.remove('active');
        btnU.classList.add('active');

        // Soccer ball kicked
        ball.style.transform = 'translate(45px, -6px) rotate(220deg)';
        badgeRest.textContent = 'v > 0 m/s';
        badgeRest.className = 'badge-tag';
        badgeRest.style.borderColor = '#f59e0b';
        badgeRest.style.color = '#b45309';
        badgeRest.style.background = '#fffbeb';
        labelRest.textContent = 'Kicked ➔ Accelerates into motion';

        // Space probe accelerates
        probeContainer.style.transform = 'translateX(14px)';
        vector.textContent = 'v increasing (Accelerating) ➔';
        vector.style.borderColor = '#f59e0b';
        vector.style.color = '#f59e0b';
        vector.style.background = 'rgba(245, 158, 11, 0.2)';
        badgeMotion.textContent = 'Thrust force applied';
        badgeMotion.className = 'badge-tag';
        badgeMotion.style.borderColor = '#f59e0b';
        badgeMotion.style.color = '#b45309';
        badgeMotion.style.background = '#fffbeb';
        labelMotion.textContent = 'Speed changes due to unbalanced force';

        // Speed up star motion smoothly
        stars.forEach(s => {
          s.style.animationDuration = '1.2s';
        });

        // Math banner updates
        banner.style.background = '#fffbeb';
        banner.style.borderColor = '#fde68a';
        banner.style.color = '#b45309';
        fnetText.innerHTML = 'F<sub>net</sub> ≠ 0';
        accelText.innerHTML = 'a ≠ 0';
      } else {
        btnU.classList.remove('active');
        btnB.classList.add('active');

        // Reset to Newton's 1st Law equilibrium
        ball.style.transform = 'translateY(8px) rotate(0deg)';
        badgeRest.textContent = 'v = 0 m/s';
        badgeRest.className = 'badge-tag highlight';
        badgeRest.style.borderColor = '';
        badgeRest.style.color = '';
        badgeRest.style.background = '';
        labelRest.textContent = 'Stays at rest forever until kicked';

        probeContainer.style.transform = '';
        vector.textContent = 'v = 15,000 m/s (Constant) ➔';
        vector.style.borderColor = '';
        vector.style.color = '';
        vector.style.background = '';
        badgeMotion.textContent = 'No friction, No engine needed';
        badgeMotion.className = 'badge-tag highlight';
        badgeMotion.style.borderColor = '';
        badgeMotion.style.color = '';
        badgeMotion.style.background = '';
        labelMotion.textContent = 'Glides continuously through deep space';

        // Restore normal star velocity
        stars.forEach(s => {
          s.style.animationDuration = '3.5s';
        });

        banner.style.background = '#f0f9ff';
        banner.style.borderColor = '#bae6fd';
        banner.style.color = '#0369a1';
        fnetText.innerHTML = 'F<sub>net</sub> = 0';
        accelText.innerHTML = 'a = 0';
      }
    }
  </script>
</body>
</html>

探究滑动摩擦力影响因素：二力平衡法测量拉力

滑动摩擦力与压力大小及接触面粗糙程度的关系

滑动摩擦力实验改进：拉动木板法与稳定性优化

探究液体内部压强：U形管压强计原理与操作

液体内部压强特点：深度、密度与方向的实验探究

液体压强公式推导与连通器原理应用

探究影响浮力大小的因素：称重法与变量控制

阿基米德原理实验验证：排开液体重力与浮力的定量关系

物体的浮沉条件与潜水艇、轮船浮力应用探究

science

力学探究实验：摩擦力、压强与浮力

Newton's Second Law: The Force-Mass-Acceleration Relationship

Drawing Free-Body Diagrams and Resolving Net Forces

Newton's Third Law: Action-Reaction Pairs

Applying Newton's Laws to Vehicle Safety and Passenger Restraints

Dynamics of Rocketry and Thrust Propulsion

Newton's Laws of Motion and Applied Dynamics

What Is Newton's Second Law? Force, Mass, and Acceleration

Calculating Acceleration From Net Force and Mass

Newton's Second Law: Force, Mass, and Acceleration Calculations

Analyzing Net Force in Multi-Force Systems

How Mass Affects Acceleration: The Inverse Relationship

Force and Acceleration Word Problems

Graphing Force, Mass, and Acceleration Relationships

Newton's Second Law: Force, Mass, and Acceleration

牛顿第三运动定律与作用力与反作用力的辨析

反冲运动的物理原理与动量守恒初步体验

真实火箭与现代航天发射系统的推进机制

水火箭的基本结构与工作原理解析

气体压强、压缩空气储能与做功释放过程

反冲运动与火箭推进力学基础

How Newton's Three Laws Work Together in Systems

Vehicle Restraints and Newton's Laws

Newton's Laws in Sports Activities

Amusement Park Rides and Newton's Laws

Earth's Tectonic Activity and Newton's Laws

Rocket Launches and Newton's Three Laws

Newton's Three Laws in Real-World Systems

水火箭箭体选材（PET塑料瓶耐压测试与安全规范）

水火箭发射喷嘴与单向充气阀门的密封设计

水火箭头部整流罩与配重对重心的调节

水火箭尾翼数量、形状与安装对称性设计

重心与压力中心（气动中心）对水火箭飞行稳定性的影响

水火箭发射架与机械脱扣释放机构的制作

水火箭箭体制作与气动平衡设计

探究注水量（充水比例）对水火箭射程与飞行高度的影响

探究气压大小对水火箭推力与留空时间的影响

探究发射仰角对水火箭水平射程的影响（抛体运动规律）

探究喷嘴口径大小对水火箭排水速度与推力持续时间的影响

气压打气筒与气压表在安全发射操作中的规范使用

水火箭飞行轨迹记录、倾角仪测高与数据分析

水火箭飞行参数探究与实验测定

多级水火箭的分级脱离机构与触发原理探究

降落伞开伞机构（延时脱落与气动开伞）设计制作

水火箭结构气动阻力优化与流线型设计

制作反冲小车与反冲动力船等拓展装置

工程设计的一般流程（明确需求-方案设计-原型制作-测试优化）

水火箭发射比赛方案制订、安全红线与评估指标

中国航天长征系列运载火箭发展史与航天精神感悟

水火箭工程进阶与跨学科拓展实践

OGS.9.PS.5

OGS.9.PS.5

Aligned learning resources

Related diagrams