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;
}
.feminin-input {
width: 150px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 0 5px;
font-size: 16px;
}
.feminin-input.correct {
background-color: #d4edda;
border-color: #c3e6cb;
}
.feminin-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;
}

document.addEventListener(‘DOMContentLoaded’, function() {
// S’assurer que jsPDF est disponible
if (typeof window.jspdf === ‘undefined’) {
window.jspdf = window.jsPDF;
}

// Références aux éléments DOM
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);
const startButton = document.getElementById(‘startButton’);
const verifyButton = document.getElementById(‘verifyButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const changeDifficultyButton = document.getElementById(‘changeDifficultyButton’);
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 downloadCertificateButton = document.getElementById(‘downloadCertificateButton’);
const pdfLoading = document.getElementById(‘pdfLoading’);

// Informations de l’utilisateur
let userData = {
prenom: ”,
nom: ”,
email: ”,
difficulty: ‘facile’,
score: 0
};

// Fonction pour afficher l’exercice selon le niveau de difficulté
function showExerciseByDifficulty(difficulty) {
// Masquer tous les exercices
document.querySelectorAll(‘.exercise-level’).forEach(el => {
el.style.display = ‘none’;
});

// Afficher l’exercice correspondant à la difficulté
const exerciseId = ‘exercise’ + difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
document.getElementById(exerciseId).style.display = ‘block’;
userData.difficulty = difficulty;
}

// Démarrer l’exercice
startButton.addEventListener(‘click’, function() {
// Valider le formulaire
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éinitialiser les messages d’erreur
document.getElementById(‘prenomError’).textContent = ”;
document.getElementById(‘nomError’).textContent = ”;
document.getElementById(‘emailError’).textContent = ”;
document.getElementById(‘subscribeError’).textContent = ”;

// 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 (!validateEmail(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer un email valide’;
isValid = false;
}

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

if (isValid) {
// Enregistrer les données utilisateur
userData.prenom = prenom;
userData.nom = nom;
userData.email = email;

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

// Afficher l’exercice selon la difficulté par défaut
showExerciseByDifficulty(userData.difficulty);
}
});

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

// Changer le niveau de difficulté
changeDifficultyButton.addEventListener(‘click’, function() {
const difficulty = difficultySelect.value;
showExerciseByDifficulty(difficulty);

// Réinitialiser les résultats et les champs d’entrée
resultContainer.style.display = ‘none’;
certificateContainer.style.display = ‘none’;
document.querySelectorAll(‘.feminin-input’).forEach(input => {
input.value = ”;
input.classList.remove(‘correct’, ‘incorrect’);
});
});

// Vérifier les réponses
verifyButton.addEventListener(‘click’, function() {
let correctAnswers = 0;
const totalQuestions = 25;
const mistakes = [];
const exerciseId = ‘exercise’ + userData.difficulty.charAt(0).toUpperCase() + userData.difficulty.slice(1);
const inputs = document.querySelectorAll(`#${exerciseId} .feminin-input`);

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

if (userAnswer === correctAnswer) {
input.classList.add(‘correct’);
input.classList.remove(‘incorrect’);
correctAnswers++;
} else {
input.classList.add(‘incorrect’);
input.classList.remove(‘correct’);
mistakes.push({
number: questionNumber,
userAnswer: userAnswer,
correctAnswer: correctAnswer
});
}
});

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

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

if (userData.score === 100) {
resultText.innerHTML = `

Félicitations! Vous avez obtenu un score parfait de ${userData.score}% (${correctAnswers}/${totalQuestions}).

Vous maîtrisez parfaitement la féminisation des noms de métiers en français au niveau ${userData.difficulty}!

`;
showCertificateButton.style.display = ‘block’;
} else if (userData.score >= 80) {
resultText.innerHTML = `

Excellent travail! Vous avez obtenu un score de ${userData.score}% (${correctAnswers}/${totalQuestions}).

Vous avez une très bonne maîtrise de la féminisation des noms de métiers en français au niveau ${userData.difficulty}.

`;
showCertificateButton.style.display = ‘block’;
} else if (userData.score >= 60) {
resultText.innerHTML = `

Bon travail! Vous avez obtenu un score de ${userData.score}% (${correctAnswers}/${totalQuestions}).

Vous avez une assez bonne compréhension de la féminisation des noms de métiers en français au niveau ${userData.difficulty}.

`;
showCertificateButton.style.display = ‘none’;
} else {
resultText.innerHTML = `

Vous avez obtenu un score de ${userData.score}% (${correctAnswers}/${totalQuestions}).

Continuez à pratiquer pour améliorer votre compréhension de la féminisation des noms de métiers en français.

`;
showCertificateButton.style.display = ‘none’;
}

// Afficher les erreurs
mistakesContainer.innerHTML = ”;
if (mistakes.length > 0) {
mistakesContainer.innerHTML += ‘

Erreurs à corriger:

‘;
mistakes.forEach(mistake => {
const questionEl = document.querySelector(`#${exerciseId} .feminin-input[data-number=”${mistake.number}”]`);
const masculine = questionEl.previousElementSibling.previousElementSibling.textContent;

mistakesContainer.innerHTML += `

• Question ${mistake.number}: ${masculine} → “${mistake.userAnswer}” (Réponse correcte: “${mistake.correctAnswer}”)

`;
});
mistakesContainer.innerHTML += ‘

‘;
}
});

