body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
h1, h2, h3 {
color: #2c3e50;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.subscription-form {
background-color: #e8f4f8;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.exercise-container {
display: none;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.exercise-text {
line-height: 2;
font-size: 18px;
}
.gap {
border-bottom: 1px solid #333;
padding: 0 5px;
margin: 0 3px;
min-width: 50px;
display: inline-block;
}
input.gap-input {
width: 100px;
border: none;
border-bottom: 1px solid #333;
font-size: 16px;
text-align: center;
}
.context {
color: #666;
font-size: 14px;
font-style: italic;
margin-left: 2px;
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #fef5f5;
border-radius: 8px;
display: none;
}
.badge {
text-align: center;
margin-top: 30px;
padding: 20px;
display: none;
}
.error {
color: red;
font-size: 14px;
}
#badgePreview {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.badge-outer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(45deg, #e74c3c, #c0392b, #d35400, #e67e22);
display: flex;
justify-content: center;
align-items: center;
}
.badge-inner {
width: 90%;
height: 90%;
border-radius: 50%;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
box-sizing: border-box;
}
.badge-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
.badge-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
color: #e74c3c;
}
.badge-info {
font-size: 14px;
margin-bottom: 5px;
text-align: center;
}
.badge-icon {
margin-bottom: 10px;
width: 60px;
height: 60px;
}
.rules-section {
background-color: #f5e5e5;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #e74c3c;
}
.rules-section h3 {
margin-top: 0;
color: #c0392b;
}
.rules-section ul {
padding-left: 20px;
}
.rules-toggle {
margin-bottom: 15px;
text-decoration: underline;
color: #e74c3c;
cursor: pointer;
}
.hint-button {
background-color: #e67e22;
color: white;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 10px;
vertical-align: middle;
}
.hint-button:hover {
background-color: #d35400;
}

// Variables globales
let currentDifficulty = ‘facile’;
let userInfo = {
prenom: ”,
nom: ”,
email: ”
};

// Attente que le DOM soit chargé
document.addEventListener(‘DOMContentLoaded’, function() {
// Éléments du DOM
const startButton = document.getElementById(‘startButton’);
const changeDifficultyButton = document.getElementById(‘changeDifficultyButton’);
const checkButton = document.getElementById(‘checkButton’);
const generateBadgeButton = document.getElementById(‘generateBadgeButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const rulesToggle = document.getElementById(‘rulesToggle’);
const rulesSection = document.getElementById(‘rulesSection’);

// Ajout des écouteurs d’événements
startButton.addEventListener(‘click’, startExercise);
changeDifficultyButton.addEventListener(‘click’, changeDifficulty);
checkButton.addEventListener(‘click’, checkAnswers);
generateBadgeButton.addEventListener(‘click’, generateBadge);
rulesToggle.addEventListener(‘click’, toggleRules);

// Ajout des indices aux champs de saisie
addHintsToInputs();

// Fonction pour basculer l’affichage des règles
function toggleRules() {
if (rulesSection.style.display === ‘none’) {
rulesSection.style.display = ‘block’;
rulesToggle.textContent = ‘Masquer les règles des adjectifs exclamatifs’;
} else {
rulesSection.style.display = ‘none’;
rulesToggle.textContent = ‘Afficher les règles des adjectifs exclamatifs’;
}
}

// Fonction pour démarrer l’exercice
function startExercise() {
// Validation des champs
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éinitialisation des messages d’erreur
document.getElementById(‘prenomError’).textContent = ”;
document.getElementById(‘nomError’).textContent = ”;
document.getElementById(‘emailError’).textContent = ”;
document.getElementById(‘subscribeError’).textContent = ”;

let isValid = true;

// Vérification des champs
if (!prenom) {
document.getElementById(‘prenomError’).textContent = ‘Veuillez entrer votre prénom.’;
isValid = false;
}

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

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

if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Veuillez cocher cette case pour vous abonner.’;
isValid = false;
}

// Si tous les champs sont valides, afficher l’exercice
if (isValid) {
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;

// Cacher le formulaire d’inscription et afficher l’exercice
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;

// Afficher l’exercice correspondant à la difficulté sélectionnée
showExerciseLevel(currentDifficulty);
}
}

// Fonction pour valider le format de l’email
function validateEmail(email) {
const re = /^[^s@]+@[^s@]+.[^s@]+$/;
return re.test(email);
}

// Fonction pour changer la difficulté de l’exercice
function changeDifficulty() {
const newDifficulty = difficultySelect.value;
showExerciseLevel(newDifficulty);
currentDifficulty = newDifficulty;
}

// Fonction pour afficher l’exercice selon le niveau de difficulté
function showExerciseLevel(level) {
document.getElementById(‘exerciseFacile’).style.display = ‘none’;
document.getElementById(‘exerciseMoyen’).style.display = ‘none’;
document.getElementById(‘exerciseDifficile’).style.display = ‘none’;

document.getElementById(‘exercise’ + level.charAt(0).toUpperCase() + level.slice(1)).style.display = ‘block’;
}

// Fonction pour ajouter des indices aux champs de saisie
function addHintsToInputs() {
const allGapInputs = document.querySelectorAll(‘.gap-input’);
allGapInputs.forEach(input => {
// Ajouter un bouton d’indice à côté de chaque champ
const hintButton = document.createElement(‘span’);
hintButton.className = ‘hint-button’;
hintButton.textContent = ‘?’;
hintButton.title = ‘Afficher un indice’;
hintButton.addEventListener(‘click’, function(e) {
e.stopPropagation();
alert(`Indice: Il faut utiliser un ${input.dataset.hint} ${input.dataset.context}.`);
});
input.insertAdjacentElement(‘afterend’, hintButton);

// Ajouter un petit texte pour montrer le contexte
const context = document.createElement(‘span’);
context.className = ‘context’;
context.textContent = ` ${input.dataset.context}`;
input.insertAdjacentElement(‘afterend’, context);
});
}

// Fonction pour vérifier les réponses
function checkAnswers() {
const resultContainer = document.getElementById(‘resultContainer’);
const scoreDisplay = document.getElementById(‘scoreDisplay’);
const correctionDisplay = document.getElementById(‘correctionDisplay’);

let correctAnswers = 0;
let totalQuestions = 0;
let correctionHtml = ”;

// Récupérer tous les champs de l’exercice actuel
const currentExercise = document.getElementById(‘exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1));
const inputFields = currentExercise.querySelectorAll(‘.gap-input’);

// Vérifier chaque réponse
inputFields.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.dataset.answer.toLowerCase();
totalQuestions++;

if (userAnswer === correctAnswer) {
correctAnswers++;
input.style.color = ‘green’;
correctionHtml += `

Question ${input.dataset.number}: Correct! (${userAnswer})

`;
} else {
input.style.color = ‘red’;
correctionHtml += `

Question ${input.dataset.number}: Incorrect. Vous avez écrit “${userAnswer || ‘(pas de réponse)’}”, la réponse correcte est “${correctAnswer}”.

`;
}
});

