Code Editor and Output

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Choice Quiz</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

.quiz-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }

.question {
            margin-bottom: 20px;
        }

button {
            background-color: #007BFF;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

button:hover {
            background-color: #0056b3;
        }

.correct {
            color: green;
        }

.incorrect {
            color: red;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1>Multiple Choice Quiz</h1>
        <form id="quiz-form">
            <div class="question">
                <p>1. What is the capital of France?</p>
                <label>
                    <input type="radio" name="q1" value="a"> Berlin
                </label><br>
                <label>
                    <input type="radio" name="q1" value="b"> Madrid
                </label><br>
                <label>
                    <input type="radio" name="q1" value="c"> Paris
                </label><br>
                <label>
                    <input type="radio" name="q1" value="d"> Rome
                </label>
            </div>
            <div class="question">
                <p>2. Which planet is known as the Red Planet?</p>
                <label>
                    <input type="radio" name="q2" value="a"> Earth
                </label><br>
                <label>
                    <input type="radio" name="q2" value="b"> Mars
                </label><br>
                <label>
                    <input type="radio" name="q2" value="c"> Jupiter
                </label><br>
                <label>
                    <input type="radio" name="q2" value="d"> Venus
                </label>
            </div>
            <div class="question">
                <p>3. What is the largest ocean on Earth?</p>
                <label>
                    <input type="radio" name="q3" value="a"> Atlantic Ocean
                </label><br>
                <label>
                    <input type="radio" name="q3" value="b"> Indian Ocean
                </label><br>
                <label>
                    <input type="radio" name="q3" value="c"> Arctic Ocean
                </label><br>
                <label>
                    <input type="radio" name="q3" value="d"> Pacific Ocean
                </label>
            </div>
            <button type="button" onclick="calculateScore()">Submit</button>
        </form>
        <div id="result"></div>
    </div>
    <script>
        const startTime = new Date().getTime();

function calculateScore() {
            const form = document.getElementById('quiz-form');
            const q1 = form.q1.value;
            const q2 = form.q2.value;
            const q3 = form.q3.value;

const correctAnswers = {
                q1: 'c',
                q2: 'b',
                q3: 'd'
            };

let score = 0;

const questions = [q1, q2, q3];
            const questionDivs = document.querySelectorAll('.question');

questions.forEach((answer, index) => {
                const labels = questionDivs[index].querySelectorAll('label');
                labels.forEach(label => {
                    const input = label.querySelector('input');
                    if (input.value === correctAnswers[`q${index + 1}`]) {
                        if (input.checked) {
                            score++;
                            label.classList.add('correct');
                        } else {
                            label.classList.remove('incorrect');
                        }
                    } else {
                        if (input.checked) {
                            label.classList.add('incorrect');
                        } else {
                            label.classList.remove('correct');
                            label.classList.remove('incorrect');
                        }
                    }
                });
            });

const endTime = new Date().getTime();
            const timeTaken = ((endTime - startTime) / 1000).toFixed(2);

const result = document.getElementById('result');
            result.innerHTML = `Your score is: ${score} out of 3 <br> Time taken: ${timeTaken} seconds`;
        }
    </script>
</body>
</html>