Quiz de grammaire et vocabulaire A2

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
h1, h2, h3 {
color: #2c3e50;
}
.container {
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
max-width: 100%;
margin: 0 auto;
}
.subscription-form {
background: linear-gradient(135deg, #e8f4f8 0%, #d4f1f4 100%);
padding: 25px;
border-radius: 12px;
margin-bottom: 30px;
border: 1px solid rgba(52, 152, 219, 0.2);
}
.exercise-container {
display: none;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #2c3e50;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
button {
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
color: white;
border: none;
padding: 15px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}
.question {
margin-bottom: 25px;
padding: 25px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
border-left: 5px solid #3498db;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.question-number {
font-weight: bold;
color: #2c3e50;
margin-bottom: 12px;
font-size: 18px;
}
.question-text {
font-size: 16px;
margin-bottom: 15px;
line-height: 1.6;
color: #2c3e50;
}
.question-type {
background: #3498db;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
display: inline-block;
margin-bottom: 10px;
}
.options {
display: grid;
gap: 12px;
}
.option {
display: flex;
align-items: center;
padding: 12px;
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.option:hover {
border-color: #3498db;
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
transform: translateX(5px);
}
.option input[type=”radio”], .option input[type=”checkbox”] {
margin-right: 12px;
width: auto;
transform: scale(1.2);
}
.option.correct {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-color: #28a745;
}
.option.incorrect {
background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
border-color: #dc3545;
}
.option.correct-answer {
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
border-color: #17a2b8;
}
.fill-blank {
background: white;
border: 2px solid #3498db;
border-radius: 6px;
padding: 8px 12px;
margin: 0 5px;
min-width: 120px;
text-align: center;
font-weight: bold;
}
.result {
margin-top: 30px;
padding: 25px;
background: linear-gradient(135deg, #eafaf1 0%, #d4f1de 100%);
border-radius: 12px;
display: none;
border: 1px solid rgba(40, 167, 69, 0.2);
}
.certificate {
text-align: center;
margin-top: 30px;
padding: 25px;
border: 3px solid #2c3e50;
border-radius: 12px;
display: none;
background: white;
}
.error {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
.progress-bar {
width: 100%;
height: 25px;
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-radius: 15px;
margin-bottom: 25px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
border-radius: 15px;
transition: width 0.5s ease;
width: 0%;
box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}
#certificatePreview {
position: relative;
width: 100%;
height: 500px;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
border: 12px solid transparent;
border-image: linear-gradient(45deg, #3498db, #2980b9, #1abc9c, #16a085, #27ae60) 1;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 25px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.certificate-content {
position: relative;
z-index: 1;
padding: 25px;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.certificate-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.certificate-title {
flex-grow: 1;
text-align: center;
}
.certificate-logo {
width: 140px;
height: 70px;
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
}
.certificate-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.certificate-qr {
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
background: #f9f9f9;
border: 2px solid #dee2e6;
border-radius: 8px;
}
.certificate-signature {
flex-grow: 1;
text-align: center;
}
.loading {
display: none;
margin-top: 15px;
font-style: italic;
color: #6c757d;
text-align: center;
}
.instruction-box {
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border: 2px solid #ffeaa7;
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.theme-section {
margin-bottom: 35px;
padding: 25px;
background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
border-radius: 12px;
border-left: 6px solid #e74c3c;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.theme-title {
color: #e74c3c;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.multiple-choice-container {
display: grid;
gap: 10px;
}
.score-display {
font-size: 24px;
font-weight: bold;
color: #27ae60;
text-align: center;
margin: 20px 0;
padding: 15px;
background: linear-gradient(135deg, #d4f1de 0%, #c3e6cb 100%);
border-radius: 10px;
}

document.addEventListener(‘DOMContentLoaded’, function() {
// Configuration du quiz
const totalQuestions = 30;
const passingScore = 70;

// Références aux éléments DOM
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);
const startButton = document.getElementById(‘startButton’);
const verifyButton = document.getElementById(‘verifyButton’);
const resultContainer = document.getElementById(‘resultContainer’);
const scoreDisplay = document.getElementById(‘scoreDisplay’);
const resultText = document.getElementById(‘resultText’);
const mistakesContainer = document.getElementById(‘mistakesContainer’);
const showCertificateButton = document.getElementById(‘showCertificateButton’);
const certificateContainer = document.getElementById(‘certificateContainer’);
const downloadCertificateButton = document.getElementById(‘downloadCertificateButton’);
const pdfLoading = document.getElementById(‘pdfLoading’);
const progressFill = document.getElementById(‘progressFill’);

// Données utilisateur
let userData = {
prenom: ”,
nom: ”,
email: ”,
score: 0
};

// Démarrer le quiz
startButton.addEventListener(‘click’, function() {
if (validateForm()) {
subscriptionForm.style.display = ‘none’;
exerciseContainer.style.display = ‘block’;
exerciseContainer.scrollIntoView({ behavior: ‘smooth’ });
}
});

// Validation du formulaire
function validateForm() {
const prenom = document.getElementById(‘prenom’).value.trim();
const nom = document.getElementById(‘nom’).value.trim();
const email = document.getElementById(‘email’).value.trim();
const subscribe = document.getElementById(‘subscribe’).checked;

// Réinitialiser les erreurs
clearErrors();

let isValid = true;

if (!prenom) {
showError(‘prenomError’, ‘Veuillez entrer votre prénom’);
isValid = false;
}

if (!nom) {
showError(‘nomError’, ‘Veuillez entrer votre nom’);
isValid = false;
}

if (!email) {
showError(‘emailError’, ‘Veuillez entrer votre email’);
isValid = false;
} else if (!/^[^s@]+@[^s@]+.[^s@]+$/.test(email)) {
showError(‘emailError’, ‘Veuillez entrer un email valide’);
isValid = false;
}

if (!subscribe) {
showError(‘subscribeError’, ‘Veuillez accepter de vous abonner’);
isValid = false;
}

if (isValid) {
userData.prenom = prenom;
userData.nom = nom;
userData.email = email;
}

return isValid;
}

function clearErrors() {
const errorElements = [‘prenomError’, ‘nomError’, ‘emailError’, ‘subscribeError’];
errorElements.forEach(id => {
document.getElementById(id).textContent = ”;
});
}

function showError(elementId, message) {
document.getElementById(elementId).textContent = message;
}

// Mettre à jour la barre de progression
function updateProgress() {
const answeredQuestions = getAnsweredQuestionsCount();
const progress = (answeredQuestions / totalQuestions) * 100;
progressFill.style.width = progress + ‘%’;
}

function getAnsweredQuestionsCount() {
let count = 0;

// Questions à choix unique
for (let i = 1; i 0) {
let allFilled = true;
fillBlanks.forEach(blank => {
if (!blank.value.trim()) {
allFilled = false;
}
});
if (allFilled) count++;
continue;
}

// Questions à choix multiples
if (document.querySelectorAll(`input[name=”q${i}”]:checked`).length > 0) {
count++;
}
}

return count;
}

// Écouter les changements
document.addEventListener(‘change’, updateProgress);
document.addEventListener(‘input’, updateProgress);

// Vérifier les réponses
verifyButton.addEventListener(‘click’, function() {
const results = checkAnswers();
displayResults(results);
});

function checkAnswers() {
let correctAnswers = 0;
const mistakes = [];
const questions = document.querySelectorAll(‘.question’);

questions.forEach((question, index) => {
const questionNum = index + 1;
const type = question.dataset.type;
const correctAnswer = question.dataset.answer;

let isCorrect = false;
let userAnswer = ”;
let correctText = ”;

if (type === ‘single’) {
const selectedRadio = question.querySelector(`input[name=”q${questionNum}”]:checked`);
if (selectedRadio) {
userAnswer = selectedRadio.value;
isCorrect = userAnswer === correctAnswer;

// Marquer visuellement les réponses
const options = question.querySelectorAll(‘.option’);
options.forEach(option => {
option.classList.remove(‘correct’, ‘incorrect’, ‘correct-answer’);
});

if (isCorrect) {
selectedRadio.closest(‘.option’).classList.add(‘correct’);
} else {
selectedRadio.closest(‘.option’).classList.add(‘incorrect’);
const correctOption = question.querySelector(`input[value=”${correctAnswer}”]`);
if (correctOption) {
correctOption.closest(‘.option’).classList.add(‘correct-answer’);
}
}
}
} else if (type === ‘multiple’) {
const selectedCheckboxes = question.querySelectorAll(`input[name=”q${questionNum}”]:checked`);
const selectedValues = Array.from(selectedCheckboxes).map(cb => cb.value).sort();
const correctValues = correctAnswer.split(‘,’).sort();

isCorrect = JSON.stringify(selectedValues) === JSON.stringify(correctValues);
userAnswer = selectedValues.join(‘, ‘);
correctText = correctValues.join(‘, ‘);
} else if (type === ‘fill’) {
const fillBlanks = question.querySelectorAll(‘.fill-blank’);
const correctValues = correctAnswer.split(‘,’);
let allCorrect = true;

fillBlanks.forEach((blank, i) => {
const userValue = blank.value.trim().toLowerCase();
const correctValue = correctValues[i] ? correctValues[i].toLowerCase() : ”;

if (userValue !== correctValue) {
allCorrect = false;
blank.style.backgroundColor = ‘#f8d7da’;
blank.style.borderColor = ‘#dc3545’;
} else {
blank.style.backgroundColor = ‘#d4edda’;
blank.style.borderColor = ‘#28a745’;
}
});

isCorrect = allCorrect;
userAnswer = Array.from(fillBlanks).map(b => b.value).join(‘, ‘);
correctText = correctAnswer;
}

if (isCorrect) {
correctAnswers++;
} else {
const questionText = question.querySelector(‘.question-text’).textContent;
mistakes.push({
number: questionNum,
question: questionText,
userAnswer: userAnswer,
correctAnswer: correctText || correctAnswer
});
}
});

return {
correct: correctAnswers,
total: totalQuestions,
score: Math.round((correctAnswers / totalQuestions) * 100),
mistakes: mistakes
};
}

function displayResults(results) {
userData.score = results.score;

// Afficher le score
scoreDisplay.textContent = `${results.score}%`;
resultText.innerHTML = `Vous avez obtenu ${results.correct} réponses correctes sur ${results.total}.`;

// Afficher les erreurs
mistakesContainer.innerHTML = ”;
if (results.mistakes.length > 0) {
const mistakesTitle = document.createElement(‘h4’);
mistakesTitle.textContent = `📝 Questions à revoir (${results.mistakes.length}):`;
mistakesContainer.appendChild(mistakesTitle);

results.mistakes.forEach(mistake => {
const mistakeItem = document.createElement(‘div’);
mistakeItem.style.cssText = `
margin-bottom: 15px;
padding: 15px;
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
border: 1px solid #ffeaa7;
border-radius: 8px;
border-left: 4px solid #f39c12;
`;
mistakeItem.innerHTML = `
Question ${mistake.number}:
${mistake.question}
Votre réponse: ${mistake.userAnswer || ‘Non répondu’}
Réponse correcte: ${mistake.correctAnswer}
`;
mistakesContainer.appendChild(mistakeItem);
});
} else {
mistakesContainer.innerHTML = ‘

🎉 Parfait ! Toutes vos réponses sont correctes !

‘;
}

// Bouton certificat
if (results.score >= passingScore) {
showCertificateButton.style.display = ‘block’;
showCertificateButton.textContent = results.score === 100 ?
‘🏆 Certificat d’Excellence Parfaite’ :
‘🏆 Afficher mon certificat’;
} else {
showCertificateButton.style.display = ‘none’;
const encouragement = document.createElement(‘div’);
encouragement.style.cssText = `
margin-top: 20px;
padding: 15px;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 8px;
text-align: center;
`;
encouragement.innerHTML = `

💪 Continue tes efforts !

Il faut au moins ${passingScore}% pour obtenir le certificat. Révise tes réponses et réessaie !`;
mistakesContainer.appendChild(encouragement);
}

resultContainer.style.display = ‘block’;
resultContainer.scrollIntoView({ behavior: ‘smooth’ });
}

// Afficher le certificat
showCertificateButton.addEventListener(‘click’, function() {
displayCertificate();
certificateContainer.style.display = ‘block’;
certificateContainer.scrollIntoView({ behavior: ‘smooth’ });
});

function displayCertificate() {
const now = new Date();
const dateString = now.toLocaleDateString(‘fr-FR’, {
year: ‘numeric’,
month: ‘long’,
day: ‘numeric’
});

document.getElementById(‘certificateName’).textContent =
`${userData.prenom} ${userData.nom}`;
document.getElementById(‘certificateScore’).textContent =
`${userData.score}%`;
document.getElementById(‘certificateDate’).textContent = dateString;

// Générer un code QR simple (simulation)
generateSimpleQR();
}

function generateSimpleQR() {
const qrContainer = document.querySelector(‘.certificate-qr’);
const qrCode = `FLF-${userData.prenom.slice(0,2).toUpperCase()}${userData.nom.slice(0,2).toUpperCase()}-${userData.score}`;

qrContainer.innerHTML = `

`;
}

// Télécharger le certificat PDF
downloadCertificateButton.addEventListener(‘click’, function() {
generatePDF();
});

async function generatePDF() {
pdfLoading.style.display = ‘block’;
downloadCertificateButton.disabled = true;

try {
// Utiliser html2canvas pour capturer le certificat
const certificateElement = document.getElementById(‘certificatePreview’);

const canvas = await html2canvas(certificateElement, {
scale: 2,
backgroundColor: ‘#ffffff’,
logging: false
});

const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
});

const imgWidth = 297; // A4 landscape width in mm
const imgHeight = (canvas.height * imgWidth) / canvas.width;

pdf.addImage(
canvas.toDataURL(‘image/png’),
‘PNG’,
0,
(210 – imgHeight) / 2, // Center vertically
imgWidth,
imgHeight
);

// Sauvegarder le PDF
const fileName = `Certificat_${userData.prenom}_${userData.nom}_${userData.score}%.pdf`;
pdf.save(fileName);

} catch (error) {
console.error(‘Erreur lors de la génération du PDF:’, error);
alert(‘Une erreur est survenue lors de la génération du PDF. Veuillez réessayer.’);
} finally {
pdfLoading.style.display = ‘none’;
downloadCertificateButton.disabled = false;
}
}

// Animation d’entrée pour les questions
const observerOptions = {
threshold: 0.1,
rootMargin: ‘0px 0px -50px 0px’
};

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = ‘0’;
entry.target.style.transform = ‘translateY(20px)’;
entry.target.style.transition = ‘all 0.6s ease’;

setTimeout(() => {
entry.target.style.opacity = ‘1’;
entry.target.style.transform = ‘translateY(0)’;
}, 100);

observer.unobserve(entry.target);
}
});
}, observerOptions);

// Observer toutes les questions pour l’animation
document.querySelectorAll(‘.question’).forEach(question => {
observer.observe(question);
});

// Fonctionnalités supplémentaires

// Sauvegarde automatique des réponses
function saveProgress() {
const formData = new FormData();
const inputs = document.querySelectorAll(‘input’);
inputs.forEach(input => {
if (input.type === ‘radio’ || input.type === ‘checkbox’) {
if (input.checked) {
formData.append(input.name, input.value);
}
} else if (input.type === ‘text’) {
formData.append(input.className, input.value);
}
});
// Sauvegarder en mémoire uniquement (pas de localStorage)
}

// Écouter les changements pour sauvegarder
document.addEventListener(‘change’, saveProgress);
document.addEventListener(‘input’, saveProgress);

// Confirmation avant de quitter la page
window.addEventListener(‘beforeunload’, function (e) {
if (getAnsweredQuestionsCount() > 0 && !resultContainer.style.display) {
e.preventDefault();
e.returnValue = ”;
}
});

// Amélioration de l’accessibilité
document.querySelectorAll(‘input[type=”radio”], input[type=”checkbox”]’).forEach(input => {
input.addEventListener(‘focus’, function() {
this.closest(‘.option’).style.boxShadow = ‘0 0 0 3px rgba(52, 152, 219, 0.3)’;
});

input.addEventListener(‘blur’, function() {
this.closest(‘.option’).style.boxShadow = ‘none’;
});
});

// Raccourcis clavier
document.addEventListener(‘keydown’, function(e) {
if (e.ctrlKey || e.metaKey) {
switch(e.key) {
case ‘Enter’:
if (verifyButton.style.display !== ‘none’) {
verifyButton.click();
}
break;
case ‘s’:
e.preventDefault();
saveProgress();
break;
}
}
});

// Messages d’encouragement selon le score
function getEncouragementMessage(score) {
if (score === 100) {
return “Parfait ! Vous maîtrisez parfaitement tous les aspects de la grammaire française !”;
} else if (score >= 90) {
return “Excellent ! Vous avez une très bonne maîtrise du français !”;
} else if (score >= 80) {
return “Très bien ! Quelques petites révisions et vous serez au top !”;
} else if (score >= 70) {
return “Bien ! Vous avez les bases, continuez à vous exercer !”;
} else if (score >= 60) {
return “Pas mal ! Avec un peu plus de pratique, vous y arriverez !”;
} else {
return “Courage ! Rome ne s’est pas faite en un jour. Continuez à étudier !”;
}
}

// Fonction pour afficher des conseils personnalisés
function showPersonalizedTips(mistakes) {
if (mistakes.length === 0) return;

const tipsContainer = document.createElement(‘div’);
tipsContainer.style.cssText = `
margin-top: 25px;
padding: 20px;
background: linear-gradient(135deg, #e8f5e8 0%, #d4f1de 100%);
border-radius: 12px;
border-left: 5px solid #28a745;
`;

const tipsTitle = document.createElement(‘h4’);
tipsTitle.textContent = “💡 Conseils personnalisés pour s’améliorer :”;
tipsContainer.appendChild(tipsTitle);

const themes = {
‘souhait’: ‘Révisez l’expression du souhait avec le subjonctif’,
‘futur’: ‘Travaillez les temps du futur et les indicateurs temporels’,
‘condition’: ‘Pratiquez les phrases conditionnelles avec “si”‘,
‘durée’: ‘Étudiez l’expression de la durée (depuis, pendant, durant)’,
‘émotion’: ‘Approfondissez le vocabulaire des émotions’,
‘obligation’: ‘Révisez l’expression de l’obligation et de l’interdiction’,
‘discours’: ‘Travaillez le discours rapporté et ses transformations’,
‘travail’: ‘Enrichissez votre vocabulaire professionnel’,
‘sentiment’: ‘Développez votre lexique des sentiments’
};

// Analyser les erreurs par thème (simulation basique)
Object.entries(themes).forEach(([theme, conseil]) => {
const tipItem = document.createElement(‘p’);
tipItem.innerHTML = `• ${conseil}`;
tipsContainer.appendChild(tipItem);
});

mistakesContainer.appendChild(tipsContainer);
}

// Initialisation finale
console.log(‘Quiz de Grammaire et Vocabulaire Français initialisé avec succès !’);

// Mise à jour de l’affichage des résultats pour inclure les conseils
const originalDisplayResults = displayResults;
displayResults = function(results) {
originalDisplayResults(results);

// Ajouter un message d’encouragement personnalisé
const encouragementMsg = getEncouragementMessage(results.score);
const encouragementDiv = document.createElement(‘div’);
encouragementDiv.style.cssText = `
margin-top: 20px;
padding: 15px;
background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
border-radius: 8px;
text-align: center;
font-style: italic;
color: #2c3e50;
`;
encouragementDiv.textContent = encouragementMsg;
resultText.appendChild(encouragementDiv);

// Afficher les conseils personnalisés
if (results.mistakes.length > 0) {
showPersonalizedTips(results.mistakes);
}
};
});