Une application de quiz interactive qui permet aux utilisateurs de tester leurs connaissances sur différentes catégories et niveaux de difficulté. Avec un design élégant et des fonctionnalités dynamiques, ce quiz vous offre une expérience amusante tout en suivant votre progression et vos scores.
L'application de quiz permet aux utilisateurs de choisir une catégorie, de définir le nombre de questions et de sélectionner un niveau de difficulté. Les questions sont tirées d'une API ouverte et présentent un mélange de réponses correctes et incorrectes. À la fin du quiz, les utilisateurs peuvent voir leur score final et leur meilleur score historique.
- Sélection de catégories, de difficultés, et de nombre de questions.
- Interface utilisateur intuitive avec affichage du score et du meilleur score.
- Mélange aléatoire des réponses pour chaque question.
- Réponses correctes affichées en vert, mauvaises réponses en rouge.
- Suivi des scores avec une option de rejouer le quiz.
- Gestion du temps pour attribuer des points en fonction de la rapidité.
- Stockage du meilleur score en local (LocalStorage).
- React.js : pour la création de l'interface utilisateur dynamique.
- CSS3 : pour le style et la mise en page.
- Open Trivia DB API : pour récupérer les questions du quiz.
- LocalStorage : pour sauvegarder le score le plus élevé.
-
Cloner le projet :
git clone https://github.com/bounyamine/quizz.git cd quizz -
Installer les dépendances :
npm install
-
Démarrer l'application :
npm start
-
Accéder à l'application : Ouvrez http://localhost:3000 dans votre navigateur.
- Sur la page de configuration, sélectionnez la catégorie, la difficulté et le nombre de questions que vous souhaitez.
- Cliquez sur "Start Game" pour commencer le quiz.
- Choisissez une réponse parmi les options proposées. La réponse sélectionnée deviendra verte si elle est correcte, ou rouge sinon.
- À la fin du quiz, votre score sera affiché avec la possibilité de rejouer.
- Un suivi des scores est conservé pour afficher votre meilleur score.
/public
index.html # Page HTML principale
/src
App.css # Style de l'application principal
App.js # Composant principal de l'application
index.js # Point d'entrée de React
index.css # Style des toutes les applications
Regardez une démo en direct de l'application ici !
Les contributions sont les bienvenues ! Si vous souhaitez améliorer cette application ou ajouter de nouvelles fonctionnalités, veuillez suivre ces étapes :
- Fork le projet.
- Créez une nouvelle branche (
git checkout -b feature/new-feature). - Committez vos changements (
git commit -am 'Ajout d'une nouvelle fonctionnalité'). - Poussez sur la branche (
git push origin feature/new-feature). - Créez une Pull Request.
Ce projet est sous licence MIT. Consultez le fichier LICENSE pour plus d'informations.


