tummy paragraph for the nation of the ideal from the niyamit North America South America India to the point of course not this cloud be storage not be reachable out of the going Eliza 123 99 High School after all I am the king of king maker I am to.
Mathematics Quiz – WordPress Compatible
Quiz Results
`;
question.options.forEach((option, optionIdx) => {
let btnClass = 'option-btn w-100';
if (state.answers[idx] === optionIdx) btnClass += ' selected';
if (state.submitted) {
if (optionIdx === question.correctIndex) btnClass += ' correct';
else if (state.answers[idx] === optionIdx) btnClass += ' incorrect';
}
html += `${option} `;
});
html += `
`;
// Add explanation section
html += `
`;
// Add analysis panel when in review mode
if (state.submitted) {
const timeSpent = state.timePerQuestion[idx];
const avgTime = state.avgTimePerQuestion;
let timeStatus, iconColor;
if (timeSpent < avgTime * 0.7) {
timeStatus = "Fast";
iconColor = "#28a745";
} else if (timeSpent > avgTime * 1.3) {
timeStatus = "Slow";
iconColor = "#dc3545";
} else {
timeStatus = "Average";
iconColor = "#4361ee";
}
const isCorrect = state.answers[idx] === question.correctIndex;
const isAttempted = state.answers[idx] !== null;
html += `
Status: ${isAttempted ? (isCorrect ? 'Correct' : 'Incorrect') : 'Unattempted'}
Time spent: ${timeSpent.toFixed(1)} seconds
${timeStatus}
Time compared to average:
0s
${avgTime.toFixed(1)}s (avg)
${(avgTime * 2).toFixed(1)}s+
`;
}
html += ``;
document.getElementById('questionContainer').innerHTML = html;
document.querySelectorAll('.option-btn').forEach(btn => {
btn.addEventListener('click', () => {
if (!state.submitted) {
clickSound.currentTime = 0;
clickSound.play().catch(e => console.log("Audio play prevented"));
selectOption(btn.dataset.index);
}
});
});
updateQuestionNav();
// Play correct/wrong sound when in review mode
if (state.inReviewMode && state.lastPlayedQuestion !== idx) {
state.lastPlayedQuestion = idx;
const question = quizData.questions[idx];
const isCorrect = state.answers[idx] === question.correctIndex;
const isAttempted = state.answers[idx] !== null;
if (isAttempted) {
setTimeout(() => {
if (isCorrect) {
correctSound.currentTime = 0;
correctSound.play().catch(e => console.log("Audio play prevented"));
} else {
wrongSound.currentTime = 0;
wrongSound.play().catch(e => console.log("Audio play prevented"));
}
}, 300);
}
}
}
function updateQuestionNav() {
document.querySelectorAll('#questionNav .page-box').forEach((box, idx) => {
box.className = 'page-box';
if (idx === state.currentQuestion) {
box.classList.add('active');
}
if (state.answers[idx] !== null) {
if (state.submitted) {
if (state.answers[idx] === quizData.questions[idx].correctIndex) {
box.classList.add('correct');
} else {
box.classList.add('incorrect');
}
}
}
});
}
function selectOption(optionIdx) {
state.answers[state.currentQuestion] = parseInt(optionIdx);
document.querySelectorAll('.option-btn').forEach(opt => opt.classList.remove('selected'));
document.querySelector(`.option-btn[data-index="${optionIdx}"]`).classList.add('selected');
updateQuestionNav();
// Auto advance to next question after selection
if (state.currentQuestion < quizData.questions.length - 1) {
setTimeout(() => {
updateQuestionTime();
renderQuestion(state.currentQuestion + 1);
}, 800);
}
}
function updateQuestionTime() {
const now = new Date();
state.timePerQuestion[state.currentQuestion] += (now - state.startTime) / 1000;
state.startTime = now;
}
function submitQuiz() {
if (state.submitted) return;
clearInterval(state.timerInterval);
updateQuestionTime();
state.submitted = true;
// Calculate average time per question
let totalTimeSpent = state.timePerQuestion.reduce((acc, time) => acc + time, 0);
state.avgTimePerQuestion = totalTimeSpent / quizData.questions.length;
const results = {
correct: 0,
incorrect: 0,
unattempted: 0,
score: 0,
negativeMarks: 0
};
state.answers.forEach((answer, idx) => {
if (answer === null) {
results.unattempted++;
} else if (answer === quizData.questions[idx].correctIndex) {
results.correct++;
results.score++;
} else {
results.incorrect++;
results.score -= state.negativeMark;
results.negativeMarks += state.negativeMark;
}
});
const percentage = (results.score / quizData.questions.length) * 100;
document.getElementById('scoreDisplay').textContent = `${results.score.toFixed(2)} / ${quizData.questions.length} (${percentage.toFixed(1)}%)`;
document.getElementById('totalQuestions').textContent = quizData.questions.length;
document.getElementById('correctAnswers').textContent = results.correct;
document.getElementById('incorrectAnswers').textContent = results.incorrect;
document.getElementById('unattempted').textContent = results.unattempted;
document.getElementById('negativeMarks').textContent = `-${results.negativeMarks.toFixed(2)}`;
document.getElementById('questionContainer').style.display = 'none';
document.getElementById('questionNav').style.display = 'none';
document.getElementById('submitBtn').style.display = 'none';
document.getElementById('resultContainer').style.display = 'block';
createPerformanceChart(results);
createTimeAnalysisChart();
// Play appropriate sound based on score
if (percentage >= 70) {
createConfetti();
correctSound.currentTime = 0;
correctSound.play().catch(e => console.log("Audio play prevented"));
} else if (percentage < 50) {
wrongSound.currentTime = 0;
wrongSound.play().catch(e => console.log("Audio play prevented"));
}
}
function createPerformanceChart(results) {
const ctx = document.getElementById('performanceChart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Correct', 'Incorrect', 'Unattempted'],
datasets: [{
data: [results.correct, results.incorrect, results.unattempted],
backgroundColor: ['#28a745', '#dc3545', '#ffc107']
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' },
tooltip: {
callbacks: {
label: function(context) {
return `${context.label}: ${context.raw}`;
}
}
}
}
}
});
}
function createTimeAnalysisChart() {
const ctx = document.getElementById('timeAnalysisChart').getContext('2d');
const questionLabels = Array.from({length: quizData.questions.length}, (_, i) => `Q${i+1}`);
// Create data for correct vs incorrect answers
const correctData = [];
const incorrectData = [];
const unattemptedData = [];
state.answers.forEach((answer, idx) => {
const time = state.timePerQuestion[idx];
if (answer === null) {
unattemptedData.push(time);
correctData.push(0);
incorrectData.push(0);
} else if (answer === quizData.questions[idx].correctIndex) {
correctData.push(time);
incorrectData.push(0);
unattemptedData.push(0);
} else {
incorrectData.push(time);
correctData.push(0);
unattemptedData.push(0);
}
});
new Chart(ctx, {
type: 'bar',
data: {
labels: questionLabels,
datasets: [
{
label: 'Correct',
data: correctData,
backgroundColor: '#28a745',
borderColor: '#28a745',
borderWidth: 1
},
{
label: 'Incorrect',
data: incorrectData,
backgroundColor: '#dc3545',
borderColor: '#dc3545',
borderWidth: 1
},
{
label: 'Unattempted',
data: unattemptedData,
backgroundColor: '#ffc107',
borderColor: '#ffc107',
borderWidth: 1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
title: {
display: true,
text: 'Questions'
}
},
y: {
stacked: true,
title: {
display: true,
text: 'Time (seconds)'
}
}
},
plugins: {
tooltip: {
callbacks: {
title: function(tooltipItems) {
return `Question ${tooltipItems[0].dataIndex + 1}`;
},
label: function(context) {
let label = context.dataset.label || '';
if (label && context.parsed.y > 0) {
label += `: ${context.parsed.y.toFixed(1)} seconds`;
}
return label;
}
}
}
}
}
});
}
function reviewAnswers() {
state.inReviewMode = true;
state.lastPlayedQuestion = -1;
document.getElementById('questionContainer').style.display = 'block';
document.getElementById('questionNav').style.display = 'flex';
document.getElementById('resultContainer').style.display = 'none';
renderQuestion(0);
}
function createConfetti() {
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
for (let i = 0; i < 150; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.top = Math.random() * 100 + 'vh';
document.body.appendChild(confetti);
const animation = confetti.animate([
{ transform: 'translateY(0) rotate(0)', opacity: 1 },
{ transform: `translateY(${Math.random() * 500 + 500}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
], { duration: Math.random() * 3000 + 2000, easing: 'cubic-bezier(.23,1,.32,1)' });
animation.onfinish = () => confetti.remove();
}
}
return {
init: initQuiz
};
})();
// Initialize the quiz after all resources are loaded
window.addEventListener('load', function() {
MathQuiz.init();
});
