# Техническое задание
## Проект «Механические волны» ✨

## 🎯 Что это такое?

**Интерактивное PWA-приложение** для изучения темы **«Механические волны. Звук среды распространения. Колебание волн»** 💫

Оформлено в **тёмном неоновом стиле** — розовый, циан и фиолетовый неон, светящиеся линии, глубокий космический фон. Работает прямо в браузере, **без сервера и без внешних библиотек** — только чистые HTML + CSS + JavaScript 💻.

---

## 🎬 Структура — 7 неоновых сцен

### Сцена 1 — Титульная
На фоне бегут неоновые синусоиды. Две кнопки:
- ▶️ **«Начать курс»** — запускает путешествие в мир волн
- ❓ **«Что такое волна?»** — открывает модалку с определением

### Сцена 2 — Что такое механическая волна?
Интерактивная **цепочка из 12 шариков**, соединённых пружинками. Слайдеры «Частота» и «Амплитуда» меняют волну в реальном времени. Кнопка **«Толкнуть»** запускает колебание — после 3 толчков открывается путь дальше 🚪.

### Сцена 3 — Среда распространения
Три «трубы» — **воздух 🍃, вода 💧, сталь ⚙️** — и гонка импульса! Наглядно видно, как звук разгоняется от 343 до 5100 м/с 🏁. Мини-квиз: где звук быстрее всего? 🧠

### Сцена 4 — Колебания: период, частота, амплитуда
Живой **маятник** 🕰️ и **осциллограф** 📈 рядом. Слайдеры амплитуды и периода мгновенно меняют анимацию. Формулы `T = 1/ν`, `ν = 1/T`, `v = λν` — на экране.

### Сцена 5 — Виды волн
Переключатель **«Продольная / Поперечная»** меняет анимацию. Мини-игра: расставь 6 молекул в позиции сжатия/разрежения и «собери звук» 🎵.

### Сцена 6 — Применение
4 карточки-перевёртыша: **эхолокация, УЗИ, сейсмология, музыка**. Плюс игра «Собери пару» — сопоставь пример и физическое явление.

### Сцена 7 — Итоговое тестирование
**10 вопросов** с 4 вариантами ответа. Прогресс-бар, мгновенная подсветка правильных/неправильных ответов, финальный экран с баллом и оценкой 🎉. Кнопка «Пройти заново».

---

## 🎨 Интерактив и мультимедиа

🔊**Аудио** — синтезируется прямо в браузере через **Web Audio API** (осцилляторы): клики, сигналы «правильно/неправильно», звук толчка. Никаких mp3-файлов не нужно 🎧.

🎥**Анимации** — 5 canvas-сцен: фон-синусоида, цепочка шариков, маятник, осциллограф, продольная/поперечная волна 〰️.

**Магнитное взаимодействие** — клик по молекуле притягивает её к ближайшей цели.

**Слайдеры** — меняют параметры анимации в реальном времени.

**Модальные окна** — всплывающие пояснения.

**Кнопка звука** — вкл/выкл в верхней панели.

---

## 🎓 Образовательная часть

Пошаговое изложение: определение → среда → характеристики колебания → виды волн → применение → тест.

Визуализация абстрактных понятий (амплитуда, частота, продольная/поперечная волна) через живую анимацию.

Проверка знаний встроена в каждый этап (мини-квизы + финальный тест из 10 вопросов).

Реальные числа и формулы: скорости звука (343 / 1480 / 5100 м/с), диапазоны (20 Гц – 20 кГц), формулы `T = 1/ν`, `v = λν`.

---

## ⚙️ Технические характеристики

**Объём:** ~700 строк, ~35 КБ, один файл  
**Зависимости:** отсутствуют полностью  
**Адаптивность:** flex-вёрстка, `clamp()`, масштабируемый canvas  
**Анимации:** `requestAnimationFrame` + CSS `@keyframes`  
**Сценарий:** 7 сцен (минимум по ТЗ — 5)  

---

## ✅ Соответствие Техническому Заданию

| Требование:
🎨 Многостраничный SPA с тёмным неон-дизайном 
💎 Красивый дизайн 
🎮 Интерактив (аудио, видео, интерфейсы) 
⏱️ Объём от 5 минут
📝 Итоговое тестирование (5–10 вопросов) 
🌊 Тематика: механические волны, звук, колебания 
📄 Сценарий в отдельном файле, минимум 5 сцен
| Реализация:
✅ 7 сцен, неоновая палитра 
✅ Свечения, градиенты, glow-shadow 
✅ Web Audio, canvas-анимации, слайдеры 
✅ Полное прохождение ≈ 5–7 минут 
✅ 10 вопросов с оценкой 
✅ Полностью раскрыта 
✅ Сценарий из 7 сцен