Devoir de l'année dernière

Consignes​

A la fin de la séance, créez une archive de votre code et déposez-la sur la page moodle du cours. Cette archive doit contenir tous les fichiers permettant de faire fonctionner votre code.

Commencez par télécharger cette archive. Elle contient un répertoire avec un script php et des images. Pour rappel, une manière de lancer un serveur local est d'exécuter la commande suivante : php -S localhost:8888

Il ne faut pas modifier les codes PHP

• Pensez à sauvegarder votre code fréquemment.
• Vous n'êtes pas autorisés à utiliser react. Vous n'êtes pas autorisés à utiliser chatGPT ou autre IA.
• Vous avez le droit à toute la documentation en ligne que vous voulez.
• Attention à la qualité du code que vous écrivez, il est possible que j'en tienne compte dans la notation.

Très important : Si votre code ne donne pas le résultat escompté, ne restez pas coincés ! Avancez ! J'évaluerai tout code écrit !

Exercice Jeu de culture générale​

Regardez la vidéo ci-dessous. Elle illustre le résultat final attendu:

1. Au lancement du jeu, l'utilisateur choisit dans une liste s'il souhaite jouer en mode expert ou facile.
2. Si le niveau expert est choisi, la photo d'un président s'affiche et à côté 5 drapeaux.
3. Si le niveau facile est choisi, la photo d'un président s'affiche et à côté 3 drapeaux.
4. Le joueur doit trouver à quel drapeau correspond la photo du président qui vient de s'afficher en cliquant sur le bon drapeau. Si le joueur clique sur le mauvais drapeau, le nombre de mauvaises réponses est incrémenté de 1 et le fond de la cellule du tableau qui récapitule les scores est passé en rouge.
5. Si le joueur clique sur le bon drapeau alors le nombre de bonnes réponses est incrémenté de 1, le fond de la cellule est passé en vert et un nouveau président est affiché.
6. Un président n'est jamais affiché deux fois.
7. Quand les 5 présidents ont été trouvés alors, à la place de la photo d'un président, s'affiche le message "jeu terminé" et les drapeaux sont supprimés. Pour rejouer, il faut rafraîchir la page.

Les ressources qui sont données sont celles présentes sur le serveur (et donc publiquement accessibles):

• Un répertoire assets contenant toutes les images nécessaires pour jouer.
• Un fichier presidents.json contenant 5 entrées selon le format nom du président / url de l'image du président.
• Un script getDrapeaux.php chargé de vous retourner les url des images à afficher.
  • Ce script a deux paramètres $nom et $difficulte.
  • $nom est le nom du président que le joueur doit trouver.
  • $difficulte est le niveau de difficulté du jeu (1 pour facile, 2 pour expert).
  • Si le niveau de difficulté est de 1, alors le script vous retourne la liste de 3 url de drapeaux, 5 sinon. La liste est fournie dans un ordre aléatoire.
  • Par exemple, getDrapeaux.php?nom=Mandela&difficulte=1 peut retourner ["france.png","usa.png","affDusud.png"].
  • Par exemple, getDrapeaux.php?nom=Mandela&difficulte=2 peut retourner ["france.png","chine.png","bresil.png","affDusud.png","usa.png"].
• Un script script.php chargé de définir si une réponse qui lui est envoyée est bonne ou non.
  • Ce script a deux paramètres $nom et $drapeau.
  • Si le nom correspond bien au drapeau alors le script retourne "gagne".
  • Si le nom ne correspond pas au drapeau alors le script retourne "perdu".
  • Par exemple la requête /script.php?nom=Jinping&drapeau=affDusud.png retourne "perdu".
  • Par exemple la requête /script.php?nom=DeGaulle&drapeau=france.png retourne "gagne".

Ce sur quoi vous êtes évalués (20 points au total)​

Respectez au maximum les contraintes suivantes:

• Chargement des données JSON (5 points):

  • Charger de manière asynchrone les données liées aux présidents (4 points).
  • Afficher aléatoirement un président (1 point).

• Envoyer une requête aux scripts (5 points):

  • Générer et envoyer la requête asynchrone paramétrée au script getDrapeaux.php en fonction du nom du président et de la difficulté du jeu (3 points).
  • Générer et envoyer la requête asynchrone paramétrée au script script.php en fonction du drapeau cliqué par le joueur (2 points).

• Gérer la réponse du serveur (10 points):

  • Récupérer la réponse du serveur getDrapeaux.php et afficher les drapeaux retournés par le serveur. (4 points).
  • Récupérer la réponse du serveur script.php et faire la mise à jour du tableau si la réponse est mauvaise ou bonne comme dans la vidéo (incrémentation du compteur et changement de couleur du fond de la cellule concernée) (4 points).
  • Afficher le président suivant. Il est choisi aléatoirement et ne doit jamais avoir été proposé à l'utilisateur. (1 point).
  • Afficher "jeu terminé" quand toutes les associations président/drapeau ont été trouvées par le joueur. (1 point). Sur la vidéo on voit qu'à la fin d'une partie le jeu ne recommence pas automatiquement, j'ai rechargé manuellement la page pour pouvoir jouer à nouveau.

Vous n'êtes pas évalués sur la mise en page du site. Si les blocs ne sont pas placés aux mêmes endroits que sur la vidéo, ce n'est pas grave. L'essentiel c'est que la page soit fonctionnelle.