Weather app website

[mounika-aids]

Program:

HTML:

<div class="quiz-box">
    <h2 id="question">Question</h2>
    <ul>
        <li><button class="option-btn" onclick="checkAnswer(0)"></button></li>
        <li><button class="option-btn" onclick="checkAnswer(1)"></button></li>
        <li><button class="option-btn" onclick="checkAnswer(2)"></button></li>
        <li><button class="option-btn" onclick="checkAnswer(3)"></button></li>
    </ul>
    <h3 id="score"></h3>
</div>

<script src="script.js"></script>

Css:

body { font-family: Arial, sans-serif; background: #eee; text-align: center; }

.quiz-box { width: 350px; margin: 100px auto; background: white; padding: 20px; border-radius: 10px; }

.option-btn { width: 100%; padding: 10px; margin: 5px 0; cursor: pointer; border: none; background: #007bff; color: white; border-radius: 5px; }

.option-btn:hover { opacity: 0.8; }

JavaScript:

let questions = [ { question: "What is the capital of India?", options: ["Delhi", "Mumbai", "Kolkata", "Chennai"], answer: 0 }, { question: "2 + 2 = ?", options: ["3", "4", "5", "6"], answer: 1 }, { question: "Which is a programming language?", options: ["Python", "Tiger", "Elephant", "Lion"], answer: 0 } ];

let qIndex = 0; let score = 0;

function loadQuestion() { document.getElementById("question").innerText = questions[qIndex].question; let btns = document.querySelectorAll(".option-btn");

questions[qIndex].options.forEach((opt, i) => {
    btns[i].innerText = opt;
});

}

function checkAnswer(selected) { if (selected === questions[qIndex].answer) { score++; } qIndex++;

if (qIndex < questions.length) {
    loadQuestion();
} else {
    document.getElementById("score").innerText =
    `Your Score: ${score}/${questions.length}`;
}

}

loadQuestion();