`
},
{
question: "Match the following: Bastille, Bread shortages, Louis XVI",
options: [
"Bastille = Symbol of royal oppression; Bread shortages = Triggered riots; Louis XVI = Execution marked monarchy's fall",
"Bastille = Military fortress; Bread shortages = Caused by poor harvest; Louis XVI = Weak leadership",
"Bastille = Political prison; Bread shortages = Economic crisis; Louis XVI = Absolute monarch",
"Bastille = Armory; Bread shortages = Peasant revolt; Louis XVI = Constitutional monarch"
],
correctAnswer: 0,
explanation: `
Correct Matches:
Bastille = Symbol of royal oppression
Bread shortages = Triggered riots in Paris and rural areas
Louis XVI = Later execution marked the monarchy's fall
Common Sense Clue: The passage links the Bastille to tyranny and bread prices to unrest.
`
},
{
question: "The Bastille was demolished because it symbolized the king's __.",
options: [
"Military strength",
"Economic policies",
"Despotic rule",
"Religious control"
],
correctAnswer: 2,
explanation: `
Correct Answer: C) Despotic rule –
The text states it represented the king's oppressive power.
Why Others Are Wrong:
The Bastille was not tied to economics, religion, or military strategy.
Common Sense Clue: Revolutions often target symbols of tyranny.
`
},
{
question: "Arrange these events in the order they occurred on 14 July 1789: i. Troops entered Paris. ii. A militia formed to gather weapons. iii. The Bastille was attacked. iv. The fortress was destroyed.",
options: [
"i → ii → iii → iv",
"ii → i → iii → iv",
"iii → i → ii → iv",
"iv → iii → ii → i"
],
correctAnswer: 0,
explanation: `
Correct Answer: A) i → ii → iii → iv –
The passage describes troops arriving first, followed by militia formation, the Bastille attack, and its demolition.
Common Sense Clue: Fear of troops logically precedes organized resistance.
`
},
{
question: "How would a Parisian likely react to rumors of royal troops entering the city in July 1789?",
options: [
"Join a militia to arm themselves",
"Demand lower taxes immediately",
"Flee to avoid violence",
"Publicly support the king"
],
correctAnswer: 0,
explanation: `
Correct Answer: A) Join a militia to arm themselves –
The text states citizens formed militias and raided buildings for weapons.
Why Others Are Wrong:
Tax protests (B) were part of broader issues, not the immediate response.
Fleeing (C) contradicts the described riots in Paris.
Supporting the king (D) clashes with the growing distrust of the monarchy.
Common Sense Clue: Fear of repression would drive people to arm themselves.
`
}
];// 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 = feedbackAnimation.querySelector('dotlottie-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) {
try {
const question = quizData[index];
answered = false; // Reset answered flag for new question
// Reset UI
optionsGrid.innerHTML = '';
explanationContainer.classList.remove('show');
explanationBtn.classList.remove('active');
explanationBtn.innerHTML = ' Explanation'; // Reset button text
feedbackAnimation.classList.remove('show');
feedbackAnimation.style.display = 'none'; // Ensure it's hidden and not taking up space
if (wrongLottiePlayer) {
wrongLottiePlayer.stop(); // Stop Lottie animation when loading new question
}// Prepend the question number to the question text
questionTextEl.textContent = `${index + 1}. ${question.question}`;
// Set options
question.options.forEach((option, i) => {
const optionElement = document.createElement('div');
optionElement.className = 'option';
optionElement.dataset.index = i;
optionElement.innerHTML = `
${option}
`;
optionElement.addEventListener('click', () => {
selectOption(optionElement, i);
});
optionsGrid.appendChild(optionElement);
});
// Set explanation
explanationContent.innerHTML = question.explanation;
// Update navigation buttons
prevBtn.disabled = index === 0;
prevBtn.style.opacity = index === 0 ? '0.6' : '1';
nextBtn.disabled = true; // Disable next button until an answer is selected
nextBtn.style.pointerEvents = 'none'; // Ensure pointer events are off when disabled
nextBtn.innerHTML = index < quizData.length - 1 ?
'Next ' :
'Finish Quiz ';
// Animate question
questionTextEl.style.animation = 'none';
setTimeout(() => {
questionTextEl.style.animation = 'fadeInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards';
}, 10);// If user has already answered this question, show their selection and correct answer
if (userAnswers[currentQuestionIndex] !== null) {
const selectedOptionIndex = userAnswers[currentQuestionIndex];
const selectedOptionElement = optionsGrid.querySelector(`.option[data-index="${selectedOptionIndex}"]`);
// Re-apply classes for selected and correct answers
const currentQuestion = quizData[currentQuestionIndex];
let isCorrect = false;
if (Array.isArray(currentQuestion.correctAnswer)) {
isCorrect = currentQuestion.correctAnswer.includes(selectedOptionIndex);
} else {
isCorrect = selectedOptionIndex === currentQuestion.correctAnswer;
}if (isCorrect) {
selectedOptionElement.classList.add('correct');
} else {
selectedOptionElement.classList.add('incorrect');
if (Array.isArray(currentQuestion.correctAnswer)) {
currentQuestion.correctAnswer.forEach(correctIndex => {
optionsGrid.querySelector(`.option[data-index="${correctIndex}"]`).classList.add('correct');
});
} else {
optionsGrid.querySelector(`.option[data-index="${currentQuestion.correctAnswer}"]`).classList.add('correct');
}
}
// Disable all options
optionsGrid.querySelectorAll('.option').forEach(opt => {
opt.classList.add('disabled'); // Use a disabled class for styling and pointer-events
});
answered = true; // Mark as answered for navigation
nextBtn.disabled = false; // Enable next button if already answered
nextBtn.style.pointerEvents = 'auto'; // Ensure pointer events are on when enabled
}
} catch (e) {
console.error("Error loading question:", e);
}
}
// Handle option selection
function selectOption(optionElement, index) {
try {
if (answered) {
return;
}
const question = quizData[currentQuestionIndex];
answered = true; // Set answered flag to true
userAnswers[currentQuestionIndex] = index;
// Disable all options
optionsGrid.querySelectorAll('.option').forEach(opt => {
opt.classList.add('disabled'); // Use a disabled class for styling and pointer-events
});
// Check if answer is correct
let isCorrect = false;
if (Array.isArray(question.correctAnswer)) {
// Multiple correct answers (like question 2)
isCorrect = question.correctAnswer.includes(index);
// If multiple correct answers, mark all correct ones
if (!isCorrect) { // Only mark other correct answers if the selected one was wrong
question.correctAnswer.forEach(correctIndex => {
optionsGrid.querySelector(`.option[data-index="${correctIndex}"]`).classList.add('correct');
});
}
} else {
isCorrect = index === question.correctAnswer;
}
// Mark selected option
if (isCorrect) {
optionElement.classList.add('correct');
score++;
showConfetti();
} else {
optionElement.classList.add('incorrect');
// Also show the correct answer if it's a single correct answer question
if (!Array.isArray(question.correctAnswer)) {
optionsGrid.querySelector(`.option[data-index="${question.correctAnswer}"]`).classList.add('correct');
}
showWrongAnimation();
}
// Enable the next button after an answer is selected
nextBtn.disabled = false;
nextBtn.style.pointerEvents = 'auto'; // Ensure pointer events are on when enabled
} catch (e) {
console.error("Error in selectOption:", e);
}
}
// Show confetti animation for correct answer
function showConfetti() {
confetti({
particleCount: 200,
spread: 80,
origin: { y: 0.6 }
});
}
// Show custom wrong animation (Lottie)
function showWrongAnimation() {
feedbackAnimation.style.display = 'flex'; // Make it visible
feedbackAnimation.classList.add('show');
if (wrongLottiePlayer) {
wrongLottiePlayer.play(); // Play the Lottie animation
}setTimeout(() => {
feedbackAnimation.classList.remove('show');
feedbackAnimation.style.display = 'none'; // Hide it completely after animation
if (wrongLottiePlayer) {
wrongLottiePlayer.stop(); // Stop Lottie animation after it's hidden
}
}, 1500); // Duration to show the animation (adjust as needed)
}
// Toggle explanation
explanationBtn.addEventListener('click', function() {
explanationContainer.classList.toggle('show');
this.classList.toggle('active');
if (explanationContainer.classList.contains('show')) {
this.innerHTML = ' Hide Explanation';
} else {
this.innerHTML = ' Explanation';
}
});
// Navigation
nextBtn.addEventListener('click', function() {
if (currentQuestionIndex < quizData.length - 1) {
currentQuestionIndex++;
loadQuestion(currentQuestionIndex);
} else {
// Quiz completed - show results
showResults();
}
});
prevBtn.addEventListener('click', function() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
loadQuestion(currentQuestionIndex);
}
});
// Show results
function showResults() {
const percentage = Math.round((score / quizData.length) * 100);
// Update results content
finalScoreEl.textContent = `${percentage}%`;
scoreTextEl.textContent = `You answered ${score} out of ${quizData.length} questions correctly.`;
let feedbackMessage = '';
if (percentage >= 80) {
feedbackMessage = 'Excellent work! You have a great understanding of the French Revolution.';
} else if (percentage >= 50) {
feedbackMessage = 'Good effort! You have a decent grasp, keep practicing!';
} else {
feedbackMessage = 'Keep learning! Review the explanations to improve your knowledge.';
}
feedbackTextEl.textContent = feedbackMessage;
// Hide quiz content, show results content
quizContent.style.display = 'none';
resultsContent.style.display = 'block';
}// Add event listener for restart button
restartQuizBtn.addEventListener('click', function() {
initQuiz();
});// Initial load
initQuiz();
});
