Aperçu du Projet
Quiz Master est une application web de quiz interactive offrant une expérience ludique et compétitive. Conçue en vanilla JavaScript, HTML5 et CSS3, elle propose deux modes de jeu distincts : un mode Solo pour tester ses connaissances et un mode Duel pour affronter un adversaire.
L'application permet aux joueurs de sélectionner parmi plusieurs catégories de questions, de choisir un niveau de difficulté adapté, et de suivre leurs performances via un système de classement en temps réel.
Modes de Jeu
Mode Solo
Testez vos connaissances et améliorez votre score personnel. Parfait pour l'apprentissage individuel.
- Questionnaire à rythme libre
- Score personnel suivi
- Feedback immédiat
- Progression sauvegardée
Mode Duel
Défiez un ami et mesurez vos connaissances en temps réel. Le meilleur score remporte la victoire!
- Compétition en direct
- Scores côte à côte
- Minuteur intégré
- Historique des matchs
Fonctionnalités Clés
Catégories Variées
Multiples catégories de questions pour tous les intérêts et niveaux d'expertise
Niveaux de Difficulté
Facile, Moyen, Difficile - Adaptez le challenge à votre niveau
Minuteur
Temps limité par question pour plus de défi
Stockage Local
Les résultats et préférences sont sauvegardés automatiquement
Classement
Suivi des scores et des statistiques personnelles
Rejeu
Questions randomisées pour une expérience toujours nouvelle
Stack Technique
Vanilla JavaScript (ES6+)
HTML5 sémantique
CSS3 responsive
localStorage API
JSON (questions.json)
Classes ES6 (Quiz, Storage)
Structure du Projet
Quiz-Master/ ├── index.html # Page HTML principale ├── data/ │ └── questions.json # Base de données questions ├── src/ │ ├── js/ │ │ ├── app.js # Contrôleur principal │ │ ├── Quiz.js # Classe Quiz (logique jeu) │ │ ├── Storage.js # Classe Storage (données) │ │ └── Utils.js # Fonctions utilitaires │ └── css/ │ ├── main.css # Styles principaux │ └── responsive.css # Responsive design ├── README.md # Documentation └── LICENSE # MIT License
Flux de Jeu
- Page d'accueil: Choix du mode (Solo/Duel)
- Configuration: Entrée du/des noms, sélection catégorie
- Niveau: Choix du niveau de difficulté
- Jeu: Présentation des questions et réponses
- Résultats: Affichage des scores et statistiques
- Classement: Historique et positions des joueurs
Gestion des Données
Le projet utilise une architecture modulaire avec:
- Classe
Quiz- Logique du jeu et gestion des questions - Classe
Storage- Persistance des données (localStorage) - Fichier
questions.json- Base de données structurée - Utilitaires - Fonctions réutilisables
Catégories de Questions
Quiz Master propose plusieurs catégories:
📚 Générale
Culture générale, histoire, géographie
🔬 Science
Biologie, chimie, physique, astronomie
🎬 Divertissement
Films, musique, télévision, célébrités
🏅 Sports
Football, basket, olympiques, athlétisme
Installation Rapide
- Clonez le repository
git clone https://github.com/sfrayan/Quiz-Master.git
- Accédez au répertoire
cd Quiz-Master
- Lancez un serveur local (Python)
python -m http.server 8000
- Ouvrez dans le navigateur:
http://localhost:8000
Note: L'application n'a aucune dépendance externe - tout est inclus.
Points Forts
Vanilla JS
Pas de dépendances externes, code pur et performant
Responsive
Fonctionne parfaitement sur desktop et mobile
Performant
Temps de chargement rapide et interactions fluides
Sécurisé
Pas de connexion serveur - données locales uniquement
Roadmap Futur
Version Actuelle
- ✅ Mode Solo/Duel
- ✅ Catégories multiples
- ✅ Niveaux de difficulté
- ✅ Classement
Améliorations
- Thème sombre/clair
- Explications réponses
- Statistiques détaillées
- Badges/Achievements
Évolutions Majeures
- Backend Node.js
- Multijoueurs en ligne
- Système de points
- Contenu dynamique API
Explorez le Projet
Jouez immédiatement, consultez le code source ou contribuez au projet!