// Afficher le certificat
showCertificateButton.addEventListener(‘click’, function() {
certificateContainer.style.display = ‘block’;

// Remplir les informations du certificat
document.getElementById(‘certificateName’).textContent = userData.prenom + ‘ ‘ + userData.nom;
document.getElementById(‘certificateLevel’).textContent = userData.difficulty;
document.getElementById(‘certificateScore’).textContent = userData.score + ‘%’;

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

// Générer le QR Code
generateQRCode();

// Générer un motif unique pour l’arrière-plan du certificat
generateCertificateBackground();
});

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

setTimeout(function() {
const certificateElement = document.getElementById(‘certificatePreview’);

html2canvas(certificateElement, {
scale: 2,
logging: false,
useCORS: true
}).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jspdf.jsPDF({
orientation: ‘landscape’,
unit: ‘mm’
});

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(`certificat_francais_${userData.prenom}_${userData.nom}.pdf`);

pdfLoading.style.display = ‘none’;
});
}, 500);
});

// Générer un QR Code pour le certificat
function generateQRCode() {
const qrContainer = document.querySelector(‘.certificate-qr’);
qrContainer.innerHTML = ”;

// Utiliser qrcode-generator
const qr = qrcode(0, ‘M’);
const data = `Certificat de réussite en Féminisation des MétiersnNom: ${userData.prenom} ${userData.nom}nDate: ${new Date().toLocaleDateString(‘fr-FR’)}nScore: ${userData.score}%nNiveau: ${userData.difficulty}`;
qr.addData(data);
qr.make();

const qrImg = qr.createImgTag(4);
qrContainer.innerHTML = qrImg;
}

// Générer un motif d’arrière-plan pour le certificat
function generateCertificateBackground() {
const background = document.querySelector(‘.certificate-background’);
background.style.backgroundImage = “url(‘/api/placeholder/800/600’)”;

// Générer des triangles décoratifs
const triangleTopRight = document.querySelector(‘.triangle-pattern.top-right’);
triangleTopRight.style.background = “linear-gradient(45deg, #3498db, #2980b9)”;
triangleTopRight.style.clipPath = “polygon(100% 0, 0 0, 100% 100%)”;

const triangleBottomLeft = document.querySelector(‘.triangle-pattern.bottom-left’);
triangleBottomLeft.style.background = “linear-gradient(45deg, #1abc9c, #16a085)”;
triangleBottomLeft.style.clipPath = “polygon(0 0, 0 100%, 100% 100%)”;
}
});