Application de quiz interactif

Ce projet est une application de quiz interactif simple construite avec HTML, CSS et JavaScript. Il permet aux utilisateurs de répondre à des questions à choix multiples, de soumettre leurs réponses et de recevoir un score instantané. L'application démontre la gestion de base des formulaires, les mises à jour de contenu dynamique et la manipulation du DOM en JavaScript.

? Aperçu du projet

Caractéristiques

• Questions à choix multiples : Trois questions avec plusieurs options de réponse.
• Bouton Soumettre : permet aux utilisateurs de soumettre leurs réponses.
• Score instantané : affiche le score de l'utilisateur immédiatement après la soumission.
• Conception interactive : style simple et effets de survol pour une meilleure expérience utilisateur.

Technologies utilisées

• HTML : Pour structurer le contenu.
• CSS : Pour styliser l'interface du quiz.
• JavaScript : Pour ajouter de l'interactivité et traiter les réponses.

? Structure des fichiers

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

? Répartition des codes

? HTML (index.html)

Le fichier HTML crée la structure du quiz, comprenant des questions, des choix de réponses et un bouton d'envoi.

Éléments clés :

• Formulaire (
  ) pour regrouper les questions du quiz.
• Boutons radio () pour sélectionner les réponses.
• Bouton Soumettre pour vérifier les réponses.
• Result Div pour afficher le score.

<form>



<h3>
  
  
  ? <strong>CSS (styles.css)</strong>
</h3>

<p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p>

<p><strong>Key Styling Concepts:</strong></p>

• Layout: Flexbox for alignment and spacing.
• Hover Effects: Button changes color when hovered.
• Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

⚙️ JavaScript (script.js)

Le fichier JavaScript gère la logique du quiz, traite les réponses des utilisateurs et affiche le score.

Concepts clés :

• Écouteurs d'événements : pour détecter le moment où l'utilisateur clique sur le bouton de soumission.
• Gestion des formulaires : accès aux réponses sélectionnées par l'utilisateur.
• Manipulation DOM : Mise à jour de la section des résultats avec le score de l'utilisateur.

document.getElementById('submit-btn').addEventListener('click', function() {
  const answers = {
    q1: 'Paris',
    q2: '4',
    q3: 'Blue'
  };

  let score = 0;
  const form = document.getElementById('quiz-form');

  if (form.q1.value === answers.q1) score++;
  if (form.q2.value === answers.q2) score++;
  if (form.q3.value === answers.q3) score++;

  document.getElementById('result').textContent = `You scored ${score} out of 3!`;
});

? Concepts clés pour l'apprentissage

1. Formulaires et entrées HTML :

   • Comment structurer les formulaires et utiliser les boutons radio pour les questions à choix multiples.
   • Comprendre l'attribut name pour regrouper les entrées radio.

2. Style CSS :

   • Utilisation de Flexbox pour la mise en page et l'alignement.
   • Ajout d'un attrait visuel avec des effets de survol et des ombres.

3. Interactivité JavaScript :

   • Ajout d'écouteurs d'événements avec addEventListener().
   • Lire les données du formulaire et comparer les entrées de l'utilisateur aux réponses correctes.
   • Mise à jour dynamique du DOM à l'aide de textContent.

?️ Comment exécuter le projet

1. Cloner ou télécharger le projet :

quiz-app/
│-- index.html      ← The HTML structure
│-- styles.css      ← The CSS styling
└-- script.js       ← The JavaScript logic

1. Ouvrez index.html dans votre navigateur :

<form>



<h3>
  
  
  ? <strong>CSS (styles.css)</strong>
</h3>

<p>The CSS file styles the quiz interface, making it visually appealing and responsive.</p>

<p><strong>Key Styling Concepts:</strong></p>

• Layout: Flexbox for alignment and spacing.
• Hover Effects: Button changes color when hovered.
• Box Shadow: For a modern card-like appearance.

button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

1. Essayez le Quiz :
   • Répondez aux questions.
   • Cliquez sur "Envoyer les réponses" pour voir votre score.

? Améliorations à essayer

• Ajouter plus de questions : augmentez le nombre de questions pour défier les utilisateurs.
• Commentaires personnalisés : affichez des commentaires détaillés pour chaque question.
• Minuterie : ajoutez un compte à rebours pour chaque question.
• Améliorations du style : améliorez le design avec des animations ou des thèmes.

? Voir le projet sur GitHub ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!