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

Структура

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

  1. HTML: будет содержать структуру вашего приложения и интерфейс пользователя.
  2. CSS: файл стилей, чтобы сделать ваш проект привлекательным и удобным в использовании.
  3. JavaScript: основной код, включая логику викторины, генерацию вопросов и проверку ответов.
  4. JSON: файл с вопросами и правильными ответами. Мы будем хранить их в формате JSON.
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

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

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

Присоединяйся к онлайн-вебинару.

В прямом эфире разберем и потестируем лучшие на сегодняшний день отечественные ИИ!
Вы узнаете о том:
  • Выполним базовые задачи на российских нейросетях и посмотрим на результаты!
  • PDF-инструкцию «Как сделать нейрофотосессию из своего фото бесплатно, без иностранных карт и прочих сложностей»
  • Покажем 10+ способов улучшить свою жизнь с ИИ каждому — от ребенка и пенсионера до управленца и предпринимателя

Участвовать бесплатно

ОБЗОРНЫЙ ПРАКТИКУМ ПО НАШУМЕВШИМ НЕЙРОСЕТЯМ
DEEPSEEK И QWEN
За 2 часа сделаем полный обзор новых мощных AI-моделей, которые бросают вызов ChatGPT
Вы узнаете:
  • Возможность получить Доступ в Нейроклуб на целый месяц
  • Как AI ускоряет работу и приносит деньги
  • За 2 часа вы получите четкий план, как начать работать с AI прямо сейчас!

Участвовать бесплатно

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-кода для логики. Этот пример дает вам хорошее представление о том, как начать, но есть множество способов улучшить и дополнить ваш проект.

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку (240$) бесплатно
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно