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

No:19811

←

Prev Next

→

Anime quiz
Developer User8620｜Date and time 23/10/7 0:28:14
Build time 36.012 sec｜Game capacity 6.944KB｜

Script

Quiz Anime

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Quiz Anime</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333333;
            margin-top: 50px;
        }
        #quiz-container {
            margin-top: 30px;
            background-color: #ffffff;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 5px;
            padding: 20px;
        }
        
        #question-container {
            text-align: left;
            margin-bottom: 20px;
        }

#options-container {
            text-align: left;
        }

.option {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #eeeeee;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .option:hover {
            background-color: #dddddd;
        }

#submit-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        #result-container {
            margin-top: 20px;
            font-size: 20px;
        }
        
        #play-again-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Quiz Anime</h1>
    <div id="quiz-container">
        <div id="question-container">
            <p id="question"></p>
        </div>
        <div id="options-container">
            <div class="option" onclick="selectOption(0)"></div>
            <div class="option" onclick="selectOption(1)"></div>
            <div class="option" onclick="selectOption(2)"></div>
            <div class="option" onclick="selectOption(3)"></div>
        </div>
        <button id="submit-btn" onclick="submitAnswer()">Submit</button>
        <div id="result-container"></div>
        <button id="play-again-btn" onclick="playAgain()">Play Again</button>
    </div>

var questionIndex = 0;
        var userAnswer = null;
        var score = 0;

function loadQuestion() {
            var questionElement = document.getElementById("question");
            var optionsElements = document.getElementsByClassName("option");

questionElement.innerHTML = questions[questionIndex].question;

for (var i = 0; i < optionsElements.length; i++) {
                optionsElements[i].innerHTML = questions[questionIndex].options[i];
            }
        }

function selectOption(optionIndex) {
            var optionsElements = document.getElementsByClassName("option");

for (var i = 0; i < optionsElements.length; i++) {
                optionsElements[i].style.backgroundColor = "#eeeeee";
            }
            
            optionsElements[optionIndex].style.backgroundColor = "#4caf50";
            userAnswer = optionIndex;
        }

function submitAnswer() {
            var resultContainer = document.getElementById("result-container");
            var submitBtn = document.getElementById("submit-btn");
            var playAgainBtn = document.getElementById("play-again-btn");

if(userAnswer === null) {
                resultContainer.innerHTML = "Veuillez sélectionner une réponse.";
                return;
            }

if (userAnswer === questions[questionIndex].answer) {
                score++;
                resultContainer.innerHTML = "Bonne réponse!";
            } else {
                resultContainer.innerHTML = "Mauvaise réponse!";
            }

questionIndex++;

if (questionIndex >= questions.length) {
                quizFinished();
            } else {
                submitBtn.disabled = true;
                playAgainBtn.style.display = "none";
                resultContainer.style.display = "block";
                setTimeout(function() {
                    resultContainer.innerHTML = "";
                    loadQuestion();
                    submitBtn.disabled = false;
                    playAgainBtn.style.display = "none";
                    resultContainer.style.display = "none";
                }, 2000);
            }
        }

function quizFinished() {
            var questionContainer = document.getElementById("question-container");
            var optionsContainer = document.getElementById("options-container");
            var submitBtn = document.getElementById("submit-btn");
            var playAgainBtn = document.getElementById("play-again-btn");
            var resultContainer = document.getElementById("result-container");

questionContainer.style.display = "none";
            optionsContainer.style.display = "none";
            submitBtn.style.display = "none";
            playAgainBtn.style.display = "block";
            resultContainer.innerHTML = "Quiz terminé! Votre score est de " + score + "/" + questions.length;
            resultContainer.style.display = "block";
        }

function playAgain() {
            var questionContainer = document.getElementById("question-container");
            var optionsContainer = document.getElementById("options-container");
            var submitBtn = document.getElementById("submit-btn");
            var playAgainBtn = document.getElementById("play-again-btn");
            var resultContainer = document.getElementById("result-container");

questionContainer.style.display = "block";
            optionsContainer.style.display = "block";
            submitBtn.style.display = "block";
            resultContainer.style.display = "none";
            questionIndex = 0;
            userAnswer = null;
            score = 0;
            loadQuestion();
        }

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