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: 50px;
border: none;
border-bottom: 1px solid #333;
font-size: 16px;
text-align: center;
}
.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: 450px;
background-color: #fff;
border: 10px solid transparent;
border-image: linear-gradient(45deg, #3498db, #2980b9, #2c3e50, #1abc9c, #16a085) 1;
box-sizing: border-box;
overflow: hidden;
}
.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;
}
.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;
}
.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;
}

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

// Logo Aplenguas en SVG (thème bleu)
const aplenguas_logo_svg = `

`;

// 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 generatePdfButton = document.getElementById(‘generatePdfButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);

// Définir l’arrière-plan du certificat
const certificateBackground = document.querySelector(‘.certificate-background’);
certificateBackground.style.backgroundImage = `url(‘data:image/svg+xml;base64,${btoa(aplenguas_logo_svg)}’)`;

// Ajouter les logos SVG
const headerLogo = document.getElementById(‘certificateHeaderLogo’);
const footerLogo = document.getElementById(‘certificateFooterLogo’);
headerLogo.innerHTML = aplenguas_logo_svg;
footerLogo.innerHTML = aplenguas_logo_svg;

// Ajouter aussi le logo au container caché pour l’exportation PDF
document.getElementById(‘logoSvgContainer’).innerHTML = aplenguas_logo_svg;

// Ajout des écouteurs d’événements
startButton.addEventListener(‘click’, startExercise);
changeDifficultyButton.addEventListener(‘click’, changeDifficulty);
checkButton.addEventListener(‘click’, checkAnswers);
generatePdfButton.addEventListener(‘click’, generatePdf);

// Générer le QR code
function generateQRCode() {
const qrCodeContainer = document.getElementById(‘qrCodeContainer’);
qrCodeContainer.innerHTML = ”;

try {
// Version du QR code (1-40) avec un niveau de correction d’erreur ‘L’
var qr = qrcode(4, ‘L’);
qr.addData(‘https://aplenguas.com’);
qr.make();

qrCodeContainer.innerHTML = qr.createImgTag(4);
} catch (error) {
console.error(“Erreur lors de la génération du QR code:”, error);
// Fallback si la génération du QR code échoue
qrCodeContainer.innerHTML = ‘

‘;
}
}

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

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

if (isValid) {
// Enregistrement des informations de l’utilisateur
userInfo.prenom = prenom;
userInfo.nom = nom;
userInfo.email = email;

// Affichage de l’exercice
document.getElementById(‘subscriptionForm’).style.display = ‘none’;
document.getElementById(‘exerciseContainer’).style.display = ‘block’;

// Affichage de l’exercice du niveau sélectionné
showExercise(currentDifficulty);
}
}

// Validation d’email simple
function isValidEmail(email) {
const re = /^[^s@]+@[^s@]+.[^s@]+$/;
return re.test(email);
}

// Fonction pour changer le niveau de difficulté
function changeDifficulty() {
const newDifficulty = difficultySelect.value;
showExercise(newDifficulty);
currentDifficulty = newDifficulty;

// Réinitialiser les champs de saisie
const inputs = document.querySelectorAll(‘.gap-input’);
inputs.forEach(input => {
input.value = ”;
input.style.backgroundColor = ”;
});

// Cacher le résultat
document.getElementById(‘resultContainer’).style.display = ‘none’;
document.getElementById(‘certificatePreview’).style.display = ‘none’;
}

