<h2 id="question">Loading Question...</h2>
<div id="answer-buttons" class="btn-grid">
</div>
<div class="controls">
<button id="next-btn" class="hide">Next Question</button>
</div>
<div id="score-container" class="hide">
<h3>Quiz Finished!</h3>
<p id="score-text"></p>
<button onclick="restartQuiz()">Restart Quiz</button>
</div>
</div>
<style>
/* Styling the Quiz */
#quiz-container {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
max-width: 500px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.btn-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 20px 0;
}
button {
padding: 12px;
border: 1px solid #007bff;
border-radius: 5px;
background-color: white;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
button:hover {
background-color: #e7f3ff;
}
.correct {
background-color: #28a745 !important;
color: white;
}
.wrong {
background-color: #dc3545 !important;
color: white;
}
#next-btn {
background-color: #007bff;
color: white;
width: 100%;
}
.hide { display: none; }
</style>
<script>
const questionElement = document.getElementById('question');
const answerButtonsElement = document.getElementById('answer-buttons');
const nextButton = document.getElementById('next-btn');
const scoreContainer = document.getElementById('score-container');
const scoreText = document.getElementById('score-text');
let currentQuestionIndex, score;
// --- CUSTOMIZE YOUR QUESTIONS HERE ---
const questions = [
{
question: 'What is the capital of France?',
answers: [
{ text: 'Berlin', correct: false },
{ text: 'Paris', correct: true },
{ text: 'Madrid', correct: false },
{ text: 'Rome', correct: false }
]
},
{
question: 'Which language runs in a web browser?',
answers: [
{ text: 'Java', correct: false },
{ text: 'C', correct: false },
{ text: 'Python', correct: false },
{ text: 'JavaScript', correct: true }
]
}
];
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
scoreContainer.classList.add('hide');
nextButton.classList.add('hide');
showQuestion();
}
function showQuestion() {
resetState();
let currentQuestion = questions[currentQuestionIndex];
questionElement.innerText = currentQuestion.question;
currentQuestion.answers.forEach(answer => {
const button = document.createElement('button');
button.innerText = answer.text;
button.classList.add('btn');
if (answer.correct) {
button.dataset.correct = answer.correct;
}
button.addEventListener('click', selectAnswer);
answerButtonsElement.appendChild(button);
});
}
function resetState() {
nextButton.classList.add('hide');
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild);
}
}
function selectAnswer(e) {
const selectedButton = e.target;
const isCorrect = selectedButton.dataset.correct === "true";
if (isCorrect) {
selectedButton.classList.add('correct');
score++;
} else {
selectedButton.classList.add('wrong');
}
// Disable all buttons after selection
Array.from(answerButtonsElement.children).forEach(button => {
button.disabled = true;
if (button.dataset.correct === "true") {
button.classList.add('correct');
}
});
if (questions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide');
} else {
showScore();
}
}
function showScore() {
questionElement.innerText = "Quiz Completed!";
answerButtonsElement.innerHTML = "";
scoreContainer.classList.remove('hide');
scoreText.innerText = `You scored ${score} out of ${questions.length}!`;
}
nextButton.addEventListener('click', () => {
currentQuestionIndex++;
showQuestion();
});
function restartQuiz() {
startQuiz();
}
startQuiz();
</script>
No comments:
Post a Comment