Exercice de Grammaire: L’accord des Adjectifs

document.addEventListener(‘DOMContentLoaded’, function() {
// Variables globales
let currentLevel = ‘facile’;
const exerciseLevels = {
‘facile’: document.getElementById(‘exerciseFacile’),
‘moyen’: document.getElementById(‘exerciseMoyen’),
‘difficile’: document.getElementById(‘exerciseDifficile’)
};

// Tableau des adjectifs pour chaque niveau
const adjectivesByLevel = {
‘facile’: [
“merveilleux”, “petit”, “bleu”, “désert”, “propre”, “vieux”, “bon”,
“nouveau”, “grand”, “spacieux”, “lumineux”, “gentil”, “français”,
“meilleur”, “sportif”, “beau”, “rouge”, “orange”, “magnifique”,
“long”, “forestier”, “pur”, “frais”, “vieux”, “calme”
],
‘moyen’: [
“industriel”, “majeur”, “technique”, “traditionnel”, “historique”,
“nombreux”, “fondamental”, “environnemental”, “catastrophique”,
“amazonien”, “vert”, “agricole”, “intensif”, “animal”, “végétal”,
“moderne”, “épuré”, “ouvert”, “naturel”, “métallique”,
“vitré”, “naturel”, “abondant”, “écologique”, “énergétique”
],
‘difficile’: [
“scientifique”, “récent”, “neurodégénératif”, “médical”, “significatif”,
“initial”, “subtil”, “dévastateur”, “économique”, “social”,
“complémentaire”, “financier”, “mondial”, “précaire”, “original”,
“complexe”, “contemporain”, “émotionnel”, “contradictoire”, “expérimental”,
“traditionnel”, “international”, “culturel”, “divers”, “artistique”
]
};

// Remplir les listes d’adjectifs
for (const level in adjectivesByLevel) {
const list = document.getElementById(`adjectiveList${level.charAt(0).toUpperCase() + level.slice(1)}`);
adjectivesByLevel[level].forEach(adjective => {
const item = document.createElement(‘div’);
item.textContent = adjective;
list.appendChild(item);
});
}

// Gestion des onglets de niveau
const levelTabs = document.querySelectorAll(‘.level-tab’);
levelTabs.forEach(tab => {
tab.addEventListener(‘click’, function() {
const level = this.getAttribute(‘data-level’);
currentLevel = level;

// Mettre à jour les onglets
levelTabs.forEach(t => t.classList.remove(‘active’));
this.classList.add(‘active’);

// Afficher l’exercice correspondant
for (const lvl in exerciseLevels) {
exerciseLevels[lvl].style.display = lvl === level ? ‘block’ : ‘none’;
}

// Mettre à jour les listes d’adjectifs
for (const lvl in adjectivesByLevel) {
const capitalized = lvl.charAt(0).toUpperCase() + lvl.slice(1);
document.getElementById(`adjectiveList${capitalized}`).style.display =
lvl === level ? ‘block’ : ‘none’;
}
});
});

// Afficher/cacher les règles
const rulesToggle = document.getElementById(‘rulesToggle’);
const rulesSection = document.getElementById(‘rulesSection’);
rulesToggle.addEventListener(‘click’, function() {
if (rulesSection.style.display === ‘none’) {
rulesSection.style.display = ‘block’;
rulesToggle.textContent = ‘Masquer les règles d’accord des adjectifs’;
} else {
rulesSection.style.display = ‘none’;
rulesToggle.textContent = ‘Afficher les règles d’accord des adjectifs’;
}
});

// Validation du formulaire d’inscription
const startButton = document.getElementById(‘startButton’);
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);

startButton.addEventListener(‘click’, function() {
let isValid = true;

// Validation du prénom
const prenom = document.getElementById(‘prenom’).value.trim();
if (prenom === ”) {
document.getElementById(‘prenomError’).textContent = ‘Veuillez entrer votre prénom’;
isValid = false;
} else {
document.getElementById(‘prenomError’).textContent = ”;
}

// Validation du nom
const nom = document.getElementById(‘nom’).value.trim();
if (nom === ”) {
document.getElementById(‘nomError’).textContent = ‘Veuillez entrer votre nom’;
isValid = false;
} else {
document.getElementById(‘nomError’).textContent = ”;
}

// Validation de l’email
const email = document.getElementById(‘email’).value.trim();
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
if (email === ” || !emailRegex.test(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer une adresse email valide’;
isValid = false;
} else {
document.getElementById(‘emailError’).textContent = ”;
}

// Validation du checkbox
const subscribe = document.getElementById(‘subscribe’).checked;
if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Veuillez cocher cette case pour continuer’;
isValid = false;
} else {
document.getElementById(‘subscribeError’).textContent = ”;
}

// Si tout est valide, montrer l’exercice
if (isValid) {
subscriptionForm.style.display = ‘none’;
exerciseContainer.style.display = ‘block’;

// Mise à jour du nom dans le badge
document.getElementById(‘badgeName’).textContent = prenom + ‘ ‘ + nom;
}
});

// Ajouter les boutons d’indice
const gapInputs = document.querySelectorAll(‘.gap-input’);
gapInputs.forEach(input => {
const hint = input.getAttribute(‘data-hint’);
const hintButton = document.createElement(‘span’);
hintButton.className = ‘hint-button’;
hintButton.textContent = ‘?’;
hintButton.title = ‘Afficher un indice’;
hintButton.addEventListener(‘click’, function() {
alert(‘Indice: ‘ + hint);
});
input.insertAdjacentElement(‘afterend’, hintButton);
});

// Vérification des réponses
const checkButton = document.getElementById(‘checkButton’);
const resultDiv = document.getElementById(‘result’);
const scoreSpan = document.getElementById(‘score’);
const totalSpan = document.getElementById(‘total’);
const percentageSpan = document.getElementById(‘percentage’);
const correctionsDiv = document.getElementById(‘corrections’);
const badgeDiv = document.getElementById(‘badge’);

checkButton.addEventListener(‘click’, function() {
let score = 0;
let total = 0;

// Sélectionner uniquement les inputs du niveau actuel
const activeInputs = exerciseLevels[currentLevel].querySelectorAll(‘.gap-input’);
total = activeInputs.length;

// Vider les corrections précédentes
correctionsDiv.innerHTML = ”;

// Vérifier chaque réponse
activeInputs.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.getAttribute(‘data-answer’).toLowerCase();
const baseAdjective = input.getAttribute(‘data-base’);
const number = input.getAttribute(‘data-number’);

const correctionItem = document.createElement(‘div’);
correctionItem.className = ‘correction-item’;

if (userAnswer === correctAnswer) {
score++;
correctionItem.classList.add(‘correct’);
correctionItem.innerHTML = `✓ Question ${number}: “${userAnswer}” est correct. (${baseAdjective})`;
} else {
correctionItem.classList.add(‘incorrect’);
correctionItem.innerHTML = `✗ Question ${number}: “${userAnswer}” n’est pas correct. La bonne réponse est “${correctAnswer}”. (${baseAdjective})`;
}

correctionsDiv.appendChild(correctionItem);
});

// Mettre à jour le score
scoreSpan.textContent = score;
totalSpan.textContent = total;

// Calculer et afficher le pourcentage
const percentage = Math.round((score / total) * 100);
percentageSpan.textContent = percentage;

// Afficher les résultats
resultDiv.style.display = ‘block’;

// Afficher le badge si le score est suffisant (> 70%)
if (percentage >= 70) {
badgeDiv.style.display = ‘block’;
document.getElementById(‘badgeScore’).textContent = `${score}/${total} (${percentage}%)`;
document.getElementById(‘badgeLevel’).textContent = currentLevel.charAt(0).toUpperCase() + currentLevel.slice(1);

// Générer QR code
const qrcode = qrcode(4, ‘L’);
qrcode.addData(‘https://exercice-francais.fr/certificat/’ + Math.random().toString(36).substring(2, 15));
qrcode.make();
document.getElementById(‘badgeQR’).innerHTML = qrcode.createImgTag(4);
}
});