// Fonction pour afficher l’exercice sélectionné
function showExercise(difficulty) {
document.getElementById(‘exerciseFacile’).style.display = ‘none’;
document.getElementById(‘exerciseMoyen’).style.display = ‘none’;
document.getElementById(‘exerciseDifficile’).style.display = ‘none’;

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

// Fonction pour vérifier les réponses
function checkAnswers() {
const inputs = document.querySelectorAll(‘#exercise’ + currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1) + ‘ .gap-input’);
let correctAnswers = 0;
let totalQuestions = inputs.length;

inputs.forEach(input => {
const userAnswer = input.value.trim();
const correctAnswer = input.getAttribute(‘data-answer’);

if (userAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
input.style.backgroundColor = ‘#d4edda’;
correctAnswers++;
} else {
input.style.backgroundColor = ‘#f8d7da’;
}
});

// Calcul du score
const score = Math.round((correctAnswers / totalQuestions) * 100);

// Affichage du résultat
document.getElementById(‘scoreDisplay’).textContent = `Votre score: ${score}% (${correctAnswers} sur ${totalQuestions})`;
document.getElementById(‘resultContainer’).style.display = ‘block’;

// Mise à jour du certificat
document.getElementById(‘certificateNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘certificateScorePreview’).textContent = score;
document.getElementById(‘certificateLevelPreview’).textContent = capitalizeFirstLetter(currentDifficulty);
document.getElementById(‘certificateDatePreview’).textContent = new Date().toLocaleDateString();
document.getElementById(‘certificatePreview’).style.display = ‘block’;

// Générer le QR code
generateQRCode();
}

// Fonction pour générer le PDF
function generatePdf() {
// Vérifier si la bibliothèque jsPDF est disponible
if (typeof window.jspdf === ‘undefined’) {
alert(“La bibliothèque jsPDF n’est pas chargée correctement.”);
return;
}

const { jsPDF } = window.jspdf;

// Créer un nouveau document PDF
const pdf = new jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a4’
});

// Récupérer l’élément à convertir
const certificatePreview = document.getElementById(‘certificatePreview’);

// Utiliser html2canvas pour convertir l’élément HTML en image
html2canvas(certificatePreview).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
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_Pronoms_${userInfo.prenom}_${userInfo.nom}.pdf`);
}).catch(error => {
console.error(“Erreur lors de la génération du PDF:”, error);

// Méthode alternative si html2canvas échoue
try {
// Récupérer les informations pour le PDF
const nom = `${userInfo.prenom} ${userInfo.nom}`;
const score = document.getElementById(‘certificateScorePreview’).textContent;
const niveau = document.getElementById(‘certificateLevelPreview’).textContent;
const date = document.getElementById(‘certificateDatePreview’).textContent;

// Générer un PDF simple
pdf.setFontSize(24);
pdf.text(“Certificat de Réussite”, pdf.internal.pageSize.getWidth() / 2, 30, { align: ‘center’ });

pdf.setFontSize(18);
pdf.text(“Exercice de Grammaire: Les Pronoms Personnels”, pdf.internal.pageSize.getWidth() / 2, 40, { align: ‘center’ });

pdf.setFontSize(16);
pdf.text(`Ce certificat atteste que ${nom} a complété avec succès`, pdf.internal.pageSize.getWidth() / 2, 70, { align: ‘center’ });
pdf.text(`l’exercice sur les pronoms personnels en français`, pdf.internal.pageSize.getWidth() / 2, 80, { align: ‘center’ });

pdf.text(`Score: ${score} / 100`, pdf.internal.pageSize.getWidth() / 2, 100, { align: ‘center’ });
pdf.text(`Niveau: ${niveau}`, pdf.internal.pageSize.getWidth() / 2, 110, { align: ‘center’ });
pdf.text(`Date: ${date}`, pdf.internal.pageSize.getWidth() / 2, 120, { align: ‘center’ });

pdf.text(“_________________________”, pdf.internal.pageSize.getWidth() / 2, 150, { align: ‘center’ });
pdf.text(“Signature du Professeur”, pdf.internal.pageSize.getWidth() / 2, 160, { align: ‘center’ });

pdf.save(`Certificat_Pronoms_${userInfo.prenom}_${userInfo.nom}.pdf`);
} catch (fallbackError) {
console.error(“Erreur lors de la génération du PDF (méthode alternative):”, fallbackError);
alert(“Impossible de générer le PDF. Veuillez réessayer plus tard.”);
}
});
}

// Fonction pour capitaliser la première lettre d’une chaîne
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

// Polyfill pour html2canvas si nécessaire
if (typeof html2canvas === ‘undefined’) {
window.html2canvas = function(element) {
return new Promise((resolve, reject) => {
// Créer un canvas temporaire
const canvas = document.createElement(‘canvas’);
canvas.width = element.offsetWidth;
canvas.height = element.offsetHeight;
const ctx = canvas.getContext(‘2d’);

// Dessiner un arrière-plan blanc
ctx.fillStyle = ‘#ffffff’;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Dessiner un cadre pour simuler l’élément
ctx.strokeStyle = ‘#000000’;
ctx.strokeRect(0, 0, canvas.width, canvas.height);

// Texte d’exemple
ctx.fillStyle = ‘#000000′;
ctx.font = ’20px Arial’;
ctx.fillText(‘Certificat de Réussite’, canvas.width / 2 – 100, 50);

resolve(canvas);
});
};
}
});