Вы когда-нибудь посещали веб-сайт с интересной интерактивной функцией, такой как игра или анимированное меню, и задавались вопросом, как это было сделано? Если да, то вы не одиноки. Создание интерактивных веб-страниц с помощью JavaScript — это увлекательный и полезный опыт, который может поднять ваши навыки веб-разработки на новый уровень.
В этой статье мы познакомим вас с процессом создания интерактивной игры-викторины с использованием JavaScript. К концу этого руководства у вас будет полностью функционирующая игра-викторина, которую вы сможете настроить и использовать на своем собственном веб-сайте.
Шаг 1. Настройка среды
Прежде чем мы углубимся в кодирование, давайте удостоверимся, что у нас есть все необходимое. Чтобы следовать этому руководству, вам понадобится текстовый редактор (например, Visual Studio Code или Atom) и веб-браузер (например, Chrome или Firefox).
Мы также будем использовать библиотеку JavaScript под названием jQuery, которая упрощает работу с HTML и CSS. Вы можете скачать последнюю версию jQuery с официального сайта.
Шаг 2: Создание HTML и CSS
Первым шагом в создании нашей викторины является создание HTML и CSS. Мы начнем с простой структуры нашего теста:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz App</title>
<link rel="stylesheet" href="./styles.css" />
<script src="./jquery.min.js"></script>
</head>
<body>
<div id="quiz">
<h1>Quiz Game</h1>
<div id="question"></div>
<ul id="choices"></ul>
<button id="submit">Submit</button>
</div>
<script src="./app.js"></script>
</body>
</html>
В этом HTML-коде у нас есть div с идентификатором «quiz», который содержит название теста, div с идентификатором «question», который будет отображать вопросы викторины, ul с идентификатором «choices», который будет отображать варианты ответов. и кнопку с идентификатором «отправить», которая отправит ответы на тест.
Я предполагаю, что вы уже знаете, как поместить jQuery в файл вашего проекта. Если нет, то это было довольно легко. Перейдите к загрузить сжатый файл jQuery, сохраните его как jquery.min.js и поместите на <head>, как в примере выше.
Мы также добавили несколько стилей CSS, чтобы викторина выглядела красиво и отзывчиво.
#quiz {
width: 400px;
margin: 0 auto;
text-align: center;
}
#question {
font-size: 20px;
margin-bottom: 10px;
}
#choices li {
display: inline-block;
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
cursor: pointer;
}
#choices li:hover {
background-color: #ddd;
}
#choices li.active {
background-color: #ccc;
}
#submit {
margin-top: 10px;
}
Шаг 3: Создание JavaScript
Теперь пришло время добавить интерактивности в нашу викторину с помощью JavaScript. Мы начнем с создания массива вопросов викторины и вариантов ответов:
var quiz = [
{
question: "What is the capital of France?",
choices: ["Paris", "London", "Madrid", "Rome"],
answer: "Paris"
},
{
question: "What is the largest planet in our solar system?",
choices: ["Venus", "Jupiter", "Saturn", "Mars"],
answer: "Jupiter"
},
{
question: "Who invented the telephone?",
choices: ["Thomas Edison", "Alexander Graham Bell", "Nikola Tesla", "Marie Curie"],
answer: "Alexander Graham Bell"
}
];
Этот массив содержит три вопроса викторины, каждый из которых содержит вопрос, массив вариантов ответа и правильный ответ.
Далее мы напишем функцию, которая отображает вопросы викторины и варианты ответов на странице:
var questionIndex = 0;
var score = 0;
function showQuestion() {
var question = quiz[questionIndex].question;
var choices = quiz[questionIndex].choices;
var choicesHtml = "";
// loop through answer choices and create HTML
for (var i = 0; i < choices.length; i++) {
choicesHtml += "<li>" + choices[i] + "</li>";
}
// display question and answer choices on page
$("#question").text(question);
$("#choices").html(choicesHtml);
}
В этом коде мы создаем некоторые переменные для отслеживания индекса текущего вопроса, текущего вопроса и текущих вариантов ответа. Затем мы перебираем варианты ответов и создаем HTML для каждого варианта, используя метод jQuery .html().
Наконец, мы отображаем текущий вопрос и варианты ответов на странице, устанавливая текст #question div и HTML #choices ul .
Теперь давайте добавим немного функциональности в нашу викторину. Мы создадим функцию, которая проверяет ответ пользователя и отображает следующий вопрос:
function checkAnswer() {
// get user's answer
var userAnswer = $("li.active").text();
// check if answer is correct
if (userAnswer === quiz[questionIndex].answer) {
alert("Correct!");
score++;
} else {
alert("Incorrect.");
}
// move to next question or end quiz
if (questionIndex < quiz.length - 1) {
questionIndex++;
showQuestion();
} else {
endQuiz();
}
}
Эта функция получает ответ пользователя, находя элемент li с классом active (который мы добавим чуть позже). Затем он проверяет правильность ответа пользователя, обновляет оценку и отображает предупреждение с результатом.
Наконец, он переходит к следующему вопросу, увеличивая переменную questionIndex и снова вызывая функцию showQuestion(), или завершает тест, вызывая другую функцию с именем endQuiz().
Прежде чем мы сможем использовать эту функцию, нам нужно добавить несколько прослушивателей событий в нашу викторину. Мы добавим прослушиватель событий к каждому варианту ответа, который добавляет класс active к выбранному ответу и удаляет его из других ответов:
$("#choices").on("click", "li", function () {
$(this).addClass("active").siblings().removeClass("active");
});
$("#submit").on("click", function () {
checkAnswer();
});
Наконец, мы добавим функцию endQuiz(), которая отображает счет пользователя и предлагает возможность сыграть снова:
function endQuiz() {
var scorePercent = Math.round((score / quiz.length) * 100);
var message =
"You scored " +
score +
" out of " +
quiz.length +
" (" +
scorePercent +
"%).";
if (scorePercent >= 80) {
message += " Great job!";
} else if (scorePercent >= 50) {
message += " Not bad.";
} else {
message += " Better luck next time.";
}
var playAgain = confirm(message + " Play again?");
if (playAgain) {
score = 0;
questionIndex = 0;
showQuestion();
}
}
showQuestion();
В этой функции мы вычисляем оценку пользователя, перебирая варианты ответов и сравнивая их с правильными ответами в массиве quiz. Затем мы вычисляем процентную оценку и отображаем сообщение на основе этой оценки. Наконец, мы предлагаем возможность сыграть снова, показав диалоговое окно подтверждения.
И вот она, полнофункциональная игра-викторина, созданная с помощью JavaScript и jQuery! Вы можете попробовать игру-викторину, посетив созданную нами демо-страницу и ответив на вопросы.
Вот полный код JavaScript на случай, если ваш код не сработал:
var quiz = [
{
question: "What is the capital of France?",
choices: ["Paris", "London", "Madrid", "Rome"],
answer: "Paris",
},
{
question: "What is the largest planet in our solar system?",
choices: ["Venus", "Jupiter", "Saturn", "Mars"],
answer: "Jupiter",
},
{
question: "Who invented the telephone?",
choices: [
"Thomas Edison",
"Alexander Graham Bell",
"Nikola Tesla",
"Marie Curie",
],
answer: "Alexander Graham Bell",
},
];
var questionIndex = 0;
var score = 0;
function showQuestion() {
var question = quiz[questionIndex].question;
var choices = quiz[questionIndex].choices;
var choicesHtml = "";
// loop through answer choices and create HTML
for (var i = 0; i < choices.length; i++) {
choicesHtml += "<li>" + choices[i] + "</li>";
}
// display question and answer choices on page
$("#question").text(question);
$("#choices").html(choicesHtml);
}
function checkAnswer() {
// get user's answer
var userAnswer = $("li.active").text();
// check if answer is correct
if (userAnswer === quiz[questionIndex].answer) {
alert("Correct!");
score++;
} else {
alert("Incorrect.");
}
// move to next question or end quiz
if (questionIndex < quiz.length - 1) {
questionIndex++;
showQuestion();
} else {
endQuiz();
}
}
$("#choices").on("click", "li", function () {
$(this).addClass("active").siblings().removeClass("active");
});
$("#submit").on("click", function () {
checkAnswer();
});
function endQuiz() {
var scorePercent = Math.round((score / quiz.length) * 100);
var message =
"You scored " +
score +
" out of " +
quiz.length +
" (" +
scorePercent +
"%).";
if (scorePercent >= 80) {
message += " Great job!";
} else if (scorePercent >= 50) {
message += " Not bad.";
} else {
message += " Better luck next time.";
}
var playAgain = confirm(message + " Play again?");
if (playAgain) {
score = 0;
questionIndex = 0;
showQuestion();
}
}
showQuestion();
Как видите, JavaScript может быть мощным инструментом для создания интерактивных веб-страниц. С помощью всего нескольких строк кода мы смогли создать полнофункциональную игру-викторину, которая может привлечь и развлечь посетителей вашего веб-сайта.
Но это только начало. С помощью JavaScript вы можете создавать еще более сложные и интерактивные веб-страницы, от простых анимаций до полноценных веб-приложений. Так что, если вы новичок в JavaScript, не пугайтесь! Потратьте некоторое время на изучение основ, поэкспериментируйте с кодом и посмотрите, что вы можете создать. Кто знает, может быть, вы просто удивите себя тем, что вы можете сделать.
