Weather app website

[mounika-aids]

Program:

HTML:

<title>Quiz Game</title>

<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();