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: #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;
}
.derivation-input {
width: 150px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 0 5px;
font-size: 16px;
}
.derivation-input.correct {
background-color: #d4edda;
border-color: #c3e6cb;
}
.derivation-input.incorrect {
background-color: #f8d7da;
border-color: #f5c6cb;
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #eafaf1;
border-radius: 8px;
display: none;
}
.certificate {
text-align: center;
margin-top: 30px;
padding: 20px;
border: 2px solid #2c3e50;
border-radius: 8px;
display: none;
}
.difficulty-selector {
margin-bottom: 20px;
}
.error {
color: red;
font-size: 14px;
}
#certificatePreview {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
border: 10px solid transparent;
border-image: linear-gradient(45deg, #3498db, #2980b9, #1abc9c, #16a085, #27ae60) 1;
box-sizing: border-box;
overflow: hidden;
margin-bottom: 20px;
}
.certificate-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.07;
z-index: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 70%;
}
.certificate-content {
position: relative;
z-index: 1;
padding: 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.certificate-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.certificate-title {
flex-grow: 1;
text-align: center;
}
.certificate-logo {
width: 120px;
height: 60px;
background-color: #3498db;
border-radius: 5px;
}
.certificate-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.certificate-qr {
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.certificate-qr img {
max-width: 100%;
max-height: 100%;
}
.certificate-signature {
flex-grow: 1;
text-align: center;
}
.triangle-pattern {
position: absolute;
width: 150px;
height: 120px;
}
.triangle-pattern.top-right {
top: 0;
right: 0;
}
.triangle-pattern.bottom-left {
bottom: 0;
left: 0;
}
.info-tooltip {
display: inline-block;
position: relative;
margin-left: 5px;
cursor: help;
}
.info-tooltip:after {
content: “?”;
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 50%;
background-color: #3498db;
color: white;
font-weight: bold;
font-size: 14px;
}
.info-tooltip .tooltip-text {
visibility: hidden;
width: 250px;
background-color: #2c3e50;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity 0.3s;
}
.info-tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.loading {
display: none;
margin-top: 15px;
font-style: italic;
color: #666;
}
.exercise-level {
margin-bottom: 20px;
}
.exercise-type {
margin-bottom: 20px;
font-weight: bold;
color: #3498db;
}

document.addEventListener(‘DOMContentLoaded’, function() {
// Éléments DOM
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);
const startButton = document.getElementById(‘startButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const changeDifficultyButton = document.getElementById(‘changeDifficultyButton’);
const verifyButton = document.getElementById(‘verifyButton’);
const resultContainer = document.getElementById(‘resultContainer’);
const resultText = document.getElementById(‘resultText’);
const mistakesContainer = document.getElementById(‘mistakesContainer’);
const showCertificateButton = document.getElementById(‘showCertificateButton’);
const certificateContainer = document.getElementById(‘certificateContainer’);
const certificateName = document.getElementById(‘certificateName’);
const certificateLevel = document.getElementById(‘certificateLevel’);
const certificateScore = document.getElementById(‘certificateScore’);
const certificateDate = document.getElementById(‘certificateDate’);
const downloadCertificateButton = document.getElementById(‘downloadCertificateButton’);
const loadingIndicator = document.getElementById(‘loadingIndicator’);

// Exercices par niveau
const exerciseFacile = document.getElementById(‘exerciseFacile’);
const exerciseMoyen = document.getElementById(‘exerciseMoyen’);
const exerciseDifficile = document.getElementById(‘exerciseDifficile’);

// Variables globales
let userName = ”;
let userLastName = ”;
let userEmail = ”;
let currentDifficulty = ‘facile’;
let score = 0;
let totalQuestions = 25;

// Validation du formulaire d’inscription
startButton.addEventListener(‘click’, function() {
// Réinitialiser les erreurs
document.getElementById(‘prenomError’).textContent = ”;
document.getElementById(‘nomError’).textContent = ”;
document.getElementById(‘emailError’).textContent = ”;
document.getElementById(‘subscribeError’).textContent = ”;

// Récupérer les valeurs
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;

// Valider les champs
let isValid = true;

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 (!isValidEmail(email)) {
document.getElementById(‘emailError’).textContent = ‘Email invalide’;
isValid = false;
}

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

if (isValid) {
// Stocker les infos utilisateur
userName = prenom;
userLastName = nom;
userEmail = email;

// Cacher le formulaire et afficher l’exercice
subscriptionForm.style.display = ‘none’;
exerciseContainer.style.display = ‘block’;

// Afficher l’exercice du niveau sélectionné
showExerciseByDifficulty(currentDifficulty);
}
});

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

// Changement de difficulté
changeDifficultyButton.addEventListener(‘click’, function() {
currentDifficulty = difficultySelect.value;
showExerciseByDifficulty(currentDifficulty);

// Réinitialiser les résultats
resultContainer.style.display = ‘none’;
certificateContainer.style.display = ‘none’;

// Réinitialiser les champs de réponse
const inputs = document.querySelectorAll(‘.derivation-input’);
inputs.forEach(input => {
input.value = ”;
input.classList.remove(‘correct’, ‘incorrect’);
});
});

// Afficher l’exercice selon la difficulté
function showExerciseByDifficulty(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;
}
}

// Vérification des réponses
verifyButton.addEventListener(‘click’, function() {
let correctAnswers = 0;
const mistakes = [];

// Sélectionner les inputs du niveau actuel
const currentExercise = document.getElementById(`exercise${currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1)}`);
const inputs = currentExercise.querySelectorAll(‘.derivation-input’);

inputs.forEach(input => {
const userAnswer = input.value.trim().toLowerCase();
const correctAnswer = input.dataset.answer.toLowerCase();
const questionNumber = input.dataset.number;

// Vérifier si la réponse est correcte
if (userAnswer === correctAnswer) {
input.classList.add(‘correct’);
input.classList.remove(‘incorrect’);
correctAnswers++;
} else {
input.classList.add(‘incorrect’);
input.classList.remove(‘correct’);

// Enregistrer l’erreur
const baseWord = input.previousSibling.textContent.trim();
mistakes.push({
number: questionNumber,
baseWord: baseWord,
userAnswer: userAnswer,
correctAnswer: correctAnswer
});
}
});

// Calculer le score
score = Math.round((correctAnswers / inputs.length) * 100);

// Afficher les résultats
resultText.innerHTML = `Vous avez obtenu ${correctAnswers} réponses correctes sur ${inputs.length} (${score}%)`;

// Afficher les erreurs
mistakesContainer.innerHTML = ”;
if (mistakes.length > 0) {
const mistakesTitle = document.createElement(‘h4’);
mistakesTitle.textContent = ‘Erreurs à corriger:’;
mistakesContainer.appendChild(mistakesTitle);

const mistakesList = document.createElement(‘ul’);
mistakes.forEach(mistake => {
const listItem = document.createElement(‘li’);
listItem.innerHTML = `Question ${mistake.number}: Vous avez écrit ${mistake.userAnswer} au lieu de ${mistake.correctAnswer}`;
mistakesList.appendChild(listItem);
});
mistakesContainer.appendChild(mistakesList);
}

resultContainer.style.display = ‘block’;

// Afficher le bouton du certificat si le score est suffisant
if (score >= 70) {
showCertificateButton.style.display = ‘block’;
} else {
showCertificateButton.style.display = ‘none’;
}
});

// Afficher le certificat
showCertificateButton.addEventListener(‘click’, function() {
// Préparer le certificat
certificateName.textContent = `${userName} ${userLastName}`;
certificateLevel.textContent = currentDifficulty;
certificateScore.textContent = `${score}%`;

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

// Générer QR code
loadingIndicator.style.display = ‘block’;

setTimeout(function() {
// Simuler le chargement
loadingIndicator.style.display = ‘none’;

// Créer QR code
const qrCodeContainer = document.querySelector(‘.certificate-qr’);
qrCodeContainer.innerHTML = ”;

const qr = qrcode(4, ‘L’);
qr.addData(`Certificat pour ${userName} ${userLastName} – Score: ${score}% – Niveau: ${currentDifficulty}`);
qr.make();

const qrImg = document.createElement(‘div’);
qrImg.innerHTML = qr.createImgTag(4);
qrCodeContainer.appendChild(qrImg);

// Afficher le certificat
certificateContainer.style.display = ‘block’;

// Scroll to certificate
certificateContainer.scrollIntoView({ behavior: ‘smooth’ });
}, 1500);
});

// Télécharger le certificat en PDF
downloadCertificateButton.addEventListener(‘click’, function() {
loadingIndicator.style.display = ‘block’;

setTimeout(function() {
const { jsPDF } = window.jspdf;

html2canvas(document.getElementById(‘certificatePreview’), {
scale: 2
}).then(canvas => {
loadingIndicator.style.display = ‘none’;

const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jsPDF(‘l’, ‘mm’, ‘a4’);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();

pdf.addImage(imgData, ‘PNG’, 0, 0, pdfWidth, pdfHeight);
pdf.save(`certificat_francais_${userName}_${userLastName}.pdf`);
});
}, 1000);
});
});