tz.md 6.3 KB
Техническое задание
Проект «Механические волны» ✨
🎯 Что это такое?
Интерактивное 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 сцен