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

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
max-width: 100%;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
h1, h2, h3 {
color: #2c3e50;
}

.quiz-container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 100%;
width: 100%;
overflow: hidden;
}

.quiz-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}

.quiz-header h1 {
font-size: 2em;
margin-bottom: 10px;
}

.progress-bar {
background: rgba(255,255,255,0.3);
height: 10px;
border-radius: 5px;
margin-top: 20px;
overflow: hidden;
}

.progress-fill {
background: #ffd700;
height: 100%;
width: 0%;
transition: width 0.3s ease;
}

.quiz-content {
padding: 40px;
min-height: 400px;
}

.question-page {
display: none;
animation: fadeIn 0.5s ease;
}

.question-page.active {
display: block;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.question-number {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 10px 20px;
border-radius: 10px;
font-weight: bold;
margin-bottom: 20px;
}

.question-type {
display: inline-block;
background: #ffd700;
color: #333;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9em;
margin-left: 10px;
}

.question-text {
font-size: 1.3em;
color: #2d3748;
margin: 25px 0;
line-height: 1.6;
}

.form-group {
margin: 25px 0;
}

.form-group label {
display: block;
font-size: 1.1em;
margin-bottom: 10px;
color: #4a5568;
}

.form-group input[type=”text”] {
width: 100%;
padding: 15px;
font-size: 1.1em;
border: 2px solid #667eea;
border-radius: 10px;
transition: all 0.3s ease;
}

.form-group input[type=”text”]:focus {
outline: none;
border-color: #764ba2;
box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
}

.option {
background: #f7fafc;
padding: 15px 20px;
margin: 10px 0;
border-radius: 10px;
border: 2px solid #e2e8f0;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
}

.option:hover {
background: #edf2f7;
border-color: #667eea;
transform: translateX(5px);
}

.option input[type=”radio”],
.option input[type=”checkbox”] {
margin-right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
}

.option label {
cursor: pointer;
font-size: 1.1em;
flex: 1;
}

.option.selected {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: #667eea;
}

.navigation {
display: flex;
justify-content: space-between;
padding: 30px 40px;
background: #f7fafc;
border-top: 2px solid #e2e8f0;
}

.btn {
padding: 15px 30px;
font-size: 1.1em;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}

.btn-prev {
background: #cbd5e0;
color: #2d3748;
}

.btn-prev:hover:not(:disabled) {
background: #a0aec0;
transform: scale(1.05);
}

.btn-next {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}

.btn-next:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.start-page, .end-page {
text-align: center;
padding: 40px;
}

.start-page h2 {
font-size: 2em;
color: #667eea;
margin: 30px 0;
}

.instructions {
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
padding: 30px;
border-radius: 15px;
margin: 30px 0;
text-align: left;
}

.instructions h3 {
color: #ff6b6b;
margin-bottom: 15px;
}

.instructions ul {
list-style: none;
padding: 0;
}

.instructions li {
padding: 10px 0;
font-size: 1.1em;
}

.instructions li::before {
content: “✓ “;
color: #ff6b6b;
font-weight: bold;
margin-right: 10px;
}

.score-display {
font-size: 3em;
color: #667eea;
margin: 30px 0;
font-weight: bold;
}

.emoji-large {
font-size: 5em;
margin: 20px 0;
}

.team-input {
max-width: 500px;
margin: 30px auto;
}

.warning {
background: #fff3cd;
border: 2px solid #ffc107;
color: #856404;
padding: 15px;
border-radius: 10px;
margin: 20px 0;
}

let currentQuestion = 0;
const totalQuestions = 50;
let answers = {};
let teamName = “”;

const correctAnswers = {
q1: ‘vrai’, q2: ‘faux’, q3: ‘faux’, q4: ‘vrai’, q5: ‘faux’,
q6: ‘faux’, q7: ‘vrai’, q8: ‘faux’, q9: ‘faux’, q10: ‘vrai’,
q11: ‘a’, q12: ‘c’, q13: ‘b’, q14: ‘b’, q15: ‘b’,
q16: ‘a’, q17: ‘b’, q18: ‘b’, q19: ‘b’, q20: ‘a’,
q21: ‘étais’, q22: ‘allions’, q23: ‘avais’, q24: ‘faisait’, q25: ‘visitaient’,
q26: ‘pouviez’, q27: ‘peignais’, q28: ‘créait’, q29: ‘exposaient’, q30: ‘finissions’,
q31: [‘a’, ‘c’, ‘e’], q32: [‘a’, ‘c’, ‘d’], q33: [‘a’, ‘b’, ‘d’, ‘e’],
q34: [‘a’, ‘c’, ‘d’], q35: [‘a’, ‘b’, ‘d’, ‘e’], q36: [‘a’, ‘c’, ‘d’],
q37: [‘a’, ‘b’, ‘d’], q38: [‘a’, ‘b’, ‘d’, ‘e’], q39: [‘a’, ‘c’, ‘d’],
q40: [‘a’, ‘b’, ‘d’, ‘e’], q41: ‘a’, q42: ‘b’, q43: ‘b’, q44: ‘a’,
q45: ‘b’, q46: ‘b’, q47: ‘a’, q48: ‘a’, q49: ‘b’, q50: ‘a’
};

const questions = [
{type: ‘start’, content: `

`
},
{id: ‘q1’, num: 1, type: ‘Vrai/Faux’, text: ‘L’imparfait se forme avec le radical du verbe conjugué à “nous” au présent.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q2’, num: 2, type: ‘Vrai/Faux’, text: ‘Le verbe ÊTRE est régulier à l’imparfait.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q3’, num: 3, type: ‘Vrai/Faux’, text: ‘”Autrefois” est un marqueur temporel du futur.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q4’, num: 4, type: ‘Vrai/Faux’, text: ‘À l’imparfait, les terminaisons -ais, -ait et -aient se prononcent de la même façon.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q5’, num: 5, type: ‘Vrai/Faux’, text: ‘Un tableau est une sculpture.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q6’, num: 6, type: ‘Vrai/Faux’, text: ‘”NE… JAMAIS” signifie “ya no” en español.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q7’, num: 7, type: ‘Vrai/Faux’, text: ‘L’imparfait s’utilise pour décrire des habitudes dans le passé.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q8’, num: 8, type: ‘Vrai/Faux’, text: ‘Un peintre sculpte des statues.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q9’, num: 9, type: ‘Vrai/Faux’, text: ‘”NE… RIEN” s’utilise pour parler de personnes.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q10’, num: 10, type: ‘Vrai/Faux’, text: ‘Le musée est un lieu où on expose des œuvres d’art.’, options: [‘Vrai’, ‘Faux’]},
{id: ‘q11’, num: 11, type: ‘Choix Multiple’, text: ‘Quelle est la conjugaison correcte de ÊTRE à l’imparfait pour “je” ?’, options: [‘j’étais’, ‘je suis’, ‘j’été’, ‘je étais’]},
{id: ‘q12’, num: 12, type: ‘Choix Multiple’, text: ‘Quel marqueur temporel indique une habitude dans le passé ?’, options: [‘Demain’, ‘Maintenant’, ‘Autrefois’, ‘Bientôt’]},
{id: ‘q13’, num: 13, type: ‘Choix Multiple’, text: ‘Comment dit-on “pintar” en français ?’, options: [‘Dessiner’, ‘Peindre’, ‘Sculpter’, ‘Photographier’]},
{id: ‘q14’, num: 14, type: ‘Choix Multiple’, text: ‘Quelle négation signifie “nunca” en español ?’, options: [‘NE… PLUS’, ‘NE… JAMAIS’, ‘NE… RIEN’, ‘NE… PERSONNE’]},
{id: ‘q15’, num: 15, type: ‘Choix Multiple’, text: ‘Quelle est la terminaison de l’imparfait pour “nous” ?’, options: [‘-ais’, ‘-ions’, ‘-iez’, ‘-aient’]},
{id: ‘q16’, num: 16, type: ‘Choix Multiple’, text: ‘Qu’est-ce qu’une galerie d’art ?’, options: [‘Un lieu où on expose des œuvres d’art’, ‘Un type de peinture’, ‘Un artiste célèbre’, ‘Un outil pour dessiner’]},
{id: ‘q17’, num: 17, type: ‘Choix Multiple’, text: ‘Quel marqueur temporel utilise-t-on pour parler du présent ?’, options: [‘Hier’, ‘Maintenant’, ‘Demain’, ‘Autrefois’]},
{id: ‘q18’, num: 18, type: ‘Choix Multiple’, text: ‘Comment dit-on “el fondo” (arrière-plan) en français ?’, options: [‘Le premier plan’, ‘L’arrière-plan’, ‘La couleur’, ‘La lumière’]},
{id: ‘q19’, num: 19, type: ‘Choix Multiple’, text: ‘Quelle négation signifie “ya no” en español ?’, options: [‘NE… JAMAIS’, ‘NE… PLUS’, ‘NE… RIEN’, ‘NE… AUCUN’]},
{id: ‘q20’, num: 20, type: ‘Choix Multiple’, text: ‘Le radical de l’imparfait pour le verbe FAIRE est :’, options: [‘fais-‘, ‘fair-‘, ‘fes-‘, ‘fait-‘]},
{id: ‘q21’, num: 21, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Quand j’_______ (être) jeune, j’aimais dessiner.’},
{id: ‘q22’, num: 22, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Nous _______ (aller) au musée tous les dimanches.’},
{id: ‘q23’, num: 23, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Tu _______ (avoir) une belle collection de tableaux.’},
{id: ‘q24’, num: 24, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Elle _______ (faire) de la peinture chaque soir.’},
{id: ‘q25’, num: 25, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Ils _______ (visiter) des galeries d’art autrefois.’},
{id: ‘q26’, num: 26, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Vous _______ (pouvoir) voir de belles sculptures au musée.’},
{id: ‘q27’, num: 27, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Je _______ (peindre) des paysages quand j’étais artiste.’},
{id: ‘q28’, num: 28, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

On _______ (créer) des œuvres magnifiques à l’atelier.’},
{id: ‘q29’, num: 29, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Les artistes _______ (exposer) leurs tableaux dans cette galerie.’},
{id: ‘q30’, num: 30, type: ‘Conjugaison’, text: ‘Complétez avec l’imparfait :

Nous _______ (finir) toujours nos dessins avant minuit.’},
{id: ‘q31’, num: 31, type: ‘Plusieurs Réponses’, text: ‘Quels sont les marqueurs temporels du PASSÉ ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Autrefois’, ‘Demain’, ‘Avant’, ‘Maintenant’, ‘Quand j’étais jeune’], multi: true},
{id: ‘q32’, num: 32, type: ‘Plusieurs Réponses’, text: ‘Quelles sont les terminaisons de l’imparfait ? (Sélectionnez toutes les bonnes réponses)’, options: [‘-ais’, ‘-ez’, ‘-ions’, ‘-aient’, ‘-ons’], multi: true},
{id: ‘q33’, num: 33, type: ‘Plusieurs Réponses’, text: ‘Quels sont des types d’œuvres d’art ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Un tableau’, ‘Une sculpture’, ‘Un musée’, ‘Une photographie’, ‘Un dessin’], multi: true},
{id: ‘q34’, num: 34, type: ‘Plusieurs Réponses’, text: ‘Quelles négations parlent de quantité zéro ? (Sélectionnez toutes les bonnes réponses)’, options: [‘NE… RIEN’, ‘NE… JAMAIS’, ‘NE… PERSONNE’, ‘NE… AUCUN’, ‘NE… PLUS’], multi: true},
{id: ‘q35’, num: 35, type: ‘Plusieurs Réponses’, text: ‘Quels sont des lieux culturels ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Le musée’, ‘La galerie d’art’, ‘Le tableau’, ‘L’exposition’, ‘L’atelier’], multi: true},
{id: ‘q36’, num: 36, type: ‘Plusieurs Réponses’, text: ‘Quels verbes sont associés à l’art ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Peindre’, ‘Manger’, ‘Sculpter’, ‘Dessiner’, ‘Dormir’], multi: true},
{id: ‘q37’, num: 37, type: ‘Plusieurs Réponses’, text: ‘Quelles phrases sont correctes à l’imparfait ? (Sélectionnez toutes les bonnes réponses)’, options: [‘J’étais content’, ‘Nous allions au musée’, ‘Ils faisons de l’art’, ‘Tu avais un tableau’, ‘Elle étaient artiste’], multi: true},
{id: ‘q38’, num: 38, type: ‘Plusieurs Réponses’, text: ‘Quels éléments peut-on décrire dans un tableau ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Les couleurs’, ‘La lumière’, ‘Le musée’, ‘Les formes’, ‘Le contraste’], multi: true},
{id: ‘q39’, num: 39, type: ‘Plusieurs Réponses’, text: ‘Quels marqueurs indiquent le FUTUR ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Demain’, ‘Hier’, ‘Bientôt’, ‘Plus tard’, ‘Autrefois’], multi: true},
{id: ‘q40’, num: 40, type: ‘Plusieurs Réponses’, text: ‘Quelles professions artistiques existent ? (Sélectionnez toutes les bonnes réponses)’, options: [‘Peintre’, ‘Sculpteur’, ‘Tableau’, ‘Photographe’, ‘Artiste’], multi: true},
{id: ‘q41’, num: 41, type: ‘Vocabulaire’, text: ‘Comment dit-on “una obra maestra” en français ?’, options: [‘Un chef-d’œuvre’, ‘Un tableau’, ‘Un musée’, ‘Un artiste’]},
{id: ‘q42’, num: 42, type: ‘Vocabulaire’, text: ‘Qui a peint La Joconde (Mona Lisa) ?’, options: [‘Pablo Picasso’, ‘Léonard de Vinci’, ‘Claude Monet’, ‘Vincent van Gogh’]},
{id: ‘q43’, num: 43, type: ‘Vocabulaire’, text: ‘Quel est le mouvement artistique de Claude Monet ?’, options: [‘Le cubisme’, ‘L’impressionnisme’, ‘Le surréalisme’, ‘Le réalisme’]},
{id: ‘q44’, num: 44, type: ‘Vocabulaire’, text: ‘Comment dit-on “el primer plano” en français ?’, options: [‘Le premier plan’, ‘L’arrière-plan’, ‘Le centre’, ‘Le cadre’]},
{id: ‘q45’, num: 45, type: ‘Vocabulaire’, text: ‘Qu’est-ce qu’une “toile” en art ?’, options: [‘Un outil pour sculpter’, ‘Le support pour peindre (canvas)’, ‘Un type de peinture’, ‘Un musée’]},
{id: ‘q46’, num: 46, type: ‘Vocabulaire’, text: ‘Comment dit-on “exponer” (montrer au public) en français ?’, options: [‘Peindre’, ‘Exposer’, ‘Créer’, ‘Visiter’]},
{id: ‘q47’, num: 47, type: ‘Vocabulaire’, text: ‘Qu’est-ce que “le cubisme” ?’, options: [‘Un mouvement artistique avec des formes géométriques’, ‘Un type de sculpture’, ‘Un musée à Paris’, ‘Un outil pour peindre’]},
{id: ‘q48’, num: 48, type: ‘Vocabulaire’, text: ‘Comment dit-on “un pincel” en français ?’, options: [‘Un pinceau’, ‘Une palette’, ‘Une toile’, ‘Un cadre’]},
{id: ‘q49’, num: 49, type: ‘Vocabulaire’, text: ‘Où se trouve le musée du Louvre ?’, options: [‘À Londres’, ‘À Paris’, ‘À Rome’, ‘À Madrid’]},
{id: ‘q50’, num: 50, type: ‘Vocabulaire’, text: ‘Comment dit-on “las pinceladas” en français ?’, options: [‘Les coups de pinceau’, ‘Les couleurs’, ‘Les formes’, ‘Les cadres’]}
];

