Простой квиз на JS

8 августа 2023 208 просмотров

В названии, конечно же, указано то, что отвечает за логику, но щепотка html+css, для оформления — нам всё-таки понадобится.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>		
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name = "format-detection" content = "telephone=no">
        
<title>Тест</title>
</head>
<body>
<div class="quiz-box" id="quiz">
    <div class="quiz-header">
        <h2 id="question">вопрос</h2>
        <ul>
            <li>
                <input type="radio" name="answer" id="a" class="answer">
                <label for="a" id="a_text">текст</label>
            </li>
            <li>
                <input type="radio" name="answer" id="b" class="answer">
                <label for="b" id="b_text">текст</label>
            </li>
            <li>
                <input type="radio" name="answer" id="c" class="answer">
                <label for="c" id="c_text">текст</label>
            </li>
        </ul>
    </div>
    <button3 id="submit">Отправить</button3>
</div>
</body>  
</html>

CSS (под себя — подстраивайте сами):

*{
box-sizing: border-box;
}
h2{
padding: 16px;
text-align: center;
margin: 0;
}
.quiz-box{
background-color: #fff;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.quiz-header{
padding: 64px;
}
ul{
list-style: none;
padding: 0;
}
ul li{
font-size: 16px;
margin: 15px 0;
}
ul li label{
cursor: pointer;
}
button3{
background-color: #f8fcfd;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
color: #000000;
padding: 15px;
transition: all 0.5s ease;
text-align: center;
}
button3:hover{
background-color: #536370;
}
button3:focus{
outline: none;
background-color: #536370;
}

Ну и — логика (JS):

const quizData = [
    {
        question: "Сколько будет 2+2?",
        a: "3",
        b: "4",
        c: "5",
        correct: "b",
    },
    {
        question: "Кем был Чингисхан?",
        a: "Монголом",
        b: "Мангалом",
        c: "Чортом",
        correct: "a",
    },
    {
        question: "В каком месте у Карлосона была кнопка?",
        a: "В чемодане",
        b: "На спине",
        c: "На животе",
        correct: "c",
    },
    {
        question: "Как иначе называют зубного врача?",
        a: "Артист",
        b: "Дантист",
        c: "Баптист",
        correct: "b",
    },
    {
        question: "Тайное эльтер-эго Брюса Уэйна?",
        a: "Бэтмен",
        b: "Жопмен",
        c: "Чилавек-малекуло!",
        correct: "a",
    },
];

const quiz = document.getElementById('quiz');
const answerElements = document.querySelectorAll('.answer');
const questionElement = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const submit = document.getElementById('submit');

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz(){
    deselectAnswers();

    const currentQuizData = quizData[currentQuiz];

    questionElement.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
}

function deselectAnswers(){
    answerElements.forEach(answerEl => answerEl.checked = false)
}

function getSelected(){
    let answer;

    answerElements.forEach(answerEl => {
        if(answerEl.checked){
            answer = answerEl.id;
        }
    });

    return answer;
}

submit.addEventListener('click', () => {
    const answer = getSelected();

    if(answer){
        if(answer === quizData[currentQuiz].correct){
            score++;
        }

        currentQuiz++;

        if(currentQuiz < quizData.length){
            loadQuiz();
        }
        else{
            quiz.innerHTML = `<h2>Вы правильно ответили на ${score}/${quizData.length} вопросов</h2>
            <button3 onclick="location.reload()">Заново</button3>
            `;
        }
    }
});

В целом — ничего сложного — вопросы, варианты ответов и правильный ответ закладываются в массив, с этим и работаем.

Пример работы.