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;
}
.base-numeral {
color: #666;
font-size: 14px;
font-style: italic;
margin-left: 2px;
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #eafaf1;
border-radius: 8px;
display: none;
}
.badge {
text-align: center;
margin-top: 30px;
padding: 20px;
display: none;
}
.difficulty-selector {
margin-bottom: 20px;
}
.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, #ff9800, #f57c00, #ff5722, #e64a19);
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: #ff5722;
}
.badge-info {
font-size: 14px;
margin-bottom: 5px;
text-align: center;
}
.badge-icon {
margin-bottom: 10px;
width: 60px;
height: 60px;
}
.rules-section {
background-color: #fff3e0;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #ff9800;
}
.rules-section h3 {
margin-top: 0;
color: #ff5722;
}
.rules-section ul {
padding-left: 20px;
}
.rules-toggle {
margin-bottom: 15px;
text-decoration: underline;
color: #ff5722;
cursor: pointer;
}
.hint-button {
background-color: #ff9800;
color: white;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 10px;
vertical-align: middle;
}
.hint-button:hover {
background-color: #f57c00;
}

// 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);

// 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 numéraux’;
} else {
rulesSection.style.display = ‘none’;
rulesToggle.textContent = ‘Afficher les règles des adjectifs numéraux’;
}
}

// 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’;
}

// Ajouter des indices aux champs de saisie
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.onclick = function(e) {
e.stopPropagation();
alert(`Indice: Il faut écrire “${input.dataset.base}” sous forme d’${input.dataset.hint}.`);
};
input.insertAdjacentElement(‘afterend’, hintButton);

// Ajouter un petit texte pour montrer la base
const baseNumeral = document.createElement(‘span’);
baseNumeral.className = ‘base-numeral’;
baseNumeral.textContent = `(${input.dataset.base})`;
input.insertAdjacentElement(‘afterend’, baseNumeral);
});

// 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() {
const { jsPDF } = window.jspdf;

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

// Obtenir le contenu SVG du badge
const badgeElement = document.getElementById(‘badgePreview’);
const badgeOuterHTML = badgeElement.outerHTML;

// Ajouter le titre
pdf.setFontSize(18);
pdf.text(‘Badge de Maîtrise des Adjectifs Numéraux’, 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);
pdf.text(`Score: ${document.getElementById(‘badgeScorePreview’).textContent}%`, 20, 80);
pdf.text(`Date: ${document.getElementById(‘badgeDatePreview’).textContent}`, 20, 90);

// Générer un QR code avec un lien factice
const qr = qrcode(4, ‘L’);
qr.addData(`https://exemple.fr/verifier-badge?email=${userInfo.email}&score=${document.getElementById(‘badgeScorePreview’).textContent}`);
qr.make();

// Ajouter le QR code comme une image
const qrCodeDataURL = qr.createDataURL(4);
pdf.addImage(qrCodeDataURL, ‘PNG’, 140, 40, 50, 50);

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

// Ajouter un certificat
pdf.setFontSize(22);
pdf.text(‘Certificat de Réussite’, 105, 130, { align: ‘center’ });

pdf.setFontSize(14);
pdf.text(`Ce certificat est décerné à ${userInfo.prenom} ${userInfo.nom}`, 105, 145, { align: ‘center’ });
pdf.text(`pour avoir démontré une excellente maîtrise des adjectifs numéraux`, 105, 155, { align: ‘center’ });
pdf.text(`en français au niveau ${currentDifficulty}.`, 105, 165, { align: ‘center’ });

// Ajouter un cadre au certificat
pdf.rect(20, 120, 170, 60);

// Télécharger le PDF
pdf.save(`badge_adjectifs_${userInfo.nom}_${userInfo.prenom}.pdf`);
}
});