economics
Quiz Completed!
Your final score: ${totalScore} / ${QUESTIONS.length}
Thank you for taking the quiz!
Quiz Completed!
Your final score: ${totalScore} / ${QUESTIONS.length}
Thank you for taking the quiz!
];
let totalScore = 0;
let answeredCount = 0;
function initQuiz() {
const container = document.getElementById('quiz-container');
QUESTIONS.forEach((q, index) => {
const qCard = document.createElement('div');
qCard.className = 'bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden fade-in';
let optionsHtml = '';
q.o.forEach((opt, optIndex) => {
const label = String.fromCharCode(65 + optIndex); // A, B, C, D
optionsHtml += `
`;
});
qCard.innerHTML = `
`;
// Add event listeners to buttons
const buttons = qCard.querySelectorAll(`.option-btn-${q.id}`);
buttons.forEach((btn, optIndex) => {
btn.addEventListener('click', () => handleSelect(q.id, optIndex, btn));
});
container.appendChild(qCard);
});
}
function handleSelect(questionId, selectedIndex, btnElement) {
const question = QUESTIONS.find(q => q.id === questionId);
const isCorrect = selectedIndex === question.c;
// Disable all buttons for this question
const buttons = document.querySelectorAll(`.option-btn-${questionId}`);
buttons.forEach(btn => btn.disabled = true);
buttons.forEach(btn => btn.classList.remove('hover:border-blue-200', 'active:scale-[0.98]', 'cursor-pointer'));
buttons.forEach(btn => btn.classList.add('cursor-default'));
// Highlight selected
btnElement.classList.add('border-blue-500', 'bg-blue-50');
btnElement.querySelector('.radio-circle').classList.add('border-blue-500', 'bg-blue-500');
btnElement.querySelector('.radio-circle').innerHTML = '
';
// Update Score
if (isCorrect) totalScore += question.p;
// Show Feedback
const feedbackDiv = document.getElementById(`feedback-${questionId}`);
const correctLabel = String.fromCharCode(65 + question.c);
const correctText = question.o[question.c];
feedbackDiv.innerHTML = `
${isCorrect ? '✓ Yes, The answer is correct' : '✕ No, The answer is incorrect'}
Accepted Answer
${correctLabel}. ${correctText}
`;
feedbackDiv.classList.remove('hidden');
// Update Progress
answeredCount++;
if (answeredCount === QUESTIONS.length) {
const resultsCard = document.getElementById('results-card');
resultsCard.innerHTML = `
Quiz Completed!
Your final score: ${totalScore} / ${QUESTIONS.length}
Thank you for taking the quiz!
`;
resultsCard.classList.remove('hidden');
resultsCard.scrollIntoView({ behavior: 'smooth' });
}
}
window.onload = initQuiz;
