Приложения-викторины являются популярным способом не только развлечь пользователей, но и обеспечить им обучение или проверку знаний. В этой статье мы рассмотрим создание приложения-викторины с использованием JavaScript, HTML и CSS. Мы предоставим подробную инструкцию и примеры кода для каждого этапа, а также обсудим основные концепции, такие как генерация, обработка ответов пользователей и отображение оценки. Давайте начнем!

Структура

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

  1. HTML: будет содержать структуру вашего приложения и интерфейс пользователя.
  2. CSS: файл стилей, чтобы сделать ваш проект привлекательным и удобным в использовании.
  3. JavaScript: основной код, включая логику викторины, генерацию вопросов и проверку ответов.
  4. JSON: файл с вопросами и правильными ответами. Мы будем хранить их в формате JSON.

Создание HTML-структуры

ОНЛАЙН-ПРАКТИКУМ
КАК «ХАКНУТЬ» PYTHON С ПОМОЩЬЮ CHATGPT
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
  • Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
  • Что ждет рынок программирования и почему мы решили сюда пойти
Участвовать бесплатно

HTML будет базой нашего приложения. Давайте создадим простую структуру, включая заголовок, вопрос, варианты ответов и кнопку для перехода к следующему вопросу:

«`html

<!DOCTYPE html>

<html>

<head>

<title>Приложение на JavaScript</title>

<link rel=»stylesheet» type=»text/css» href=»styles.css»>

</head>

<body>

<div class=»quiz-container»>

<h1>Приветствуем в VictoRine</h1>

<p id=»question»>Ваш вопрос появится здесь</p>

<div class=»options»>

<button id=»option1″>Вариант 1</button>

<button id=»option2″>Вариант 2</button>

<button id=»option3″>Вариант 3</button>

</div>

<button id=»next-button»>Далее</button>

</div>

<script src=»script.js»></script>

</body>

</html>

«`

Стилизация с помощью CSS

Стилизация важна для привлечения пользователей. Вот пример CSS для придания вашей викторине привлекательного вида:

«`css

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

text-align: center;

margin: 0;

padding: 0;

}

.quiz-container {

background-color: #fff;

max-width: 500px;

margin: 0 auto;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

h1 {

font-size: 24px;

color: #333;

}

#question {

font-size: 18px;

margin-top: 20px;

}

.options {

display: flex;

flex-direction: column;

margin-top: 20px;

}

button {

background-color: #007BFF;

color: #fff;

border: none;

padding: 10px;

margin-bottom: 10px;

border-radius: 5px;

cursor: pointer;

}

#next-button {

background-color: #28A745;

}

«`

Нейросети для жизни и карьеры в 2025:
как использовать для успеха
Вы узнаете о том:
  • Как нейросети могут изменить вашу деятельность, от фриланса до управления бизнесом.
  • Как использовать GPT-агентов, цифровые двойники и другие ИИ-решения.
  • Важность безопасности в эпоху нейросетей.
  • Какие нейросети помогут вам и как на них зарабатывать.
  • 10 способов применения ИИ для бизнеса.
Участвовать бесплатно
Как «хакнуть» Python с помощью ChatGPT
и стать «программистом будущего»
Вы узнаете:
  • Как внедрение ИИ в бизнес-процессы помогает улучшить финансовые результаты компаний в 2025 году.
  • Мы асскажем, кто такой промпт-инжинер, чем он занимается и какие результаты можно ожидать от его работы.
  • Также обсудим, где найти промт-инжинера, сколько стоят его услуги в России и за рубежем, и кто может стать промпт-инженером.
Участвовать бесплатно

JavaScript

JavaScript – это мозги нашей викторины. Он будет отвечать за генерацию, обработку ответов пользователей и вычисление их оценки. Вот пример основного кода:

«`javascript

// Массив (в формате JSON)

const questions = [

{

question: «Сколько планет в солнечной системе?»,

options: [«7», «8», «9»],

correctAnswer: 1

},

{

question: «Какое наименьшее простое число?»,

options: [«0», «1», «2»],

correctAnswer: 2

},

{

question: «Что символизирует красный цвет на светофоре?»,

options: [«Стоп», «Поехали», «Медленно»],

correctAnswer: 0

}

];

let currentQuestion = 0;

let score = 0;

const questionText = document.getElementById(«question»);

const optionButtons = document.querySelectorAll(«.options button»);

const nextButton = document.getElementById(«next-button»);

function startQuiz() {

questionText.innerText = questions[currentQuestion].question;

optionButtons.forEach((button, index) => {

button.innerText = questions[currentQuestion].options[index];

button.addEventListener(«click», () => checkAnswer(index));

});

}

function checkAnswer(selectedIndex) {

if (selectedIndex === questions[currentQuestion].correctAnswer) {

score++;

}

currentQuestion++;

if (currentQuestion < questions.length) {

questionText.innerText = questions[currentQuestion].question;

optionButtons.forEach((button, index) => {

button.innerText = questions[currentQuestion].options[index];

});

} else {

finishQuiz();

 

}

}

function finishQuiz() {

// Выводим результаты

questionText.innerText = `Вы ответили правильно на ${score} из ${questions.length} вопросов.`;

// Скрываем кнопку «Далее»

nextButton.style.display = «none»;

}

nextButton.addEventListener(«click», () => checkAnswer());

// Начало

startQuiz();

«`

Заключение

Создание приложения-викторины на JavaScript может быть увлекательным и образовательным проектом. Мы рассмотрели основные шаги: создание HTML-структуры, стилизацию с помощью CSS и написание JavaScript-кода для логики. Этот пример дает вам хорошее представление о том, как начать, но есть множество способов улучшить и дополнить ваш проект.

3-дневный курс
НАУЧИСЬ СОЗДАВАТЬ TELEGRAM-БОТОВ НА PYTHON С CHATGPT
C НУЛЯ ЗА 3 ДНЯ
  • Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Создай и прокачай собственного чат-бота
Участвовать бесплатно
Вебинар
ФРИЛАНС И ПРОЕКТНАЯ РАБОТАДЛЯ PYTHON-РАЗРАБОТЧИКА
  • Подарим подборку бесплатных инструментов для написания кода
Участвовать бесплатно