body {
font-family: ‘Arial’, sans-serif;
line-height: 1.6;
max-width: 100%;
margin: 0 auto;
padding: 20px;
color: #333;
}

h1, h2 {
color: #0066cc;
text-align: center;
}

.intro {
background-color: #f0f8ff;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}

.question-container {
display: none;
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
}

.active {
display: block;
}

.options {
margin-top: 10px;
}

button {
background-color: #0066cc;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #004c99;
}

input[type=”text”] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}

.feedback {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
display: none;
}

.correct {
background-color: #dff0d8;
color: #3c763d;
}

.incorrect {
background-color: #f2dede;
color: #a94442;
}

.result-section {
display: none;
text-align: center;
margin-top: 20px;
}

.certificate {
border: 2px solid #0066cc;
padding: 20px;
margin-top: 20px;
text-align: center;
background-color: #f0f8ff;
display: none;
}

.progress-container {
width: 100%;
background-color: #ddd;
margin-bottom: 20px;
border-radius: 5px;
}

.progress-bar {
height: 20px;
background-color: #0066cc;
border-radius: 5px;
width: 0%;
text-align: center;
line-height: 20px;
color: white;
}

.controls {
display: flex;
justify-content: space-between;
margin-top: 15px;
}

// Les questions de l’évaluation
const questionsData = [
// Partie 1: Vocabulaire des transports publics
{
type: “qcm”,
question: “Quel moyen de transport public peut-on prendre pour voyager entre deux villes?”,
options: [“Un train”, “Une voiture personnelle”, “Un vélo”, “Un skateboard”],
correct: 0,
category: “Transport public”,
points: 2.5
},
{
type: “qcm”,
question: “Comment s’appelle le transport public qui circule sous terre dans les grandes villes?”,
options: [“Le taxi”, “Le bus”, “Le métro”, “Le tramway”],
correct: 2,
category: “Transport public”,
points: 2.5
},
{
type: “qcm”,
question: “Où peut-on prendre l’avion?”,
options: [“À la gare”, “À l’aéroport”, “Au port”, “À la station de bus”],
correct: 1,
category: “Transport public”,
points: 2.5
},
{
type: “qcm”,
question: “Quel document est nécessaire pour voyager en train?”,
options: [“Un permis de conduire”, “Un passeport”, “Un billet”, “Une carte d’identité”],
correct: 2,
category: “Transport public”,
points: 2.5
},
{
type: “text”,
question: “Comment s’appelle le moyen de transport public qui circule sur des rails dans la ville? (Commençant par T)”,
correct: “tramway”,
category: “Transport public”,
points: 2.5
},
{
type: “text”,
question: “Je vais à l’________ pour prendre l’avion.”,
correct: “aéroport”,
category: “Transport public”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Je prends le train à l’aéroport.”,
“Je prends l’avion à la gare.”,
“Je prends le métro à la station.”,
“Je prends le bateau à la boulangerie.”
],
correct: 2,
category: “Transport public”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Le bus arrive à la plage.”,
“Le train arrive à la gare.”,
“L’avion arrive à la piscine.”,
“Le métro arrive à la mer.”
],
correct: 1,
category: “Transport public”,
points: 2.5
},
{
type: “qcm”,
question: “Comment appelle-t-on la personne qui conduit un bus?”,
options: [“Un pilote”, “Un chauffeur”, “Un conducteur de train”, “Un capitaine”],
correct: 1,
category: “Transport public”,
points: 2.5
},
{
type: “text”,
question: “Pour aller à l’école, je prends le _____ qui passe près de chez moi.”,
correct: “bus”,
category: “Transport public”,
points: 2.5
},

