Quiz Test

<div class="quiz-container" id="quiz"></div>
<div id="score-container" style="text-align: center; font-weight: bold; margin-top: 20px;"></div>
<button id="restart-button" onclick="restartQuiz()" style="display: none; margin: 20px auto; padding: 10px 15px; border: none; background-color: #007BFF; color: white; font-size: 16px; cursor: pointer; border-radius: 5px;">Restart Quiz</button>

<script>
    let score = 0;
    let answeredQuestions = 0;
    let quizContainer = document.getElementById("quiz");
    let scoreContainer = document.getElementById("score-container");
    let restartButton = document.getElementById("restart-button");

    const questions = [
        {
            question: "Why was Stephen arrested by the Jewish leaders?",
            correctAnswer: "They didn’t like what he was saying about Jesus",
            wrongAnswers: ["He stole money from the temple", "He was a Roman spy"]
        },
        {
            question: "What did Stephen say to the leaders?",
            correctAnswer: "They had killed Jesus, who was the promised Messiah",
            wrongAnswers: ["They should stop paying taxes", "God told him to become king"]
        },
        {
            question: "What did Stephen see when he looked up?",
            correctAnswer: "God in heaven, with Jesus next to him",
            wrongAnswers: ["A vision of a golden temple", "A giant chariot in the clouds"]
        },
        {
            question: "What did the Jewish leaders do to Stephen?",
            correctAnswer: "Killed him with stones",
            wrongAnswers: ["Made him leave Jerusalem forever", "Threw him in a lion’s den"]
        },
        {
            question: "Why did the believers scatter?",
            correctAnswer: "Saul was throwing them in prison",
            wrongAnswers: ["The Romans made Christianity illegal", "There was a famine in the land"]
        },
        {
            question: "What did an angel tell Philip to do?",
            correctAnswer: "Walk down the desert road",
            wrongAnswers: ["Go to Jerusalem and speak to the high priest", "Build a boat and sail to Rome"]
        },
        {
            question: "Who did Philip meet along the road?",
            correctAnswer: "An important Ethiopian man who served the queen",
            wrongAnswers: ["A Roman soldier looking for Jesus", "A group of shepherds traveling to Egypt"]
        },
        {
            question: "What was the Ethiopian man reading?",
            correctAnswer: "From the prophet Isaiah",
            wrongAnswers: ["A letter from Paul", "The Ten Commandments"]
        },
        {
            question: "Who did Philip say that Isaiah was writing about?",
            correctAnswer: "Jesus",
            wrongAnswers: ["King David", "Moses"]
        },
        {
            question: "What happened after Philip baptized the man?",
            correctAnswer: "The Holy Spirit carried him far away",
            wrongAnswers: ["The Ethiopian man built a church", "Philip stayed and taught him for many years"]
        }
    ];

    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    }

    function loadQuiz() {
        quizContainer.innerHTML = "";
        scoreContainer.innerHTML = "";
        restartButton.style.display = "none";
        score = 0;
        answeredQuestions = 0;

        questions.forEach(q => {
            const questionElement = document.createElement("div");
            questionElement.classList.add("question");
            questionElement.innerText = q.question;
            
            const optionsContainer = document.createElement("div");
            optionsContainer.classList.add("options");

            let options = [q.correctAnswer, ...q.wrongAnswers];
            shuffleArray(options);

            options.forEach(option => {
                const button = document.createElement("button");
                button.innerText = option;
                button.onclick = () => {
                    if (!button.disabled) {
                        if (option === q.correctAnswer) {
                            button.classList.add("correct");
                            button.innerText += " ✔ Correct!";
                            score++; 
                        } else {
                            button.classList.add("wrong");
                            button.innerText += " ✘ Wrong!";
                            showCorrectAnswer(optionsContainer, q.correctAnswer);
                        }
                        answeredQuestions++;
                        disableAllButtons(optionsContainer);
                        checkCompletion();
                    }
                };
                optionsContainer.appendChild(button);
            });

            quizContainer.appendChild(questionElement);
            quizContainer.appendChild(optionsContainer);

            const spacer = document.createElement("div");
            spacer.style.marginBottom = "30px"; // Extra space between questions
            quizContainer.appendChild(spacer);
        });
    }

    function disableAllButtons(container) {
        Array.from(container.children).forEach(button => {
            button.disabled = true;
        });
    }

    function showCorrectAnswer(container, correctAnswer) {
        Array.from(container.children).forEach(button => {
            if (button.innerText === correctAnswer) {
                button.classList.add("correct");
                button.innerText += " ✔ Correct Answer";
            }
        });
    }

    function checkCompletion() {
        if (answeredQuestions === questions.length) {
            scoreContainer.innerText = `You got ${score} out of 10 correct.`;
            restartButton.style.display = "block"; // Show restart button
        }
    }

    function restartQuiz() {
        loadQuiz();
    }

    loadQuiz();
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

    body, .quiz-container {
        font-family: 'Lato', sans-serif;
    }

    .quiz-container {
        max-width: 500px;
        margin: auto;
        padding: 10px;
        border: 2px solid #ddd;
        border-radius: 10px;
        background-color: #f9f9f9;
    }

    .question {
        font-weight: bold;
        margin-bottom: 10px;
    }

    .options button {
        display: block;
        width: 100%;
        margin: 5px 0;
        padding: 8px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-family: 'Lato', sans-serif;
    }

    .correct {
        background-color: #3cb371; /* Updated green color */
        color: white;
    }

    .wrong {
        background-color: #e55934; /* Updated red color */
        color: white;
    }

    #score-container {
        font-size: 18px;
        color: #333;
    }

    #restart-button {
        font-family: 'Lato', sans-serif;
    }
</style>