// Téléchargement du badge en PDF
document.getElementById(‘downloadPDF’).addEventListener(‘click’, function() {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();

html2canvas(document.getElementById(‘badgePreview’)).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
const imgProps = pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

pdf.addImage(imgData, ‘PNG’, 0, 0, pdfWidth, pdfHeight);
pdf.save(‘badge-reussite-adjectifs.pdf’);
});
});

// Téléchargement du badge en image
document.getElementById(‘downloadImage’).addEventListener(‘click’, function() {
html2canvas(document.getElementById(‘badgePreview’)).then(canvas => {
const link = document.createElement(‘a’);
link.download = ‘badge-reussite-adjectifs.png’;
link.href = canvas.toDataURL(‘image/png’);
link.click();
});
});

// Partage sur les réseaux sociaux
document.getElementById(‘shareFacebook’).addEventListener(‘click’, function() {
const url = encodeURIComponent(window.location.href);
window.open(‘https://www.facebook.com/sharer/sharer.php?u=’ + url, ‘_blank’);
});

document.getElementById(‘shareTwitter’).addEventListener(‘click’, function() {
const text = encodeURIComponent(`J’ai réussi l’exercice sur l’accord des adjectifs en français! Score: ${document.getElementById(‘score’).textContent}/${document.getElementById(‘total’).textContent}`);
const url = encodeURIComponent(window.location.href);
window.open(`https://twitter.com/intent/tweet?text=${text}&url=${url}`, ‘_blank’);
});
});