// Partie 2: Vocabulaire des transports privés
{
type: “qcm”,
question: “Quel véhicule privé a deux roues et un moteur?”,
options: [“Une voiture”, “Un vélo”, “Une moto”, “Un bus”],
correct: 2,
category: “Transport privé”,
points: 2.5
},
{
type: “qcm”,
question: “Qu’est-ce qui est nécessaire pour conduire une voiture?”,
options: [“Un billet”, “Un permis de conduire”, “Un passeport”, “Une carte d’étudiant”],
correct: 1,
category: “Transport privé”,
points: 2.5
},
{
type: “text”,
question: “Ma _______ est garée dans le garage.”,
correct: “voiture”,
category: “Transport privé”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Je conduis mon train à l’école.”,
“Je conduis ma voiture au travail.”,
“Je conduis mon métro au parc.”,
“Je conduis mon avion à la plage.”
],
correct: 1,
category: “Transport privé”,
points: 2.5
},
{
type: “qcm”,
question: “Quel véhicule privé n’a pas de moteur?”,
options: [“Une voiture”, “Une moto”, “Un vélo”, “Un scooter”],
correct: 2,
category: “Transport privé”,
points: 2.5
},
{
type: “text”,
question: “Pour faire du sport, je préfère utiliser mon _____.”,
correct: “vélo”,
category: “Transport privé”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“J’achète de l’essence pour mon vélo.”,
“J’achète un billet pour ma voiture.”,
“J’achète de l’essence pour ma voiture.”,
“J’achète un ticket pour ma moto.”
],
correct: 2,
category: “Transport privé”,
points: 2.5
},
{
type: “qcm”,
question: “Qu’est-ce qui protège la tête quand on fait de la moto?”,
options: [“Des gants”, “Un casque”, “Des lunettes”, “Une écharpe”],
correct: 1,
category: “Transport privé”,
points: 2.5
},
{
type: “text”,
question: “Je mets ma _______ dans le garage pour la nuit.”,
correct: “voiture”,
category: “Transport privé”,
points: 2.5
},
{
type: “qcm”,
question: “Quel véhicule peut transporter toute la famille?”,
options: [“Une moto”, “Un vélo”, “Un scooter”, “Une voiture”],
correct: 3,
category: “Transport privé”,
points: 2.5
},

// Partie 3: Conjugaison des verbes du 1er groupe
{
type: “text”,
question: “Je _____ (voyager) en train.”,
correct: “voyage”,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “text”,
question: “Vous _____ (parler) français.”,
correct: “parlez”,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “text”,
question: “Nous _____ (visiter) Paris.”,
correct: “visitons”,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Tu parlent anglais.”,
“Tu parlez anglais.”,
“Tu parle anglais.”,
“Tu parles anglais.”
],
correct: 3,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Ils mangent au restaurant.”,
“Ils mange au restaurant.”,
“Ils manges au restaurant.”,
“Ils mangeons au restaurant.”
],
correct: 0,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “text”,
question: “Elle _____ (aimer) voyager en avion.”,
correct: “aime”,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “qcm”,
question: “Quelle est la bonne conjugaison du verbe ‘regarder’ à la première personne du pluriel?”,
options: [“regardons”, “regardez”, “regardent”, “regarde”],
correct: 0,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “qcm”,
question: “Quelle est la bonne conjugaison du verbe ‘réserver’ à la deuxième personne du singulier?”,
options: [“réserves”, “réservez”, “réserve”, “réservons”],
correct: 0,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Je monte dans le bus.”,
“Je montes dans le bus.”,
“Je montez dans le bus.”,
“Je montons dans le bus.”
],
correct: 0,
category: “Verbes 1er groupe”,
points: 2.5
},
{
type: “text”,
question: “Elles _____ (écouter) de la musique pendant le voyage.”,
correct: “écoutent”,
category: “Verbes 1er groupe”,
points: 2.5
},

// Partie 4: Conjugaison des verbes du 2ème groupe
{
type: “text”,
question: “Je _____ (finir) mes devoirs.”,
correct: “finis”,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “text”,
question: “Nous _____ (choisir) un hôtel.”,
correct: “choisissons”,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “text”,
question: “Vous _____ (réussir) votre examen.”,
correct: “réussissez”,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Ils finit leur repas.”,
“Ils finissent leur repas.”,
“Ils finis leur repas.”,
“Ils finissons leur repas.”
],
correct: 1,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Elle choisit un livre.”,
“Elle choisie un livre.”,
“Elle choisis un livre.”,
“Elle choisissent un livre.”
],
correct: 0,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “qcm”,
question: “Quelle est la bonne conjugaison du verbe ‘grandir’ à la troisième personne du pluriel?”,
options: [“grandissent”, “grandissez”, “grandit”, “grandis”],
correct: 0,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “qcm”,
question: “Quelle est la bonne conjugaison du verbe ‘réfléchir’ à la première personne du singulier?”,
options: [“réfléchissons”, “réfléchit”, “réfléchis”, “réfléchissez”],
correct: 2,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “text”,
question: “Tu _____ (réussir) à prendre le train à l’heure.”,
correct: “réussis”,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “choix_phrase”,
question: “Choisissez la phrase correcte:”,
options: [
“Nous remplissez le formulaire.”,
“Nous remplis le formulaire.”,
“Nous remplit le formulaire.”,
“Nous remplissons le formulaire.”
],
correct: 3,
category: “Verbes 2ème groupe”,
points: 2.5
},
{
type: “qcm”,
question: “À quel groupe appartient le verbe ‘finir’?”,
options: [“Premier groupe”, “Deuxième groupe”, “Troisième groupe”, “Quatrième groupe”],
correct: 1,
category: “Distinction des groupes”,
points: 2.5
}
];