// Calculer le score
const score = Math.round((correctAnswers / totalQuestions) * 100);

// Afficher le résultat
scoreDisplay.innerHTML = `Vous avez obtenu ${score}% (${correctAnswers} sur ${totalQuestions})`;
correctionDisplay.innerHTML = correctionHtml;

// Afficher la section de résultat
resultContainer.style.display = ‘block’;

// Mettre à jour les informations du badge
document.getElementById(‘badgeNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘badgeLevelPreview’).textContent = currentDifficulty;
document.getElementById(‘badgeScorePreview’).textContent = score;
document.getElementById(‘badgeDatePreview’).textContent = new Date().toLocaleDateString();
}

// Fonction pour générer le badge
function generateBadge() {
// Afficher le badge
document.getElementById(‘badgePreview’).style.display = ‘block’;

// Faire défiler jusqu’au badge
document.getElementById(‘badgePreview’).scrollIntoView({ behavior: ‘smooth’ });

// Préparer le PDF
setTimeout(() => {
createPDF();
}, 1000);
}

// Fonction pour créer le PDF du badge
function createPDF() {
try {
// Vérifier si jsPDF est disponible
if (window.jspdf && window.jspdf.jsPDF) {
const { jsPDF } = window.jspdf;

// Créer un nouvel objet PDF
const pdf = new jsPDF(‘p’, ‘mm’, ‘a4’);

// Ajouter le titre
pdf.setFontSize(18);
pdf.text(‘Badge de Maîtrise des Adjectifs Exclamatifs’, 105, 20, { align: ‘center’ });

// Ajouter les informations de l’utilisateur
pdf.setFontSize(12);
pdf.text(`Nom: ${userInfo.nom}`, 20, 40);
pdf.text(`Prénom: ${userInfo.prenom}`, 20, 50);
pdf.text(`Email: ${userInfo.email}`, 20, 60);
pdf.text(`Niveau: ${currentDifficulty}`, 20, 70);

// Ajouter le résultat
const score = document.getElementById(‘badgeScorePreview’).textContent;
pdf.text(`Score: ${score}%`, 20, 80);
pdf.text(`Date: ${new Date().toLocaleDateString()}`, 20, 90);

// Ajouter un message de félicitations
pdf.setFontSize(14);
pdf.text(‘Félicitations pour avoir complété cet exercice!’, 105, 110, { align: ‘center’ });

// Générer un QR code (si disponible)
try {
if (window.qrcode) {
const qrCodeData = `Nom: ${userInfo.nom}, Prénom: ${userInfo.prenom}, Niveau: ${currentDifficulty}, Score: ${score}%`;
const qr = qrcode(0, ‘M’);
qr.addData(qrCodeData);
qr.make();

// Dessiner le QR code sur le PDF (conversion simple)
const qrSize = 40;
const cellSize = qrSize / qr.getModuleCount();
const qrX = 105 – (qrSize / 2);
const qrY = 130;

for (let row = 0; row < qr.getModuleCount(); row++) {
for (let col = 0; col < qr.getModuleCount(); col++) {
if (qr.isDark(row, col)) {
pdf.setFillColor(0, 0, 0);
pdf.rect(qrX + col * cellSize, qrY + row * cellSize, cellSize, cellSize, 'F');
}
}
}
}
} catch (e) {
console.error("Erreur lors de la génération du QR code:", e);
}

// Sauvegarder le PDF
pdf.save(`badge_${userInfo.prenom}_${userInfo.nom}_${currentDifficulty}.pdf`);
} else {
console.error("jsPDF n'est pas disponible");
alert("Impossible de générer le PDF car la bibliothèque jsPDF n'est pas chargée.");
}
} catch (e) {
console.error("Erreur lors de la création du PDF:", e);
alert("Une erreur s'est produite lors de la création du PDF. Veuillez réessayer.");
}
}
});