<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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;
      align-items: center;
      justify-content: flex-start;
      min-height: auto;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 520px;
      margin-bottom: 10px;
    }

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

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .panel.active-speaking {
      border-color: #fcd34d;
      background: #fffdf5;
    }

    .title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 6px;
      text-align: center;
      color: #0f172a;
    }

    .canvas-wrap {
      width: 100%;
      height: 120px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .status-tag {
      margin-top: 6px;
      font-size: 11.5px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      text-align: center;
    }

    .tag-silent {
      background: #e0f2fe;
      color: #0369a1;
    }

    .tag-voice {
      background: #fef3c7;
      color: #b45309;
    }

    /* Airway Graphics */
    .throat-tube {
      width: 90px;
      height: 114px;
      background: #e2e8f0;
      border-radius: 45px;
      position: relative;
      overflow: hidden;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vocal-cord {
      position: absolute;
      width: 36px;
      height: 26px;
      background: #fb7185;
      border: 1.5px solid #e11d48;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.4s ease;
    }

    .cord-left {
      left: 0;
      border-radius: 0 13px 13px 0;
    }

    .cord-right {
      right: 0;
      border-radius: 13px 0 0 13px;
    }

    /* Breathing State: Cords wide open */
    .open .cord-left { transform: translateY(-50%) translateX(-6px); }
    .open .cord-right { transform: translateY(-50%) translateX(6px); }

    /* Speaking State: Cords together & vibrating smoothly (>=500ms duration) */
    .speaking .cord-left {
      left: 8px;
      animation: buzz-left 0.55s infinite alternate ease-in-out;
    }
    .speaking .cord-right {
      right: 8px;
      animation: buzz-right 0.55s infinite alternate ease-in-out;
    }

    @keyframes buzz-left {
      0% { transform: translateY(-50%) translateX(0px); }
      100% { transform: translateY(-50%) translateX(2.5px); }
    }

    @keyframes buzz-right {
      0% { transform: translateY(-50%) translateX(0px); }
      100% { transform: translateY(-50%) translateX(-2.5px); }
    }

    /* Air particles */
    .air-flow {
      position: absolute;
      width: 3.5px;
      height: 14px;
      background: #38bdf8;
      border-radius: 4px;
      opacity: 0.8;
      animation: flow-up 1.6s infinite linear;
    }
    .air-1 { left: 36px; animation-delay: 0s; }
    .air-2 { left: 43px; animation-delay: 0.55s; }
    .air-3 { left: 50px; animation-delay: 1.1s; }

    @keyframes flow-up {
      0% { bottom: -16px; opacity: 0; }
      40% { opacity: 0.9; }
      100% { bottom: 120px; opacity: 0; }
    }

    /* Sound waves radiating gently */
    .sound-wave {
      position: absolute;
      border: 2px solid #f59e0b;
      border-radius: 50%;
      opacity: 0;
      animation: wave-expand 2.2s infinite ease-out;
      pointer-events: none;
    }
    .wave-1 { animation-delay: 0s; }
    .wave-2 { animation-delay: 0.75s; }
    .wave-3 { animation-delay: 1.5s; }

    @keyframes wave-expand {
      0% { width: 30px; height: 30px; opacity: 0.85; transform: scale(0.6); }
      100% { width: 125px; height: 125px; opacity: 0; transform: scale(1.25); }
    }

    /* Touch neck hand overlay */
    .touch-hand {
      position: absolute;
      right: 12px;
      bottom: 12px;
      font-size: 24px;
      display: none;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
      animation: hand-vibe 0.55s infinite alternate ease-in-out;
    }

    .touch-hand.active {
      display: block;
    }

    .vibe-sparkle {
      position: absolute;
      right: 32px;
      bottom: 34px;
      font-size: 14px;
      color: #f59e0b;
      display: none;
      animation: pulse 0.6s infinite alternate ease-in-out;
    }

    .vibe-sparkle.active {
      display: block;
    }

    @keyframes hand-vibe {
      0% { transform: translate(0, 0); }
      100% { transform: translate(-2px, 2px); }
    }

    @keyframes pulse {
      0% { opacity: 0.4; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1.1); }
    }

    /* Interactive Button */
    .touch-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 20px;
      padding: 7px 16px;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
      transition: background-color 0.2s, opacity 0.2s;
    }

    .touch-btn:hover {
      opacity: 0.92;
    }

    .touch-btn.active {
      background: #d97706;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div class="title">Breathing (No Sound)</div>
      <div class="canvas-wrap">
        <div class="throat-tube open">
          <div class="air-flow air-1"></div>
          <div class="air-flow air-2"></div>
          <div class="air-flow air-3"></div>
          <div class="vocal-cord cord-left"></div>
          <div class="vocal-cord cord-right"></div>
        </div>
      </div>
      <div class="status-tag tag-silent">Still = No sound</div>
    </div>

    
    <div class="panel active-speaking" id="speakingCard">
      <div class="title">Talking / Humming</div>
      <div class="canvas-wrap">
        
        <div class="sound-wave wave-1"></div>
        <div class="sound-wave wave-2"></div>
        <div class="sound-wave wave-3"></div>

        <div class="throat-tube speaking">
          <div class="vocal-cord cord-left"></div>
          <div class="vocal-cord cord-right"></div>
        </div>

        <div class="vibe-sparkle" id="sparkle">⚡</div>
        <div class="touch-hand" id="hand">✋</div>
      </div>
      <div class="status-tag tag-voice">Vibrating = Voice created!</div>
    </div>
  </div>

  <button class="touch-btn" id="touchToggle" onclick="toggleTouch()">
    <span id="btnIcon">✋</span> <span id="btnText">Touch Neck to Feel</span>
  </button>

  <script>
    let touching = false;
    let audioCtx = null;
    let osc = null;
    let gainNode = null;

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        osc = audioCtx.createOscillator();
        gainNode = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(130, audioCtx.currentTime); // Vocal hum frequency ~130 Hz
        gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
        osc.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        osc.start();
      }
    }

    function toggleTouch() {
      touching = !touching;
      const hand = document.getElementById('hand');
      const sparkle = document.getElementById('sparkle');
      const btn = document.getElementById('touchToggle');
      const btnText = document.getElementById('btnText');

      if (touching) {
        hand.classList.add('active');
        sparkle.classList.add('active');
        btn.classList.add('active');
        btnText.textContent = "Feeling Vibration! (Humming)";
        
        try {
          initAudio();
          if (audioCtx.state === 'suspended') {
            audioCtx.resume();
          }
          gainNode.gain.setTargetAtTime(0.15, audioCtx.currentTime, 0.05);
        } catch (e) {}
      } else {
        hand.classList.remove('active');
        sparkle.classList.remove('active');
        btn.classList.remove('active');
        btnText.textContent = "Touch Neck to Feel";

        if (gainNode && audioCtx) {
          gainNode.gain.setTargetAtTime(0, audioCtx.currentTime, 0.05);
        }
      }
    }
  </script>
