The Essential French Revolution Quiz Class 9,Master It!

By Bharat Muni / July 6, 2025

` }, { question: "Arrange these events in the order they contributed to the subsistence crisis: i. Population increased from 23 million to 28 million. ii. Grain production failed to meet demand. iii. Bread prices rose sharply. iv. Wages remained stagnant.", options: [ "i → ii → iii → iv", "ii → i → iii → iv", "i → iii → ii → iv", "iv → i → ii → iii" ], correctAnswer: 0, // Index of "i → ii → iii → iv" explanation: `

Common Sense Clue: Cause-effect chain: More people → higher demand → low supply → inflation → wages lag.

` }, { question: "A peasant in 18th-century France would most likely be required to:", options: [ "Pay tithes to the Church and taille to the state", "Serve as a clergy member", "Advise the king on economic policies", "Trade salt and tobacco tax-free" ], correctAnswer: 0, // Index of "Pay tithes to the Church and taille to the state" explanation: `

Common Sense Clue: The text emphasizes the Third Estate’s tax burden.

` } ];// DOM elements const container = document.getElementById('french-revolution-quiz'); const quizContent = container.querySelector('#quiz-content'); const resultsContent = container.querySelector('#results-content'); const questionTextEl = container.querySelector('#question-text'); const optionsGrid = container.querySelector('#options-grid'); const explanationContainer = container.querySelector('#explanation-container'); const explanationContent = container.querySelector('#explanation-content'); const explanationBtn = container.querySelector('#explanation-btn'); const feedbackAnimation = container.querySelector('#feedback-animation'); // Select the Lottie player directly const wrongLottiePlayer = document.getElementById('wrong-lottie-player'); const prevBtn = container.querySelector('#prev-btn'); const nextBtn = container.querySelector('#next-btn'); const restartQuizBtn = container.querySelector('#restart-quiz-btn'); const finalScoreEl = container.querySelector('#final-score'); const scoreTextEl = container.querySelector('#score-text'); const feedbackTextEl = container.querySelector('#feedback-text');// Quiz state let currentQuestionIndex = 0; let score = 0; let answered = false; let userAnswers = Array(quizData.length).fill(null); // Initialize quiz function initQuiz() { currentQuestionIndex = 0; score = 0; userAnswers = Array(quizData.length).fill(null); // Show quiz content, hide results content quizContent.style.display = 'block'; resultsContent.style.display = 'none';loadQuestion(currentQuestionIndex); } // Load question function loadQuestion(index) { const question = quizData[index]; answered = false; // Reset UI optionsGrid.innerHTML = ''; explanationContainer.classList.remove('show'); explanationBtn.classList.remove('active'); explanationBtn.innerHTML = ' Explanation'; // Reset button text // Hide and stop Lottie animation feedbackAnimation.classList.remove('show'); if (wrongLottiePlayer) { wrongLottiePlayer.stop(); }// Prepend the question number to the question text questionTextEl.textContent = `${index + 1}. ${question.question}`;question.options.forEach((option, i) => { const optionEl = document.createElement('div'); optionEl.classList.add('option'); optionEl.textContent = option; optionEl.dataset.index = i; // Store index for easy lookup optionEl.addEventListener('click', () => selectOption(optionEl, i));// If already answered, apply appropriate classes and disable if (userAnswers[index] !== null) { optionEl.classList.add('disabled'); if (Array.isArray(question.correctAnswer)) { if (question.correctAnswer.includes(i)) { optionEl.classList.add('correct'); } else if (userAnswers[index].includes(i)) { optionEl.classList.add('incorrect'); } } else { if (i === question.correctAnswer) { optionEl.classList.add('correct'); } else if (i === userAnswers[index]) { optionEl.classList.add('incorrect'); } } } optionsGrid.appendChild(optionEl); });updateNavigationButtons(); // Show explanation if already answered if (userAnswers[index] !== null) { showExplanation(); } }// Select option function selectOption(selectedOptionEl, selectedIndex) { if (answered) return; // Prevent re-answering answered = true;const question = quizData[currentQuestionIndex]; let isCorrect = false;// Handle single or multiple correct answers if (Array.isArray(question.correctAnswer)) { // For multiple correct answers, we assume a single selection for simplicity in this UI. // If the user selects one of the correct answers, it's marked correct. // For a true multiple-choice, the UI would need checkboxes and a "Submit" button. if (question.correctAnswer.includes(selectedIndex)) { isCorrect = true; } userAnswers[currentQuestionIndex] = [selectedIndex]; // Store the single selected answer } else { if (selectedIndex === question.correctAnswer) { isCorrect = true; } userAnswers[currentQuestionIndex] = selectedIndex; // Store the single selected answer }// Apply styling based on correctness if (isCorrect) { selectedOptionEl.classList.add('correct'); score++;// Get the bounding box of the question container const questionContainerRect = container.querySelector('.question-container').getBoundingClientRect();// Create a temporary canvas for confetti to confine it const confettiCanvas = document.createElement('canvas'); confettiCanvas.style.position = 'absolute'; confettiCanvas.style.top = `${questionContainerRect.top + window.scrollY}px`; confettiCanvas.style.left = `${questionContainerRect.left + window.scrollX}px`; confettiCanvas.style.width = `${questionContainerRect.width}px`; confettiCanvas.style.height = `${questionContainerRect.height}px`; confettiCanvas.style.pointerEvents = 'none'; // Allow clicks to pass through confettiCanvas.style.zIndex = '9999'; // Ensure it's on top document.body.appendChild(confettiCanvas); // Corrected: ensure this is a complete statementconst myConfetti = confetti.create(confettiCanvas, { resize: true }); // Corrected: proper variable assignment and function callmyConfetti({ particleCount: 800, // Even denser spread: 180, // Wider spread to fill the area startVelocity: 70, // Higher initial velocity scalar: 2.2, // Even larger particles // Origin relative to the *confettiCanvas* (which is positioned over the question-container) origin: { x: 0.5, y: 0.5 }, colors: ['#000000', '#1a1a1a', '#333333', '#4d4d4d', '#666666', '#808080'], // Darker, HD grayscale colors shapes: ['circle', 'square', 'star', 'line'], // More variety of shapes disableForReducedMotion: true });// Remove the confetti canvas after a delay setTimeout(() => { confettiCanvas.remove(); }, 4000); // Adjust duration as needed} else { selectedOptionEl.classList.add('incorrect'); // Show Lottie animation for wrong answer feedbackAnimation.classList.add('show'); if (wrongLottiePlayer) { wrongLottiePlayer.play(); } // Find and highlight the correct answer Array.from(optionsGrid.children).forEach((optionEl) => { if (Array.isArray(question.correctAnswer)) { if (question.correctAnswer.includes(parseInt(optionEl.dataset.index))) { optionEl.classList.add('correct'); } } else { if (parseInt(optionEl.dataset.index) === question.correctAnswer) { optionEl.classList.add('correct'); } } });// Hide Lottie after a short delay setTimeout(() => { feedbackAnimation.classList.remove('show'); if (wrongLottiePlayer) { wrongLottiePlayer.stop(); } }, 1500); // Animation duration + a little extra }// Disable all options after selection Array.from(optionsGrid.children).forEach(option => { option.classList.add('disabled'); });showExplanation(); }// Show explanation function showExplanation() { const question = quizData[currentQuestionIndex]; explanationContent.innerHTML = `

