Semaine 3 - Jour 5 | Projet DOM Interactif

Semaine 3 - Jour 5 : Projet DOM Interactif

Quiz interactif - Semaine 3 JavaScript

Félicitations ! Vous avez appris les bases de la manipulation du DOM cette semaine. Ce quiz interactif combine tous les concepts vus : sélection d'éléments, manipulation du DOM, événements, et validation.

Fonctionnalités du quiz :

10 questions sur le DOM et JavaScript
Score en temps réel avec barre de progression
Feedback visuel immédiat (couleurs + messages)
Navigation entre les questions
Résultats détaillés à la fin

Technologies utilisées : getElementById, querySelector, addEventListener, classList, createElement, style, innerHTML, event.preventDefault()

Quiz JavaScript DOM

Testez vos connaissances !

Score : 0 / 10 | Question 1 / 10

Quiz terminé !

0 / 10

Code source du Quiz (simplifié)

                    // Structure des données du quiz

                    let questions = [

                      {

                        question: 'Quelle méthode sélectionne un élément par son ID ?',

                        options: ['querySelector()', 'getElementById()', 'getElement()', 'selectById()'],

                        correct: 1,

                        explanation: 'getElementById() est la méthode spécifique pour sélectionner par ID'

                      }

                    ];

                    // Afficher une question

                    function afficherQuestion(index) {

                      let q = questions[index];

                      let container = document.getElementById('questions-container');

                      // Créer la carte de question

                      let card = document.createElement('div');

                      card.classList.add('question-card', 'active');

                      // Ajouter le texte de la question

                      card.innerHTML = `<div class="question-text">${q.question}</div>`;

                      // Créer les boutons d'options

                      q.options.forEach((option, i) => {

                        let btn = document.createElement('button');

                        btn.textContent = option;

                        btn.addEventListener('click', () => verifierReponse(i, q.correct));

                        card.appendChild(btn);

                      });

                      container.appendChild(card);

                    }

                    // Vérifier la réponse

                    function verifierReponse(choix, correct) {

                      if (choix === correct) {

                        score++;

                        // Feedback positif avec classList et style

                        btn.classList.add('correct');

                      } else {

                        btn.classList.add('incorrect');

                      }

                      mettreAJourScore();

                    }

Ce quiz utilise TOUS les concepts de la Semaine 3 :
Sélecteurs • Manipulation DOM • Événements • Validation • Feedback visuel

Console JavaScript Interactive - Analysez le code du quiz !

Prêt à exécuter votre code...

Froggiesplaining :

Récapitulatif Semaine 3 :
✅ Jour 1 : Sélection d'éléments (getElementById, querySelector, querySelectorAll)
✅ Jour 2 : Manipulation DOM (setAttribute, style, classList, createElement, appendChild)
✅ Jour 3 : Événements (addEventListener, click, input, change, event object, preventDefault)
✅ Jour 4 : Formulaires (.value, validation, messages d'erreur, empêcher soumission)
✅ Jour 5 : Projet complet combinant tous les concepts

Concepts clés du quiz interactif :
• Structure de données : Tableaux d'objets pour les questions
• Création dynamique : createElement() pour générer les cartes
• Événements : addEventListener sur chaque bouton
• Feedback visuel : classList.add/remove pour les couleurs
• État de l'application : Variables pour score, question actuelle
• Navigation : Boutons précédent/suivant avec gestion d'état
• Validation : Vérification des réponses et calcul du score
• Interface réactive : Mise à jour en temps réel de l'affichage

Projet à réaliser :
Créez votre propre mini-projet DOM interactif en choisissant parmi :
1. Todo List : Ajouter/supprimer des tâches, marquer comme terminé
2. Calculatrice : Interface avec boutons, affichage du résultat
3. Générateur de citations : Afficher une citation aléatoire au clic
4. Compteur de clics : Avec historique et bouton reset
5. Formulaire dynamique : Ajouter/supprimer des champs
6. Galerie d'images : Navigation avec miniatures
7. Chronomètre : Start/Stop/Reset avec affichage en temps réel

Bravo pour cette semaine intensive sur le DOM ! 🎉