<!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>Distance vs Displacement</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

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

    /* Comparison Badges */
    .metric-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .metric-box {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      text-align: center;
      transition: all 0.3s ease;
    }
    .metric-box.active {
      border-color: currentColor;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .metric-dist { color: #0284c7; }
    .metric-disp { color: #16a34a; }
    .metric-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }
    .metric-val {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
    }
    .metric-sub {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    /* SVG container */
    .svg-container {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 4px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Controls */
    .ctrl-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .step-btns {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn-play {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      padding: 6px 14px;
    }
    .compass {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="metric-row">
    <div class="metric-box metric-dist" id="box-dist">
      <div class="metric-title">Total Distance (Scalar)</div>
      <div class="metric-val" id="val-dist">0 m</div>
      <div class="metric-sub" id="sub-dist">Magnitude only</div>
    </div>
    <div class="metric-box metric-disp" id="box-disp">
      <div class="metric-title">Displacement (Vector)</div>
      <div class="metric-val" id="val-disp">0 m</div>
      <div class="metric-sub" id="sub-disp">Magnitude + Direction</div>
    </div>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 540 210" aria-label="1D Motion Vector Diagram">
      <defs>
        
        <marker id="arr-blue" viewBox="0 0 10 10" refX="7" 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="#0284c7"/>
        </marker>
        <marker id="arr-orange" viewBox="0 0 10 10" refX="7" 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="#ea580c"/>
        </marker>
        <marker id="arr-green" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#16a34a"/>
        </marker>
      </defs>

      
      <g id="path1-group" opacity="0" style="transition: opacity 0.4s ease;">
        <line x1="70" y1="45" x2="460" y2="45" stroke="#0284c7" stroke-width="3.5" stroke-dasharray="6,4" marker-end="url(#arr-blue)"/>
        <rect x="220" y="24" width="90" height="18" rx="4" fill="#e0f2fe"/>
        <text x="265" y="37" text-anchor="middle" font-size="12" font-weight="700" fill="#0369a1">Step 1: +4 m East</text>
      </g>

      
      <g id="path2-group" opacity="0" style="transition: opacity 0.4s ease;">
        <line x1="470" y1="85" x2="178" y2="85" stroke="#ea580c" stroke-width="3.5" stroke-dasharray="6,4" marker-end="url(#arr-orange)"/>
        <rect x="275" y="93" width="90" height="18" rx="4" fill="#ffedd5"/>
        <text x="320" y="106" text-anchor="middle" font-size="12" font-weight="700" fill="#c2410c">Step 2: −3 m West</text>
      </g>

      
      <g id="disp-group" opacity="0" style="transition: opacity 0.4s ease;">
        <line x1="70" y1="135" x2="160" y2="135" stroke="#16a34a" stroke-width="5" marker-end="url(#arr-green)"/>
        <rect x="75" y="145" width="130" height="18" rx="4" fill="#dcfce7"/>
        <text x="140" y="158" text-anchor="middle" font-size="11" font-weight="800" fill="#15803d">Displacement: +1 m East</text>
      </g>

      
      <line x1="50" y1="180" x2="490" y2="180" stroke="#64748b" stroke-width="2.5"/>

      
      
      <line x1="70" y1="174" x2="70" y2="186" stroke="#64748b" stroke-width="2.5"/>
      <text x="70" y="202" text-anchor="middle" font-size="13" font-weight="700" fill="#1e2945">0 m</text>
      <text x="70" y="168" text-anchor="middle" font-size="10" font-weight="800" fill="#0284c7">START (A)</text>

      
      <line x1="170" y1="174" x2="170" y2="186" stroke="#64748b" stroke-width="2.5"/>
      <text x="170" y="202" text-anchor="middle" font-size="13" font-weight="700" fill="#1e2945">1 m</text>
      <text x="170" y="122" id="end-label" text-anchor="middle" font-size="10" font-weight="800" fill="#ea580c" opacity="0">END (B)</text>

      
      <line x1="270" y1="174" x2="270" y2="186" stroke="#94a3b8" stroke-width="2"/>
      <text x="270" y="202" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">2 m</text>

      
      <line x1="370" y1="174" x2="370" y2="186" stroke="#94a3b8" stroke-width="2"/>
      <text x="370" y="202" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">3 m</text>

      
      <line x1="470" y1="174" x2="470" y2="186" stroke="#64748b" stroke-width="2.5"/>
      <text x="470" y="202" text-anchor="middle" font-size="13" font-weight="700" fill="#1e2945">4 m</text>

      
      <circle id="runner" cx="70" cy="180" r="7" fill="#0f172a" stroke="#ffffff" stroke-width="2" style="transition: cx 0.6s cubic-bezier(0.4, 0, 0.2, 1);"/>
    </svg>
  </div>

  
  <div class="ctrl-bar">
    <div class="step-btns">
      <button class="btn active" onclick="setStep(0)">Start</button>
      <button class="btn" onclick="setStep(1)">1. East (+4m)</button>
      <button class="btn" onclick="setStep(2)">2. West (−3m)</button>
      <button class="btn" onclick="setStep(3)">3. Compare</button>
    </div>
    <div class="compass">West ← → East</div>
  </div>
</div>

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

  const states = [
    {
      runnerX: 70,
      p1: 0,
      p2: 0,
      disp: 0,
      endLbl: 0,
      dist: '0 m',
      dispText: '0 m',
      distSub: 'At start (0 m)',
      dispSub: 'Zero displacement',
      activeBox: null
    },
    {
      runnerX: 470,
      p1: 1,
      p2: 0,
      disp: 0,
      endLbl: 0,
      dist: '4 m',
      dispText: '+4 m East',
      distSub: 'Walked 4 m East',
      dispSub: '4 m East of start',
      activeBox: 'dist'
    },
    {
      runnerX: 170,
      p1: 1,
      p2: 1,
      disp: 0,
      endLbl: 1,
      dist: '4m + 3m = 7 m',
      dispText: '+1 m East',
      distSub: 'Scalar sum: total walked',
      dispSub: 'Current position: Point B',
      activeBox: 'disp'
    },
    {
      runnerX: 170,
      p1: 1,
      p2: 1,
      disp: 1,
      endLbl: 1,
      dist: '7 m',
      dispText: '1 m East',
      distSub: 'Distance = Path Length',
      dispSub: 'Displacement = Start → End',
      activeBox: 'both'
    }
  ];

  function updateUI(step) {
    const s = states[step];
    document.getElementById('runner').setAttribute('cx', s.runnerX);
    document.getElementById('path1-group').style.opacity = s.p1;
    document.getElementById('path2-group').style.opacity = s.p2;
    document.getElementById('disp-group').style.opacity = s.disp;
    document.getElementById('end-label').style.opacity = s.endLbl;

    document.getElementById('val-dist').textContent = s.dist;
    document.getElementById('sub-dist').textContent = s.distSub;
    document.getElementById('val-disp').textContent = s.dispText;
    document.getElementById('sub-disp').textContent = s.dispSub;

    const bDist = document.getElementById('box-dist');
    const bDisp = document.getElementById('box-disp');
    bDist.classList.toggle('active', s.activeBox === 'dist' || s.activeBox === 'both');
    bDisp.classList.toggle('active', s.activeBox === 'disp' || s.activeBox === 'both');

    const btns = document.querySelectorAll('.step-btns .btn');
    btns.forEach((b, i) => b.classList.toggle('active', i === step));
  }

  function setStep(step) {
    currentStep = step;
    updateUI(currentStep);
    resetAutoPlay();
  }

  function autoAdvance() {
    currentStep = (currentStep + 1) % states.length;
    updateUI(currentStep);
  }

  function resetAutoPlay() {
    clearInterval(timer);
    timer = setInterval(autoAdvance, 3500);
  }

  // Init
  updateUI(0);
  timer = setInterval(autoAdvance, 3500);
</script>

</body>
</html>

Scalars and Vectors in Physical Measurements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Speed vs Velocity</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 8px;
      user-select: none;
      overflow-x: hidden;
    }

    .header-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }

    .pill {
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .pill-scalar {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .pill-vector {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .track-container {
      position: relative;
      width: 100%;
      max-width: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 350px;
    }

    .btn-step {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s;
    }

    .btn-step:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn-step.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37,99,235,0.25);
    }

    .btn-play {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      color: #1e2945;
      flex-shrink: 0;
      transition: background 0.15s;
    }

    .btn-play:hover {
      background: #e2e8f0;
    }

    /* Key Summary Box */
    .summary-box {
      width: 100%;
      max-width: 350px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
      color: #334155;
    }

    .scalar-text { color: #0284c7; font-weight: 700; }
    .vector-text { color: #d97706; font-weight: 700; }
  </style>
</head>
<body>

  
  <div class="header-pills">
    <div class="pill pill-scalar">
      <span>●</span> Speed: Constant (20 m/s)
    </div>
    <div class="pill pill-vector">
      <span>➜</span> Velocity: Changing Direction
    </div>
  </div>

  
  <div class="track-container">
    <svg viewBox="0 0 350 300" preserveAspectRatio="xMidYMid meet">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="7" 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="#d97706" />
        </marker>
        
        <filter id="badgeShadow" x="-10%" y="-10%" width="120%" height="130%">
          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <line x1="145" y1="62" x2="145" y2="258" stroke="#f1f5f9" stroke-width="1.5" stroke-dasharray="4,4" />
      <line x1="45" y1="160" x2="245" y2="160" stroke="#f1f5f9" stroke-width="1.5" stroke-dasharray="4,4" />

      
      <g transform="translate(32, 32)">
        <circle cx="0" cy="0" r="15" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1" />
        <path d="M 0,-12 L 3,-2 L 0,0 L -3,-2 Z" fill="#ef4444" />
        <path d="M 0,12 L 3,2 L 0,0 L -3,2 Z" fill="#94a3b8" />
        <path d="M 12,0 L 2,3 L 0,0 L 2,-3 Z" fill="#94a3b8" />
        <path d="M -12,0 L -2,3 L 0,0 L -2,-3 Z" fill="#94a3b8" />
        <text x="0" y="-14" text-anchor="middle" font-size="8" font-weight="800" fill="#dc2626">N</text>
        <text x="17" y="3" text-anchor="middle" font-size="8" font-weight="700" fill="#64748b">E</text>
        <text x="0" y="21" text-anchor="middle" font-size="8" font-weight="700" fill="#64748b">S</text>
        <text x="-17" y="3" text-anchor="middle" font-size="8" font-weight="700" fill="#64748b">W</text>
      </g>

      
      <circle cx="145" cy="160" r="75" fill="none" stroke="#e2e8f0" stroke-width="26" />
      <circle cx="145" cy="160" r="75" fill="none" stroke="#ffffff" stroke-width="2" stroke-dasharray="6,6" />

      
      <g id="point-top">
        <circle cx="145" cy="85" r="4" fill="#64748b" />
        
        <line x1="145" y1="85" x2="202" y2="85" stroke="#d97706" stroke-width="3" marker-end="url(#arrow)" />
        
        
        <g transform="translate(145, 42)">
          <rect x="-98" y="-14" width="196" height="26" rx="5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" filter="url(#badgeShadow)" />
          <text x="0" y="3.5" text-anchor="middle" font-size="10.5" font-weight="700" fill="#1e2945">
            <tspan fill="#0284c7">Speed: 20 m/s</tspan>
            <tspan fill="#94a3b8"> · </tspan>
            <tspan fill="#d97706">Velocity: 20 m/s East ➜</tspan>
          </text>
        </g>
      </g>

      
      <g id="point-right">
        <circle cx="220" cy="160" r="4" fill="#64748b" />
        
        <line x1="220" y1="160" x2="220" y2="217" stroke="#d97706" stroke-width="3" marker-end="url(#arrow)" />
        
        
        <g transform="translate(230, 140)">
          <rect x="0" y="0" width="112" height="42" rx="5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" filter="url(#badgeShadow)" />
          <text x="8" y="16" font-size="10" font-weight="700" fill="#0284c7">Speed: 20 m/s</text>
          <text x="8" y="31" font-size="10" font-weight="700" fill="#d97706">Velocity: 20 m/s South 🠇</text>
        </g>
      </g>

      
      <g id="carGroup" transform="translate(145, 85) rotate(0)">
        
        <rect x="-12" y="-7" width="24" height="14" rx="3.5" fill="#ef4444" stroke="#b91c1c" stroke-width="1.2" />
        
        <rect x="1" y="-5" width="4" height="10" rx="1.2" fill="#1e2945" opacity="0.75" />
        
        <rect x="-8" y="-4" width="2.5" height="8" rx="1" fill="#1e2945" opacity="0.6" />
        
        <circle cx="11" cy="-4" r="1.2" fill="#fef08a" />
        <circle cx="11" cy="4" r="1.2" fill="#fef08a" />
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button id="btnPlay" class="btn-play" aria-label="Toggle Animation">⏸</button>
    <button id="btnPos1" class="btn-step active">Top (East)</button>
    <button id="btnPos2" class="btn-step">Right (South)</button>
  </div>

  
  <div class="summary-box">
    <span class="scalar-text">Speed stays constant at 20 m/s (Scalar)</span>, but <span class="vector-text">Velocity changes continuously</span> because direction changes (Vector).
  </div>

  <script>
    const carGroup = document.getElementById('carGroup');
    const btnPlay = document.getElementById('btnPlay');
    const btnPos1 = document.getElementById('btnPos1');
    const btnPos2 = document.getElementById('btnPos2');

    const R = 75;
    const CX = 145;
    const CY = 160;

    let isPlaying = true;
    let angle = -Math.PI / 2; // Starts at top
    let lastTime = performance.now();

    function setCarPosition(rad) {
      const x = CX + R * Math.cos(rad);
      const y = CY + R * Math.sin(rad);
      // Tangent heading angle in degrees (clockwise rotation)
      const deg = (rad + Math.PI / 2) * (180 / Math.PI);
      carGroup.setAttribute('transform', `translate(${x}, ${y}) rotate(${deg})`);
    }

    function animate(now) {
      if (isPlaying) {
        const dt = (now - lastTime) / 1000;
        // Constant angular speed (~7 seconds per revolution)
        angle += (2 * Math.PI / 7) * dt;
        if (angle > Math.PI * 1.5) {
          angle -= Math.PI * 2;
        }
        setCarPosition(angle);

        // Highlight active step button if close to key positions
        const normalized = (angle + 2 * Math.PI) % (2 * Math.PI);
        const diffTop = Math.abs(normalized - (1.5 * Math.PI));
        const diffRight = Math.abs(normalized - 0);

        if (diffTop < 0.25 || diffTop > (2 * Math.PI - 0.25)) {
          btnPos1.classList.add('active');
          btnPos2.classList.remove('active');
        } else if (diffRight < 0.25) {
          btnPos2.classList.add('active');
          btnPos1.classList.remove('active');
        } else {
          btnPos1.classList.remove('active');
          btnPos2.classList.remove('active');
        }
      }
      lastTime = now;
      requestAnimationFrame(animate);
    }

    btnPlay.addEventListener('click', () => {
      isPlaying = !isPlaying;
      btnPlay.textContent = isPlaying ? '⏸' : '▶';
    });

    btnPos1.addEventListener('click', () => {
      isPlaying = false;
      btnPlay.textContent = '▶';
      angle = -Math.PI / 2; // Top
      setCarPosition(angle);
      btnPos1.classList.add('active');
      btnPos2.classList.remove('active');
    });

    btnPos2.addEventListener('click', () => {
      isPlaying = false;
      btnPlay.textContent = '▶';
      angle = 0; // Right
      setCarPosition(angle);
      btnPos2.classList.add('active');
      btnPos1.classList.remove('active');
    });

    // Initialize car position
    setCarPosition(angle);
    requestAnimationFrame((t) => {
      lastTime = t;
      animate(t);
    });
  </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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #0f172a;
      padding: 12px;
      display: flex;
      justify-content: center;
      align-items: stretch;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 680px;
    }

    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .header-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 12px;
      border-radius: 8px;
      text-align: center;
    }

    .header-title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .header-sub {
      font-size: 12px;
      font-weight: 600;
      margin-top: 2px;
      opacity: 0.9;
    }

    /* Scalar Theme */
    .scalar-header {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .scalar-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .scalar-val {
      font-size: 15px;
      font-weight: 700;
      color: #0284c7;
    }

    .scalar-label {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }

    /* Vector Theme */
    .vector-header {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .vector-card {
      background: #fffdfa;
      border: 1px solid #fed7aa;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
    }

    .vector-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tag-group {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      align-items: center;
    }

    .tag-mag {
      background: #e0f2fe;
      color: #0284c7;
      font-size: 12px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #bae6fd;
    }

    .tag-dir {
      background: #fef3c7;
      color: #d97706;
      font-size: 12px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #fde68a;
    }

    /* Summary Badges */
    .summary-badge {
      margin-top: auto;
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .scalar-summary {
      background: #f0f9ff;
      color: #0284c7;
      border: 1px dashed #7dd3fc;
    }

    .vector-summary {
      background: #fffbeb;
      color: #b45309;
      border: 1px dashed #fcd34d;
    }

    svg {
      flex-shrink: 0;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    
    <div class="column">
      <div class="header-pill scalar-header">
        <div class="header-title">Scalar Quantity</div>
        <div class="header-sub">Magnitude Only (How much?)</div>
      </div>

      
      <div class="scalar-card">
        <svg width="28" height="42" viewBox="0 0 28 42">
          
          <rect x="10" y="4" width="8" height="24" rx="4" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5" />
          
          <circle cx="14" cy="32" r="7" fill="#0284c7" stroke="#0369a1" stroke-width="1.5" />
          
          <rect x="12" y="14" width="4" height="15" fill="#0284c7" />
          
          <line x1="6" y1="12" x2="9" y2="12" stroke="#64748b" stroke-width="1.5" stroke-linecap="round" />
          <line x1="6" y1="18" x2="9" y2="18" stroke="#64748b" stroke-width="1.5" stroke-linecap="round" />
        </svg>
        <div>
          <div class="scalar-val">22 °C</div>
          <div class="scalar-label">Temperature</div>
        </div>
      </div>

      
      <div class="scalar-card">
        <svg width="34" height="34" viewBox="0 0 34 34">
          
          <rect x="3" y="16" width="28" height="14" rx="3" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" />
          
          <rect x="7" y="19" width="20" height="8" rx="2" fill="#0284c7" />
          
          <line x1="6" y1="13" x2="28" y2="13" stroke="#64748b" stroke-width="2" stroke-linecap="round" />
          <line x1="17" y1="13" x2="17" y2="16" stroke="#94a3b8" stroke-width="2" />
        </svg>
        <div>
          <div class="scalar-val">5.0 kg</div>
          <div class="scalar-label">Mass</div>
        </div>
      </div>

      
      <div class="scalar-card">
        <svg width="34" height="34" viewBox="0 0 34 34">
          
          <circle cx="17" cy="19" r="12" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" />
          
          <rect x="15" y="3" width="4" height="4" rx="1" fill="#64748b" />
          
          <line x1="17" y1="19" x2="23" y2="13" stroke="#0284c7" stroke-width="2" stroke-linecap="round" />
          <circle cx="17" cy="19" r="2" fill="#0369a1" />
        </svg>
        <div>
          <div class="scalar-val">10 s</div>
          <div class="scalar-label">Time Elapsed</div>
        </div>
      </div>

      <div class="summary-badge scalar-summary">
        Value + Unit
      </div>
    </div>

    
    <div class="column">
      <div class="header-pill vector-header">
        <div class="header-title">Vector Quantity</div>
        <div class="header-sub">Magnitude + Direction</div>
      </div>

      
      <div class="vector-card">
        <svg width="56" height="56" viewBox="0 0 56 56">
          
          <circle cx="28" cy="28" r="22" fill="none" stroke="#fed7aa" stroke-width="1" stroke-dasharray="2 2" />
          <line x1="28" y1="6" x2="28" y2="50" stroke="#fdba74" stroke-width="1" stroke-dasharray="2 2" />
          <line x1="6" y1="28" x2="50" y2="28" stroke="#fdba74" stroke-width="1" stroke-dasharray="2 2" />
          
          <line x1="28" y1="28" x2="28" y2="10" stroke="#d97706" stroke-width="3" stroke-linecap="round" />
          <polygon points="28,6 23,14 33,14" fill="#d97706" />
          
          <circle cx="28" cy="28" r="3" fill="#b45309" />
          
          <text x="28" y="5" font-size="7" font-weight="bold" fill="#b45309" text-anchor="middle">N</text>
        </svg>
        <div class="vector-info">
          <div class="tag-group">
            <span class="tag-mag">50 km/h</span>
            <span class="tag-dir">North ↑</span>
          </div>
          <div class="scalar-label">Velocity</div>
        </div>
      </div>

      
      <div class="vector-card">
        <svg width="56" height="56" viewBox="0 0 56 56">
          
          <line x1="12" y1="44" x2="48" y2="44" stroke="#fdba74" stroke-width="1" />
          <line x1="12" y1="44" x2="12" y2="8" stroke="#fdba74" stroke-width="1" />
          
          <path d="M 24,44 A 12,12 0 0,0 20.5,35.5" fill="none" stroke="#d97706" stroke-width="1.5" />
          <text x="25" y="38" font-size="7" font-weight="bold" fill="#d97706">45°</text>
          
          <line x1="12" y1="44" x2="38" y2="18" stroke="#d97706" stroke-width="3" stroke-linecap="round" />
          
          <polygon points="41,15 31,19 37,25" fill="#d97706" />
          
          <circle cx="12" cy="44" r="3" fill="#b45309" />
        </svg>
        <div class="vector-info">
          <div class="tag-group">
            <span class="tag-mag">100 m</span>
            <span class="tag-dir">45° NE ↗</span>
          </div>
          <div class="scalar-label">Displacement</div>
        </div>
      </div>

      <div class="summary-badge vector-summary">
        [ Magnitude ] + [ Direction ]
      </div>
    </div>

  </div>

</body>
</html>

Calculating Speed from Distance and Time

What Does Speed Really Measure?

Understanding Meters per Second

Understanding Kilometers per Hour

Converting Between m/s and km/h

Finding Distance When You Know Speed and Time

Finding Time When You Know Speed and Distance

Using a Stopwatch to Measure Short Time Intervals

Measuring Speed in an Investigation

Recording Speed and Energy Data

science

Calculating and Measuring Speed

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

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

Pojęcie układu współrzędnych i wektora położenia w 1D, 2D i 3D

Punkt materialny jako model ciała fizycznego

Tor ruchu jako krzywa geometryczna i jego równanie

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

Droga jako skalarna długość toru ruchu

Odróżnianie drogi od przemieszczenia w ruchach krzywoliniowych

Opis ruchu punktu materialnego: położenie, tor i przemieszczenie

Wielkości skalarne a wektorowe — definicje i przykłady w fizyce

Geometryczna reprezentacja wektora — wartość, kierunek, zwrot i punkt przyłożenia

Wektory przeciwne, równe i zerowe w układzie współrzędnych

Graficzne dodawanie wektorów — metoda trójkąta i wieloboku

Graficzne dodawanie wektorów — metoda równoległoboku

Odejmowanie wektorów i wektor różnicy

Mnożenie wektora przez skalar i zmiana jego cech

Podstawy wektorów i geometryczne operacje w fizyce

Układ odniesienia: ciało odniesienia i układ współrzędnych

Model punktu materialnego i warunki jego stosowalności

Wektor położenia (wodzący) w układzie jednowymiarowym i dwuwymiarowym

Tor ruchu jako krzywa geometryczna i równanie toru y(x)

Droga s jako skalarna długość przebytego toru i jej jednostki

Wektor przemieszczenia Δr: definicja, własności i zapis analityczny

Porównanie drogi s i wartości przemieszczenia |Δr|

Względność toru, drogi i przemieszczenia w różnych układach odniesienia

Położenie, tor, droga i wektor przemieszczenia w przestrzeni

Rozkład wektora na składowe w kartezjańskim układzie współrzędnych

Wyznaczanie wartości i kierunku wektora ze składowych

Algebraiczne dodawanie i odejmowanie wektorów za pomocą współrzędnych

Iloczyn skalarny dwóch wektorów — definicja i znaczenie w fizyce

Iloczyn wektorowy — reguła prawej dłoni i zastosowania w dynamice

Wektory w kinematyce — położenie, przemieszczenie, prędkość i przyspieszenie

Wektory w dynamice i elektrostatyce — siły, naprężenia i natężenie pola

Kompleksowa analiza wektorowa w wieloetapowych zadaniach fizycznych

Analityczne metody wektorowe i ich zastosowania w fizyce

What Is Average Speed?

Average Speed vs Instantaneous Speed

Calculating Average Speed for a Multi-Segment Trip

Solving Average Speed Word Problems

Common Mistakes in Average Speed Calculations

Explaining the Speed-Energy Relationship

Designing a Fair Speed Investigation

Speed Calculation Review and Practice

Average Speed and Speed-Energy Relationships

Wektor prędkości średniej v_śr = Δr/Δt i jego interpretacja

Średnia prędkość wektorowa a średnia szybkość skalarna v_śr = s/t

Wektor prędkości chwilowej i jego styczność do toru

Rozkład wektora prędkości na składowe kartezjańskie vx i vy

Wektor przyspieszenia średniego i chwilowego: definicja oraz jednostka m/s²

Rozkład przyspieszenia na składową styczną a_s i normalną a_n

Ruch względny na płaszczyźnie — łódź na rzece i samolot na wietrze

Prędkość względna dwóch ciał poruszających się pod kątem na płaszczyźnie

Wektory prędkości i przyspieszenia w opisie ruchów

Transformacja współrzędnych położenia między układami odniesienia

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

Nieinercjalne a inercjalne układy odniesienia — aspekty kinematyczne

Zależność kształtu toru od wyboru układu odniesienia

Zadania rachunkowe ze względności położenia i toru ruchu

Względność ruchu i transformacje układów odniesienia

Wektor przemieszczenia — definicja, własności i składowe

Prędkość średnia wektorowa a średnia prędkość skalarna

Prędkość chwilowa jako granica ilorazu przemieszczenia i czasu

Jednostki prędkości i ich zaawansowane przeliczanie w układzie SI

Wektor przyspieszenia średniego i chwilowego

Jednostka przyspieszenia w układzie SI i analiza wymiarowa

Rozkład wektora przyspieszenia na składową styczną i normalną

Klasyfikacja ruchów ze względu na przyspieszenie styczne i dośrodkowe

Podstawy wektorowego opisu ruchu: przemieszczenie, prędkość i przyspieszenie

Ruch jednostajny prostoliniowy jako ruch bez działania siły wypadkowej

Równanie położenia x(t) = x₀ + vx·t i interpretacja współczynników

Proporcjonalność prosta drogi do czasu w ruchu jednostajnym

Wykres położenia od czasu x(t) i fizyczna interpretacja współczynnika kierunkowego

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

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

Pole pod wykresem v(t) jako droga i przemieszczenie w ruchu jednostajnym

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

Zadania ze spotkaniem i doganianiem ciał w ruchu jednostajnym

Ruch jednostajny prostoliniowy — zależności funkcyjne i interpretacja graficzna

What Is Velocity?

Why Velocity Includes Direction

Distance vs Displacement

Calculating Displacement in One Dimension

Comparing Speed and Velocity

Same Speed, Different Velocity

Understanding Velocity and Displacement

Wektory prędkości i przyspieszenia w zapisie współrzędnościowym

Kąt między wektorem prędkości a wektorem przyspieszenia

Wyznaczanie wektora zmiany prędkości delta v metodą geometryczną

Pomiary wektorowych wielkości kinematycznych — aparatura i niepewności

Kompleksowe zadania z wektorowego opisu kinematyki

Analiza wektorowa ruchu na płaszczyźnie i kinematyka względna

Positive and Negative Velocity in Linear Motion

Calculating Velocity from Displacement and Time

Solving Velocity Word Problems

Using Direction Labels: North, South, East, West

Representing Velocity with Arrows

Velocity in Everyday Life: Running, Driving, Cycling

Speed and Velocity Review

Calculating and Representing Velocity in Linear Motion

Obsługa kalkulatora naukowego — kolejność działań i nawiasy

Funkcje trygonometryczne i odwrotne w obliczeniach fizycznych na kalkulatorze

Potęgowanie, pierwiastkowanie i funkcje wykładnicze w zadaniach fizycznych

Stałe fizyczne w pamięci kalkulatora i ich wprowadzanie

Analiza krytyczna wyniku obliczeń — czy otrzymana liczba ma sens fizyczny?

Rozpoznawanie typowych błędów wprowadzania danych do kalkulatora

Obliczenia numeryczne dla zjawisk w mikroświecie — atomy i cząstki

Obliczenia numeryczne dla zjawisk w skali makro i kosmicznej

Zintegrowany trening szacowania i obliczeń kalkulatorem w zadaniach maturalnych

Kalkulator naukowy i precyzyjne obliczenia w zadaniach fizycznych

Position, Distance, and Displacement Calculations

Calculating Speed and Average Velocity

Understanding and Calculating Acceleration

Distance-Time Graphs for Uniform Motion

Distance-Time Graphs for Non-Uniform Motion

Velocity-Time Graphs: Calculating Displacement and Distance

Kinematics: One- and Two-Dimensional Motion

Masa, peso y fuerza de gravedad local

El dinamómetro y la medición de fuerzas en newtons

Aceleración de la gravedad terrestre (g) y su efecto

Tu peso en la Luna y en Marte: comparación gravitacional

Gravedad en los gigantes gaseosos: Júpiter y Saturno

Densidad media de los planetas rocosos frente a gaseosos

Microgravedad y vida en la Estación Espacial Internacional

Resolución de problemas experimentales de masa, peso y densidad

Masa, peso y gravedad en el sistema solar

Definicja i cechy ruchu jednostajnie przyspieszonego oraz opóźnionego

Zależność prędkości od czasu: v(t) = v₀ + a·t oraz v(t) = v₀ - a·t

Ogólne równanie położenia w ruchu jednostajnie zmiennym: x(t) = x₀ + v₀_x·t + a_x·t²/2

Zależność między prędkością, przyspieszeniem i drogą (wzór bez czasu)

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

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

Wykresy położenia x(t) i drogi s(t) — łuk paraboli w ruchu zmiennym

Linearyzacja zależności kwadratowej — wykres drogi od kwadratu czasu s(t²)

Odczytywanie parametrów ruchu z tabeli pomiarowej — położenie, prędkość i przyspieszenie

Ruch jednostajnie zmienny — równania ruchu i analiza wykresów

Przekształcanie wzorów z karty CKE — wyznaczanie szukanej wielkości

Łączenie wzorów z różnych działów fizyki — mechanika i termodynamika

Łączenie wzorów z elektrodynamiki, magnetyzmu i fal

Łączenie wzorów z fizyki kwantowej i relatywistycznej

Analiza wzorów w postaci wektorowej a skalarnej w karcie CKE

Konwersje jednostek pozaukładowych — elektronowolty, astronomiczne i kątowe

Analiza błędów w jednostkach i weryfikacja wymiarowa rozwiązania

Trening egzaminacyjny: sprawne wykorzystanie karty wzorów w zadaniach maturalnych

Zaawansowane przekształcanie i łączenie wzorów maturalnych z fizyki

Reading the Axes on a Distance-Time Graph

Plotting Distance and Time Data on a Graph

Interpreting Distance-Time Graphs

What the Slope of a Distance-Time Graph Means

Recognizing Constant Speed on a Graph

Recognizing Acceleration on a Distance-Time Graph

Recognizing a Stationary Object on a Graph

Comparing Two Objects on a Distance-Time Graph

Równanie położenia w ruchu jednostajnym prostoliniowym: x(t) = x₀ + v_x·t

Wykres przyspieszenia od czasu a(t) dla ruchu jednostajnego

Ruch jednostajny prostoliniowy — równania ruchu i interpretacja wykresów

Spadek swobodny jako ruch jednostajnie przyspieszony z przyspieszeniem g

Doświadczenie: badanie spadku swobodnego w próżni i rura Newtona

Rzut pionowy w górę jako ruch jednostajnie opóźniony i przyspieszony

Symetria czasowa i prędkościowa w rzucie pionowym

Zadania rachunkowe ze spadku swobodnego i rzutów pionowych z wysokości początkowej h₀

Spotkanie dwóch ciał w polu grawitacyjnym (spadek i rzut pionowy naprzeciw)

Spadek swobodny i rzuty pionowe w jednorodnym polu grawitacyjnym

Cechy wektora — punkt przyłożenia, kierunek, zwrot i wartość

Geometryczne dodawanie wektorów — metoda trójkąta

Geometryczne dodawanie wektorów — metoda równoległoboku

Dodawanie wielu wektorów — metoda wieloboku wektorowego

Odejmowanie wektorów i pojęcie wektora przeciwnego

Mnożenie wektora przez skalar dodatni i ujemny

Wektory w fizyce — pojęcia podstawowe i metody geometryczne

Układ współrzędnych i rzuty wektora na osie x oraz y

Obliczanie składowych wektora za pomocą funkcji trygonometrycznych

Obliczanie wartości wektora i jego kierunku ze składowych — twierdzenie Pitagorasa

Analityczne dodawanie wektorów przez sumowanie składowych

Rozkład siły na równi pochyłej na składową styczną i normalną

Składanie prędkości w ruchu względnym — pływanie w rzece i lot z wiatrem

Iloczyn skalarny dwóch wektorów i jego zastosowanie w definicji pracy

Warunki równowagi sił dla punktu materialnego — zerowanie się sumy wektorowej

Trening rozwiązywania złożonych problemów wektorowych w mechanice

Analityczne metody wektorowe i ich zastosowanie w mechanice

Calculating Speed from the Slope of a Graph

Calculating Average Speed from Graphs

Showing Direction Changes on a Distance-Time Graph

Distance-Time vs Displacement-Time Graphs

Calculating Speed and Analyzing Complex Motion

Okres T i częstotliwość f w ruchach cyklicznych oraz ich jednostki: sekunda i herc

Ruch jednostajny po okręgu — kinematyka, okres, częstotliwość i przyspieszenie dośrodkowe

OGS.8.PS.6

Aligned learning resources

Related diagrams