function renderQuestion(index) {
const container = document.getElementById(‘quiz-content’);
const q = questions[index];

if (q.type === ‘start’) {
container.innerHTML = q.content;
return;
}

if (q.type === ‘Conjugaison’) {
container.innerHTML = `
Question ${q.num}/50
${q.type}

`;
return;
}

let optionsHTML = ”;
const inputType = q.multi ? ‘checkbox’ : ‘radio’;
const letters = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];

q.options.forEach((opt, i) => {
const letter = letters[i];
const value = q.type === ‘Vrai/Faux’ ? opt.toLowerCase() : letter;
const isChecked = q.multi ?
(answers[q.id] && answers[q.id].includes(letter)) :
(answers[q.id] === value);
const selectedClass = isChecked ? ‘selected’ : ”;

if (q.multi) {
optionsHTML += `

`;
} else {
optionsHTML += `

`;
}
});

container.innerHTML = `
Question ${q.num}/50
${q.type}

`;
}

function selectOption(questionId, value) {
const options = document.querySelectorAll(`input[name=”${questionId}”]`);
options.forEach(opt => {
opt.parentElement.classList.remove(‘selected’);
opt.checked = false;
});

const selected = document.getElementById(`${questionId}-${value}`);
selected.checked = true;
selected.parentElement.classList.add(‘selected’);
answers[questionId] = value;
}

