Crée ton test de personnalité

Dans cette activité, les makers vont créer leur test de personnalité en ligne en utilisant Flask. Ce projet leur fera pratiquer l’utilisation de routes, de cookies et leur permettra d’exprimer leur créativité avec Tailwind.

Objectifs pédagogiques

Compétences techniques

  • Création d’une application web
  • Création de pages web dynamiques

Compétences design

  • Conception d’un test de personnalité (questions, réponses, résultats possibles…)

Compétences projet

  • Gestion du temps et des priorités pour la création du test de personnalité

La place dans le module

Cette activité vient après l’activité Défis Flask et avant l’activité Crée un pendu en webapp

Jour 1

Jour 2

Jour 3

Jour 4

Jour 5

1h

🤩

🤩

30 min

🤩

🤩

30 min

🤩

🤩

1h

🤩

🤩

Ressources

Matériel

Conseils aux anims

L’activité elle même :

Cette activité est prévue pour faire un test de personnalité. Si tu te sens à l’aise en programmation, tu peux tout à fait en faire une activité de quiz. Les questions auront également des choix de réponses, et tu pourras en comptabiliser les scores. La page de résultat peut devenir un texte différent suivant le nombre de points obtenus. 

Rythme des ateliers : 

Les sections sont découpées pour te donner une idée méthodique pour créer ce projet sans perdre tes makers. Si parfois tu as un peu d’avance sur une partie de design html/css par exemple, ou la confection du tableau de questions, des résultats… enchaine au segment d’après. Tu pourras leur permettre d’avoir plus de temps en création libre par la suite.

Pour les makers ayant de l’avance :
Si tu as un ou des makers qui a de l’avance, ce projet permet de facilement trouver du bonus pour eux. Peaufiner ces pages HTML/CSS, ajout d’images, ajouter des questions, peaufiner les textes de résultats, etc…

Déroulé de l'activité

Segmentation de l’activité

 
 

Détail de l’activité

Segment 1 (30 min) : Intro et base du projet

Introduction (15 min)
Démo :

Explique aux makers que l’on va voir comment créer un test de personnalité sous forme d’application web.
Lance l’aperçu visuel du projet exemple en partage d’écran pour que les makers aient une meilleure idée de ce que l’on va faire au cours de cette activité.

Brainstorm :

Laisse le temps à tes makers de choisir le thème de leur test de personnalité. Ils doivent aussi savoir quel symbole ils vont utiliser ! Si ils ne le font pas maintenant ils seront perdus à chercher leurs idées pendant la programmation.

Note toi leurs idées de tests, et les symboles qu’ils utilisent.

Page d’accueil (15 min)

On va commencer par créer notre appli Flask, et la page d’accueil.

Le rythme de tes makers sera surement un peu plus rapide ici que pour le reste, car ils l’ont vu pendant les défis.

Crée un projet Flask :

  • On crée un nouveau dossier (pour ce nouveau projet) dans son ordinateur.
  • On l’ouvre dans vscode 
  • On crée la structure Flask (main.py, dossier templates, dossier static)
  • On crée l’application Flask dans le fichier main.py (import flask, création de l’application, le run de fin de code)

Crée la route de la page d’accueil :

  • On crée la route de la page d’accueil et on lui donne en rendu « index.html » que l’on va créer de suite après
  • importer render_template en haut du fichier
  • créer la route
  • la méthode index()
  • et retourner index.html

Crée le template de la page d’accueil

  • Dans le dossier templates :
    • On clic droit sur le dossier puis crée un nouveau fichier, pour faire l’index.html 
    • On pose la structure de base grâce au raccourci ! et TAB
    • On ajoute le titre au moins dans le fichier index.html pour que l’on puisse avoir un rendu et tester notre application

Conseils : code toi aussi ton projet, tu vas leur servir de projet exemple tout au long de ce module. Tu peux le faire sur rétroprojecteur ou partage d’écran, comme une aide visuelle, cela ne pose aucun souci. 
Quand tu as terminé, passe entre tes makers, ou fais leur partager leur écran, pour voir leur avancer et les aider si besoin.

Segment 2 (1h) : Création de structures HTML / CSS 

Structure HTML / CSS de la page d’accueil (40 min)

Les makers vont pouvoir créer leur structure html / css de leur page d’accueil. Cela les aidera à se rafraichir la mémoire sur ces 2 langages ! Cette page va donc prendre plus de temps à confectionner, car ça te permettra de mettre tous tes makers au même niveau. 

Code le tien en démo active pendant qu’ils font la leur. 