Explanation

${question.explanation}`; explanationContainer.classList.add('show'); explanationBtn.classList.add('active'); explanationBtn.innerHTML = ' Hide Explanation'; }// Toggle explanation visibility explanationBtn.addEventListener('click', () => { explanationContainer.classList.toggle('show'); if (explanationContainer.classList.contains('show')) { explanationBtn.innerHTML = ' Hide Explanation'; } else { explanationBtn.innerHTML = ' Explanation'; } });// Update navigation buttons (prev/next) function updateNavigationButtons() { prevBtn.disabled = currentQuestionIndex === 0; nextBtn.disabled = false; // Always enable next, will lead to results if last question if (currentQuestionIndex === quizData.length - 1 && answered) { nextBtn.textContent = 'View Results'; nextBtn.innerHTML = 'View Results '; } else { nextBtn.textContent = 'Next'; nextBtn.innerHTML = 'Next '; } }// Next question nextBtn.addEventListener('click', () => { if (currentQuestionIndex < quizData.length - 1) { currentQuestionIndex++; loadQuestion(currentQuestionIndex); } else if (currentQuestionIndex === quizData.length - 1) { showResults(); } });// Previous question prevBtn.addEventListener('click', () => { if (currentQuestionIndex > 0) { currentQuestionIndex--; loadQuestion(currentQuestionIndex); } });// Show results function showResults() { quizContent.style.display = 'none'; resultsContent.style.display = 'block'; finalScoreEl.textContent = `${score}/${quizData.length}`;let scorePercentage = (score / quizData.length) * 100; let scoreText = ''; let feedbackText = '';if (scorePercentage === 100) { scoreText = "Outstanding! You're a French Revolution expert!"; feedbackText = "Your knowledge is truly revolutionary!"; } else if (scorePercentage >= 75) { scoreText = "Excellent! You have a strong grasp of the French Revolution."; feedbackText = "Keep up the great work!"; } else if (scorePercentage >= 50) { scoreText = "Good effort! You're on your way to mastering the topic."; feedbackText = "Review the explanations to improve!"; } else { scoreText = "Needs more study. Don't worry, every revolution starts somewhere!"; feedbackText = "Time to delve deeper into the history books!"; }scoreTextEl.textContent = scoreText; feedbackTextEl.textContent = feedbackText; }// Restart quiz restartQuizBtn.addEventListener('click', initQuiz);// Initial load initQuiz(); });