function toggleOption(questionId, value) {
const checkbox = document.getElementById(`${questionId}-${value}`);
const option = checkbox.parentElement;

checkbox.checked = !checkbox.checked;
option.classList.toggle(‘selected’);

const checkedBoxes = document.querySelectorAll(`input[name=”${questionId}”]:checked`);
answers[questionId] = Array.from(checkedBoxes).map(cb => cb.value);
}

function nextQuestion() {
if (currentQuestion === 0) {
teamName = document.getElementById(‘team-name’).value.trim();
if (teamName === ”) {
alert(‘⚠️ Veuillez entrer le nom de votre équipe avant de commencer !’);
return;
}
}

if (currentQuestion > 0 && currentQuestion <= 30) {
const q = questions[currentQuestion];
if (q.type === 'Conjugaison') {
const textInput = document.getElementById(`${q.id}-answer`);
if (textInput) {
answers[q.id] = textInput.value.trim();
}
}
}

if (currentQuestion 0) {
currentQuestion–;
renderQuestion(currentQuestion);
updateProgress();
updateButtons();
window.scrollTo(0, 0);
}
}

function updateProgress() {
const progress = ((currentQuestion) / totalQuestions) * 100;
document.getElementById(‘progress’).style.width = progress + ‘%’;
}

function updateButtons() {
const prevBtn = document.getElementById(‘prev-btn’);
const nextBtn = document.getElementById(‘next-btn’);

prevBtn.disabled = currentQuestion === 0;

if (currentQuestion === questions.length – 1) {
nextBtn.textContent = ‘🏁 Terminer’;
} else {
nextBtn.textContent = ‘Suivant →’;
}
}