Méthodologie :

  • Rappelle leur le doctype
  • Linker tailwind pour faire le css
  • Structurer la base (header, main, footer)
  • Un lien pour pouvoir démarrer le test et changer de page ! 
  • Rappelle leur quelques balises html, comment on les utilise.
  • Puis quelques class tailwind.

Laisse leur le temps de bien faire leur page d’accueil, d’ajouter une image, et de voir les priorités css de tailwind les plus courantes. Si à l’inverse, il leur reste du temps, n’hésite pas à leur montrer de quoi élaborer un peu plus leur accueil, donne leurs des idées, cela va leur permettre de pratiquer le visuel et asseoir leurs acquis, ce qui facilitera la suite du programme du module. Jouer avec les padding, margin, et la flexbox serait un atout, mais cela peut être vu lors de la confection des autres pages.

Fais un tour des projets pour voir leurs pages d’accueil. N’hésite pas à les faire partager à tous le groupe !
Initialisation des cookies (20 min)

Pour ce projet, nous avons besoin que l’utilisateur puisse naviguer d’une question à l’autre et répondre à chaque question, tout en enregistrant son score au fil du test. 

Pour cela, nous allons utiliser une session utilisateur qui stocke les données temporairement côté serveur et maintient ces informations actives pendant toute la durée du test. Flask va créer un cookie de session unique pour chaque utilisateur, qui permettra à notre application de le reconnaître et de conserver ses réponses même s’il recharge la page ou navigue entre les questions.

Et initialise avec eux :

  • Le cookie de session de l’utilisateur

Pour le cookie de session on utilise la méthode urandom() : elle fournit une séquence aléatoire sécurisée, souvent utilisée dans des contextes nécessitant une sécurité élevée, comme la génération de clés, d’identifiants uniques, ou encore de tokens uniques dans des sessions ou des cookies. 

Note : On peut faire plus simple et utiliser app.secret_key = « cookie », ce serait correct, mais le cookie sera le même pour tous, et pas sécurisé.

  • Cookies pour les numéros de questions et le score : 

On aura besoin de deux variables pour faire fonctionner le test. Ces deux variables seront stockées dans des cookies de session. Et on va les initialiser à zéro pour débuter le test !

  • session[« numero_question »] = 0 : La variable de session numero_question est initialisée à 0, ce qui indique que l’utilisateur commence au début du quiz. En stockant ce numéro dans la session, on peut suivre la progression de chaque utilisateur et afficher la prochaine question en fonction de son numéro.

    session[« score »] : Cette variable de session score stocke un dictionnaire où chaque clé représente un personnage (par exemple « M » pour Mario, « L » pour Luigi, etc.), et chaque valeur est initialisée à 0. Le but est de garder en mémoire le score pour chaque personnage, afin de déterminer, à la fin du test, avec quel personnage l’utilisateur a le plus de similarités.

Segment 3 (1h) : Création des questions

Structure HTML / CSS de la page affichant une question (30 min)

Invite les makers à créer une page affichant la question. 

Pour le moment, cette page sera totalement statique : il s’agit donc d’avoir un exemple de question, nous le dynamiserons plus tard, quand nous programmerons le nécessaire.

 

Méthodo : Pour le moment, pas d’héritage de templates, ce serait trop compliqué en débutant tout juste Flask. Mais fais leur copier coller la structure de leur page d’accueil, et changer que le corps de page dans la balise <main> …. </main> !

Pour les anims : 

Dans le programme exemple, vous avez un dossier « docs ». 

Il contient un exemple de structure statique html/css pour la page question et un exemple pour la page résultat, avant la dynamisation.

Structure HTML / CSS de la page affichant le résultat (30 min)

Invite les makers à créer une page affichant le résultat. 

Comme pour le template de question, pour le moment, cette page sera totalement statique : il s’agit donc d’avoir un exemple de résultat, nous le dynamiserons plus tard, quand nous programmerons le nécessaire.

 

Segment 4 (30 min) : Création du tableau de questions

Création du tableau de questions (30 min)

Il est temps de créer le « tableau » qui va contenir les questions, et les choix proposés par symboles.

Idéalement, demande leur 5 questions par projet. Tu dois gérer ton timing, et tu pourras proposer à ceux qui ont de l’avance d’en ajouter.

Explique leur que questions[] est une liste. 
Chaque question est un dictionnaire.

Il nous faut : 

  • un énoncé
  • Une réponse par symbole

Laisse leur le temps de choisir leurs questions et leurs réponses possibles. Plus le projet est abouti, plus tu leur permets d’être fier du résultat et donc de leurs compétences. 

