: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;
}

#timer {
font-size: 1.2em;
text-align: center;
margin-bottom: 15px;
font-weight: bold;
color: var(–dark-color);
}

// Questions de l’évaluation
const questions = [
{
question: “Quel fruit est jaune et courbé ?”,
choices: [“Fraise”, “Banane”, “Cerise”, “Raisin”],
correct: 1
},
{
question: “Quel légume sert à faire de la purée ?”,
choices: [“Carotte”, “Poivron”, “Pomme de terre”, “Concombre”],
correct: 2
},
{
question: “Quel fruit est acide et riche en vitamine C ?”,
choices: [“Pêche”, “Citron”, “Figue”, “Pastèque”],
correct: 1
},
{
question: “Quel légume est utilisé pour le guacamole ?”,
choices: [“Poireau”, “Brocoli”, “Avocat”, “Betterave”],
correct: 2
},
{
question: “Quel est un produit laitier ?”,
choices: [“Pain”, “Riz”, “Beurre”, “Miel”],
correct: 2
},
{
question: “Quel fruit de mer a une coquille ?”,
choices: [“Crevette”, “Calmar”, “Escargot”, “Moule”],
correct: 3
},
{
question: “Quelle viande utilise-t-on pour un rôti de bœuf ?”,
choices: [“Agneau”, “Porc”, “Veau”, “Bœuf”],
correct: 3
},
{
question: “Quel aliment est fabriqué avec du lait ?”,
choices: [“Fromage”, “Farine”, “Jambon”, “Riz”],
correct: 0
},
{
question: “Quel poisson est souvent consommé fumé ?”,
choices: [“Saumon”, “Thon”, “Sardine”, “Merlan”],
correct: 0
},
{
question: “Quel fruit est vert et a des poils ?”,
choices: [“Pomme”, “Poire”, “Banane”, “Kiwi”],
correct: 3
},
{
question: “Quelle boisson est chaude et contient de la caféine ?”,
choices: [“Limonade”, “Café”, “Jus d’orange”, “Eau minérale”],
correct: 1
},
{
question: “Quel aliment est souvent consommé au petit-déjeuner avec du lait ?”,
choices: [“Pâtes”, “Céréales”, “Haricots”, “Poisson”],
correct: 1
},
{
question: “Quelle boisson est faite à partir de raisins fermentés ?”,
choices: [“Eau”, “Vin”, “Thé”, “Lait”],
correct: 1
},
{
question: “Quel aliment est une source de protéines ?”,
choices: [“Poisson”, “Pomme”, “Concombre”, “Chocolat”],
correct: 0
},
{
question: “Quelle boisson est souvent consommée au petit-déjeuner ?”,
choices: [“Jus d’orange”, “Soda”, “Eau gazeuse”, “Vin”],
correct: 0
},
{
question: “Quel aliment est typique d’un sandwich ?”,
choices: [“Riz”, “Fromage”, “Yaourt”, “Soupe”],
correct: 1
},
{
question: “Quelle boisson est fabriquée à partir de fruits pressés ?”,
choices: [“Lait”, “Jus de fruits”, “Soda”, “Café”],
correct: 1
},
{
question: “Quel aliment est un dessert sucré ?”,
choices: [“Tarte aux pommes”, “Poulet rôti”, “Salade verte”, “Poisson grillé”],
correct: 0
},
{
question: “Quelle boisson est préparée avec des feuilles infusées ?”,
choices: [“Jus de raisin”, “Thé”, “Lait de soja”, “Eau plate”],
correct: 1
},
{
question: “Quel aliment est souvent utilisé pour faire du yaourt ?”,
choices: [“Lait”, “Riz”, “Pommes de terre”, “Carottes”],
correct: 0
},
{
question: “Comment appelle-t-on l’action de couper des légumes en petits morceaux ?”,
choices: [“Mélanger”, “Hacher”, “Cuire”, “Éplucher”],
correct: 1
},
{
question: “Que fait-on lorsqu’on fait chauffer un liquide à une température élevée ?”,
choices: [“Rôtir”, “Bouillir”, “Griller”, “Frire”],
correct: 1
},
{
question: “Comment appelle-t-on l’action de mettre un plat dans le four pour le cuire ?”,
choices: [“Laver”, “Cuire”, “Mélanger”, “Fouetter”],
correct: 1
},
{
question: “Comment prépare-t-on une pâte en battant des œufs et du sucre ?”,
choices: [“Battre”, “Moudre”, “Couper”, “Découper”],
correct: 0
},
{
question: “Comment appelle-t-on l’action de cuire rapidement dans une petite quantité de matière grasse ?”,
choices: [“Frire”, “Rôtir”, “Pocher”, “Griller”],
correct: 0
},
{
question: “Comment appelle-t-on l’action d’enlever la peau d’un fruit ou d’un légume ?”,
choices: [“Peler”, “Hacher”, “Mélanger”, “Assaisonner”],
correct: 0
},
{
question: “Que fait-on pour rendre un plat plus savoureux ?”,
choices: [“Saler”, “Cuire”, “Moudre”, “Mélanger”],
correct: 0
},
{
question: “Comment appelle-t-on l’action de cuire dans un liquide à une température inférieure à l’ébullition ?”,
choices: [“Pocher”, “Griller”, “Bouillir”, “Rôtir”],
correct: 0
},
{
question: “Comment appelle-t-on l’action de faire cuire sur une grille ?”,
choices: [“Cuire”, “Griller”, “Bouillir”, “Pocher”],
correct: 1
},
{
question: “Comment appelle-t-on l’action de mélanger des ingrédients de manière énergique pour incorporer de l’air ?”,
choices: [“Fouetter”, “Rôtir”, “Éplucher”, “Cuire”],
correct: 0
},
{
question: “Complétez la phrase avec l’article partitif correct : Je mange ___ pain au petit-déjeuner.”,
choices: [“du”, “de la”, “des”, “le”],
correct: 0
},
{
question: “Quelle phrase est correcte ?”,
choices: [“Elle boit de l’eau.”, “Elle boit de la eau.”, “Elle boit du eau.”, “Elle boit le eau.”],
correct: 0
},
{
question: “Transformez la phrase en utilisant ‘en’ : Je veux du chocolat.”,
choices: [“J’en veux.”, “Je veux en.”, “J’en veux du.”, “En je veux.”],
correct: 0
},
{
question: “Quelle est la fonction du pronom ‘en’ dans cette phrase : ‘J’en ai acheté’ ?”,
choices: [“Complément d’objet direct”, “Complément d’objet indirect”, “Sujet”, “Verbe”],
correct: 0
},
{
question: “Quelle phrase est incorrecte ?”,
choices: [“Il a acheté des pommes.”, “Il en a acheté.”, “Il les a acheté.”, “Il a acheté du lait.”],
correct: 2
},
{
question: “Remplacez le complément d’objet direct par un pronom : ‘Il mange la pomme.'”,
choices: [“Il le mange.”, “Il la mange.”, “Il en mange.”, “Il lui mange.”],
correct: 1
},
{
question: “Complétez avec l’article partitif approprié : Nous prenons ___ café après le repas.”,
choices: [“du”, “de la”, “des”, “le”],
correct: 0
},
{
question: “Transformez la phrase avec ‘en’ : ‘Elle a des bonbons.'”,
choices: [“Elle les a.”, “Elle a en.”, “Elle en a.”, “En elle a.”],
correct: 2
},
{
question: “Quelle phrase est correcte ?”,
choices: [“J’achète du légumes.”, “J’achète des légumes.”, “J’achète de les légumes.”, “J’achète la légumes.”],
correct: 1
},
{
question: “Complétez la phrase : Il adore ___ musique classique.”,
choices: [“du”, “de la”, “des”, “le”],
correct: 1
}
];

// Variables globales
let currentQuestion = 0;
let score = 0;
let answered = Array(questions.length).fill(false);
let selectedChoices = Array(questions.length).fill(-1);
let timerInterval;
let secondsRemaining = 3600; // 60 minutes

// Éléments 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 progressBar = document.getElementById(“progress-bar”);
const questionElement = document.getElementById(“question”);
const choicesElement = document.getElementById(“choices”);
const prevBtn = document.getElementById(“prev-btn”);
const nextBtn = document.getElementById(“next-btn”);
const checkBtn = document.getElementById(“check-btn”);
const timerElement = document.getElementById(“timer”);
const resultNameElement = document.getElementById(“result-name”);
const resultDateElement = document.getElementById(“result-date”);
const scoreElement = document.getElementById(“score”);
const feedbackElement = document.getElementById(“feedback”);
const retryBtn = document.getElementById(“retry-btn”);
const downloadPdfBtn = document.getElementById(“download-pdf-btn”);
const shareBtn = document.getElementById(“share-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;

// Gestionnaires d’événements
startBtn.addEventListener(“click”, startQuiz);
prevBtn.addEventListener(“click”, goToPreviousQuestion);
nextBtn.addEventListener(“click”, goToNextQuestion);
checkBtn.addEventListener(“click”, checkAnswer);
retryBtn.addEventListener(“click”, resetQuiz);
document.getElementById(“download-pdf-btn”).addEventListener(“click”, downloadPDF); // Correction ici
document.getElementById(“download-img-btn”).addEventListener(“click”, shareResults); // Correction ici

// Initialisation
function startQuiz() {
if (studentNameInput.value.trim() === “”) {
alert(“Veuillez entrer votre nom pour commencer.”);
return;
}

welcomeScreen.classList.add(“hidden”);
quizContent.classList.remove(“hidden”);

startTimer();
loadQuestion();
updateProgressBar();

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

function loadQuestion() {
const q = questions[currentQuestion];
questionElement.textContent = q.question;

choicesElement.innerHTML = “”;
q.choices.forEach((choice, index) => {
const choiceDiv = document.createElement(“div”);
choiceDiv.className = “choice”;
choiceDiv.textContent = choice;

if (selectedChoices[currentQuestion] === index) {
choiceDiv.classList.add(“selected”);
}

choiceDiv.addEventListener(“click”, () => selectChoice(index));
choicesElement.appendChild(choiceDiv);
});

prevBtn.disabled = currentQuestion === 0;
checkBtn.disabled = selectedChoices[currentQuestion] === -1;
nextBtn.disabled = currentQuestion === questions.length – 1;
}

function selectChoice(index) {
const choices = document.querySelectorAll(“.choice”);
choices.forEach(choice => choice.classList.remove(“selected”));
choices[index].classList.add(“selected”);

selectedChoices[currentQuestion] = index;
checkBtn.disabled = false;
}

function checkAnswer() {
const correctIndex = questions[currentQuestion].correct;
const selectedIndex = selectedChoices[currentQuestion];

if (!answered[currentQuestion] && selectedIndex === correctIndex) {
score += 2.5; // 40 questions à 2.5 points chacune
}

const choices = document.querySelectorAll(“.choice”);
choices.forEach((choice, index) => {
if (index === correctIndex) {
choice.classList.add(“correct”);
} else if (index === selectedIndex && index !== correctIndex) {
choice.classList.add(“incorrect”);
}
});

answered[currentQuestion] = true;
checkBtn.disabled = true;

if (allQuestionsAnswered()) {
setTimeout(showResults, 1500);
}
}

function goToPreviousQuestion() {
if (currentQuestion > 0) {
currentQuestion–;
loadQuestion();
updateProgressBar();
}
}

function goToNextQuestion() {
if (currentQuestion {
secondsRemaining–;

if (secondsRemaining a === true);
}

function showResults() {
clearInterval(timerInterval);

quizContent.classList.add(“hidden”);
resultsScreen.classList.remove(“hidden”);

resultNameElement.textContent = studentNameInput.value;
resultDateElement.textContent = new Date().toLocaleDateString();
scoreElement.textContent = score;

// Définir le feedback selon le score
if (score >= 80) {
feedbackElement.textContent = “Excellent! Vous maîtrisez parfaitement le vocabulaire des aliments en français !”;
feedbackElement.className = “feedback excellent”;
} else if (score >= 60) {
feedbackElement.textContent = “Bon travail ! Vous avez de bonnes connaissances en gastronomie.”;
feedbackElement.className = “feedback good”;
} else {
feedbackElement.textContent = “Continuez à pratiquer pour améliorer vos connaissances culinaires.”;
feedbackElement.className = “feedback needs-improvement”;
}
}

function resetQuiz() {
currentQuestion = 0;
score = 0;
answered = Array(questions.length).fill(false);
selectedChoices = Array(questions.length).fill(-1);
secondsRemaining = 3600;

welcomeScreen.classList.remove(“hidden”);
resultsScreen.classList.add(“hidden”);
}

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

// Créer un nouveau document PDF directement sans html2canvas
const { jsPDF } = window.jspdf;
const pdf = new 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} / 100`, 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;
}

function shareResults() {
// Logique pour partager les résultats
const message = `J’ai obtenu un score de ${score}/100 sur l’évaluation “Un vrai cordon bleu” !`;

if (navigator.share) {
navigator.share({
title: “Résultats d’évaluation de gastronomie”,
text: message,
}).catch(err => {
console.error(“Erreur lors du partage:”, err);
});
} else {
alert(“Le partage n’est pas disponible sur votre navigateur.”);
}
}