function normalizeAnswer(answer) {
if (typeof answer === ‘string’) {
return answer.toLowerCase()
.trim()
.normalize(“NFD”)
.replace(/[u0300-u036f]/g, “”);
}
return answer;
}

function checkAnswer(questionId, userAnswer) {
const correctAnswer = correctAnswers[questionId];

if (Array.isArray(correctAnswer)) {
if (!Array.isArray(userAnswer)) return false;
if (userAnswer.length !== correctAnswer.length) return false;
const sortedUser = userAnswer.sort();
const sortedCorrect = correctAnswer.sort();
return sortedUser.every((val, idx) => val === sortedCorrect[idx]);
}

if (typeof correctAnswer === ‘string’ && typeof userAnswer === ‘string’) {
return normalizeAnswer(userAnswer) === normalizeAnswer(correctAnswer);
}

return userAnswer === correctAnswer;
}

function showResults() {
let score = 0;
let mistakes = [];

for (let i = 1; i q.id === qId);
mistakes.push({
num: i,
question: question.text.replace(/
/g, ‘ ‘),
userAnswer: userAnswer || ‘Pas de réponse’,
correctAnswer: correctAnswers[qId]
});
}
}

const percentage = (score / totalQuestions * 100).toFixed(1);
let emoji = ”;
let message = ”;

