|
|
@@ -1 +1,94 @@
|
|
|
-# Техническое задание
|
|
|
+# Техническое задание
|
|
|
+## Проект «Механические волны» ✨
|
|
|
+
|
|
|
+## 🎯 Что это такое?
|
|
|
+
|
|
|
+**Интерактивное 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 сцен
|
