Exercice de Grammaire: Les Noms en Français

document.addEventListener(‘DOMContentLoaded’, function() {
// Variables globales
let currentDifficulty = ‘facile’;
let matchedPairs = [];
let matchingInProgress = false;
let selectedItem = null;

// Éléments DOM
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);
const startButton = document.getElementById(‘startButton’);
const checkButton = document.getElementById(‘checkButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const changeDifficultyButton = document.getElementById(‘changeDifficultyButton’);
const resultContainer = document.getElementById(‘resultContainer’);
const scoreText = document.getElementById(‘scoreText’);
const feedbackText = document.getElementById(‘feedbackText’);
const showCertificateButton = document.getElementById(‘showCertificateButton’);
const certificateContainer = document.getElementById(‘certificateContainer’);
const certificateName = document.getElementById(‘certificateName’);
const certificateScore = document.getElementById(‘certificateScore’);
const certificateDate = document.getElementById(‘certificateDate’);
const certificateQR = document.getElementById(‘certificateQR’);
const downloadCertificateButton = document.getElementById(‘downloadCertificateButton’);
const printCertificateButton = document.getElementById(‘printCertificateButton’);
const loadingText = document.getElementById(‘loadingText’);

// Initialisation des exercices de niveau
const exerciseFacile = document.getElementById(‘exerciseFacile’);
const exerciseMoyen = document.getElementById(‘exerciseMoyen’);
const exerciseDifficile = document.getElementById(‘exerciseDifficile’);

// Gestionnaire d’événements pour le bouton de démarrage
startButton.addEventListener(‘click’, function() {
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 messages d’erreur
document.getElementById(‘prenomError’).textContent = ”;
document.getElementById(‘nomError’).textContent = ”;
document.getElementById(‘emailError’).textContent = ”;
document.getElementById(‘subscribeError’).textContent = ”;

// Validation du formulaire
let valid = true;

if (prenom === ”) {
document.getElementById(‘prenomError’).textContent = ‘Veuillez entrer votre prénom.’;
valid = false;
}

if (nom === ”) {
document.getElementById(‘nomError’).textContent = ‘Veuillez entrer votre nom.’;
valid = false;
}

if (email === ”) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer votre email.’;
valid = false;
} else if (!validateEmail(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer un email valide.’;
valid = false;
}

if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Vous devez accepter de vous abonner pour continuer.’;
valid = false;
}

if (valid) {
// Masquer le formulaire et afficher l’exercice
subscriptionForm.style.display = ‘none’;
exerciseContainer.style.display = ‘block’;

// Mettre à jour le nom sur le certificat
certificateName.textContent = prenom + ‘ ‘ + nom;

// Initialiser l’exercice
showExercise(currentDifficulty);
initializeMatchingExercises();
}
});

// Validation d’email
function validateEmail(email) {
const re = /^[^s@]+@[^s@]+.[^s@]+$/;
return re.test(email);
}

// Afficher l’exercice selon le niveau de difficulté
function showExercise(difficulty) {
exerciseFacile.style.display = ‘none’;
exerciseMoyen.style.display = ‘none’;
exerciseDifficile.style.display = ‘none’;

switch (difficulty) {
case ‘facile’:
exerciseFacile.style.display = ‘block’;
break;
case ‘moyen’:
exerciseMoyen.style.display = ‘block’;
break;
case ‘difficile’:
exerciseDifficile.style.display = ‘block’;
break;
}
}

// Changer la difficulté
changeDifficultyButton.addEventListener(‘click’, function() {
currentDifficulty = difficultySelect.value;
showExercise(currentDifficulty);
resetExercise();
});

// Réinitialiser l’exercice
function resetExercise() {
// Réinitialiser les inputs
const blankInputs = document.querySelectorAll(‘.blank-input’);
blankInputs.forEach(input => {
input.value = ”;
input.classList.remove(‘correct’, ‘incorrect’);
});

// Réinitialiser les radios
const radioOptions = document.querySelectorAll(‘.radio-option’);
radioOptions.forEach(option => {
option.classList.remove(‘correct’, ‘incorrect’);
const radio = option.querySelector(‘input[type=”radio”]’);
radio.checked = false;
});

// Réinitialiser les matchings
initializeMatchingExercises();

// Masquer les résultats
resultContainer.style.display = ‘none’;
certificateContainer.style.display = ‘none’;
}

// Initialiser les exercices de matching
function initializeMatchingExercises() {
// Pour le niveau facile
if (document.getElementById(‘matchingExercise1’)) {
setupMatchingExercise(‘matchingExercise1’, ‘matchingResults1’);
}

// Pour le niveau moyen
if (document.getElementById(‘matchingExercise2’)) {
setupMatchingExercise(‘matchingExercise2’, ‘matchingResults2’);
}
}

// Configuration des exercices de matching
function setupMatchingExercise(exerciseId, resultsId) {
const matchingItems = document.querySelectorAll(`#${exerciseId} .matching-item`);
const resultsContainer = document.getElementById(resultsId);

// Réinitialiser
matchedPairs = [];
matchingInProgress = false;
selectedItem = null;

// Mélanger les éléments
const container = document.getElementById(exerciseId);
for (let i = container.children.length; i >= 0; i–) {
container.appendChild(container.children[Math.random() * i | 0]);
}

// Ajouter les écouteurs d’événements
matchingItems.forEach(item => {
item.classList.remove(‘selected’, ‘matched’);
item.addEventListener(‘click’, function() {
if (this.classList.contains(‘matched’)) return;

if (selectedItem === null) {
// Premier élément sélectionné
selectedItem = this;
this.classList.add(‘selected’);
} else {
// Deuxième élément sélectionné, vérifier s’ils correspondent
const firstGroup = selectedItem.getAttribute(‘data-group’);
const secondGroup = this.getAttribute(‘data-group’);

if (firstGroup === secondGroup) {
// Correspondance trouvée
selectedItem.classList.add(‘matched’);
this.classList.add(‘matched’);

// Enregistrer la paire
matchedPairs.push({
number: this.getAttribute(‘data-number’),
first: selectedItem.textContent,
second: this.textContent
});

// Afficher les résultats
updateMatchingResults(resultsId);
}

// Réinitialiser la sélection
selectedItem.classList.remove(‘selected’);
selectedItem = null;
}
});
});

// Vider le conteneur de résultats
resultsContainer.innerHTML = ”;
}

// Mettre à jour l’affichage des résultats de matching
function updateMatchingResults(resultsId) {
const resultsContainer = document.getElementById(resultsId);
resultsContainer.innerHTML = ”;

matchedPairs.forEach(pair => {
const pairElement = document.createElement(‘div’);
pairElement.className = ‘matching-pair’;
pairElement.innerHTML = `

`;
resultsContainer.appendChild(pairElement);
});
}

// Vérifier les réponses
checkButton.addEventListener(‘click’, function() {
// Afficher l’indicateur de chargement
loadingText.style.display = ‘inline’;

// Simuler un délai pour l’effet de vérification
setTimeout(function() {
let score = 0;
let totalQuestions = 0;

// Vérifier les inputs
const blankInputs = document.querySelectorAll(`#exercise${capitalizeFirstLetter(currentDifficulty)} .blank-input`);
blankInputs.forEach(input => {
totalQuestions++;
const correctAnswer = input.getAttribute(‘data-answer’);
if (input.value.trim().toLowerCase() === correctAnswer.toLowerCase()) {
input.classList.add(‘correct’);
input.classList.remove(‘incorrect’);
score++;
} else {
input.classList.add(‘incorrect’);
input.classList.remove(‘correct’);
}
});

// Vérifier les radios
const radioGroups = getRadioGroups(currentDifficulty);
radioGroups.forEach(group => {
totalQuestions++;
const radioOptions = document.querySelectorAll(`#exercise${capitalizeFirstLetter(currentDifficulty)} input[name=”${group}”]`);
let correct = false;

radioOptions.forEach(radio => {
const option = radio.parentElement;
if (radio.checked) {
if (radio.hasAttribute(‘data-correct’)) {
option.classList.add(‘correct’);
correct = true;
} else {
option.classList.add(‘incorrect’);
}
} else if (radio.hasAttribute(‘data-correct’)) {
option.classList.add(‘correct’);
}
});

if (correct) score++;
});

// Vérifier les matchings
const matchingScores = getMatchingScores(currentDifficulty);
score += matchingScores.score;
totalQuestions += matchingScores.total;

// Afficher les résultats
resultContainer.style.display = ‘block’;
scoreText.textContent = `Votre score: ${score}/${totalQuestions}`;

// Feedback basé sur le score
const percentage = (score / totalQuestions) * 100;
if (percentage >= 90) {
feedbackText.textContent = “Excellent! Vous maîtrisez très bien les noms en français.”;
} else if (percentage >= 75) {
feedbackText.textContent = “Très bien! Vous avez une bonne compréhension des noms en français.”;
} else if (percentage >= 60) {
feedbackText.textContent = “Bien! Continuez à pratiquer pour améliorer votre compréhension.”;
} else {
feedbackText.textContent = “Vous avez besoin de plus de pratique. Révisez les règles et réessayez!”;
}

// Mise à jour du score sur le certificat
certificateScore.textContent = `avec un score de ${score}/${totalQuestions}`;

// Masquer l’indicateur de chargement
loadingText.style.display = ‘none’;
}, 1000);
});

// Fonction pour obtenir les groupes de radio selon le niveau
function getRadioGroups(difficulty) {
switch (difficulty) {
case ‘facile’:
return [‘q11’, ‘q12’, ‘q13’, ‘q14’, ‘q15’];
case ‘moyen’:
return [‘q11m’, ‘q12m’, ‘q13m’, ‘q14m’, ‘q15m’];
case ‘difficile’:
return [‘q11d’, ‘q12d’, ‘q13d’, ‘q14d’, ‘q15d’];
default:
return [];
}
}

// Fonction pour obtenir les scores de matching selon le niveau
function getMatchingScores(difficulty) {
let score = 0;
let total = 0;

switch (difficulty) {
case ‘facile’:
total = 5; // 5 paires dans le niveau facile
score = document.querySelectorAll(‘#matchingExercise1 .matching-item.matched’).length / 2;
break;
case ‘moyen’:
total = 5; // 5 paires dans le niveau moyen
score = document.querySelectorAll(‘#matchingExercise2 .matching-item.matched’).length / 2;
break;
default:
break;
}

return { score, total };
}

// Capitaliser la première lettre
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

// Afficher le certificat
showCertificateButton.addEventListener(‘click’, function() {
certificateContainer.style.display = ‘block’;

// Mettre à jour la date
const today = new Date();
const options = { year: ‘numeric’, month: ‘long’, day: ‘numeric’ };
certificateDate.textContent = today.toLocaleDateString(‘fr-FR’, options);

// Générer le QR code
generateQRCode();
});

// Générer un QR code
function generateQRCode() {
if (typeof qrcode !== ‘undefined’) {
const qr = qrcode(4, ‘L’);
qr.addData(‘Certificat de réussite en grammaire française’);
qr.make();
certificateQR.innerHTML = qr.createImgTag(4);
}
}

// Télécharger le certificat en PDF
downloadCertificateButton.addEventListener(‘click’, function() {
if (typeof html2canvas !== ‘undefined’ && typeof jspdf !== ‘undefined’) {
const { jsPDF } = jspdf;

html2canvas(document.getElementById(‘certificatePreview’)).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jsPDF(‘l’, ‘mm’, ‘a4’);
const width = pdf.internal.pageSize.getWidth();
const height = pdf.internal.pageSize.getHeight();

pdf.addImage(imgData, ‘PNG’, 0, 0, width, height);
pdf.save(‘certificat_grammaire_francaise.pdf’);
});
} else {
alert(“La fonction de téléchargement n’est pas disponible. Veuillez essayer d’imprimer le certificat à la place.”);
}
});

// Imprimer le certificat
printCertificateButton.addEventListener(‘click’, function() {
window.print();
});
});