Простая викторина с Javascript
Добро пожаловать на статью о том, как создать простой тест с помощью Javascript.
ШАГ 1) HTML
Создайте файл index.html с таким содержимым.
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>викторина</title>
<!-- LOAD QUIZ CSS + JS -->
<link href="style.css" rel="stylesheet">
<script src="js.js"></script>
</head>
<body>
<!-- QUIZ CONTAINER -->
<div id="quizWrap"></div>
</body>
</html>
Ага… Это всё, что касается HTML.
Всё, что нам нужно, это включить таблицу стилей, Javascript и создать пустой блок <div id="quizWrap"> для создания теста.
ШАГ 2) ТЕСТ ВОПРОСЫ И ОТВЕТЫ
Создаём файл js.js с таким содержимым.
// PROPERTIES
// QUESTIONS & ANSWERS
// Q = QUESTION, O = OPTIONS, A = CORRECT ANSWER
data: [
{
q: "Кто признан лучшим вратарём в 2019 году по версии ФИФА?",
o: [
"Давид де Хеа",
"Алиссон",
"Тибо Куртуа",
"Ян Облак",
],
a: 0
},
{
q: "Кто является лучшим бомбардиром за всю историю сборной Португалии?",
o: [
"Матийс де Лигт",
"Лионель Месси",
"Криштиану Роналду",
"Вирджил ван Дейк",
],
a: 2
},
{
q: "В какой стране впервые проходил Кубок мира ФИФА?",
o: [
"Уругвай",
"Франция",
"Испания",
"Англия",
],
a: 0
},
{
q: "Как называется гол, который футболист забил в свои ворота?",
o: [
"Штрафной",
"«Мертвый мяч»",
"Автогол",
"Ложный маневр",
],
a: 2
},
{
q: "Какое количество игроков одновременно находится на игровом поле с двух сторон?",
o: [
"30 игроков",
"24 игрока",
"11 игроков",
"22 игрока",
],
a: 3
}
],
Что нужно для викторины? Вопросы и ответы, поэтому мы начнем с определения некоторых из них. 😕 Это может сбить с толку новичков, так что смотрите внимательно.
• quiz.dataпредставляет собой массив объектов. То есть [{FIRST QUESTION}, {SECOND QUESTION}, {THIRD QUESTION}].
• В каждом вопросе { q:QUESTION, o:OPTIONS, a:CORRECT ANSWER }.
◦ oпредставляет собой массив доступных опций (их может быть больше 4).
◦ aуказывает правильный ответ. То есть a:0укажет, что первый вариант правильный.
ШАГ 3) ИГРОВЫЕ ФЛАГИ
js.js
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
// GAME FLAGS
now: 0, // current question
score: 0, // current score
Далее у нас есть куча свойств. Они должны быть понятными — ссылки на элементы HTML и флаги для отслеживания текущей оценки/вопроса.
ШАГ 4) ИНИЦИАЛИЗАЦИЯ ТЕСТА (СОЗДАНИЕ HTML)
js.js
init: () => {
// WRAPPER
quiz.hWrap = document.getElementById("quizWrap");
// QUESTIONS SECTION
quiz.hQn = document.createElement("div");
quiz.hQn.id = "quizQn";
quiz.hWrap.appendChild(quiz.hQn);
// ANSWERS SECTION
quiz.hAns = document.createElement("div");
quiz.hAns.id = "quizAns";
quiz.hWrap.appendChild(quiz.hAns);
// GO!
quiz.draw();
},
window.addEventListener("load", quiz.init);
quiz.init()вызывается при загрузке окна, и все, что он делает, это вставляет 2 элемента HTML <div id="quizWrap"> с шага 1.
• <div id="quizQn"> Чтобы отобразить вопрос.
• <div id="quizAns"> Для отображения параметров.
ШАГ 5) ВЫВЕДИТЕ ТЕКУЩИЙ ВОПРОС
js.js
draw: () => {
// QUESTION
quiz.hQn.innerHTML = quiz.data[quiz.now].q;
// OPTIONS
quiz.hAns.innerHTML = "";
for (let i in quiz.data[quiz.now].o) {
let radio = document.createElement("input");
radio.type = "radio";
radio.name = "quiz";
radio.id = "quizo" + i;
quiz.hAns.appendChild(radio);
let label = document.createElement("label");
label.innerHTML = quiz.data[quiz.now].o[i];
label.setAttribute("for", "quizo" + i);
label.dataset.idx = i;
label.addEventListener("click", () => {
quiz.select(label);
});
quiz.hAns.appendChild(label);
}
},
quiz.draw()вызывается сразу после quiz.init()и после того, как пользователь выбирает опцию в draw.select(). Это должно быть самоочевидным снова, выведите текущий вопрос и варианты.
ШАГ 6) ВЫБЕРИТЕ ВАРИАНТ
js.js
select: (option) => {
// DETACH ALL ONCLICK
let all = quiz.hAns.getElementsByTagName("label");
for (let label of all) {
label.removeEventListener("click", quiz.select);
}
// CHECK IF CORRECT
let correct = option.dataset.idx == quiz.data[quiz.now].a;
if (correct) {
quiz.score++;
option.classList.add("correct");
} else {
option.classList.add("wrong");
}
// NEXT QUESTION OR END GAME
quiz.now++;
setTimeout(() => {
if (quiz.now < quiz.data.length) { quiz.draw(); }
else {
quiz.hQn.innerHTML = `Вы ответили на ${quiz.score} из ${quiz.data.length} правильно.`;
quiz.hAns.innerHTML = "";
}
}, 1000);
},
Наконец, когда пользователь выбирает вариант quiz.select(), он определяет, правильный ли это ответ, отслеживает счет, а затем показывает следующий вопрос.
ДОПОЛНИТЕЛЬНО) ПЕРЕЗАПУСК ВИКТОРИНЫ
js.js
reset : () => {
quiz.now = 0;
quiz.score = 0;
quiz.draw();
}
};
Просто позвоните quiz.reset(), чтобы сбросить викторину.
Например, добавьте простую кнопку сброса в конце теста.
quiz.hAns.innerHTML = "<input type='button' value='Сбросить' onclick='quiz.reset()'>";
CSS
Создайте файл style.css с таким содержимым
#quizWrap {
max-width: 600px;
margin: 0 auto;
/* RECOMMENDED FIXED HEIGHT IF YOU HAVE CONTENT BELOW THE QUIZ */
/* SO THAT PAGE LAYOUT DOES NOT "JUMP" */
/* height: 250px; */
}
/* (B) QUESTION */
#quizQn {
padding: 20px;
background: #4c93ba;
color: #fff;
font-size: 24px;
border-radius: 10px;
}
/* (C) ANSWERS */
#quizAns {
margin: 10px 0;
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}
#quizAns input[type=radio] {
display: none;
}
#quizAns label {
background: #fafafa;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px;
font-size: 20px;
cursor: pointer;
text-align: center;
}
#quizAns label.correct {
background: #d8ffc4;
border: 1px solid #60a03f;
}
#quizAns label.wrong {
background: #ffe8e8;
border: 1px solid #c78181;
}
/* (D) BODY... DOES NOT QUITE MATTER */
html, body {
background: #74b6db;
font-family: arial, sans-serif;
}
Можете посмотреть и скачать пример.
Посмотреть
Скачать
