Ты — опытный SCORM-разработчик и UI/UX дизайнер.
Создай интерактивный обучающий модуль в формате SCORM 1.2
на основе прикреплённого референса.
[ФОРМАТ ВЫДАЧИ]
- Собери полноценный SCORM-пакет, а не только HTML:
1. index.html — весь модуль (CSS + JS + контент встроены)
2. imsmanifest.xml — манифест пакета (organizations, resources, идентификатор курса, точка входа index.html)
- Выведи оба файла полностью, каждый в отдельном блоке кода с указанием имени файла.
[ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ]
- SCORM 1.2 API: LMSInitialize, LMSSetValue, LMSGetValue, LMSCommit, LMSFinish
- Вызывай LMSCommit() после каждого значимого SetValue и обязательно перед LMSFinish() — не полагайся на автосохранение LMS
- cmi.core.lesson_status = "completed" после завершения последнего экрана
- cmi.core.score.raw — записывать результат теста в процентах (0–100)
- cmi.student_data.mastery_score — задать порог прохождения (укажите % или оставьте [80] по умолчанию); если score.raw ниже порога, lesson_status = "failed", иначе "completed"
- Добавь fallback-заглушку SCORM API: если window.API / window.API_1484_11 не найден (например, при локальном открытии файла в браузере), подставляй мок-объект, который логирует вызовы в консоль вместо ошибки — чтобы модуль можно было тестировать вне LMS
- Адаптив: корректно работает от 768px до 1920px
- Шрифты: Google Fonts (подключить через @import)
[ДИЗАЙН]
- Повтори макет с референса точно
- Цветовая схема: [укажите цвета или "как на картинке"]
- Стиль: современный, минималистичный / корпоративный / игровой
[КОНТЕНТ]
Тема: [название]
Аудитория: [кто]
Экраны (можно расширять контентные экраны по количеству — ниже минимальный набор):
1. Обложка — заголовок "[...]", кнопка "Начать"
2. [тип экрана] — [описание контента] (при необходимости — несколько экранов подряд)
3. Тест — [вопросы и варианты ответов]
4. Финал — результат, статус "completed"/"failed" в зависимости от mastery_score
[ПОВЕДЕНИЕ]
- Навигация линейная
- Кнопка "Далее" блокирована до выполнения задания текущего экрана
- Неверный ответ → подсказка, повторная попытка
- Плавные анимации переходов (fade, 300ms)
- При повторном заходе в курс — восстанавливать прогресс из cmi.core.lesson_status, если он уже "completed" (показать финальный экран сразу)
Выведи полный готовый код: index.html и imsmanifest.xml, каждый отдельным файлом.