if (percentage >= 90) {
emoji = ‘🏆’;
message = ‘Excellent ! Vous maîtrisez parfaitement le niveau A2 !’;
} else if (percentage >= 75) {
emoji = ‘🎉’;
message = ‘Très bien ! Vous avez un bon niveau A2 !’;
} else if (percentage >= 60) {
emoji = ‘👍’;
message = ‘Bien ! Continuez à pratiquer !’;
} else if (percentage >= 50) {
emoji = ‘📚’;
message = ‘Pas mal ! Révisez les points faibles.’;
} else {
emoji = ‘💪’;
message = ‘Courage ! Il faut plus de révision.’;
}

let mistakesHTML = ”;
if (mistakes.length > 0) {
mistakesHTML = ‘

‘;
}

const container = document.getElementById(‘quiz-content’);
container.innerHTML = `

`;

document.getElementById(‘prev-btn’).style.display = ‘none’;
document.getElementById(‘next-btn’).style.display = ‘none’;
document.getElementById(‘progress’).style.width = ‘100%’;
}

function restartQuiz() {
currentQuestion = 0;
answers = {};
teamName = “”;
renderQuestion(0);
updateProgress();
updateButtons();
document.getElementById(‘prev-btn’).style.display = ‘block’;
document.getElementById(‘next-btn’).style.display = ‘block’;
window.scrollTo(0, 0);
}

// Initialisation
renderQuestion(0);
updateButtons();