Aller au contenu

Application Web de Quizz⚓︎

Objectif⚓︎

À partir des fichiers ci-joints, créer une application web de quizz.

Le résultat devrait ressembler à ceci:

Ce que fait l'application web donnée en annexe⚓︎

  • Affiche une liste de questions de quizz et permet de sélectionner une question pour y répondre.
  • Affiche la question sélectionnée (mais pas les réponses)
  • Affiche un message vide une fois validée la réponses.

Ce que doit faire l'application web à minima⚓︎

  • Afficher la liste des questions disponibles sur la page d'accueil.
  • Afficher une question sélectionnée et les propositions de réponses (mélangées)
  • Permettre de soumettre une réponse.
  • Afficher un message indiquant si la réponse est correcte ou incorrecte après soumission.
  • Avoir un lien pour revenir pour la page d'accueil.

Ce que pourrait faire l'application web en plus⚓︎

  • Permettre d'ajouter de nouvelles questions de quizz via un formulaire.
  • Gérer le cas où la personne n'envoie pas de réponse et clique directement sur envoyer.
  • Permettre de modifier ou supprimer des questions existantes.
  • Ajouter un système de score pour suivre les performances des utilisateurs.
  • Ajouter des catégories de questions et permettre de filtrer les questions par catégorie.
  • Améliorer l'interface utilisateur pour la rendre plus attrayante.

Mise en oeuvre⚓︎

Le projet devra comporter les fichiers suivants:

  • Un fichier serveur.py pour le serveur web. Il sera une adaptation du fichier donné en annexe.
  • Un fichier index.html dans le répertoire templates. Il sera une adaptation du fichier donné en annexe.
  • Un fichier question.html dans le répertoire templates. Il sera une adaptation du fichier donné en annexe.
  • Un fichier reponse.html dans le répertoire templates. Il sera une adaptation du fichier donné en annexe.
  • Un fichier style.css dans le répertoire static. Il sera une adaptation du fichier donné en annexe.

Il faudra rendre ces fichiers dans un seul fichier compressé ayant le nom suivant projetquizz_nom.zip (où nom sera remplacé par votre nom de famille).

Quelques informations utiles⚓︎

  • Vous pouvez stocker les questions de quizz dans une liste ou une base de données.

  • Dans le fichier serveur.py, les questions de quizz sont stockées dans une liste de listes. Chaque question est représentée par une liste contenant deux éléments :

    1. Une chaîne de caractères représentant la question.
    2. Une liste de chaînes de caractères représentant les différentes réponses possibles.

    Par exemple, une question est définie comme suit : 

    question = ["Quelle est la capitale de l'Espagne", ["Madrid", "Paris", "Berlin", "Rome"]]

    Cette question est ensuite ajoutée à une liste de questions : 

    liste_des_questions = [question]

    Ainsi, liste_des_questions contient toutes les questions du quizz sous forme de liste de listes.

  • Pour afficher des blocks (div pour la version générique) en colonne (pour les formulaires), regardez la documentation suivante: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Columns

  • L'alignement du texte à droite ou à gauche se fait via la propriété text-align. Voir https://developer.mozilla.org/fr/docs/Web/CSS/text-align
  • La transformation en css se fait via la propriété transform dont le documentation est: https://developer.mozilla.org/fr/docs/Web/CSS/transform