Click here for free DL of the app version that can save data.

No:16411

Mobile Super Mario quiz but easy
Developer User7284｜Date and time 23/9/18 2:36:33
Build time 57.457 sec｜Game capacity 7.243KB｜

Script

Мобильный Super Mario Quiz

Счет: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Super Mario Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f2f2f2;
            text-align: center;
        }
        h1 {
            font-size: 28px;
            color: #333333;
        }
        .question-container {
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .question {
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #333333;
        }
        .options {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .option {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #999999;
            background-color: #ffffff;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .option:hover {
            background-color: #f2f2f2;
        }
        .option-icon {
            margin-right: 10px;
        }
        .result {
            margin-top: 20px;
            font-size: 20px;
            color: #333333;
        }
        .score {
            margin-top: 10px;
            font-size: 16px;
            color: #999999;
            text-align: center;
        }
        .play-again {
            margin-top: 20px;
        }
        .play-again button {
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            background-color: #333333;
            color: #ffffff;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .play-again button:hover {
            background-color: #555555;
        }
    </style>
</head>
<body>
    <h1>Мобильный Super Mario Quiz</h1>
    <div class="question-container">
        <div class="question"></div>
        <div class="options"></div>
    </div>
    <div class="result"></div>
    <div class="score">Счет: 0</div>
    <div class="play-again">
        <button>Играть снова</button>
    </div>

let currentQuestionIndex = 0;
        let score = 0;

const questionElement = document.querySelector('.question');
        const optionsContainer = document.querySelector('.options');
        const resultElement = document.querySelector('.result');
        const scoreElement = document.querySelector('.score');
        const playAgainButton = document.querySelector('.play-again button');

function startQuiz() {
            currentQuestionIndex = 0;
            score = 0;
            resultElement.innerHTML = '';
            scoreElement.innerText = 'Счет: 0';
            playAgainButton.style.display = 'none';

showQuestion();
        }

function showQuestion() {
            const question = quiz[currentQuestionIndex].question;
            const options = quiz[currentQuestionIndex].options;

questionElement.innerText = question;
            optionsContainer.innerHTML = '';

options.forEach(function(option, index) {
                const optionElement = document.createElement('div');
                optionElement.classList.add('option');
                optionElement.dataset.index = index;

optionElement.addEventListener('click', checkAnswer);

const iconElement = document.createElement('img');
                iconElement.classList.add('option-icon');
                iconElement.src = 'pictograms/' + index + '.png';
                optionElement.appendChild(iconElement);

const textElement = document.createElement('span');
                textElement.innerText = option.text;
                optionElement.appendChild(textElement);

optionsContainer.appendChild(optionElement);
            });
        }

function checkAnswer(event) {
            const selectedOptionIndex = event.target.closest('.option').dataset.index;
            const selectedOption = quiz[currentQuestionIndex].options[selectedOptionIndex];

if (selectedOption.correct) {
                score++;
            }

currentQuestionIndex++;

if (currentQuestionIndex === quiz.length) {
                endQuiz();
            } else {
                showQuestion();
            }
        }

function endQuiz() {
            questionElement.innerText = '';
            optionsContainer.innerHTML = '';
            resultElement.innerHTML = 'Ты набрал ' + score + ' из ' + quiz.length + ' баллов.';
            playAgainButton.style.display = 'block';
        }

playAgainButton.addEventListener('click', startQuiz);

startQuiz();
    </script>
</body>
</html>