@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap’);#quiz-container { font-family: ‘Poppins’, sans-serif; background-color: #ffffff; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); width: 100%; max-width: 650px; padding: 35px 40px; margin: 20px auto; box-sizing: border-box; } #quiz-container h1 { text-align: center; color: #2c3e50; margin-bottom: 25px; font-weight: 700; font-size: 2em; } #question-text { font-size: 1.4em; font-weight: 600; margin-bottom: 20px; color: #34495e; } .btn-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .btn { background-color: #f4f4f9; border: 1px solid #ddd; border-radius: 8px; padding: 15px; font-size: 1.05em; cursor: pointer; transition: 0.3s; text-align: left; } .btn:hover:not(:disabled) { background-color: #e9e9f3; } .btn.correct { background-color: #eafaf1; border-color: #27ae60; color: #27ae60; font-weight: 600; } .btn.wrong { background-color: #fdeded; border-color: #e74c3c; color: #e74c3c; } .btn:disabled { cursor: not-allowed; }#definition-container { margin-top: 25px; padding: 15px; background-color: #f8f9fa; border-left: 5px solid #5dade2; border-radius: 5px; font-size: 0.95em; color: #34495e; } #definition-container.hide { display: none; }#controls { display: flex; justify-content: space-between; margin-top: 25px; border-top: 1px solid #eee; padding-top: 15px; } #submit-btn { background-color: #e0f2f7; border: 2px solid #a8dadc; border-radius: 8px; padding: 10px 20px; font-weight: 600; cursor: pointer; } #submit-btn.hide { display: none; } #result { text-align: center; margin-top: 30px; } #progress { color: #7f8c8d; font-weight: 500; }const questionTextElement = document.getElementById(‘question-text’); const answerButtonsElement = document.getElementById(‘answer-buttons’); const definitionContainer = document.getElementById(‘definition-container’); const resultElement = document.getElementById(‘result’); const progressElement = document.getElementById(‘progress’); const submitButton = document.getElementById(‘submit-btn’);let currentQuestionIndex = 0; let score = 0;function shuffle(array) { return array.sort(() => Math.random() – 0.5); }const questions = [ { question: »Quel est le plus grand océan du monde ? », answers:shuffle([ {text: »Océan Pacifique »,correct:true}, {text: »Océan Atlantique »,correct:false}, {text: »Océan Indien »,correct:false}, {text: »Océan Arctique »,correct:false} ]), definition: »L’océan Pacifique est le plus vaste océan de la planète. » }, { question: »Qui a peint La Joconde ? », answers:shuffle([ {text: »Léonard de Vinci »,correct:true}, {text: »Michel-Ange »,correct:false}, {text: »Raphaël »,correct:false}, {text: »Van Gogh »,correct:false} ]), definition: »La Joconde est une œuvre de Léonard de Vinci. » }, { question: »Quelle est la capitale du Canada ? », answers:shuffle([ {text: »Ottawa »,correct:true}, {text: »Toronto »,correct:false}, {text: »Montréal »,correct:false}, {text: »Vancouver »,correct:false} ]), definition: »La capitale du Canada est Ottawa. » }, { question: »Combien de continents compte la Terre ? », answers:shuffle([ {text: »7″,correct:true}, {text: »5″,correct:false}, {text: »6″,correct:false}, {text: »8″,correct:false} ]), definition: »On distingue généralement 7 continents. » }, { question: »Quel est l’élément chimique dont le symbole est O ? », answers:shuffle([ {text: »Oxygène »,correct:true}, {text: »Or »,correct:false}, {text: »Osmium »,correct:false}, {text: »Hydrogène »,correct:false} ]), definition: »Le symbole O correspond à l’oxygène. » }, { question: »En quelle année l’homme a-t-il marché sur la Lune ? », answers:shuffle([ {text: »1969″,correct:true}, {text: »1959″,correct:false}, {text: »1975″,correct:false}, {text: »1981″,correct:false} ]), definition: »Neil Armstrong a marché sur la Lune en 1969. » }, { question: »Quel est le fleuve le plus long du monde ? », answers:shuffle([ {text: »Le Nil »,correct:true}, {text: »L’Amazone »,correct:false}, {text: »Le Yangtsé »,correct:false}, {text: »Le Mississippi »,correct:false} ]), definition: »Le Nil est traditionnellement considéré comme le plus long fleuve du monde. » }, { question: »Quel pays a inventé les Jeux Olympiques ? », answers:shuffle([ {text: »La Grèce »,correct:true}, {text: »L’Italie »,correct:false}, {text: »La France »,correct:false}, {text: »La Chine »,correct:false} ]), definition: »Les Jeux Olympiques sont nés dans la Grèce antique. » }, { question: »Quelle planète est surnommée la planète rouge ? », answers:shuffle([ {text: »Mars »,correct:true}, {text: »Vénus »,correct:false}, {text: »Jupiter »,correct:false}, {text: »Mercure »,correct:false} ]), definition: »Mars est appelée la planète rouge en raison de sa couleur. » }, { question: »Qui a écrit Les Misérables ? », answers:shuffle([ {text: »Victor Hugo »,correct:true}, {text: »Émile Zola »,correct:false}, {text: »Honoré de Balzac »,correct:false}, {text: »Gustave Flaubert »,correct:false} ]), definition: »Les Misérables est un roman de Victor Hugo. » }, { question: »Quelle langue compte le plus de locuteurs natifs ? », answers:shuffle([ {text: »Le mandarin »,correct:true}, {text: »L’anglais »,correct:false}, {text: »L’espagnol »,correct:false}, {text: »Le français »,correct:false} ]), definition: »Le mandarin est la langue la plus parlée au monde en locuteurs natifs. » }, { question: »Quel animal est le plus rapide sur terre ? », answers:shuffle([ {text: »Le guépard »,correct:true}, {text: »Le lion »,correct:false}, {text: »Le cheval »,correct:false}, {text: »L’antilope »,correct:false} ]), definition: »Le guépard peut dépasser les 100 km/h. » }, { question: »Quel est le plus grand pays du monde par superficie ? », answers:shuffle([ {text: »La Russie »,correct:true}, {text: »Le Canada »,correct:false}, {text: »La Chine »,correct:false}, {text: »Les États-Unis »,correct:false} ]), definition: »La Russie est le plus grand pays du monde. » }, { question: »Que mesure un baromètre ? », answers:shuffle([ {text: »La pression atmosphérique »,correct:true}, {text: »La température »,correct:false}, {text: »L’humidité »,correct:false}, {text: »La vitesse du vent »,correct:false} ]), definition: »Un baromètre mesure la pression atmosphérique. » }, { question: »Quel est le symbole chimique du fer ? », answers:shuffle([ {text: »Fe »,correct:true}, {text: »F »,correct:false}, {text: »Ir »,correct:false}, {text: »Fr »,correct:false} ]), definition: »Le symbole chimique du fer est Fe. » } ]; function startQuiz() { currentQuestionIndex = 0; score = 0; resultElement.innerHTML = «  »; submitButton.classList.add(« hide »); submitButton.onclick = startQuiz; showQuestion(); }function showQuestion() { const q = questions[currentQuestionIndex]; progressElement.innerText = `Question ${currentQuestionIndex + 1} / ${questions.length}`; questionTextElement.innerText = q.question; answerButtonsElement.innerHTML = «  »; definitionContainer.classList.add(« hide »);q.answers.forEach(a => { const btn = document.createElement(« button »); btn.innerText = a.text; btn.classList.add(« btn »); if (a.correct) btn.dataset.correct = « true »; btn.onclick = selectAnswer; answerButtonsElement.appendChild(btn); }); }function selectAnswer(e) { const selectedBtn = e.target; const isCorrect = selectedBtn.dataset.correct === « true »;if (isCorrect) score++; else { definitionContainer.innerHTML = « Explication :  » + questions[currentQuestionIndex].definition; definitionContainer.classList.remove(« hide »); }Array.from(answerButtonsElement.children).forEach(btn => { btn.disabled = true; if (btn.dataset.correct === « true ») btn.classList.add(« correct »); if (btn === selectedBtn && !isCorrect) btn.classList.add(« wrong »); });setTimeout(() => { currentQuestionIndex++; if (currentQuestionIndex = 12) message = « 🔥 Excellent niveau de culture générale. »; else if (score >= 8) message = « 👍 Bon niveau, continuez à apprendre. »; else if (score >= 5) message = « 📘 Niveau correct, des révisions s’imposent. »; else message = « 📚 Continuez à cultiver votre curiosité ! »;resultElement.innerHTML = `

${message}

`; submitButton.classList.remove(« hide »); }startQuiz();