Quiz de vocabulaire des professions

:root {
–primary-color: #4A6FA5;
–secondary-color: #47B39D;
–accent-color: #FFB347;
–danger-color: #e74c3c;
–success-color: #2ecc71;
–light-color: #f9f9f9;
–dark-color: #2c3e50;
–shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
–border-radius: 8px;
–transition: all 0.3s ease;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: ‘Roboto’, ‘Arial’, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background-color: var(–light-color);
color: var(–dark-color);
line-height: 1.6;
}

.container {
background-color: white;
border-radius: var(–border-radius);
padding: 30px;
box-shadow: var(–shadow);
}

h1, h2, h3 {
color: var(–primary-color);
text-align: center;
margin-bottom: 20px;
}

h1 {
font-size: 2.2em;
margin-bottom: 30px;
position: relative;
}

h1:after {
content: “”;
display: block;
width: 80px;
height: 4px;
background: var(–secondary-color);
margin: 15px auto 0;
border-radius: 2px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}

input[type=”text”] {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: var(–border-radius);
font-size: 16px;
transition: var(–transition);
}

input[type=”text”]:focus {
border-color: var(–primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
}

.center {
text-align: center;
margin-top: 30px;
}

.btn {
background-color: var(–primary-color);
color: white;
border: none;
padding: 12px 20px;
border-radius: var(–border-radius);
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: var(–transition);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 150px;
}

.btn:hover {
background-color: #3a5a8a;
transform: translateY(-2px);
}

.btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
transform: none;
}

.btn-secondary {
background-color: var(–secondary-color);
}

.btn-secondary:hover {
background-color: #3a9d83;
}

.btn-accent {
background-color: var(–accent-color);
}

.btn-accent:hover {
background-color: #e5a03d;
}

.btn svg {
margin-right: 8px;
}

.hidden {
display: none;
}

#progress-container {
height: 10px;
background-color: #e0e0e0;
border-radius: 5px;
margin-bottom: 30px;
overflow: hidden;
}

#progress-bar {
height: 100%;
background-color: var(–secondary-color);
width: 10%;
transition: width 0.5s ease;
}

#question {
font-size: 1.3em;
margin-bottom: 25px;
line-height: 1.5;
font-weight: 500;
}

#choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 30px;
}

.choice {
background-color: #f5f5f5;
padding: 15px;
border-radius: var(–border-radius);
cursor: pointer;
transition: var(–transition);
border: 2px solid transparent;
font-weight: 500;
}

.choice:hover {
background-color: #e9e9e9;
transform: translateY(-2px);
}

.choice.selected {
background-color: var(–primary-color);
color: white;
border-color: var(–primary-color);
}

.choice.correct {
background-color: var(–success-color);
color: white;
border-color: var(–success-color);
}

.choice.incorrect {
background-color: var(–danger-color);
color: white;
border-color: var(–danger-color);
}

.navigation {
display: flex;
justify-content: space-between;
margin-top: 30px;
}

#results {
text-align: center;
}

#result-card {
background-color: white;
border-radius: var(–border-radius);
padding: 30px;
margin: 20px auto;
max-width: 600px;
box-shadow: var(–shadow);
border: 2px solid #e0e0e0;
}

#result-card h3 {
font-size: 1.8em;
margin-bottom: 25px;
color: var(–primary-color);
text-transform: uppercase;
letter-spacing: 1px;
}

#result-card p {
font-size: 1.2em;
margin-bottom: 15px;
}

#result-card .score {
font-size: 2em;
font-weight: bold;
margin: 20px 0;
color: var(–dark-color);
}

.feedback {
margin: 25px 0;
padding: 15px;
border-radius: var(–border-radius);
font-size: 1.1em;
}

.feedback.excellent {
background-color: rgba(46, 204, 113, 0.1);
color: #27ae60;
border-left: 4px solid #27ae60;
}

.feedback.good {
background-color: rgba(255, 179, 71, 0.1);
color: #f39c12;
border-left: 4px solid #f39c12;
}

.feedback.needs-improvement {
background-color: rgba(231, 76, 60, 0.1);
color: #c0392b;
border-left: 4px solid #c0392b;
}

.result-actions {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}

.badge {
position: absolute;
top: -10px;
right: -10px;
background-color: var(–accent-color);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2em;
box-shadow: var(–shadow);
}

