Exercice d'Évaluation pour le Cours sur le DOM et JavaScript
Objectif de l'exercice : Consolider les compétences acquises sur la manipulation du DOM, la gestion des événements et les interactions dynamiques avec les utilisateurs.
Exercice : Création d'une application de quiz interactif
Description :
Développez une petite application de quiz où les utilisateurs peuvent répondre à des questions à choix multiples. Le quiz doit présenter une question à la fois et permettre à l'utilisateur de sélectionner une réponse. À la fin du quiz, affichez le score total de l'utilisateur.
Instructions détaillées :
-
Structure HTML :
- Créez une structure de base pour le quiz avec un conteneur pour la question, plusieurs boutons pour les réponses, et un bouton pour soumettre la réponse.
- Ajoutez un élément pour afficher le score final.
-
JavaScript :
- Préparez un ensemble de questions et réponses sous forme d'objet JavaScript.
- Écrivez une fonction pour afficher la première question et ses réponses sous forme de boutons.
- Gérez les clics sur les boutons de réponse pour enregistrer la réponse de l'utilisateur et afficher la question suivante.
- Après la dernière question, calculez et affichez le score total.
- Gérez les événements tels que le clic sur les réponses et la soumission des réponses.
-
CSS :
- Stylisez les boutons de réponse et le conteneur de question pour une interface utilisateur agréable.
Exemple html de code pour démarrer :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Quiz Interactif</title>
</head>
<body>
<div id="quiz-container">
<div id="question">Question ici?</div>
<button class="answer">Réponse 1</button>
<button class="answer">Réponse 2</button>
<button class="answer">Réponse 3</button>
<button id="submit">Soumettre</button>
<div id="score">Votre score : </div>
</div>
<script src="quiz.js"></script>
</body>
</html>
JavaScript (quiz.js) - Squelette de base :
document.addEventListener('DOMContentLoaded', () => {
const questions = [
{ question: "Quelle méthode utilisez-vous pour sélectionner un élément par son ID ?", answers: ["getElementById", "querySelector", "getElementsByClassName"], correct: 0},
// Ajoutez d'autres questions ici
];
let currentQuestion = 0;
let score = 0;
function displayQuestion() {
// Logique pour afficher la question
}
function handleAnswer() {
// Logique pour gérer la réponse
}
function showScore() {
// Logique pour afficher le score
}
displayQuestion();
});
Essayez d'être le plus créatif possible !
Cet exercice permet de réviser les manipulations du DOM, la gestion des événements, et l'utilisation des structures de données en JavaScript, tout en offrant une application interactive que les utilisateurs peuvent réellement tester et utiliser.
Exercice 2 la suite 
Si vous avez terminé rapidement , créer une version qui permet de gérer plusieurs Quizz.