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, #f39c12, #e67e22, #d35400, #c0392b, #e74c3c) 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;
}
.article-tip {
background-color: #fff3cd;
border-left: 5px solid #ffc107;
padding: 10px;
margin-bottom: 20px;
border-radius: 0 5px 5px 0;
}
.article-tip-title {
font-weight: bold;
margin-bottom: 5px;
}

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

// Logo Aplenguas en SVG
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;

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 / 25) * 100);

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

// Prévisualisation du certificat
document.getElementById(‘certificateNamePreview’).textContent = `${userInfo.prenom} ${userInfo.nom}`;
document.getElementById(‘certificateScorePreview’).textContent = `${score}`;
document.getElementById(‘certificateLevelPreview’).textContent = currentDifficulty.charAt(0).toUpperCase() + currentDifficulty.slice(1);
document.getElementById(‘certificateDatePreview’).textContent = new Date().toLocaleDateString(‘fr-FR’);
document.getElementById(‘certificatePreview’).style.display = ‘block’;

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

// Fonction pour générer le PDF du certificat
function generatePdf() {
if (typeof jspdf === ‘undefined’ || typeof jspdf.jsPDF === ‘undefined’) {
alert(‘La bibliothèque jsPDF n’est pas chargée correctement. Veuillez rafraîchir la page.’);
return;
}

try {
const { jsPDF } = window.jspdf;
const doc = new jsPDF(‘landscape’, ‘mm’, ‘a4’);

// Préparation des données du certificat
const fullName = `${userInfo.prenom} ${userInfo.nom}`;
const score = document.getElementById(‘certificateScorePreview’).textContent;
const level = document.getElementById(‘certificateLevelPreview’).textContent;
const date = document.getElementById(‘certificateDatePreview’).textContent;

// Ajout d’une bordure
doc.setDrawColor(243, 156, 18); // couleur orange
doc.setLineWidth(3);
doc.rect(10, 10, 277, 190);

// Titre
doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(30);
doc.setTextColor(44, 62, 80); // couleur foncée
doc.text(‘Certificat de Réussite’, 148, 40, { align: ‘center’ });

doc.setFontSize(20);
doc.text(‘Exercice de Grammaire: Les Articles en Français’, 148, 50, { align: ‘center’ });

// Corps du certificat
doc.setFont(‘helvetica’, ‘normal’);
doc.setFontSize(16);
doc.text(‘Ce certificat atteste que’, 148, 70, { align: ‘center’ });

doc.setFont(‘helvetica’, ‘bold’);
doc.setFontSize(22);
doc.text(fullName, 148, 85, { align: ‘center’ });

doc.setFont(‘helvetica’, ‘normal’);
doc.setFontSize(16);
doc.text(‘a complété avec succès l’exercice sur les articles en français’, 148, 100, { align: ‘center’ });

doc.text(`Score: ${score} / 100`, 148, 115, { align: ‘center’ });
doc.text(`Niveau: ${level}`, 148, 125, { align: ‘center’ });
doc.text(`Date: ${date}`, 148, 135, { align: ‘center’ });

// Signature
doc.setDrawColor(0);
doc.setLineWidth(0.5);
doc.line(118, 160, 178, 160);
doc.setFontSize(12);
doc.text(‘Signature du Professeur’, 148, 168, { align: ‘center’ });

// QR Code (en tant qu’image) – utilisation de l’image déjà générée
const qrCodeImg = document.querySelector(‘#qrCodeContainer img’);
if (qrCodeImg) {
doc.addImage(qrCodeImg.src, ‘PNG’, 230, 150, 40, 40);
}

// Enregistrement du PDF
doc.save(`certificat_articles_${userInfo.nom}_${userInfo.prenom}.pdf`);
} catch (error) {
console.error(‘Erreur lors de la génération du PDF:’, error);
alert(‘Une erreur est survenue lors de la génération du PDF. Veuillez réessayer.’);
}
}
});