Basic Interactive Quiz with HTML, CSS, and JS

Answer:

Sure! Below is a complete HTML file that contains a basic interactive quiz using HTML, CSS, and vanilla JavaScript. The quiz includes three multiple-choice questions, a start button, and a reset button. It provides visual feedback for correct and incorrect answers and displays the user's score at the end.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .quiz-container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .question {
            margin-bottom: 20px;
        }
        .options {
            list-style-type: none;
            padding: 0;
        }
        .options li {
            margin: 10px 0;
        }
        .correct {
            background-color: #c8e6c9;
        }
        .incorrect {
            background-color: #ffcdd2;
        }
        .hidden {
            display: none;
        }
        button {
            padding: 10px 15px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .start-btn {
            background-color: #4CAF50;
            color: white;
        }
        .reset-btn {
            background-color: #f44336;
            color: white;
        }
        .score {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="quiz-container">
    <h1>Interactive Quiz</h1>
    <div id="quiz" class="hidden">
        <div class="question" id="question-container"></div>
        <ul class="options" id="options-container"></ul>
        <button id="next-btn" class="hidden">Next</button>
    </div>
    <button id="start-btn" class="start-btn">Start Quiz</button>
    <div id="result" class="hidden">
        <h2>Your Score: <span id="score"></span></h2>
        <div id="correct-answers"></div>
        <button id="reset-btn" class="reset-btn">Reset Quiz</button>
    </div>
</div>

<script>
    const questions = [
        {
            question: "What is the capital of France?",
            options: ["Berlin", "Madrid", "Paris", "Rome"],
            answer: "Paris"
        },
        {
            question: "Which planet is known as the Red Planet?",
            options: ["Earth", "Mars", "Jupiter", "Saturn"],
            answer: "Mars"
        },
        {
            question: "What is the largest ocean on Earth?",
            options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
            answer: "Pacific Ocean"
        }
    ];

    let currentQuestionIndex = 0;
    let score = 0;

    const startBtn = document.getElementById('start-btn');
    const quizContainer = document.getElementById('quiz');
    const questionContainer = document.getElementById('question-container');
    const optionsContainer = document.getElementById('options-container');
    const nextBtn = document.getElementById('next-btn');
    const resultContainer = document.getElementById('result');
    const scoreDisplay = document.getElementById('score');
    const correctAnswersDisplay = document.getElementById('correct-answers');
    const resetBtn = document.getElementById('reset-btn');

    startBtn.addEventListener('click', startQuiz);
    nextBtn.addEventListener('click', showNextQuestion);
    resetBtn.addEventListener('click', resetQuiz);

    function startQuiz() {
        currentQuestionIndex = 0;
        score = 0;
        startBtn.classList.add('hidden');
        quizContainer.classList.remove('hidden');
        resultContainer.classList.add('hidden');
        showQuestion();
    }

    function showQuestion() {
        const currentQuestion = questions[currentQuestionIndex];
        questionContainer.textContent = currentQuestion.question;
        optionsContainer.innerHTML = '';

        currentQuestion.options.forEach(option => {
            const li = document.createElement('li');
            li.textContent = option;
            li.addEventListener('click', () => selectAnswer(option));
            optionsContainer.appendChild(li);
        });
    }

    function selectAnswer(selectedOption) {
        const currentQuestion = questions[currentQuestionIndex];
        const options = optionsContainer.children;

        for (let option of options) {
            option.classList.remove('correct', 'incorrect');
            if (option.textContent === currentQuestion.answer) {
                option.classList.add('correct');
            } else if (option.textContent === selectedOption) {
                option.classList.add('incorrect');
            }
        }

        if (selectedOption === currentQuestion.answer) {
            score++;
        }

        nextBtn.classList.remove('hidden');
    }

    function showNextQuestion() {
        currentQuestionIndex++;
        if (currentQuestionIndex < questions.length) {
            showQuestion();
            nextBtn.classList.add('hidden');
        } else {
            showResult();
        }
    }

    function showResult() {
        quizContainer.classList.add('hidden');
        resultContainer.classList.remove('hidden');
        scoreDisplay.textContent = `${score} out of ${questions.length}`;
        correctAnswersDisplay.innerHTML = questions.map((q, index) => 
            `<p>Q${index + 1}: ${q.question} <br> Correct Answer: ${q.answer}</p>`
        ).join('');
    }

    function resetQuiz() {
        resultContainer.classList.add('hidden');
        startBtn.classList.remove('hidden');
    }
</script>

</body>
</html>

Explanation:

HTML Structure: The HTML contains a container for the quiz, including a title, question display, options, and buttons for starting and resetting the quiz.
CSS Styles: Basic styles are applied for layout, colors, and visual feedback for correct and incorrect answers.
JavaScript Logic: The script manages the quiz flow, including starting the quiz, displaying questions, handling answer selection, and showing results.

You can copy and paste this code into an HTML file and open it in a web browser to see the interactive quiz in action!

Basic Interactive Quiz with HTML, CSS, and JS

Answered using OpenAI o1 mini by OpenAI o1

Explanation: