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;
max-width: 100%;
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: 100%;
background-color: #fff;
border: 10px solid transparent;
border-image: linear-gradient(45deg, #3498db, #2980b9, #2c3e50, #9b59b6, #8e44ad) 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: 100px;
height: 100px;
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: 100px;
height: 75px;
}
.triangle-pattern.top-right {
top: 0;
right: 0;
}
.triangle-pattern.bottom-left {
bottom: 0;
left: 0;
}
.language-example {
display: flex;
margin-bottom: 15px;
}
.language-column {
flex: 1;
padding: 10px;
}
.language-column:first-child {
border-right: 1px solid #ddd;
}
.french {
background-color: #e8f4f8;
}
.english {
background-color: #f8e8e8;
}
.language-label {
font-weight: bold;
text-align: center;
margin-bottom: 5px;
}

document.addEventListener(‘DOMContentLoaded’, function() {
const subscriptionForm = document.getElementById(‘subscriptionForm’);
const exerciseContainer = document.getElementById(‘exerciseContainer’);
const startButton = document.getElementById(‘startButton’);
const checkAnswersButton = document.getElementById(‘checkAnswersButton’);
const difficultySelect = document.getElementById(‘difficultySelect’);
const changeDifficultyButton = document.getElementById(‘changeDifficultyButton’);
const resultContainer = document.getElementById(‘resultContainer’);
const scoreDisplay = document.getElementById(‘scoreDisplay’);
const feedbackDisplay = document.getElementById(‘feedbackDisplay’);
const showCertificateButton = document.getElementById(‘showCertificateButton’);
const certificateContainer = document.getElementById(‘certificateContainer’);
const certificateName = document.getElementById(‘certificateName’);
const certificateDate = document.getElementById(‘certificateDate’);
const certificateScore = document.getElementById(‘certificateScore’);
const downloadCertificateButton = document.getElementById(‘downloadCertificateButton’);
const certificateQR = document.getElementById(‘certificateQR’);

// Exercice niveaux
const exerciseFacile = document.getElementById(‘exerciseFacile’);
const exerciseMoyen = document.getElementById(‘exerciseMoyen’);
const exerciseDifficile = document.getElementById(‘exerciseDifficile’);

// Validation du formulaire d’inscription
startButton.addEventListener(‘click’, function() {
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;

let valid = true;

// Validation prénom
if (prenom === ”) {
document.getElementById(‘prenomError’).textContent = ‘Veuillez entrer votre prénom’;
valid = false;
} else {
document.getElementById(‘prenomError’).textContent = ”;
}

// Validation nom
if (nom === ”) {
document.getElementById(‘nomError’).textContent = ‘Veuillez entrer votre nom’;
valid = false;
} else {
document.getElementById(‘nomError’).textContent = ”;
}

// Validation email
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
if (email === ” || !emailRegex.test(email)) {
document.getElementById(‘emailError’).textContent = ‘Veuillez entrer une adresse email valide’;
valid = false;
} else {
document.getElementById(‘emailError’).textContent = ”;
}

// Validation abonnement
if (!subscribe) {
document.getElementById(‘subscribeError’).textContent = ‘Veuillez accepter de vous abonner’;
valid = false;
} else {
document.getElementById(‘subscribeError’).textContent = ”;
}

if (valid) {
// Cacher le formulaire et afficher l’exercice
subscriptionForm.style.display = ‘none’;
exerciseContainer.style.display = ‘block’;

// Afficher le niveau sélectionné
changeDifficulty();
}
});

// Changer le niveau de difficulté
changeDifficultyButton.addEventListener(‘click’, changeDifficulty);

function changeDifficulty() {
const difficulty = difficultySelect.value;

// Cacher tous les niveaux
exerciseFacile.style.display = ‘none’;
exerciseMoyen.style.display = ‘none’;
exerciseDifficile.style.display = ‘none’;

// Afficher le niveau sélectionné
if (difficulty === ‘facile’) {
exerciseFacile.style.display = ‘block’;
} else if (difficulty === ‘moyen’) {
exerciseMoyen.style.display = ‘block’;
} else if (difficulty === ‘difficile’) {
exerciseDifficile.style.display = ‘block’;
}

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

// Vérifier les réponses
checkAnswersButton.addEventListener(‘click’, function() {
const difficulty = difficultySelect.value;
let currentExercise;

if (difficulty === ‘facile’) {
currentExercise = exerciseFacile;
} else if (difficulty === ‘moyen’) {
currentExercise = exerciseMoyen;
} else {
currentExercise = exerciseDifficile;
}

const inputs = currentExercise.querySelectorAll(‘.gap-input’);
let correctAnswers = 0;
let totalQuestions = inputs.length;

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

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

const percentage = Math.round((correctAnswers / totalQuestions) * 100);

// Afficher les résultats
scoreDisplay.textContent = `Vous avez obtenu ${correctAnswers} réponses correctes sur ${totalQuestions} (${percentage}%)`;

if (percentage >= 80) {
feedbackDisplay.textContent = ‘Excellent travail ! Vous maîtrisez bien les différences d’utilisation des articles en français et en anglais.’;
showCertificateButton.style.display = ‘block’;
} else if (percentage >= 60) {
feedbackDisplay.textContent = ‘Bon travail ! Vous comprenez les principes de base, mais quelques révisions sont nécessaires.’;
showCertificateButton.style.display = ‘none’;
} else {
feedbackDisplay.textContent = ‘Vous avez besoin de plus de pratique. Révisez les règles d’utilisation des articles et réessayez !’;
showCertificateButton.style.display = ‘none’;
}

resultContainer.style.display = ‘block’;
});

// Afficher le certificat
showCertificateButton.addEventListener(‘click’, function() {
const prenom = document.getElementById(‘prenom’).value.trim();
const nom = document.getElementById(‘nom’).value.trim();
const difficulty = difficultySelect.value;

let currentExercise;
if (difficulty === ‘facile’) {
currentExercise = exerciseFacile;
} else if (difficulty === ‘moyen’) {
currentExercise = exerciseMoyen;
} else {
currentExercise = exerciseDifficile;
}

const inputs = currentExercise.querySelectorAll(‘.gap-input’);
let correctAnswers = 0;
let totalQuestions = inputs.length;

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

if (userAnswer === correctAnswer) {
correctAnswers++;
}
});

const percentage = Math.round((correctAnswers / totalQuestions) * 100);
const today = new Date();
const dateString = today.toLocaleDateString(‘fr-FR’);

// Mettre à jour le certificat
certificateName.textContent = `${prenom} ${nom}`;
certificateDate.textContent = `Date: ${dateString}`;
certificateScore.textContent = `Score: ${percentage}% (Niveau: ${difficulty})`;

// Générer le QR code
const qrCode = qrcode(0, ‘L’);
qrCode.addData(`https://aplenguas.com/verify?name=${encodeURIComponent(prenom + ‘ ‘ + nom)}&date=${encodeURIComponent(dateString)}&score=${percentage}&level=${difficulty}`);
qrCode.make();
certificateQR.innerHTML = qrCode.createSvgTag(4);

certificateContainer.style.display = ‘block’;

// Dessiner les triangles
const trianglePatternsTop = document.querySelector(‘.triangle-pattern.top-right’);
trianglePatternsTop.innerHTML = generateTrianglePattern(‘#3498db’, ‘#2980b9’, ‘top-right’);

const trianglePatternsBottom = document.querySelector(‘.triangle-pattern.bottom-left’);
trianglePatternsBottom.innerHTML = generateTrianglePattern(‘#9b59b6’, ‘#8e44ad’, ‘bottom-left’);
});

// Générer le motif triangulaire
function generateTrianglePattern(color1, color2, position) {
let svg = “;

if (position === ‘top-right’) {
svg += `

`;
} else {
svg += `

`;
}

svg += “;
return svg;
}

// Télécharger le certificat en PDF
downloadCertificateButton.addEventListener(‘click’, function() {
const { jsPDF } = window.jspdf;
const certificatePreview = document.getElementById(‘certificatePreview’);
const prenom = document.getElementById(‘prenom’).value.trim();
const nom = document.getElementById(‘nom’).value.trim();

const pdf = new jsPDF(‘landscape’, ‘mm’, ‘a4’);

const options = {
width: 297,
height: 210
};

// Convertir l’élément en image et l’ajouter au PDF
html2canvas(certificatePreview).then(canvas => {
const imgData = canvas.toDataURL(‘image/png’);
pdf.addImage(imgData, ‘PNG’, 0, 0, options.width, options.height);
pdf.save(`certificat_${prenom}_${nom}.pdf`);
});
});

});