Indian Geography Quiz
Indian Geography Quiz
Quiz Rules
- You will get 30 seconds for each question.
- Each correct answer gives 1 point.
- No negative marking.
Time: 30
Question text
Quiz Completed!
body {
font-family: Arial, sans-serif;
background: #f0f8ff;
margin: 0;
padding: 0;
text-align: center;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
}
.quiz-thumbnail {
background: linear-gradient(45deg, #ff8a00, #e52e71);
color: white;
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
}
.rules-box, .quiz-box, .result-box {
background: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #ccc;
}
ul {
list-style-type: none;
padding: 0;
}
#options button {
display: block;
width: 100%;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 8px;
background-color: #eeeeee;
cursor: pointer;
transition: 0.3s;
}
#options button.correct {
background-color: #4CAF50;
color: white;
}
#options button.wrong {
background-color: #f44336;
color: white;
}
#timer {
font-size: 20px;
margin-bottom: 10px;
color: #333;
}
button {
background-color: #007bff;
color: white;
padding: 10px 18px;
border: none;
border-radius: 8px;
cursor: pointer;
}
.hide {
display: none;
}
const questions = [
{
question: "Which is the longest river in India?",
options: ["Ganga", "Yamuna", "Brahmaputra", "Godavari"],
answer: "Ganga"
}
];
let currentQuestion = 0;
let score = 0;
let timer;
let timeLeft = 30;
const startBtn = document.getElementById("startBtn");
const rulesBox = document.querySelector(".rules-box");
const quizBox = document.querySelector(".quiz-box");
const resultBox = document.querySelector(".result-box");
const questionEl = document.getElementById("question");
const optionsEl = document.getElementById("options");
const timerEl = document.getElementById("timer");
const nextBtn = document.getElementById("nextBtn");
const correctSound = document.getElementById("correctSound");
const wrongSound = document.getElementById("wrongSound");
startBtn.addEventListener("click", startQuiz);
function startQuiz() {
rulesBox.classList.add("hide");
quizBox.classList.remove("hide");
showQuestion();
startTimer();
}
function showQuestion() {
const q = questions[currentQuestion];
questionEl.textContent = q.question;
optionsEl.innerHTML = "";
q.options.forEach(opt => {
const btn = document.createElement("button");
btn.textContent = opt;
btn.addEventListener("click", () => selectAnswer(btn, q.answer));
optionsEl.appendChild(btn);
});
}
function selectAnswer(btn, correctAnswer) {
const allBtns = optionsEl.querySelectorAll("button");
allBtns.forEach(b => {
b.disabled = true;
if (b.textContent === correctAnswer) {
b.classList.add("correct");
} else if (b !== btn) {
b.classList.add("wrong");
}
});
if (btn.textContent === correctAnswer) {
score++;
correctSound.play();
} else {
btn.classList.add("wrong");
wrongSound.play();
}
clearInterval(timer);
nextBtn.classList.remove("hide");
}
nextBtn.addEventListener("click", showResult);
function startTimer() {
timeLeft = 30;
timerEl.textContent = "Time: " + timeLeft;
timer = setInterval(() => {
timeLeft--;
timerEl.textContent = "Time: " + timeLeft;
if (timeLeft === 0) {
clearInterval(timer);
showCorrectOnly();
nextBtn.classList.remove("hide");
}
}, 1000);
}
function showCorrectOnly() {
const correctAnswer = questions[currentQuestion].answer;
const allBtns = optionsEl.querySelectorAll("button");
allBtns.forEach(b => {
b.disabled = true;
if (b.textContent === correctAnswer) {
b.classList.add("correct");
} else {
b.classList.add("wrong");
}
});
}
function showResult() {
quizBox.classList.add("hide");
resultBox.classList.remove("hide");
document.getElementById("scoreText").textContent =
`You scored ${score} out of ${questions.length}.`;
}
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন