: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%px;
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);
}

.hidden {
display: none;
}

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

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

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

.btn {
background-color: var(–primary-color);
color: white;
border: none;
padding: 12px 20px;
border-radius: var(–border-radius);
cursor: pointer;
font-size: 16px;
transition: var(–transition);
margin-right: 10px;
}

.btn:disabled {
background-color: #a0a0a0;
cursor: not-allowed;
}

.btn:hover:not(:disabled) {
background-color: #3a5a8a;
}

#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;
text-align: center;
}

.choice:hover {
background-color: #e9e9e9;
}

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

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

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

#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: 0;
transition: width 0.5s ease;
}

#category {
text-align: center;
margin-bottom: 15px;
font-weight: bold;
color: var(–primary-color);
}

#question {
text-align: center;
margin-bottom: 20px;
font-size: 1.2em;
}

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

const quizQuestions = [
// Fruits Section
{
question: “Quel fruit est long et jaune ?”,
choices: [“Pomme”, “Fraise”, “Banane”, “Cerise”],
correct: 2
},
{
question: “Quel fruit a une peau veloutée et est de couleur brune ?”,
choices: [“Ananas”, “Kiwi”, “Orange”, “Citron”],
correct: 1
},
{
question: “Quel fruit est rond et de couleur rouge, très utilisé en salade ?”,
choices: [“Poire”, “Framboise”, “Tomate”, “Mangue”],
correct: 2
},
{
question: “Quel fruit a une forme en croissant et pousse en régime ?”,
choices: [“Raisin”, “Figue”, “Banane”, “Abricot”],
correct: 2
},
{
question: “Quel fruit est connu pour être très acidulé et riche en vitamine C ?”,
choices: [“Pêche”, “Citron”, “Melon”, “Fraise”],
correct: 1
},
// Vegetables Section
{
question: “Quel légume est long, orange et souvent utilisé dans les soupes ?”,
choices: [“Poivron”, “Carotte”, “Concombre”, “Betterave”],
correct: 1
},
{
question: “Quel légume vert est souvent utilisé dans les salades ?”,
choices: [“Brocoli”, “Laitue”, “Aubergine”, “Radis”],
correct: 1
},
{
question: “Quel légume est utilisé pour faire de la purée ?”,
choices: [“Tomate”, “Haricot”, “Pomme de terre”, “Courgette”],
correct: 2
},
{
question: “Quel légume a une forme ronde et est souvent utilisé pour faire des sauces ?”,
choices: [“Poivron”, “Oignon”, “Céleri”, “Épinard”],
correct: 1
},
{
question: “Quel légume est violet et souvent grillé en cuisine méditerranéenne ?”,
choices: [“Courgette”, “Carotte”, “Aubergine”, “Navet”],
correct: 2
},
// Meat Section
{
question: “Quelle viande provient d’un bovin adulte ?”,
choices: [“Poulet”, “Agneau”, “Bœuf”, “Porc”],
correct: 2
},
{
question: “Quelle viande est souvent utilisée pour faire du rôti ?”,
choices: [“Veau”, “Poulet”, “Canard”, “Dinde”],
correct: 0
},
{
question: “Quelle viande est la plus consommée dans le monde ?”,
choices: [“Bœuf”, “Agneau”, “Poulet”, “Porc”],
correct: 3
},
{
question: “Quel type de viande est utilisé pour faire le fameux “cordon bleu” ?”,
choices: [“Bœuf”, “Porc”, “Poulet”, “Agneau”],
correct: 2
},
{
question: “Quelle viande est souvent associée aux grillades ?”,
choices: [“Veau”, “Agneau”, “Poulet”, “Porc”],
correct: 3
},
// Seafood Section
{
question: “Quel fruit de mer a une coquille et est souvent servi dans des plateaux de fruits de mer ?”,
choices: [“Crevette”, “Moule”, “Calmar”, “Oursin”],
correct: 1
},
{
question: “Quel poisson est souvent fumé et servi au petit-déjeuner ?”,
choices: [“Thon”, “Sardine”, “Saumon”, “Merlan”],
correct: 2
},
{
question: “Quel crustacé a une carapace rouge après cuisson ?”,
choices: [“Crabe”, “Crevette”, “Homard”, “Langouste”],
correct: 2
},
{
question: “Quel mollusque est utilisé dans la célèbre recette des “escargots de Bourgogne” ?”,
choices: [“Moule”, “Palourde”, “Escargot”, “Poulpe”],
correct: 2
},
{
question: “Quel fruit de mer est souvent utilisé dans la paella ?”,
choices: [“Crabe”, “Crevette”, “Moule”, “Calmar”],
correct: 1
},
// Dairy Products Section
{
question: “Quel produit laitier est blanc et crémeux ?”,
choices: [“Beurre”, “Fromage”, “Yaourt”, “Crème fraîche”],
correct: 3
},
{
question: “Quel fromage français est célèbre pour son goût fort ?”,
choices: [“Camembert”, “Emmental”, “Roquefort”, “Comté”],
correct: 2
},
{
question: “Quel produit est obtenu en faisant fermenter du lait ?”,
choices: [“Lait”, “Beurre”, “Yaourt”, “Crème”],
correct: 2
},
{
question: “Quel produit laitier est utilisé pour faire des gâteaux ?”,
choices: [“Yaourt”, “Crème”, “Lait”, “Fromage blanc”],
correct: 2
},
{
question: “Quel produit est souvent étalé sur du pain au petit-déjeuner ?”,
choices: [“Fromage”, “Beurre”, “Crème”, “Yaourt”],
correct: 1
},
// Drinks Section
{
question: “Quelle boisson est faite à partir de grains torréfiés ?”,
choices: [“Thé”, “Café”, “Chocolat chaud”, “Jus de fruit”],
correct: 1
},
{
question: “Quelle boisson est obtenue par fermentation de raisins ?”,
choices: [“Cidre”, “Bière”, “Vin”, “Eau minérale”],
correct: 2
},
{
question: “Quelle boisson est souvent servie chaude le matin ?”,
choices: [“Jus d’orange”, “Café”, “Soda”, “Eau gazeuse”],
correct: 1
},
{
question: “Quelle boisson est préparée avec des feuilles infusées ?”,
choices: [“Café”, “Jus de pomme”, “Thé”, “Lait”],
correct: 2
},
{
question: “Quelle boisson est souvent consommée glacée en été ?”,
choices: [“Vin”, “Thé”, “Limonade”, “Café”],
correct: 2
},
// General Food Section
{
question: “Quel aliment est un dessert sucré ?”,
choices: [“Poulet rôti”, “Tarte aux pommes”, “Salade verte”, “Steak”],
correct: 1
},
{
question: “Quel aliment est une source de protéines ?”,
choices: [“Pomme”, “Poisson”, “Concombre”, “Pain”],
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: “Quel aliment est typique d’un sandwich ?”,
choices: [“Riz”, “Fromage”, “Yaourt”, “Soupe”],
correct: 1
},
{
question: “Quel aliment est un condiment à base de tomates ?”,
choices: [“Mayonnaise”, “Moutarde”, “Ketchup”, “Vinaigre”],
correct: 2
},
// Grammar – Partitive Articles
{
question: “Complétez : Je bois ___ eau.”,
choices: [“du”, “de l'”, “des”, “le”],
correct: 1
},
{
question: “Choisissez l’article correct : Je mange ___ pain.”,
choices: [“du”, “de la”, “des”, “le”],
correct: 0
},
{
question: “Quelle phrase est correcte ?”,
choices: [“Je mange des fruit”, “Je mange de fruits”, “Je mange du fruits”, “Je mange des fruits”],
correct: 3
},
{
question: “Complétez : Nous prenons ___ café après le repas.”,
choices: [“du”, “de la”, “des”, “le”],
correct: 0
},
{
question: “Quel article partitif pour “musique” ?”,
choices: [“du”, “de la”, “des”, “le”],
correct: 1
},
// Grammar – Pronoun “en”
{
question: “Transformez : J’achète des pommes.”,
choices: [“J’en achète”, “Je les achète”, “J’achète en”, “Je en achète”],
correct: 0
},
{
question: “Quelle est la fonction du pronom ‘en’ dans : “J’en veux” ?”,
choices: [“Sujet”, “Complément d’objet direct”, “Complément de nom”, “Adverbe”],
correct: 1
},
{
question: “Complétez avec “en” : Je veux ___ chocolat.”,
choices: [“en”, “du”, “de”, “le”],
correct: 1
},
{
question: “Traduisez : “I want some” en utilisant “en”.”,
choices: [“J’en veux”, “Je veux”, “Je en veux”, “J’en ai”],
correct: 0
},
{
question: “Quelle phrase utilise correctement “en” ?”,
choices: [“J’achète des livres”, “J’en achète”, “Je achète en”, “Je en achète”],
correct: 1
},
// Grammar – Direct Object Pronouns (COD)
{
question: “Remplacez le COD : “Elle mange une salade.””,
choices: [“Elle la mange”, “Elle le mange”, “Elle lui mange”, “Elle en mange”],
correct: 0
},
{
question: “Dans “Je le mange”, quel est le genre du pronom ?”,
choices: [“Masculin”, “Féminin”, “Neutre”, “Pluriel”],
correct: 0
},
{
question: “Choisissez le bon pronom COD : “Je ___ vois.” (en parlant d’une pomme)”,
choices: [“la”, “le”, “les”, “lui”],
correct: 0
},
{
question: “Quelle phrase est correcte ?”,
choices: [“Il les a acheté”, “Il a les acheté”, “Il a acheté les”, “Il les a achetés”],
correct: 3
},
{
question: “Transformez : “Je mange les pommes.””,
choices: [“Je les mange”, “Je en mange”, “Je le mange”, “Je lui mange”],
correct: 0
},
// Cooking Verbs
{
question: “Comment dit-on “to cut” en français ?”,
choices: [“Couper”, “Hacher”, “Mélanger”, “Cuire”],
correct: 0
},
{
question: “Quel verbe signifie “to cook”?”,
choices: [“Cuire”, “Rôtir”, “Griller”, “Bouillir”],
correct: 0
},
{
question: “Comment dit-on “to mix” ?”,
choices: [“Battre”, “Fouetter”, “Mélanger”, “Brasser”],
correct: 2
},
{
question: “Quel verbe signifie “to fry”?”,
choices: [“Frire”, “Rôtir”, “Griller”, “Bouillir”],
correct: 0
},
{
question: “Comment dit-on “to grill” ?”,
choices: [“Cuire”, “Rôtir”, “Griller”, “Frire”],
correct: 2
}
];

let currentQuestion = 0;
let score = 0;
let mode = ‘learn’;
const questions = quizQuestions.map(q => ({
…q,
category: q.question.includes(‘Fruits’) ? ‘Fruits’ :
q.question.includes(‘légume’) ? ‘Légumes’ :
q.question.includes(‘viande’) ? ‘Viandes’ :
q.question.includes(‘fruit de mer’) ? ‘Fruits de Mer’ :
q.question.includes(‘produit laitier’) ? ‘Produits Laitiers’ :
q.question.includes(‘boisson’) ? ‘Boissons’ :
q.question.includes(‘gramm’) ? ‘Grammaire’ :
‘Général’
}));

const elements = {
welcomeScreen: document.getElementById(‘welcome-screen’),
quizContent: document.getElementById(‘quiz-content’),
resultsScreen: document.getElementById(‘results’),
startBtn: document.getElementById(‘start-btn’),
studentNameInput: document.getElementById(‘student-name’),
studyModeSelect: document.getElementById(‘study-mode’),
categoryElement: document.getElementById(‘category’),
questionElement: document.getElementById(‘question’),
choicesElement: document.getElementById(‘choices’),
checkBtn: document.getElementById(‘check-btn’),
prevBtn: document.getElementById(‘prev-btn’),
nextBtn: document.getElementById(‘next-btn’),
progressBar: document.getElementById(‘progress-bar’),
restartBtn: document.getElementById(‘restart-btn’)
};

function initializeEventListeners() {
elements.startBtn.addEventListener(‘click’, startStudy);
elements.checkBtn.addEventListener(‘click’, checkAnswer);
elements.prevBtn.addEventListener(‘click’, goToPreviousQuestion);
elements.nextBtn.addEventListener(‘click’, goToNextQuestion);
elements.restartBtn.addEventListener(‘click’, restartStudy);
}

function startStudy() {
if (elements.studentNameInput.value.trim() === “”) {
alert(“Veuillez entrer votre nom”);
return;
}

mode = elements.studyModeSelect.value;
elements.welcomeScreen.classList.add(‘hidden’);
elements.quizContent.classList.remove(‘hidden’);
currentQuestion = 0;
score = 0;
loadQuestion();
}

function loadQuestion() {
const q = questions[currentQuestion];
elements.categoryElement.textContent = `Catégorie : ${q.category}`;
elements.questionElement.textContent = q.question;

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

// Reset previous answer states
const choices = document.querySelectorAll(“.choice”);
choices.forEach(choice => {
choice.classList.remove(“selected”, “correct”, “incorrect”);
});

updateNavigationButtons();
updateProgressBar();
elements.checkBtn.textContent = mode === ‘learn’ ? ‘Explication’ : ‘Vérifier’;
}

function updateNavigationButtons() {
elements.prevBtn.disabled = currentQuestion === 0;
elements.nextBtn.textContent = currentQuestion === questions.length – 1 ? ‘Terminer’ : ‘Suivant’;
}

function updateProgressBar() {
const progressPercentage = ((currentQuestion + 1) / questions.length) * 100;
elements.progressBar.style.width = `${progressPercentage}%`;
}

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

function checkAnswer() {
const q = questions[currentQuestion];
const choices = document.querySelectorAll(“.choice”);
const selectedChoice = document.querySelector(“.choice.selected”);

if (!selectedChoice) {
alert(“Sélectionnez une réponse”);
return;
}

if (mode === ‘learn’) {
// In the original code, there was no explanation field, so we’ll just show a generic message
alert(“In learning mode, you would see an explanation here.”);
return;
}

const selectedIndex = Array.from(choices).indexOf(selectedChoice);

choices.forEach((choice, index) => {
choice.classList.remove(“selected”);
if (index === q.correct) {
choice.classList.add(“correct”);
} else if (index === selectedIndex) {
choice.classList.add(“incorrect”);
}
});

if (selectedIndex === q.correct) {
score += 1.82;
}
}

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

function goToNextQuestion() {
if (currentQuestion = 80) {
feedback.textContent = “Excellent ! Continuez à réviser.”;
feedback.style.color = “green”;
} else if (score >= 50) {
feedback.textContent = “Bon travail, mais il y a encore de la marge.”;
feedback.style.color = “orange”;
} else {
feedback.textContent = “Continuez à apprendre et à vous entraîner.”;
feedback.style.color = “red”;
}
}

function restartStudy() {
elements.resultsScreen.classList.add(‘hidden’);
elements.welcomeScreen.classList.remove(‘hidden’);
elements.studentNameInput.value = ”;
}

initializeEventListeners();