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);
max-width: 100%;
margin: 0 auto;
}
.subscription-form {
background-color: #f4f8e8;
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: #4caf50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #388e3c;
}
.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: #f5fef5;
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, #4caf50, #388e3c, #2e7d32, #1b5e20);
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: #4caf50;
}
.badge-info {
font-size: 14px;
margin-bottom: 5px;
text-align: center;
}
.badge-icon {
margin-bottom: 10px;
width: 60px;
height: 60px;
}
.badge-actions {
text-align: center;
margin-top: 20px;
display: none;
}
.rules-section {
background-color: #e5f5e5;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid #4caf50;
}
.rules-section h3 {
margin-top: 0;
color: #2e7d32;
}
.rules-section ul {
padding-left: 20px;
}
.rules-toggle {
margin-bottom: 15px;
text-decoration: underline;
color: #4caf50;
cursor: pointer;
}
.hint-button {
background-color: #8bc34a;
color: white;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin-left: 10px;
vertical-align: middle;
}
.hint-button:hover {
background-color: #689f38;
}
.download-button {
background-color: #2196F3;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
margin-top: 15px;
}
.download-button:hover {
background-color: #0b7dda;
}

// 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 downloadBadgeButton = document.getElementById(‘downloadBadgeButton’);
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);
downloadBadgeButton.addEventListener(‘click’, downloadBadgePDF);
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 possessifs’;
} else {
rulesSection.style.display = ‘none’;
rulesToggle.textContent = ‘Afficher les règles des adjectifs possessifs’;
}
}

// 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 en pourcentage
const scorePercent = Math.round((correctAnswers / totalQuestions) * 100);

// Afficher le résultat
scoreDisplay.innerHTML = `Vous avez obtenu ${correctAnswers}/${totalQuestions} réponses correctes. Score: ${scorePercent}%`;
correctionDisplay.innerHTML = correctionHtml;

// Afficher le conteneur de résultat
resultContainer.style.display = ‘block’;
}

// Fonction pour générer le badge
function generateBadge() {
const badgePreview = document.getElementById(‘badgePreview’);
const badgeActions = document.getElementById(‘badgeActions’);
const badgeNamePreview = document.getElementById(‘badgeNamePreview’);
const badgeLevelPreview = document.getElementById(‘badgeLevelPreview’);
const badgeScorePreview = document.getElementById(‘badgeScorePreview’);
const badgeDatePreview = document.getElementById(‘badgeDatePreview’);

// Récupérer les informations pour le badge
const fullName = `${userInfo.prenom} ${userInfo.nom}`;

// Récupérer le score actuel
const currentExercise = document.getElementById(‘exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1));
const inputFields = currentExercise.querySelectorAll(‘.gap-input’);
let correctAnswers = 0;
let totalQuestions = inputFields.length;

inputFields.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.dataset.answer.toLowerCase();
if (userAnswer === correctAnswer) {
correctAnswers++;
}
});

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

// Mettre à jour le badge avec les informations de l’utilisateur
badgeNamePreview.textContent = fullName;
badgeLevelPreview.textContent = currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1);
badgeScorePreview.textContent = scorePercent;
badgeDatePreview.textContent = new Date().toLocaleDateString();

// Afficher le badge et les boutons d’action
badgePreview.style.display = ‘block’;
badgeActions.style.display = ‘block’;
}

// Fonction pour télécharger le badge en PDF
function downloadBadgePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({
orientation: ‘portrait’,
unit: ‘mm’,
format: ‘a4’
});

// Titre du document
doc.setFontSize(16);
doc.text(‘Certificat de Réussite – Adjectifs Possessifs’, 105, 20, { align: ‘center’ });

// Informations de l’utilisateur
doc.setFontSize(12);
doc.text(`Nom: ${userInfo.prenom} ${userInfo.nom}`, 20, 40);
doc.text(`Email: ${userInfo.email}`, 20, 50);
doc.text(`Niveau: ${currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1)}`, 20, 60);

// Récupérer le score
const currentExercise = document.getElementById(‘exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1));
const inputFields = currentExercise.querySelectorAll(‘.gap-input’);
let correctAnswers = 0;
let totalQuestions = inputFields.length;

inputFields.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.dataset.answer.toLowerCase();
if (userAnswer === correctAnswer) {
correctAnswers++;
}
});

const scorePercent = Math.round((correctAnswers / totalQuestions) * 100);
doc.text(`Score: ${scorePercent}%`, 20, 70);
doc.text(`Date: ${new Date().toLocaleDateString()}`, 20, 80);

// Ajouter un QR code (simulation)
// Note: Nous utilisons la bibliothèque qrcode-generator pour générer un QR code
const qr = qrcode(4, ‘L’);
qr.addData(`Nom: ${userInfo.prenom} ${userInfo.nom}, Niveau: ${currentDifficulty}, Score: ${scorePercent}%`);
qr.make();
const qrModuleCount = qr.getModuleCount();
const cellSize = 1.5;
const qrSize = qrModuleCount * cellSize;

// Dessiner le QR code
for (let row = 0; row < qrModuleCount; row++) {
for (let col = 0; col < qrModuleCount; col++) {
if (qr.isDark(row, col)) {
doc.setFillColor(0, 0, 0);
doc.rect(150 – qrSize / 2 + col * cellSize, 130 – qrSize / 2 + row * cellSize, cellSize, cellSize, 'F');
}
}
}

// Ajouter un texte au bas du certificat
doc.setFontSize(10);
doc.text('Ce certificat atteste que la personne nommée ci-dessus a complété avec succès', 105, 170, { align: 'center' });
doc.text('l'exercice sur les adjectifs possessifs en français.', 105, 177, { align: 'center' });

// Enregistrer le PDF
doc.save(`certificat_adjectifs_possessifs_${userInfo.prenom}_${userInfo.nom}.pdf`);
}
});