Вы когда-нибудь посещали веб-сайт с интересной интерактивной функцией, такой как игра или анимированное меню, и задавались вопросом, как это было сделано? Если да, то вы не одиноки. Создание интерактивных веб-страниц с помощью 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, не пугайтесь! Потратьте некоторое время на изучение основ, поэкспериментируйте с кодом и посмотрите, что вы можете создать. Кто знает, может быть, вы просто удивите себя тем, что вы можете сделать.