Главная / Программирование и IT / Интерактивная викторина на HTML5/CSS3/JS

Интерактивная викторина на HTML5/CSS3/JS

Описание промпта

Создай полноценное веб-приложение для интерактивных тестов с современным UI, таймерами, подсчетом очков и аналитикой результатов.

Что делает этот промпт

Генерирует код для веб-приложения викторины с таймерами, разными типами вопросов, подсчетом очков, аналитикой и сохранением результатов.

Преимущества

Помогает быстро создать готовое к использованию образовательное или развлекательное веб-приложение без необходимости писать код с нуля.

Для кого подходит

Фронтенд-разработчики, преподаватели, создатели контента, нуждающиеся в инструментах для тестирования знаний.

Инструкция по использованию промпта

Скопируй сгенерированный код в соответствующие файлы index.html, style.css и script.js. Настрой массив вопросов в JS-файле под свои нужды.

Что нужно предоставить

Требуется базовое понимание HTML/CSS/JS. Для запуска достаточно открыть HTML-файл в браузере.

Что ожидать в результате

Полностью рабочий код приложения, который можно сразу протестировать в браузере.

Рекомендации

Можно легко расширять, добавляя новые категории или типы вопросов в структуру данных.

Ограничения

Работает только в клиентской части. Для реальной многопользовательской игры требуется бэкенд.

Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли опытного фронтенд-разработчика и создай комплексное одностраничное приложение (SPA) для проведения интерактивных викторин, используя чистый HTML5, CSS3 и JavaScript (без внешних фреймворков).

Требования к функционалу:
1. **Интерфейс**: Создай привлекательный и отзывчивый UI с плавными CSS-переходами между вопросами. Используй динамическую шкалу прогресса, показывающую процент завершения.
2. **Типы вопросов**: Поддерживай несколько форматов: выбор одного варианта, правда/ложь, сопоставление пар и короткий текстовый ответ.
3. **Таймеры**: Реализуй настраиваемые таймеры для каждого вопроса с визуальным обратным отсчетом.
4. **Система очков**: Автоматическая оценка ответов. Очки должны зависеть от сложности вопроса и скорости ответа. Поддержка нескольких уровней сложности.
5. **Категории**: Организуй вопросы по категориям с возможностью добавления кастомных иконок и описаний.
6. **Режим обзора**: После завершения теста покажи детальный обзор с правильными/неправильными ответами и пояснениями.
7. **Аналитика**: Сгенерируй итоговую сводку с метриками производительности и рекомендациями по улучшению.
8. **Лидерборд**: Сохраняй результаты в localStorage для создания постоянного списка лидеров.
9. **Шаринг**: Добавь функционал для социальных сетей с настраиваемыми сообщениями.

Код должен быть модульным, хорошо прокомментированным и готовым к запуску в браузере.

Интерактивная викторина на HTML5/CSS3/JS

Поделитесь в социальных сетях

Комментарии