/* Scoped Styles for the Quiz Widget only */
#marathi-quiz-widget {
font-family: ‘Segoe UI’, Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #fff;
padding: 20px;
border-radius: 8px;
border: 1px solid #ddd;
margin: 20px 0;
max-width: 100%;
box-sizing: border-box;
}

#marathi-quiz-widget h2 {
text-align: center;
color: #4F46E5;
margin-bottom: 25px;
font-size: 1.5em;
}

#marathi-quiz-widget .question-block {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}

#marathi-quiz-widget .question-text {
font-weight: 600;
font-size: 1.1em;
margin-bottom: 12px;
color: #111;
}

#marathi-quiz-widget .options-grid {
display: flex;
flex-direction: column;
gap: 8px;
}

#marathi-quiz-widget .option {
padding: 10px 14px;
border: 2px solid #e5e7eb;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
background-color: #fff;
font-size: 0.95em;
}

#marathi-quiz-widget .option:hover {
border-color: #4F46E5;
background: #EEF2FF;
}

/* Success State */
#marathi-quiz-widget .option.correct {
background: #D1FAE5 !important;
border-color: #10B981 !important;
color: #065F46 !important;
}

/* Error State */
#marathi-quiz-widget .option.wrong {
background: #FEE2E2 !important;
border-color: #EF4444 !important;
color: #991B1B !important;
}

/* Disable clicks after answering */
#marathi-quiz-widget .question-block.answered .option {
cursor: default;
pointer-events: none;
}

#marathi-quiz-widget .explanation {
display: none;
margin-top: 12px;
padding: 12px;
background: #F8FAFC;
border-left: 4px solid #4F46E5;
border-radius: 4px;
font-size: 0.9em;
color: #444;
}

#marathi-quiz-widget .stats {
text-align: center;
margin-top: 20px;
padding: 15px;
background: #f3f4f6;
border-radius: 8px;
font-weight: bold;
font-size: 1.1em;
}

#marathi-quiz-widget .btn-reset {
display: block;
width: 100%;
padding: 12px;
background: #4F46E5;
color: white;
border: none;
border-radius: 6px;
font-size: 1em;
cursor: pointer;
margin-top: 15px;
text-align: center;
}

#marathi-quiz-widget .btn-reset:hover {
background-color: #4338ca;
}

मुंग्यांच्या जगात – प्रश्नमंजुषा

पुन्हा सोडवा (Reset Quiz)

(function() {
const widget = document.getElementById(‘marathi-quiz-widget’);
const options = widget.querySelectorAll(‘.option’);
const scoreDisplay = document.getElementById(‘quiz-score’);

options.forEach(opt => {
opt.addEventListener(‘click’, function() {
const parent = this.closest(‘.question-block’);
if (parent.classList.contains(‘answered’)) return;

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

parent.classList.add(‘answered’);
this.classList.add(isCorrect ? ‘correct’ : ‘wrong’);

if (!isCorrect) {
parent.querySelector(‘.option[data-correct=”true”]’).classList.add(‘correct’);
} else {
let currentScore = parseInt(scoreDisplay.innerText);
scoreDisplay.innerText = currentScore + 1;
}

const explanation = parent.querySelector(‘.explanation’);
if(explanation) explanation.style.display = ‘block’;
});
});

window.resetMarathiQuiz = function() {
const blocks = widget.querySelectorAll(‘.question-block’);
blocks.forEach(block => {
block.classList.remove(‘answered’);
block.querySelectorAll(‘.option’).forEach(opt => {
opt.classList.remove(‘correct’, ‘wrong’);
});
const exp = block.querySelector(‘.explanation’);
if(exp) exp.style.display = ‘none’;
});
scoreDisplay.innerText = ‘0’;
};
})();