</body>
</html>

Sound Is Caused by Mechanical Vibrations

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

    .main-view {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 250px;
      background: #e8a86b;
      background: linear-gradient(180deg, #df9b5e 0%, #caa477 50%, #df9b5e 100%);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 0 40px rgba(0,0,0,0.18);
    }

    /* Sound hole */
    .sound-hole {
      position: absolute;
      width: 120px;
      height: 120px;
      background: #181512;
      border-radius: 50%;
      border: 8px solid #c48b52;
      box-shadow: inset 0 4px 12px rgba(0,0,0,0.8), 0 0 0 2px #fff3;
    }

    /* Bridge & Nut brackets */
    .nut {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 70px;
      background: #3a2215;
      border-radius: 3px;
      box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    }
    .bridge {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 70px;
      background: #3a2215;
      border-radius: 4px;
      box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    }

    /* String layers */
    .string-container {
      position: absolute;
      left: 20px;
      right: 24px;
      height: 60px;
      top: calc(50% - 30px);
      display: flex;
      align-items: center;
      pointer-events: none;
    }

    .string-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Sound wave ripples */
    .wave-ring {
      position: absolute;
      border: 2.5px solid #22b7ff;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }

    .vibrating .wave-1 {
      animation: ripple 1.6s ease-out infinite;
    }
    .vibrating .wave-2 {
      animation: ripple 1.6s ease-out infinite 0.5s;
    }
    .vibrating .wave-3 {
      animation: ripple 1.6s ease-out infinite 1s;
    }

    @keyframes ripple {
      0% { width: 30px; height: 30px; opacity: 0.9; transform: translate(-50%, -50%) scale(0.6); }
      100% { width: 230px; height: 230px; opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
    }

    /* Finger damper */
    .damper-finger {
      position: absolute;
      top: calc(50% - 75px);
      left: 50%;
      transform: translate(-50%, -40px);
      font-size: 40px;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
      opacity: 0;
      pointer-events: none;
      z-index: 10;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }
    .muted-state .damper-finger {
      transform: translate(-50%, -10px);
      opacity: 1;
    }

    /* Note icon */
    .note-icon {
      position: absolute;
      top: 24px;
      right: 32px;
      font-size: 28px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .vibrating .note-icon {
      opacity: 1;
      animation: floatNote 1.4s ease-in-out infinite alternate;
    }
    @keyframes floatNote {
      0% { transform: translateY(0) rotate(-5deg); }
      100% { transform: translateY(-8px) rotate(8deg); }
    }

    /* Status badge */
    .status-badge {
      margin-top: 10px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      background: #f1f5f9;
      color: #475569;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.3s, color 0.3s;
    }
    .status-badge.active-sound {
      background: #e0f2fe;
      color: #0284c7;
    }
    .status-badge.active-mute {
      background: #fee2e2;
      color: #dc2626;
    }

    /* Buttons */
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 420px;
      margin-top: 10px;
    }
    .btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 8px;
      border: 2px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
    }
    .btn-pluck {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 3px 0 #0093dd;
    }
    .btn-pluck:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #0093dd;
    }
    .btn-mute {
      background: #f8fafc;
      color: #334155;
      border-color: #cbd5e1;
      box-shadow: 0 3px 0 #94a3b8;
    }
    .btn-mute:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 #94a3b8;
    }
    .btn.active-btn {
      outline: 2px solid #0f172a;
      outline-offset: 1px;
    }
  </style>
