InfiniteLoop/docs/file.md

<!DOCTYPE html>

<span id="sceneLabel">СЦЕНА 1 / 7</span>
<div class="progress"><div id="progressBar"></div></div>
<button class="icon-btn" id="soundToggle" type="button">🔊 ЗВУК</button>

<!-- 🎆 canvas для спецэффектов -->

<canvas id="bgCanvas" width="900" height="500"
  style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:.35;pointer-events:none;"></canvas>
<div style="position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;">
  <h1>Механические волны</h1>
  <p>Интерактивный курс: колебания, звук и среды распространения.</p>
  <p class="hint">Наушники приветствуются 🎧</p>
  <div style="margin-top:24px;">
    <button class="btn" id="btnStart" type="button">▶ Начать курс</button>
    <button class="btn pink" id="btnWhat" type="button">Что такое волна?</button>
  </div>
</div>

<h2>Что такое механическая волна?</h2>
<p>Это распространение колебаний в упругой среде. Частицы колеблются, но не переносятся вместе с волной.</p>
<div class="canvas-wrap"><canvas id="chainCanvas" width="800" height="200"></canvas></div>
<div class="controls">
  <div class="slider-box">
    <label>Частота: <span id="freqVal">3</span> Гц</label>
    <input type="range" id="freqSlider" min="1" max="10" value="3">
  </div>
  <div class="slider-box">
            <label>Амплитуда: <span id="ampVal">25</span> px · 🔊 <span id="ampVol">21</span>%</label>
    <input type="range" id="ampSlider" min="5" max="40" value="25">
  </div>
  <button class="btn green" id="btnPush" type="button">Толкнуть</button>
</div>
<p class="hint" id="scene2Hint">Толчков: 0 / 3</p>
<button class="btn" id="btnNext2" type="button" disabled>Далее →</button>

<h2>Среда распространения. Скорость звука</h2>
<p>Чем плотнее среда — тем быстрее идёт звук.</p>
    <div class="tubes">
  <div class="tube air"><span class="label">🌬️ Воздух ≈ 343 м/с</span><div class="impulse" data-speed="2.4"></div></div>
  <div class="tube water"><span class="label">💧 Вода ≈ 1480 м/с</span><div class="impulse" data-speed="1.2"></div></div>
  <div class="tube steel"><span class="label">⚙️ Сталь ≈ 5100 м/с</span><div class="impulse" data-speed="0.5"></div></div>
</div>
<button class="btn" id="btnImpulse" type="button">Запустить импульс</button>
<p class="question" style="margin-top:20px;">В какой среде звук распространяется быстрее всего?</p>
<div class="quiz-options" id="quiz3">
  <button class="btn" data-ans="air" type="button">Воздух</button>
  <button class="btn" data-ans="water" type="button">Вода</button>
  <button class="btn" data-ans="steel" type="button">Сталь</button>
</div>
<button class="btn" id="btnNext3" type="button" disabled style="margin-top:20px;">Далее →</button>

<h2>Колебания: период, частота, амплитуда</h2>
<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:16px;">
  <div class="canvas-wrap"><canvas id="oscCanvas" width="360" height="260"></canvas></div>
  <div class="canvas-wrap"><canvas id="waveCanvas" width="360" height="260"></canvas></div>
</div>
<div class="controls">
  <div class="slider-box">
    <label>Амплитуда: <span id="ampVal2">60</span></label>
    <input type="range" id="ampSlider2" min="20" max="100" value="60">
  </div>
  <div class="slider-box">
    <label>Период: <span id="perVal">1.2</span> с</label>
    <input type="range" id="perSlider" min="4" max="30" value="12">
  </div>
  <button class="btn pink" id="btnCheck4" type="button">Проверить понимание</button>
</div>
<p class="table">Формулы: <span>T = 1/ν</span> · <span>ν = 1/T</span> · <span>v = λν</span></p>
<button class="btn" id="btnNext4" type="button" disabled>Далее →</button>

    <!-- SCENE 5 -->

<h2>Виды волн. Звук — продольная волна</h2>

<div class="canvas-wrap">
  <canvas id="typeCanvas" width="800" height="320"></canvas>
</div>

<!-- 🎮 Мини-игра «Собери звуковую дорожку» -->
<div id="waveGame" style="max-width:760px;text-align:center;">
  <p style="margin-bottom:8px;">
    🎧 <b>Мини-игра:</b> нажми на каждый инструмент по очереди — собери <b>дорожку из 4 звуков</b>.
    Смотри, как меняется волна!
  </p>

  <div class="controls" id="instrBtns">
    <button class="btn" data-instr="piano" type="button">🎹 Пианино</button>
    <button class="btn" data-instr="drum"  type="button">🥁 Барабан</button>
    <button class="btn" data-instr="whistle" type="button">🎺 Свисток</button>
    <button class="btn" data-instr="bass"  type="button">🎸 Бас</button>
  </div>

  <div id="instrFreq" class="hint" style="font-size:.95rem;">
    🎵 Нажми на инструмент, чтобы услышать и увидеть волну
  </div>

  <!-- Дорожка со слотами -->
  <div id="track" style="display:flex;gap:10px;justify-content:center;margin:16px 0;">
    <div class="track-slot" data-slot="0">—</div>
    <div class="track-slot" data-slot="1">—</div>
    <div class="track-slot" data-slot="2">—</div>
    <div class="track-slot" data-slot="3">—</div>
  </div>

  <p class="hint" id="scene5Hint">Собрано звуков: 0 / 4</p>