Segment 5 (30 min) : Code de la route question

Programmation du « if » de la route question (30 min) 

Explique aux makers que l’on va maintenant coder le nécessaire dans la route /question pour les afficher et les traiter.

Code les commentaires suivant : 

  • On va devoir traiter 2 cas de figure, et on va le faire avec une condition.
  • Pour le moment on va s’occuper de la partie « si il reste des questions à poser »

Importe le tableau de questions

Code avec tes makers toute la partie « if » de la condition avec tes makers. 

Explique leur chaque étape, en faisant attention à bien comprendre ce que chaque code fait.

Mets des commentaires sur ton projet exemple que tu leur partages en rétroprojecteur ou en partage d’écran. 

Et finis le code en renvoyant le template « resultat.html » dans le else. 

Segment 6 (1H) : Dynamiser le template question et route de réponse 

Dynamiser le template question.html (15 min)

Enfin, dynamise le template question.html (pas le href, on le fera quand on codera la route des réponses)

Il est temps de tester le rendu visuel ! Et debuguer si nécessaire les makers

Temps de débug (15 min)

Tous les makers vont tester leur programme, prends le temps de les débuguer. Il y aura forcément des erreurs de syntaxe, d’appel, et cela demande un peu de temps.

Conseils : 

  • Fais participer tous les makers aux debugs. Certains auront exactement les mêmes, ou verront comment tu déchiffres l’erreur en console pour voir si il y a un souci d’indentation, de syntaxes, etc…
  • Si des makers ont un programme qui marche, tu peux leur proposer de peaufiner leur template en HTMl ou CSS, ou d’ajouter des questions.
Programmation de la route réponse (30 min)

Maintenant, on va créer une route qui va gérer ce que l’on doit faire quand on a choisi une réponse et cliqué sur son symbole.  

Dans le fichier main.py, cette route devra :

  • récupérer le symbole choisi
  • ajouter 1 dans la variable score de ce symbole
  • Passer à la question suivante
  • et afficher le template question afin que diriger l’utilisateur sur celle-ci

Attention : on utilise redirect pour redirigé vers le template question.html. Ne pas oublier de l’importer en haut du main.py !

Conseils : 

  • Explique leur bien chaque partie du code, et code toujours avec eux sur ton projet exemple. 
  • Explique leur la route /reponse/<numéro> :
    •  Le <numero> est un paramètre de route qui va capturer la valeur du choix de l’utilisateur et le transmettre à la fonction sous forme de variable.

Dans le fichier question.html :

Maintenant que la route réponse est créee, on peut dynamiser les liens avec la route correspondante.

Test : Les makers testent leur code. A ce stade, ils doivent pouvoir aller sur une question, et les voir défiler quand il clique sur la réponse de leur choix.

Segment 7 (1H) : Programmation du résultat 

Programmation des dictionnaires pour le résultat (30 min)

Pour afficher le résultat, nous voulons 2 informations :

  • Pouvoir lui dire quel personnage il est (ou dire qu’il a une majorité de triangles, ca marche aussi !)
  • Et lui donner une description de ce que cela signifie dans sa personnalité.

Pour cela on va créer 2 dictionnaires, pour pouvoir les appeler a des endroits différents dans notre template html.

Crée un fichier resultat.py :

  • Remplis un dictionnaire python avec les noms
  • Et un dictionnaire avec la description du résultat
Programmation du « else » de la route question (30 min)

Pour programmer le résultat, on va aller dans la route /question et coder le « else ».

Pour rappel, le « if » permet de passer d’une question à une autre. Le « else » va permettre de comptabiliser les score et afficher le résultat de l’utilisateur. 

En tout premier lieu, en haut de ton fichier main.py : 

Commence par importer les variables resultats et noms, du fichier resultat.py

Dans la route /question :

Code le « else » qui permet de compter le score de chaque symbole, et d’en sortir le résultat. 

Prends le temps de bien expliquer chaque étape et mettre des commentaires à tes makers.

Segment 8 (30 min) : Dynamiser le résultat et partage de projet 

Dynamiser le template resultat.html (15 min)

Dans le fichier resultat.html :

  • Dynamise en appelant les variables au bon endroit
  • Montre leur qu’on peut le faire dans un chemin de la balise <img> !
Partage de projet (15 min)

Il est temps de laisser tes makers partager leurs projets ! 

Fais un tour de table pour ce moment convivial.

Tips 

 

Tips truc

machin bidule

Tips truc

machin bidule

Retour en haut