body {
font-family: Arial, sans-serif;
}

.quiz-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

h1 {
text-align: center;
color: #007acc;
}

.question {
font-weight: bold;
margin-bottom: 10px;
margin-top: 20px;
}

.option {
margin: 5px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

.option:not(.selected):hover {
background-color: #f0f0f0;
}

.selected {
background-color: #007acc;
color: white;
}

.correct {
background-color: green;
color: white;
}

.wrong {
background-color: red;
color: white;
}

.explanation {
margin-top: 10px;
padding: 10px;
border: 1px solid #eee;
background-color: #f9f9f9;
border-radius: 5px;
display: none;
}

.progress-container {
margin-top: 10px;
width: 100%;
height: 20px;
background-color: #ccc;
border-radius: 5px;
overflow: hidden;
position: relative;
}

.progress-bar {
width: 0;
height: 100%;
background-color: green;
transition: width 0.3s ease-in-out;
}

.percentage {
position: absolute;
top: 0;
right: 0;
padding: 0 5px;
background-color: #007acc;
color: white;
font-size: 12px;
line-height: 20px;
}

.report-card {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
text-align: center;
}

.report-card h2 {
font-size: 24px;
margin: 0px !important;
margin-bottom: 10px !important;
color: #ffffff;
background: #4d90fe;
padding: 5px;
}

.report-card p {
background: antiquewhite;
padding: 5px;
margin: 0px !important;
margin-bottom: 8px !important;
}

.message {
font-size: 18px;
font-weight: bold;
color: #007acc;
margin-top: 10px;
}

#resetButton {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}

#resetButton:hover {
background-color: #d32f2f;
}

const options = document.querySelectorAll(‘.option’);
const progressBar = document.getElementById(‘progressBar’);
const percentage = document.querySelector(‘.percentage’);
const attemptedCount = document.getElementById(‘attemptedCount’);
const correctCount = document.getElementById(‘correctCount’);
const wrongCount = document.getElementById(‘wrongCount’);
const message = document.getElementById(‘message’);
const resetButton = document.getElementById(‘resetButton’);

let totalQuestionsAttempted = 0;
let correctAnswers = 0;
const totalQuestions = 25; // Total number of questions
const attemptedQuestions = new Set(); // To track attempted questions

options.forEach(option => {
option.addEventListener(‘click’, () => {
const questionId = option.getAttribute(‘data-question’);

// Check if this question has already been answered
if (attemptedQuestions.has(questionId)) {
return; // Do nothing if already answered
}

attemptedQuestions.add(questionId);
totalQuestionsAttempted++;

const isCorrect = option.getAttribute(‘data-correct’) === ‘true’;

if (isCorrect) {
correctAnswers++;
option.classList.add(‘correct’);
} else {
option.classList.add(‘wrong’);
// Highlight the correct answer
const correctOption = document.querySelector(`.option[data-question=”${questionId}”][data-correct=”true”]`);
correctOption.classList.add(‘correct’);
}

// Show explanation
const explanation = document.querySelector(`.explanation[data-question=”${questionId}”]`);
if (explanation) {
explanation.style.display = ‘block’;
}

// Update report card
attemptedCount.textContent = totalQuestionsAttempted;
correctCount.textContent = correctAnswers;
wrongCount.textContent = totalQuestionsAttempted – correctAnswers;

// Update progress bar and percentage
const progress = (totalQuestionsAttempted / totalQuestions) * 100;
progressBar.style.width = progress + ‘%’;
percentage.textContent = progress.toFixed(0) + ‘%’;

// Update the message when all questions are answered
if (totalQuestionsAttempted === totalQuestions) {
if (correctAnswers === totalQuestions) {
message.textContent = “Congratulations! You got all the answers correct!”;
} else if (correctAnswers >= (totalQuestions * 0.7)) { // Scored 70% or more
message.textContent = “Great job! You’re doing well!”;
} else {
message.textContent = “Keep practicing. You can improve!”;
}
}
});
});

// Reset button functionality
resetButton.addEventListener(‘click’, () => {
options.forEach(option => {
option.classList.remove(‘selected’, ‘correct’, ‘wrong’);
});
const explanations = document.querySelectorAll(‘.explanation’);
explanations.forEach(explanation => {
explanation.style.display = ‘none’;
});
totalQuestionsAttempted = 0;
correctAnswers = 0;
attemptedQuestions.clear();
attemptedCount.textContent = 0;
correctCount.textContent = 0;
wrongCount.textContent = 0;
progressBar.style.width = ‘0%’;
percentage.textContent = ‘0%’;
message.textContent = ‘–‘;
});