</head>
<body>

  <div class="main-view" id="stage">
    <div class="sound-hole"></div>
    
    
    <div class="wave-ring wave-1" style="left: 50%; top: 50%;"></div>
    <div class="wave-ring wave-2" style="left: 50%; top: 50%;"></div>
    <div class="wave-ring wave-3" style="left: 50%; top: 50%;"></div>

    <div class="nut"></div>
    <div class="bridge"></div>

    <div class="note-icon">🎵</div>

    <div class="string-container">
      <svg class="string-svg" viewBox="0 0 500 60" preserveAspectRatio="none">
        
        <path id="blurTop" d="M 0 30 Q 250 12 500 30" fill="none" stroke="#f8fafc" stroke-width="3" opacity="0"/>
        <path id="blurBot" d="M 0 30 Q 250 48 500 30" fill="none" stroke="#f8fafc" stroke-width="3" opacity="0"/>
        <path id="blurMid" d="M 0 30 Q 250 22 500 30" fill="none" stroke="#e2e8f0" stroke-width="2" opacity="0"/>
        <path id="blurMid2" d="M 0 30 Q 250 38 500 30" fill="none" stroke="#e2e8f0" stroke-width="2" opacity="0"/>
        
        <path id="mainString" d="M 0 30 Q 250 30 500 30" fill="none" stroke="#ffffff" stroke-width="4.5" stroke-linecap="round"/>
      </svg>
    </div>

    
    <div class="damper-finger" id="finger">👇</div>
  </div>

  <div class="status-badge" id="statusBadge">Tap Pluck to start</div>

  <div class="controls">
    <button class="btn btn-pluck" id="pluckBtn">▶ Pluck String</button>
    <button class="btn btn-mute" id="muteBtn">✋ Mute String</button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const pluckBtn = document.getElementById('pluckBtn');
    const muteBtn = document.getElementById('muteBtn');
    const statusBadge = document.getElementById('statusBadge');
    const blurTop = document.getElementById('blurTop');
    const blurBot = document.getElementById('blurBot');
    const blurMid = document.getElementById('blurMid');
    const blurMid2 = document.getElementById('blurMid2');

    let audioCtx = null;
    let osc = null;
    let gainNode = null;
    let isVibrating = false;

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playTone() {
      initAudio();
      stopTone();

      osc = audioCtx.createOscillator();
      gainNode = audioCtx.createGain();

      // Plucked string frequency (E3 ~ 164.8 Hz)
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(164.81, audioCtx.currentTime);

      gainNode.gain.setValueAtTime(0.35, audioCtx.currentTime);
      // Gentle sustained decay
      gainNode.gain.exponentialRampToValueAtTime(0.08, audioCtx.currentTime + 1.2);

      osc.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      osc.start();
    }

    function stopTone() {
      if (gainNode && audioCtx) {
        try {
          gainNode.gain.cancelScheduledValues(audioCtx.currentTime);
          gainNode.gain.setValueAtTime(gainNode.gain.value, audioCtx.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.04);
          setTimeout(() => {
            if (osc) { osc.stop(); osc.disconnect(); osc = null; }
          }, 50);
        } catch (e) {}
      }
    }

    function pluck() {
      isVibrating = true;
      stage.classList.remove('muted-state');
      stage.classList.add('vibrating');

      blurTop.setAttribute('opacity', '0.65');
      blurBot.setAttribute('opacity', '0.65');
      blurMid.setAttribute('opacity', '0.45');
      blurMid2.setAttribute('opacity', '0.45');

      statusBadge.textContent = 'Vibration = Sound';
      statusBadge.className = 'status-badge active-sound';

      pluckBtn.classList.add('active-btn');
      muteBtn.classList.remove('active-btn');

      playTone();
    }

    function mute() {
      isVibrating = false;
      stage.classList.remove('vibrating');
      stage.classList.add('muted-state');

      blurTop.setAttribute('opacity', '0');
      blurBot.setAttribute('opacity', '0');
      blurMid.setAttribute('opacity', '0');
      blurMid2.setAttribute('opacity', '0');

      statusBadge.textContent = 'No vibration = No sound';
      statusBadge.className = 'status-badge active-mute';

      muteBtn.classList.add('active-btn');
      pluckBtn.classList.remove('active-btn');

      stopTone();
    }

    pluckBtn.addEventListener('click', pluck);
    muteBtn.addEventListener('click', mute);
  </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>Vibration and Sound</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: #f8f9fa;
      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;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    .diagram-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .svg-wrapper {
      width: 100%;
      position: relative;
    }

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

    .controls {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    button {
      background: #1e2945;
      color: #ffffff;
      border: 2px solid transparent;
      border-radius: 24px;
      padding: 10px 22px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    button:hover {
      opacity: 0.9;
    }

    button:active {
      opacity: 0.8;
    }

    /* Animation states - smooth 360ms wobble without strobe */
    .ruler-vibrating {
      transform-origin: 180px 160px;
      animation: rulerWobble 0.36s infinite alternate ease-in-out;
    }

    .ghost-blur {
      transform-origin: 180px 160px;
      animation: ghostSpread 0.36s infinite alternate ease-in-out;
      opacity: 0.35;
    }

    .wave-arc {
      animation: wavePulse 1.4s infinite linear;
      transform-origin: 320px 160px;
    }
    .wave-arc:nth-child(2) { animation-delay: 0.45s; }
    .wave-arc:nth-child(3) { animation-delay: 0.9s; }

    @keyframes rulerWobble {
      0% { transform: rotate(-6deg); }
      100% { transform: rotate(6deg); }
    }

    @keyframes ghostSpread {
      0% { transform: rotate(6deg); }
      100% { transform: rotate(-6deg); }
    }

    @keyframes wavePulse {
      0% {
        opacity: 0;
        transform: scale(0.6) translateX(-8px);
      }
      30% {
        opacity: 0.95;
      }
      75% {
        opacity: 0.7;
      }
      100% {
        opacity: 0;
        transform: scale(1.5) translateX(35px);
      }
    }

    .paused .ruler-vibrating,
    .paused .ghost-blur {
      animation: none;
      transform: rotate(0deg);
    }

    .paused .sound-group,
    .paused .motion-lines {
      display: none;
    }
  </style>
</head>
<body>

  <div class="diagram-container" id="stage">
    <div class="svg-wrapper">
      <svg viewBox="0 0 500 310" aria-label="Diagram showing ruler vibration producing sound">
        <defs>
          
          <linearGradient id="rulerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#38bdf8" />
            <stop offset="100%" stop-color="#0284c7" />
          </linearGradient>
          
          <linearGradient id="tableGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#e2e8f0" />
            <stop offset="100%" stop-color="#cbd5e1" />
          </linearGradient>
        </defs>

        
        <rect x="0" y="165" width="180" height="145" fill="url(#tableGrad)" />
        <line x1="0" y1="165" x2="180" y2="165" stroke="#94a3b8" stroke-width="3" />
        <text x="75" y="215" font-size="14" font-weight="600" fill="#64748b">Table</text>

        
        <g id="soundGroup" class="sound-group">
          <path class="wave-arc" d="M 350 110 A 55 55 0 0 1 350 210" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" />
          <path class="wave-arc" d="M 380 90 A 85 85 0 0 1 380 230" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" />
          <path class="wave-arc" d="M 410 70 A 115 115 0 0 1 410 250" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" />
          <text x="395" y="55" font-size="16" font-weight="700" fill="#d97706" text-anchor="middle">Sound 🔊</text>
        </g>

        
        <g id="ghostRuler" class="ghost-blur">
          <rect x="180" y="155" width="140" height="10" rx="3" fill="#38bdf8" />
        </g>

        
        
        <rect x="30" y="155" width="150" height="10" rx="2" fill="#0284c7" />
        <line x1="50" y1="155" x2="50" y2="165" stroke="#ffffff" stroke-width="1.5" />
        <line x1="80" y1="155" x2="80" y2="165" stroke="#ffffff" stroke-width="1.5" />
        <line x1="110" y1="155" x2="110" y2="165" stroke="#ffffff" stroke-width="1.5" />
        <line x1="140" y1="155" x2="140" y2="165" stroke="#ffffff" stroke-width="1.5" />
        <line x1="170" y1="155" x2="170" y2="165" stroke="#ffffff" stroke-width="1.5" />

        
        <g id="rulerBlade" class="ruler-vibrating">
          <rect x="180" y="155" width="140" height="10" rx="3" fill="url(#rulerGrad)" />
          
          <line x1="200" y1="155" x2="200" y2="165" stroke="#ffffff" stroke-width="1.5" />
          <line x1="220" y1="155" x2="220" y2="162" stroke="#ffffff" stroke-width="1" />
          <line x1="240" y1="155" x2="240" y2="165" stroke="#ffffff" stroke-width="1.5" />
          <line x1="260" y1="155" x2="260" y2="162" stroke="#ffffff" stroke-width="1" />
          <line x1="280" y1="155" x2="280" y2="165" stroke="#ffffff" stroke-width="1.5" />
          <line x1="300" y1="155" x2="300" y2="162" stroke="#ffffff" stroke-width="1" />
        </g>

        
        <g transform="translate(85, 107)">
          <ellipse cx="25" cy="46" rx="28" ry="12" fill="#fed7aa" stroke="#ea580c" stroke-width="1.5" />
          
          <rect x="6" y="24" width="9" height="24" rx="4.5" fill="#fcd34d" stroke="#d97706" stroke-width="1.5" />
          <rect x="16" y="20" width="9" height="28" rx="4.5" fill="#fcd34d" stroke="#d97706" stroke-width="1.5" />
          <rect x="26" y="21" width="9" height="27" rx="4.5" fill="#fcd34d" stroke="#d97706" stroke-width="1.5" />
          <rect x="36" y="25" width="9" height="23" rx="4.5" fill="#fcd34d" stroke="#d97706" stroke-width="1.5" />
          
          <path d="M 25 2 L 25 14 M 21 10 L 25 14 L 29 10" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
          <text x="25" y="-3" font-size="12" font-weight="700" fill="#0284c7" text-anchor="middle">Held Firm</text>
        </g>

        
        <g id="motionLines" class="motion-lines">
          
          <path d="M 330 135 L 330 185 M 325 142 L 330 133 L 335 142 M 325 178 L 330 187 L 335 178" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
          
          
          <rect x="160" y="260" width="310" height="34" rx="17" fill="#e0f2fe" stroke="#38bdf8" stroke-width="1.5" />
          <text x="315" y="282" font-size="13" font-weight="700" fill="#0369a1" text-anchor="middle">Rapid Back-and-Forth Motion = Vibration</text>
        </g>
      </svg>
    </div>

    <div class="controls">
      <button id="toggleBtn" aria-label="Hold ruler still or pluck ruler">✋ Hold Still</button>
    </div>
  </div>

  <script>
    let vibrating = true;
    const stage = document.getElementById('stage');
    const toggleBtn = document.getElementById('toggleBtn');
    let audioCtx = null;

    function playPluckSound() {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(140, audioCtx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(80, audioCtx.currentTime + 0.3);
        
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);

        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    toggleBtn.addEventListener('click', () => {
      vibrating = !vibrating;
      if (vibrating) {
        stage.classList.remove('paused');
        toggleBtn.innerHTML = '✋ Hold Still';
        toggleBtn.style.background = '#1e2945';
        playPluckSound();
      } else {
        stage.classList.add('paused');
        toggleBtn.innerHTML = '⚡ Pluck Ruler';
        toggleBtn.style.background = '#0284c7';
      }
    });
  </script>
</body>
</html>

Badania empiryczne — planowanie obserwacji i eksperymentu przyrodniczego

Hipoteza badawcza, próba badawcza i próba kontrolna

Narzędzia pomiarowe w pracowni przyrodniczej — menzurka, waga i stoper

Odczytywanie skali przyrządów i dokładność pomiaru

Jednostki wielkości fizycznych w układzie SI i przedrostki jednostek

Przeliczanie jednostek długości, masy, powierzchni i objętości

Wyznaczanie gęstości ciał stałych o kształcie foremnym i nieforemnym

Wyznaczanie gęstości cieczy za pomocą wagi i cylindra miarowego

Rejestrowanie danych w tabelach i tworzenie wykresów zależności

Analiza źródeł błędów pomiarowych i niepewności w doświadczeniu

science

Metodologia badań naukowych i pomiary przyrodnicze

Metoda naukowa: obserwacja, pytanie badawcze i hipoteza

Planowanie eksperymentu — próba badawcza i kontrolna

Zmienne w badaniach: niezależna, zależna i kontrolowana

Podstawowe przyrządy laboratoryjne i ich przeznaczenie

Jednostki układu SI, przedrostki i konwersje jednostek

Dokładność pomiaru, działka elementarna i niepewność pomiarowa

Pomiary masy, objętości i gęstości w praktyce

Tabelaryczne i graficzne przedstawianie danych pomiarowych

Interpretacja wykresów: interpolacja i ekstrapolacja wyników

Bezpieczeństwo w pracowni i znaki ostrzegawcze GHS

Metodyka badań naukowych, narzędzia i pomiary

Zjawisko drgań w przyrodzie i przykłady ciał drgających

Położenie równowagi i wychylenie ciała z równowagi

Amplituda drgań jako maksymalne wychylenie

Punkty zwrotne w ruchu drgającym

Ruch drgający: amplituda, okres i częstotliwość drgań

Jedno pełne drganie — cykl ruchu oscylatora

Okres drgań jako czas jednego pełnego drgania

Częstotliwość drgań i jej jednostka herc

Związek między okresem a częstotliwością: wzór f = 1/T

Zadania rachunkowe: okres i częstotliwość drgań

Ruch drgający i zjawisko oscylacji — podstawy

Położenie równowagi, wychylenie i amplituda drgań

Jednostka częstotliwości — herc (Hz) i jej wielokrotności

Zależność między okresem a częstotliwością drgań f = 1/T

Pomiary okresu drgań wahadła prostego za pomocą stopera

Doświadczalne badanie wpływu długości nitki na okres wahadła

Doświadczalne badanie wpływu masy ciężarka na okres drgań wahadła

Drgania ciężarka na sprężynie — wyznaczanie okresu i częstotliwości

Wykres zależności wychylenia od czasu w ruchu drgającym

Ruch drgający — okres, częstotliwość i amplituda

Budowa i ruch wahadła matematycznego

Wahadło matematyczne: czynniki determinujące okres (izochronizm małych drgań)

Doświadczenie: Badanie niezależności okresu drgań wahadła od amplitudy

Doświadczenie: Badanie wpływu masy ciężarka na okres wahadła

Doświadczenie: Badanie zależności okresu drgań od długości wahadła

Metoda pomiaru czasu serii drgań

Wahadło w różnych miejscach Ziemi i na Księżycu

Zastosowania wahadła — zegary wahadłowe i pomiary czasu

Ruch wahadła i parametry ruchu okresowego

Właściwości fizyczne i chemiczne substancji — porównanie

Cząsteczkowa struktura ciał stałych, cieczy i gazów

Dyfuzja i ruchy termiczne cząsteczek

Topnienie i krzepnięcie — analiza krzywych ogrzewania i chłodzenia

Parowanie, wrzenie i skraplanie cieczy

Sublimacja i resublimacja w przyrodzie i technice

Gęstość substancji i jej zależność od temperatury

Mieszaniny jednorodne i niejednorodne — rozpoznawanie

Metody rozdzielania mieszanin: filtracja, sedymentacja, destylacja

Roztwory właściwe, rozpuszczalność i czynniki wpływające na rozpuszczanie

Właściwości materii, stany skupienia i przemiany fazowe

Budowa atomu: protony, neutrony i elektrony

Liczba atomowa Z i liczba masowa A w zapisie nuklidów

Izotopy i ich znaczenie w przyrodzie

Powłoki elektronowe i elektrony walencyjne

Układ okresowy: grupy, okresy i ich znaczenie fizykochemiczne

Metale, niemetale i półmetale w układzie okresowym

Okresowość właściwości: promień atomowy i reaktywność

Wiązanie kowalencyjne: niespolaryzowane i spolaryzowane

Wiązanie jonowe: powstawanie kationów i anionów

Wiązanie metaliczne i sieci krystaliczne — podsumowanie

Budowa atomu i układ okresowy pierwiastków

Siła sprężystości jako siła zwracająca

Ruch drgający ciężarka na poziomej i pionowej sprężynie

Doświadczenie: Badanie zależności okresu drgań ciężarka od jego masy

Wpływ sztywności sprężyny na częstotliwość drgań

Prędkość i przyspieszenie w ruchu oscylatora sprężynowego

Drgania tłumione i wpływ oporów ruchu

Drgania ciężarka na sprężynie i siła sprężystości

Powstawanie fal mechanicznych w ośrodkach sprężystych

Fale poprzeczne na sznurze i sprężynie

Fale podłużne w gazach i cieczach

Długość fali mechanicznej i jej prędkość w ośrodku

Związek prędkości fali z jej długością i częstotliwością v = λ · f

Źródła fal dźwiękowych — drgające ciała i słupy powietrza

Rozchodzenie się dźwięku w powietrzu, wodzie i ciałach stałych

Brak rozchodzenia się fal dźwiękowych w próżni — dzwonek pod kloszem

Pomiar prędkości dźwięku w powietrzu metodami doświadczalnymi

Przenoszenie energii przez fale mechaniczne i dźwiękowe

Fale mechaniczne i powstawanie dźwięku

Wysokość dźwięku a częstotliwość drgań źródła

Głośność dźwięku a amplituda drgań źródła

Barwa dźwięku i składowe harmoniczne tonów

Demonstracja dźwięków z użyciem drgającej linijki i naciągniętej struny

Doświadczenia z kamertonami i pudłami rezonansowymi

Budowa i powstawanie dźwięku w instrumentach strunowych

Powstawanie dźwięku w instrumentach dętych — drgania słupa powietrza

Instrumenty perkusyjne — drgania membran, płyt i prętów

Rejestracja i obserwacja oscylogramów dźwięków za pomocą komputera i smartfona

Porównanie oscylogramu tonu prostego, dźwięku instrumentu i szumu

Akustyka doświadczalna — instrumenty muzyczne i oscylogramy

Factores bióticos y abióticos del ecosistema

Tipos de ecosistemas: Terrestres y acuáticos

Productores, consumidores y descomponedores

Cadenas y redes alimentarias

Pirámides de energía y flujo energético

Relaciones entre especies: Simbiosis, competencia y depredación

Equilibrio ecológico y cambios en las poblaciones

Impacto humano en los ecosistemas

Estrategias de conservación y protección de la biodiversidad

Ecosistemas, cadenas tróficas y flujo de energía

Ruch wahadła matematycznego z punktu widzenia przemian energii

Energia kinetyczna i potencjalna sprężystości w oscylatorze sprężynowym

Stan energii w położeniu równowagi

Stan energii w punktach zwrotnych

Zasada zachowania energii mechanicznej w ruchu drgającym

Rozpraszanie energii mechanicznej w układach drgających

Drgania wymuszone i uzupełnianie strat energii

Przemiany energii w ruchu drgającym

Zjawisko fizyczne a reakcja chemiczna — objawy reakcji

Substraty i produkty — zapis słowny przemian

Typy reakcji: synteza, analiza i wymiana

Dobieranie współczynników stechiometrycznych w równaniach reakcji

Prawo zachowania masy Łomonosowa-Lavoisiera w doświadczeniach

Prawo stałości składu Prousta i stosunek masowy

Obliczenia masowe na podstawie równań reakcji chemicznych

Efekty energetyczne: reakcje egzotermiczne i endotermiczne

Czynniki wpływające na szybkość reakcji: temperatura, rozdrobnienie, katalizator

OGS.4.PS.8

Aligned learning resources

Related diagrams