Quiz

by Epic Baboon

HTML

<script src="https://ebaboon.me/lol/workshop/quiz/quiz.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Назва сторінки</title>
        <meta name="description" content="Короткий опис, про що ця сторінка.">
    </head>
    <body>
        <h1>Quiz</h1>
        <div class="quiz"></div>
    </body>
</html>

CSS

:root {
    --main-padding: 20px;
    --border-radius: 4px;
    --main-bg-color: pink;
    --question-bg-color: rgba(255,255,255, 0.3);
}

html {
    font-family: sans-serif;
}

.quiz {
    background: var(--main-bg-color);
    border-radius: var(--border-radius);
    padding: calc(var(--main-padding) / 2);
}

.quiz-question {
    padding: var(--main-padding);
    margin-bottom: calc(var(--main-padding) / 2);
    background-color: var(--question-bg-color);
    border-radius: var(--border-radius);
}

.quiz-question:last-of-type {
    margin-bottom: 0;
}

.quiz-question__title {
    font-size: 1.45em;
    margin-bottom: calc(var(--main-padding) / 2);
}

.quiz-question__answers {
    display: flex;
    flex-flow: column nowrap;
    line-height: 1.65;
    margin-bottom: calc(var(--main-padding) / 2);
}

.quiz-question__button {
    cursor: pointer;
    border: 0 none;
    border-radius: var(--border-radius);
    padding: calc(var(--main-padding) / 2) var(--main-padding);
    font-size: 1em;
}

.quiz-question__result {
    margin-top: calc(var(--main-padding) / 2);
}

JavaScript

const questions = [
    {
        title: "Де найближче відділення монобанку?",
        answers: [
            {id: 0, text: 'В порту Львова'},
            {id: 1, text: 'На Майдані'},
            {id: 2, text: 'Йди до отієї стіни...'},
            {id: 3, text: 'На Хрещатику'},
            {id: 4, text: 'вул Володимирська 33'},
        ],
        correctAnswer: 2
    },
    {
        title: "Як правильно: паляниця чи полуниця?",
        answers: [
            {id: 0, text: 'Правильно "полуниця"'},
            {id: 1, text: 'Правильно "паляниця"'},
            {id: 2, text: 'Правильно буде стріляти на звук'},
        ],
        correctAnswer: 2
    }
];
const quizElement = document.querySelector('.quiz');

quiz(questions, quizElement);