EXAMEN
Semestre : 1 2
Session : Principale Rattrapage
Module : Application côté client 2
Enseignants : Équipe Web
Classes : 4TWIN
Documents autorisés : OUI NON Nombre de pages : 5
Calculatrice autorisée : OUI NON Internet autorisée : OUI NON
Date : 19/06/2025 Heure : 13h00 Durée : 01h30
NB : seul le code exécutable sera pris en considération lors de la correction
On souhaite créer une application de quiz où l’utilisateur peut répondre à une série de questions,
voir son score et évaluer les questions proposées. L’état global (questions, réponses, score) est géré
avec Zustand.
L'objectif est de créer une application React permettant de :
- Créer une interface pour gérer une base de questions.
- Utiliser les questions créées pour lancer un quiz avec suivi de progression.
Utiliser json-server pour simuler les requêtes :
- GET /question
- GET /questions/:id
- POST /questions
- DELETE /questions/:id
Créer le fichier [Link] et ajoutez les données suivantes :
1
{ "questions":[{
"id": "1",
"question": "What is the capital of France ?",
"options": [
"Lyon",
"Marseille",
"Paris"
],
"correctAnswer": 2 ,
"subject": "Geography"
},{
"id": "2",
"question": "What is the result of 3 x 4 ?",
"options": [
"7",
"12",
"9"
],
"correctAnswer": 1,
"subject": "Mathematics"
}]}
Figure 1: Fichier “[Link]”
Exécuter la commande depuis le répertoire contenant le fichier [Link] pour lancer le serveur :
json-server --watch [Link]
Travail demandé :
1. Implémenter une barre de navigation (Navbar) commune à toutes les pages.(1pt)
Figure 2: NavBar
2. Configurer les routes avec react-router-dom : (1.5pt)
- /home : Afficher la page de bienvenue , dont le contenu est illustré dans la figure suivante :
Figure 3: Page de Bienvenue
2
- /quizz/add : permet de rediriger vers une page contenant le formulaire d’ajout d’une question
ainsi que la liste des questions existantes.
- /quizz : permet d’afficher les questions d’un quizz
3. Créer un Composant Quiz qui permet à un utilisateur de répondre aux questions du quiz tout en
respectant les fonctionnalités suivantes :
- Afficher une seule question à la fois. (2pt)
- Permettre à l’utilisateur de sélectionner une réponse parmi les propositions.
- Une fois une réponse est sélectionnée :
- Si la réponse choisie est correcte, elle sera colorée en vert. (1pt)
- Si la réponse choisie est incorrecte, elle sera colorée en rouge. (1pt)
NB : Dans les deux cas, un bouton « Next » doit apparaître pour permettre à l’ utilisateur de passer à la
question suivante, comme illustré dans la figure 4. (0.5pt)
- À la fin du quiz, le score final de l’ utilisateur doit être affiché. (2.5pts)
NB : Si le score est inférieur à 100% , un bouton retake sera affichée comme illustré dans la figure 5.
(1pt)
Figure 4: L’affichage de bouton “Next” Figure 5: L’affichage de score et le bouton “Retake”
4. En cliquant sur le lien « manage questions » , l’utilisateur est redirigé vers la route
/question/add qui affiche un formuliare de création de question implémenté avec React Hook
Form et validé par Zod, comme illustré dans la figure 6. (2.5pts)
3
Figure 6: Ajout d’une nouvelle question
NB : Le champ subject est une liste déroulante qui affiche de manière unique tous les sujets présents
dans le fichier [Link].
5. Avant la soumission, et en utilisant Zod , les règles suivantes doivent être respectées : (1.5pts)
- Le champ « question » est obligatoire.
- Les options doivent être exactement trois .
- La valeur de correctanswer doit être entre la valeur 0 et 2 avec :
- 0 : indique que la 1ère option est la bonne réponse .
- 1 : indique que la 2ème option est la bonne réponse .
- 2 : indique que la 3ème option est la bonne réponse .
6. Ajouter en utilisant zustand : (5.5pt)
a) Un système de rating propre à chaque question sera intégré à l’interface d’affichage /quizz,
comme le montre la figure 7.(3pts)
NB : dès qu’un rating est attribuée, elle s’affiche instantanément.
4
(a) Avant l’ajout du rating (b) Après l’ajout de rating
Figure 7: Ajout du rating par rapport à une question
b) Lorsque l’utilisateur a répondu à toutes les questions du quizz et le score est affiché, on va
calculer la moyenne des ratings de toutes les questions du quizz (Voir Figure 8) . (2.5pts)
Figure 8: Ajout de la moyenne du rating
NB : avec Zustand, la fonction fournie à create reçoit deux arguments : set pour modifier l’état, et get
pour y accéder. La méthode get() renvoie l’état actuel du store."
Bon courage