// Variables globales
let currentQuestionIndex = 0;
let userAnswers = [];
let questionOrder = [];

// Mélanger les questions
function shuffleArray(array) {
for (let i = array.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

// Initialiser l’évaluation
document.getElementById(‘start-btn’).addEventListener(‘click’, function() {
const prenom = document.getElementById(‘prenom’).value.trim();
const nom = document.getElementById(‘nom’).value.trim();

if (!prenom || !nom) {
alert(“Veuillez entrer votre prénom et votre nom pour commencer l’évaluation.”);
return;
}

// Cacher l’intro et montrer les contrôles
document.querySelector(‘.intro’).style.display = ‘none’;
document.querySelector(‘.controls’).style.display = ‘flex’;
document.querySelector(‘.progress-container’).style.display = ‘block’;

// Mélanger les questions et créer l’ordre
questionOrder = Array.from({ length: questionsData.length }, (_, i) => i);
questionOrder = shuffleArray(questionOrder);

// Initialiser les réponses de l’utilisateur
userAnswers = Array(questionsData.length).fill(null);

// Afficher la première question
displayQuestion(0);
});

// Afficher une question
function displayQuestion(index) {
const questionArea = document.getElementById(‘question-area’);
const questionIndex = questionOrder[index];
const question = questionsData[questionIndex];

// Mettre à jour la barre de progression
const progress = ((index + 1) / questionOrder.length) * 100;
document.querySelector(‘.progress-bar’).style.width = progress + ‘%’;
document.querySelector(‘.progress-bar’).textContent = Math.round(progress) + ‘%’;

// Créer l’élément de question
const questionElement = document.createElement(‘div’);
questionElement.className = ‘question-container active’;
questionElement.id = ‘question-‘ + index;

// Ajouter le contenu de la question
questionElement.innerHTML = `

Question ${index + 1} sur ${questionOrder.length}

${question.question}

`;

// Ajouter les options selon le type de question
if (question.type === ‘qcm’) {
const optionsDiv = document.createElement(‘div’);
optionsDiv.className = ‘options’;

question.options.forEach((option, optionIndex) => {
const optionLabel = document.createElement(‘label’);
optionLabel.innerHTML = `

${option}
`;
optionsDiv.appendChild(optionLabel);
optionsDiv.appendChild(document.createElement(‘br’));
});

questionElement.appendChild(optionsDiv);
}
else if (question.type === ‘text’) {
const inputField = document.createElement(‘input’);
inputField.type = ‘text’;
inputField.id = `answer-${index}`;
inputField.placeholder = ‘Écrivez votre réponse ici…’;
questionElement.appendChild(inputField);
}
else if (question.type === ‘choix_phrase’) {
const optionsDiv = document.createElement(‘div’);
optionsDiv.className = ‘options’;

question.options.forEach((option, optionIndex) => {
const optionLabel = document.createElement(‘label’);
optionLabel.innerHTML = `

${option}
`;
optionsDiv.appendChild(optionLabel);
optionsDiv.appendChild(document.createElement(‘br’));
});

questionElement.appendChild(optionsDiv);
}

// Ajouter le bouton de vérification
const checkButton = document.createElement(‘button’);
checkButton.textContent = ‘Vérifier’;
checkButton.addEventListener(‘click’, function() {
checkAnswer(index);
});
questionElement.appendChild(checkButton);

// Ajouter la div de feedback
const feedbackDiv = document.createElement(‘div’);
feedbackDiv.className = ‘feedback’;
feedbackDiv.id = `feedback-${index}`;
questionElement.appendChild(feedbackDiv);

// Vider la zone de question et ajouter la nouvelle question
questionArea.innerHTML = ”;
questionArea.appendChild(questionElement);

// Mettre à jour les boutons de navigation
document.getElementById(‘prev-btn’).style.display = index > 0 ? ‘block’ : ‘none’;
document.getElementById(‘next-btn’).textContent = index === questionOrder.length – 1 ? ‘Terminer’ : ‘Question suivante’;
}

// Vérifier la réponse
function checkAnswer(index) {
const questionIndex = questionOrder[index];
const question = questionsData[questionIndex];
const feedbackDiv = document.getElementById(`feedback-${index}`);

let userAnswer;
let isCorrect;

if (question.type === ‘qcm’ || question.type === ‘choix_phrase’) {
const selectedOption = document.querySelector(`input[name=”q${index}”]:checked`);
if (!selectedOption) {
alert(“Veuillez sélectionner une réponse.”);
return;
}
userAnswer = parseInt(selectedOption.value);
isCorrect = userAnswer === question.correct;
}
else if (question.type === ‘text’) {
const inputField = document.getElementById(`answer-${index}`);
userAnswer = inputField.value.trim().toLowerCase();
isCorrect = userAnswer === question.correct.toLowerCase();
}

// Enregistrer la réponse de l’utilisateur
userAnswers[questionIndex] = {
userAnswer,
isCorrect
};

// Afficher le feedback
feedbackDiv.className = `feedback ${isCorrect ? ‘correct’ : ‘incorrect’}`;

if (isCorrect) {
feedbackDiv.textContent = ‘Correct!’;
} else {
if (question.type === ‘qcm’ || question.type === ‘choix_phrase’) {
feedbackDiv.textContent = `Incorrect. La bonne réponse est: ${question.options[question.correct]}`;
} else {
feedbackDiv.textContent = `Incorrect. La bonne réponse est: ${question.correct}`;
}
}

feedbackDiv.style.display = ‘block’;

// Désactiver les inputs après la vérification
const inputs = document.querySelectorAll(`#question-${index} input`);
inputs.forEach(input => {
input.disabled = true;
});

// Désactiver le bouton de vérification
event.target.disabled = true;
}

// Navigation entre les questions
document.getElementById(‘next-btn’).addEventListener(‘click’, function() {
if (currentQuestionIndex 0) {
currentQuestionIndex–;
displayQuestion(currentQuestionIndex);
}
});

// Afficher les résultats
function showResults() {
// Calculer le score
let correctAnswers = 0;
userAnswers.forEach(answer => {
if (answer && answer.isCorrect) {
correctAnswers++;
}
});

const totalPoints = 100;
const score = Math.round((correctAnswers / questionsData.length) * totalPoints);

// Afficher le nom et le score
document.getElementById(‘result-nom’).textContent = document.getElementById(‘nom’).value;
document.getElementById(‘result-prenom’).textContent = document.getElementById(‘prenom’).value;
document.getElementById(‘score’).textContent = score;

// Générer le feedback
let feedback;
if (score >= 90) {
feedback = “Excellent! Vous maîtrisez très bien le vocabulaire et la grammaire de niveau A1.”;
} else if (score >= 75) {
feedback = “Très bien! Vous avez une bonne connaissance du vocabulaire et de la grammaire de niveau A1.”;
} else if (score >= 60) {
feedback = “Bien! Vous avez une connaissance satisfaisante du vocabulaire et de la grammaire de niveau A1.”;
} else if (score >= 50) {
feedback = “Passable. Vous devez réviser certains aspects du vocabulaire et de la grammaire de niveau A1.”;
} else {
feedback = “Des révisions sont nécessaires. Continuez à travailler sur le vocabulaire et la grammaire de niveau A1.”;
}

document.getElementById(‘feedback’).textContent = feedback;

// Cacher les questions et montrer les résultats
document.getElementById(‘question-area’).style.display = ‘none’;
document.querySelector(‘.controls’).style.display = ‘none’;
document.querySelector(‘.progress-container’).style.display = ‘none’;
document.getElementById(‘result-section’).style.display = ‘block’;
}

// Afficher le certificat
document.getElementById(‘show-certificate’).addEventListener(‘click’, function() {
const nom = document.getElementById(‘nom’).value;
const prenom = document.getElementById(‘prenom’).value;
const score = document.getElementById(‘score’).textContent;
const today = new Date();
const date = today.toLocaleDateString(‘fr-FR’);

document.getElementById(‘cert-nom’).textContent = nom;
document.getElementById(‘cert-prenom’).textContent = prenom;
document.getElementById(‘cert-score’).textContent = score;
document.getElementById(‘cert-date’).textContent = date;

document.getElementById(‘certificate’).style.display = ‘block’;
});