.checkbox-wrapper {
display: flex;
align-items: center;
margin-top: 15px;
}

.checkbox-wrapper input[type=”checkbox”] {
margin-right: 10px;
width: 18px;
height: 18px;
}

@media (max-width: 650px) {
#choices {
grid-template-columns: 1fr;
}

.result-actions {
flex-direction: column;
align-items: center;
}

.navigation {
flex-direction: column;
gap: 10px;
}

.navigation button {
width: 100%;
}
}

/* Animation d’apparition */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.container, #result-card {
animation: fadeIn 0.5s ease-out forwards;
}

document.addEventListener(‘DOMContentLoaded’, function() {
// Questions du quiz
const questions = [
{
question: “Quelle est la profession de la personne qui soigne les malades à l’hôpital?”,
choices: [“Un médecin”, “Une infirmière”, “Un pharmacien”, “Un dentiste”],
correct: 1
},
{
question: “Qui enseigne aux élèves dans une école?”,
choices: [“Un professeur”, “Un avocat”, “Un architecte”, “Un journaliste”],
correct: 0
},
{
question: “Qui prépare et vend des médicaments?”,
choices: [“Un médecin”, “Un vétérinaire”, “Un pharmacien”, “Un chimiste”],
correct: 2
},
{
question: “Quelle est la profession de la personne qui défend les accusés au tribunal?”,
choices: [“Un juge”, “Un avocat”, “Un policier”, “Un notaire”],
correct: 1
},
{
question: “Qui répare les voitures en panne?”,
choices: [“Un plombier”, “Un électricien”, “Un garagiste”, “Un menuisier”],
correct: 2
},
{
question: “Qui conçoit les plans des bâtiments et des maisons?”,
choices: [“Un ingénieur”, “Un maçon”, “Un architecte”, “Un décorateur”],
correct: 2
},
{
question: “Qui fait le pain et les pâtisseries?”,
choices: [“Un cuisinier”, “Un boulanger”, “Un serveur”, “Un boucher”],
correct: 1
},
{
question: “Quelle est la profession de la personne qui coupe et coiffe les cheveux?”,
choices: [“Un esthéticien”, “Un maquilleur”, “Un coiffeur”, “Un styliste”],
correct: 2
},
{
question: “Qui écrit des articles pour les journaux et les magazines?”,
choices: [“Un écrivain”, “Un journaliste”, “Un éditeur”, “Un rédacteur”],
correct: 1
},
{
question: “Qui vend des produits dans un magasin?”,
choices: [“Un vendeur”, “Un client”, “Un caissier”, “Un manager”],
correct: 0
}
];

// Variables globales
let currentQuestion = 0;
let score = 0;
let answered = false;
let userAnswers = Array(questions.length).fill(null);

// Éléments du DOM
const welcomeScreen = document.getElementById(‘welcome-screen’);
const quizContent = document.getElementById(‘quiz-content’);
const resultsScreen = document.getElementById(‘results’);
const startBtn = document.getElementById(‘start-btn’);
const studentNameInput = document.getElementById(‘student-name’);
const questionEl = document.getElementById(‘question’);
const choicesEl = document.getElementById(‘choices’);
const progressBar = document.getElementById(‘progress-bar’);
const prevBtn = document.getElementById(‘prev-btn’);
const nextBtn = document.getElementById(‘next-btn’);
const checkBtn = document.getElementById(‘check-btn’);
const soundToggle = document.getElementById(‘sound-toggle’);

// Musique de fond
const bgMusic = new Audio(‘https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3’);
bgMusic.loop = true;

// Résultats
const resultNameEl = document.getElementById(‘result-name’);
const resultDateEl = document.getElementById(‘result-date’);
const scoreEl = document.getElementById(‘score’);
const feedbackEl = document.getElementById(‘feedback’);
const retryBtn = document.getElementById(‘retry-btn’);
const downloadPdfBtn = document.getElementById(‘download-pdf-btn’);
const downloadImgBtn = document.getElementById(‘download-img-btn’);

// Initialisation
startBtn.addEventListener(‘click’, startQuiz);
prevBtn.addEventListener(‘click’, goToPrevQuestion);
nextBtn.addEventListener(‘click’, goToNextQuestion);
checkBtn.addEventListener(‘click’, checkAnswer);
retryBtn.addEventListener(‘click’, retryQuiz);
downloadPdfBtn.addEventListener(‘click’, downloadPDF);
downloadImgBtn.addEventListener(‘click’, downloadImage);

// Fonction pour commencer le quiz
function startQuiz() {
if (studentNameInput.value.trim() === ”) {
alert(‘Veuillez entrer votre nom’);
return;
}

welcomeScreen.classList.add(‘hidden’);
quizContent.classList.remove(‘hidden’);

if (soundToggle.checked) {
bgMusic.play().catch(e => console.log(‘Erreur audio:’, e));
}

loadQuestion(currentQuestion);
}

// Charger une question
function loadQuestion(index) {
answered = userAnswers[index] !== null;

questionEl.textContent = `${index + 1}. ${questions[index].question}`;

choicesEl.innerHTML = ”;
questions[index].choices.forEach((choice, i) => {
const choiceDiv = document.createElement(‘div’);
choiceDiv.className = ‘choice’;
choiceDiv.textContent = choice;
choiceDiv.dataset.index = i;

if (userAnswers[index] === i) {
choiceDiv.classList.add(‘selected’);
}

if (answered) {
if (i === questions[index].correct) {
choiceDiv.classList.add(‘correct’);
} else if (userAnswers[index] === i) {
choiceDiv.classList.add(‘incorrect’);
}
choiceDiv.style.pointerEvents = ‘none’;
} else {
choiceDiv.addEventListener(‘click’, selectChoice);
}

choicesEl.appendChild(choiceDiv);
});

// Mise à jour de la barre de progression
progressBar.style.width = `${(index + 1) * 10}%`;

// Mise à jour des boutons
prevBtn.disabled = index === 0;
nextBtn.disabled = index === questions.length – 1;
checkBtn.disabled = answered;
}

// Sélectionner une réponse
function selectChoice(e) {
const selectedIndex = parseInt(e.target.dataset.index);

// Supprimer la sélection précédente
const choices = choicesEl.querySelectorAll(‘.choice’);
choices.forEach(choice => choice.classList.remove(‘selected’));

// Ajouter la nouvelle sélection
e.target.classList.add(‘selected’);

// Mise à jour de la réponse sélectionnée
userAnswers[currentQuestion] = selectedIndex;

// Activer le bouton de vérification
checkBtn.disabled = false;
}

// Vérifier la réponse
function checkAnswer() {
if (userAnswers[currentQuestion] === null) {
alert(‘Veuillez sélectionner une réponse’);
return;
}

answered = true;

const choices = choicesEl.querySelectorAll(‘.choice’);
const correctIndex = questions[currentQuestion].correct;
const selectedIndex = userAnswers[currentQuestion];

// Afficher la réponse correcte et incorrecte
choices.forEach((choice, i) => {
if (i === correctIndex) {
choice.classList.add(‘correct’);
} else if (i === selectedIndex) {
choice.classList.add(‘incorrect’);
}
choice.style.pointerEvents = ‘none’;
});

// Désactiver le bouton de vérification
checkBtn.disabled = true;

// Vérifier si c’est correct
if (selectedIndex === correctIndex) {
score++;
}

// Si c’est la dernière question et on a répondu à toutes, afficher les résultats
if (currentQuestion === questions.length – 1) {
if (userAnswers.every(answer => answer !== null)) {
setTimeout(showResults, 1000);
}
}
}

// Aller à la question précédente
function goToPrevQuestion() {
if (currentQuestion > 0) {
currentQuestion–;
loadQuestion(currentQuestion);
}
}

// Aller à la question suivante
function goToNextQuestion() {
if (currentQuestion answer !== null)) {
showResults();
}
}

// Afficher les résultats
function showResults() {
quizContent.classList.add(‘hidden’);
resultsScreen.classList.remove(‘hidden’);

// Arrêter la musique
bgMusic.pause();

// Calculer le score final
scoreEl.textContent = score;
resultNameEl.textContent = studentNameInput.value;

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

// Feedback selon le score
let feedbackText = ”;
let feedbackClass = ”;

if (score >= 8) {
feedbackText = ‘Excellent! Vous maîtrisez parfaitement le vocabulaire des professions en français.’;
feedbackClass = ‘excellent’;
} else if (score >= 5) {
feedbackText = ‘Bon travail! Continuez à pratiquer pour améliorer vos connaissances.’;
feedbackClass = ‘good’;
} else {
feedbackText = ‘Continuez à pratiquer. Révisez le vocabulaire des professions pour améliorer votre score.’;
feedbackClass = ‘needs-improvement’;
}

feedbackEl.textContent = feedbackText;
feedbackEl.className = `feedback ${feedbackClass}`;
}

// Réessayer le quiz
function retryQuiz() {
currentQuestion = 0;
score = 0;
userAnswers = Array(questions.length).fill(null);

resultsScreen.classList.add(‘hidden’);
welcomeScreen.classList.remove(‘hidden’);
}

// Fonction pour télécharger les résultats en PDF
function downloadPDF() {
// Afficher un message de chargement
const originalBtnText = downloadPdfBtn.innerHTML;
downloadPdfBtn.innerHTML = ‘Génération en cours…’;
downloadPdfBtn.disabled = true;

// Créer un nouveau document PDF directement sans html2canvas
const pdf = new jspdf.jsPDF({
orientation: ‘landscape’,
unit: ‘mm’,
format: ‘a5’
});

// Récupérer les informations du certificat
const studentName = document.getElementById(‘result-name’).textContent;
const date = document.getElementById(‘result-date’).textContent;
const score = document.getElementById(‘score’).textContent;
const feedbackElement = document.getElementById(‘feedback’);
const feedbackText = feedbackElement.textContent;

// Déterminer le type de feedback pour la couleur
let feedbackColor = ‘#27ae60’; // vert par défaut (excellent)
if (feedbackElement.classList.contains(‘good’)) {
feedbackColor = ‘#f39c12’; // orange
} else if (feedbackElement.classList.contains(‘needs-improvement’)) {
feedbackColor = ‘#c0392b’; // rouge
}

// Ajouter le contenu au PDF manuellement
// Titres et en-têtes
pdf.setFontSize(22);
pdf.setTextColor(74, 111, 165); // var(–primary-color)
pdf.text(‘Certificat de Participation’, 105, 30, { align: ‘center’ });

// Ligne décorative
pdf.setDrawColor(71, 179, 157); // var(–secondary-color)
pdf.setLineWidth(0.5);
pdf.line(85, 35, 125, 35);

// Contenu principal
pdf.setFontSize(14);
pdf.setTextColor(44, 62, 80); // var(–dark-color)
pdf.text(‘Site : Aplenguas’, 40, 50);
pdf.text(`Nom : ${studentName}`, 40, 60);
pdf.text(`Date : ${date}`, 40, 70);

// Score
pdf.setFontSize(20);
pdf.text(`Score : ${score} / 10`, 105, 90, { align: ‘center’ });

// Feedback avec la bonne couleur
pdf.setFontSize(12);
pdf.setTextColor(feedbackColor);

// Ajouter un rectangle de fond pour le feedback
const feedbackY = 100;
const feedbackWidth = 150;
const feedbackHeight = 20;
pdf.setFillColor(feedbackColor.replace(‘#’, ”));
pdf.setDrawColor(feedbackColor);
pdf.setFillColor(240, 240, 240);
pdf.roundedRect(30, feedbackY, feedbackWidth, feedbackHeight, 3, 3, ‘FD’);

// Ajouter une bordure de couleur sur le côté gauche
pdf.setDrawColor(feedbackColor);
pdf.setLineWidth(2);
pdf.line(30, feedbackY, 30, feedbackY + feedbackHeight);

// Texte du feedback (avec gestion des lignes multiples)
pdf.setTextColor(60, 60, 60);
const splitFeedback = pdf.splitTextToSize(feedbackText, 140);
pdf.text(splitFeedback, 35, feedbackY + 10);

// Ajouter un bord décoratif au certificat
pdf.setDrawColor(74, 111, 165);
pdf.setLineWidth(1);
pdf.roundedRect(15, 15, 180, 120, 3, 3, ‘S’);

// Sauvegarder le PDF
pdf.save(`certificat_${studentNameInput.value.replace(/s+/g, ‘_’)}.pdf`);

// Restaurer le bouton
downloadPdfBtn.innerHTML = originalBtnText;
downloadPdfBtn.disabled = false;
}

// Fonction pour télécharger les résultats en image
function downloadImage() {
// Afficher un message de chargement
const originalBtnText = downloadImgBtn.innerHTML;
downloadImgBtn.innerHTML = ‘Génération en cours…’;
downloadImgBtn.disabled = true;

// Définir des dimensions fixes en respectant le ratio A5 paysage
const imgWidth = 1200; // Largeur fixe en pixels (haute résolution)
const imgHeight = 847; // Respecte le ratio A5 paysage (1:0.7)

// Créer une div temporaire avec des dimensions fixes
const tempDiv = document.createElement(‘div’);
tempDiv.style.width = `${imgWidth}px`;
tempDiv.style.height = `${imgHeight}px`;
tempDiv.style.position = ‘absolute’;
tempDiv.style.left = ‘-9999px’;
tempDiv.style.backgroundColor = ‘white’;
tempDiv.style.display = ‘flex’;
tempDiv.style.alignItems = ‘center’;
tempDiv.style.justifyContent = ‘center’;
// Réduire le padding pour maximiser l’espace utilisable
tempDiv.style.padding = ’10px’;
tempDiv.style.boxSizing = ‘border-box’;

// Cloner le contenu du certificat
const element = document.getElementById(‘result-card’);
const clone = element.cloneNode(true);

// Appliquer des styles spécifiques au clone pour un format paysage
clone.style.width = ‘100%’;
clone.style.height = ‘100%’;
clone.style.boxShadow = ‘0 4px 15px rgba(0, 0, 0, 0.1)’;
clone.style.border = ‘2px solid #e0e0e0’;
clone.style.borderRadius = ‘8px’;
clone.style.padding = ’25px 35px’; // Plus d’espace horizontal que vertical
clone.style.boxSizing = ‘border-box’;
clone.style.backgroundColor = ‘white’;
clone.style.display = ‘flex’;
clone.style.flexDirection = ‘column’;
clone.style.justifyContent = ‘space-between’;

// Réorganisation et styling des éléments pour format paysage
const contentWrapper = document.createElement(‘div’);
contentWrapper.style.display = ‘flex’;
contentWrapper.style.flexDirection = ‘row’; // Disposition horizontale
contentWrapper.style.justifyContent = ‘space-between’;
contentWrapper.style.alignItems = ‘stretch’;
contentWrapper.style.width = ‘100%’;
contentWrapper.style.flex = ‘1’;

// Section titre
const headerSection = document.createElement(‘div’);
headerSection.style.textAlign = ‘center’;
headerSection.style.width = ‘100%’;
headerSection.style.marginBottom = ’20px’;

// Déplacer le titre dans sa section
const titleElement = clone.querySelector(‘h3′);
if (titleElement) {
titleElement.style.fontSize = ’36px’;
titleElement.style.color = ‘#4A6FA5’;
titleElement.style.margin = ‘0 0 10px 0’;
headerSection.appendChild(titleElement.cloneNode(true));
titleElement.remove();
}

// Création d’une section gauche pour le texte principal
const leftSection = document.createElement(‘div’);
leftSection.style.flex = ‘3’; // Prend 3/5 de l’espace
leftSection.style.paddingRight = ’30px’;
leftSection.style.display = ‘flex’;
leftSection.style.flexDirection = ‘column’;
leftSection.style.justifyContent = ‘center’;

// Déplacer les paragraphes vers la section gauche
const paragraphs = clone.querySelectorAll(‘p’);
paragraphs.forEach(p => {
const pClone = p.cloneNode(true);
pClone.style.fontSize = ’22px’;
pClone.style.marginBottom = ’15px’;
pClone.style.lineHeight = ‘1.4’;
pClone.style.fontFamily = “‘Roboto’, ‘Arial’, sans-serif”;
pClone.style.textAlign = ‘left’;
leftSection.appendChild(pClone);
p.remove();
});

// Création d’une section droite pour le score et le feedback
const rightSection = document.createElement(‘div’);
rightSection.style.flex = ‘2’; // Prend 2/5 de l’espace
rightSection.style.display = ‘flex’;
rightSection.style.flexDirection = ‘column’;
rightSection.style.justifyContent = ‘center’;
rightSection.style.alignItems = ‘center’;
rightSection.style.borderLeft = ‘1px solid #e0e0e0′;
rightSection.style.paddingLeft = ’30px’;

// Déplacer le score vers la section droite
const scoreElement = clone.querySelector(‘.score’);
if (scoreElement) {
const scoreContainer = document.createElement(‘div’);
scoreContainer.style.textAlign = ‘center’;
scoreContainer.style.marginBottom = ’20px’;

const scoreLabel = document.createElement(‘div’);
scoreLabel.textContent = ‘SCORE’;
scoreLabel.style.fontSize = ’24px’;
scoreLabel.style.color = ‘#555’;
scoreLabel.style.marginBottom = ‘5px’;

const scoreClone = scoreElement.cloneNode(true);
scoreClone.style.fontSize = ’48px’;
scoreClone.style.fontWeight = ‘bold’;
scoreClone.style.color = ‘#4A6FA5’;

scoreContainer.appendChild(scoreLabel);
scoreContainer.appendChild(scoreClone);
rightSection.appendChild(scoreContainer);
scoreElement.remove();
}

// Déplacer le feedback vers la section droite
const feedbackElement = clone.querySelector(‘.feedback’);
if (feedbackElement) {
const feedbackClone = feedbackElement.cloneNode(true);
feedbackClone.style.width = ‘100%’;
feedbackClone.style.padding = ’20px’;
feedbackClone.style.borderRadius = ‘8px’;
feedbackClone.style.fontSize = ’20px’;
feedbackClone.style.textAlign = ‘center’;

// Appliquer les styles selon la classe
if (feedbackClone.classList.contains(‘excellent’)) {
feedbackClone.style.backgroundColor = ‘rgba(46, 204, 113, 0.1)’;
feedbackClone.style.color = ‘#27ae60’;
feedbackClone.style.borderLeft = ‘4px solid #27ae60’;
} else if (feedbackClone.classList.contains(‘good’)) {
feedbackClone.style.backgroundColor = ‘rgba(255, 179, 71, 0.1)’;
feedbackClone.style.color = ‘#f39c12’;
feedbackClone.style.borderLeft = ‘4px solid #f39c12’;
} else if (feedbackClone.classList.contains(‘needs-improvement’)) {
feedbackClone.style.backgroundColor = ‘rgba(231, 76, 60, 0.1)’;
feedbackClone.style.color = ‘#c0392b’;
feedbackClone.style.borderLeft = ‘4px solid #c0392b’;
}

rightSection.appendChild(feedbackClone);
feedbackElement.remove();
}

// Ajouter les sections au wrapper
contentWrapper.appendChild(leftSection);
contentWrapper.appendChild(rightSection);

// Vider le clone de son contenu actuel
while (clone.firstChild) {
clone.removeChild(clone.firstChild);
}

// Ajouter le header et le content wrapper au clone
clone.appendChild(headerSection);
clone.appendChild(contentWrapper);

// Ajouter un footer
const footerElement = document.createElement(‘div’);
footerElement.style.marginTop = ‘100%px’;
footerElement.style.textAlign = ‘center’;
footerElement.style.fontSize = ’16px’;
footerElement.style.color = ‘#777’;
footerElement.innerHTML = `

Certificat délivré le ${new Date().toLocaleDateString()}

`;
clone.appendChild(footerElement);

// Ajouter le clone à la div temporaire
tempDiv.appendChild(clone);
document.body.appendChild(tempDiv);

// Utiliser html2canvas avec des dimensions et options spécifiées
html2canvas(tempDiv, {
scale: 1,
width: imgWidth,
height: imgHeight,
useCORS: true,
allowTaint: true,
backgroundColor: “#ffffff”,
logging: false
}).then(canvas => {
// Convertir le canvas en PNG
const imgData = canvas.toDataURL(‘image/png’);

// Créer un lien de téléchargement
const link = document.createElement(‘a’);
link.download = `certificat_${studentNameInput.value.replace(/s+/g, ‘_’)}.png`;
link.href = imgData;
link.click();

// Nettoyer
document.body.removeChild(tempDiv);

// Restaurer le bouton
downloadImgBtn.innerHTML = originalBtnText;
downloadImgBtn.disabled = false;
}).catch(error => {
console.error(‘Erreur lors de la génération de l’image:’, error);
alert(‘Une erreur est survenue. Veuillez réessayer.’);
document.body.removeChild(tempDiv);
downloadImgBtn.innerHTML = originalBtnText;
downloadImgBtn.disabled = false;
});
}

});