</div>

<!-- 💡 Пояснение (появляется после победы) -->
<div id="waveFact" class="table" style="max-width:720px;display:none;">
  🎓 <b>Разные звуки = разные волны.</b><br>
  🔵 <b>Продольная</b> (сверху) — сжатия и разрежения. Так идёт звук в воздухе.<br>
  🟢 <b>Поперечная</b> (снизу) — гребни и впадины. Так колеблется струна или волна на воде.<br>
  🔊 Обе волны переносят <span>энергию</span>, а частицы среды <span>колеблются на месте</span>.
</div>

<button class="btn" id="btnNext5" type="button" disabled>Далее →</button>

<h2>Применение звуковых волн</h2>
<p>Нажми на карточку, чтобы узнать подробнее.</p>
    <div class="cards" id="cards">

  <div class="card eco"><div class="card-inner">
    <div class="card-face">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/616/616554.png"
           alt="Эхолокация"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🦇',style:'font-size:3.4rem;line-height:1;'}));" />
      <div class="card-title">Эхолокация</div>
    </div>
    <div class="card-face back">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/616/616554.png"
           alt="Эхолокация"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🦇',style:'font-size:1.4rem;line-height:1;'}));" />
      <div>Летучие мыши и дельфины определяют препятствия по отражённому ультразвуку.</div>
    </div>
  </div></div>

  <div class="card uzi"><div class="card-inner">
    <div class="card-face">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/2966/2966327.png"
           alt="УЗИ"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🩻',style:'font-size:3.4rem;line-height:1;'}));" />
      <div class="card-title">УЗИ</div>
    </div>
    <div class="card-face back">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/2966/2966327.png"
           alt="УЗИ"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🩻',style:'font-size:1.4rem;line-height:1;'}));" />
      <div>Медицинская визуализация: ультразвук отражается от границ тканей.</div>
    </div>
  </div></div>

  <div class="card seismo"><div class="card-inner">
    <div class="card-face">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/2909/2909760.png"
           alt="Сейсмология"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🌍',style:'font-size:3.4rem;line-height:1;'}));" />
      <div class="card-title">Сейсмология</div>
    </div>
    <div class="card-face back">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/2909/2909760.png"
           alt="Сейсмология"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🌍',style:'font-size:1.4rem;line-height:1;'}));" />
      <div>По сейсмическим волнам изучают строение Земли и землетрясения.</div>
    </div>
  </div></div>

  <div class="card music"><div class="card-inner">
    <div class="card-face">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/384/384281.png"
           alt="Музыка"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🎸',style:'font-size:3.4rem;line-height:1;'}));" />
      <div class="card-title">Музыка</div>
    </div>
    <div class="card-face back">
      <img class="card-img"
           src="https://cdn-icons-png.flaticon.com/512/384/384281.png"
           alt="Музыка"
           onerror="this.replaceWith(Object.assign(document.createElement('div'),{textContent:'🎸',style:'font-size:1.4rem;line-height:1;'}));" />
      <div>Струны и столбы воздуха создают стоячие волны — ноты.</div>
    </div>
  </div></div>

</div>
<p>Собери пару: пример ↔ физическое явление.</p>
<div class="pairs">
  <div class="pair-col" id="pairLeft"></div>
  <div class="pair-col" id="pairRight"></div>
</div>
<p class="hint" id="scene6Hint">Собрано пар: 0 / 4</p>
<button class="btn" id="btnNext6" type="button" disabled>К тестированию →</button>

<h2 id="quizTitle">Итоговое тестирование</h2>
<div class="progress-quiz"><div id="quizProgress"></div></div>
<p class="question" id="quizQuestion">…</p>
<div class="quiz-options" id="quizOptions"></div>
   <div id="quizResult" style="display:none;flex-direction:column;align-items:center;">
  <div class="final-badge" id="finalBadge">…</div>
  <div class="result-score" id="finalScore">0</div>
  <p id="finalText" style="margin:16px 0;"></p>
  <button class="btn pink" id="btnRestart" type="button">Пройти заново</button>
</div>

<div class="modal-content">
  <h2 id="modalTitle">…</h2>
  <p id="modalText" style="margin:16px 0;">…</p>
  <button class="btn" id="modalClose" type="button">Закрыть</button>
</div>