Coder un test de personnalité (webapp)
Sur cette page tu trouveras un déroulé pas-à-pas pour créer un test de personnalité avec Flask. Ce déroulé comprend 5 étapes :
- Création de l’appli et structure HTML/CSS
- Initialisation des cookies
- Dynamiser la page de question
- La route /reponse
- Mise à jour des cookies
- Affichage du résultat
Étape 1 : Création de l’appli et structure HTML/CSS
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)
- 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
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
Structure HTML / CSS de la page d’accueil
Personnalise ta page d’accueil comme tu le souhaites. Voici quelques conseils :
- Ajoute tailwind en linkant son lien pour faire ton css
- Structure ta page HTML proprement :
- Un <header> pour ton entête
- Un <main> pour ton corps de page
- Un <footer> pour ton pied de page
- Pense à mettre un lien pour pouvoir démarrer le test et changer de page !
À la fin de cette étape, tu dois avoir une webapp qui se lance et affiche une page d’accueil, ainsi qu’une page affichant une question.
Étape 2 : Initialisation des cookies
Cookies de session
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.
- Importe session pour pouvoir utiliser ce cookie plus tard dans notre code.
- Puis importe os qui va nous permettre de générer une clé sécurisée
- Et on génère une clé secrète aléatoire de 24 octets, utilisée pour chiffrer les données de session
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.
Ajoute donc les deux cookies correspondants dans ta route d’accueil !
À la fin de cette étape, tu dois avoir une webapp qui se lance et affiche une page d’accueil. En arrivant sur cette dernière, les cookies numero_question et score sont initialisés.
Étape 3 : Création des questions
Structure HTML / CSS de la page affichant une question
Tu peux maintenant créer une page affichant la question.
Pour faire ta structure HTML/CSS, tu n’as besoin que d’un exemple de question, et d’un exemple de résultat. Pour le moment, ces pages seront totalement statiques : il s’agit donc d’avoir un exemple de question et un exemple de résultat. Nous le dynamiserons plus tard, quand nous programmerons le nécessaire.
Dans la fichier main.py :
- Crée une route /question dans le fichier main.py afin de voir le rendu de ce que tu programmes. Pour le moment on le remplit uniquement de sa méthode et d’un render_template vers le fichier html.
Dans le dossier templates :
- Crée et fais la structure html et css de ton template question.html
Rappel : tu peux voir le rendu de la page que tu construis en HTML / CSS en ajoutant le nom de ta route dans l’url de ton navigateur.
Maintenant que ta page de question est créee, pense à la linker dans ton bouton sur la page d’accueil ! Pour cela, indique sa route dans le href
Création du tableau des questions
Crée un nouveau fichier python où tu vas stocker toutes tes questions, et les réponses possibles par symbole.
Nomme le de façon bien reconnaissable, tel que questions.py et il doit être à la racine de ton projet.
- Crée un tableau questions[]
- Dans ce tableau, crée un dictionnaire par question, elle doit contenir :
- La question dans « énoncé »
- Puis la réponse possible dans chaque symbole
XXXXXXXXXXXXXXXXXXXXXX
Étape 2 : Dynamiser la page de question
Route de question
Fais en sorte que le lien pour démarrer le test sur ta page d’accueil redirige vers la route /question.
Crée la route /question . Pour le moment, on va définir directement une question, comme sur l’exemple ci-contre
La route /question doit alors afficher la page question.html en lui passant la question et les réponses possibles.
Ajout du Jinja
Sur le fichier question.html, on pense à ajouter le Jinja nécessaire pour afficher la question et les réponses !
Pense à nommer correctement tes variables. Si tu as passé des variables « question » et « reponses » dans ton render_template(), alors tu devras par exemple utiliser {{question}} pour afficher ta question / ton énoncé
À la fin de cette étape, lorsque tu commences le test de personnalité, celui-ci affiche la question voulue.
Étape 3 : La route /reponse
Ajout des liens
Sur la page question.html, il faudrait que chaque réponse envoie vers une route spécifique.
Ajoute des liens pour chaque réponse : un lien vers /reponse/0, un lien vers /reponse/1/, etc.
Création de la route de réponse
On crée maintenant la route de réponse. Il s’agira de la route /reponse/<numero>
Ce genre de route est une route avec argument : tous les liens qui commencent par /reponse/ amèneront ici, et le reste de la route sera récupéré dans la variable numero. Par exemple, tous les liens suivants amèneront sur cette même route :
- /reponse/0 (la variable numero sera alors « 0 »)
- /reponse/3 (la variable numero sera alors « 3 »)
- /reponse/banane (la variable numero sera alors « banane »)
Pour vérifier que cela fonctionne bien, on ajoute simplement un print() qui affiche la variable numero
La liste des questions
Crée une liste qui contiendra les questions. Pour le moment, on en met juste une ou deux, comme sur l’exemple ci-contre
(c’est juste pour tester !)
Puis, fais en sorte que ta route /question récupère la question correspondant à numero_question.
Ainsi, si le numero_question est de 0, on affichera la question 0. S’il est de 1, on affichera la question 1, etc. !
À la fin de cette étape, tu as la même chose qu’à l’étape 2, si ce n’est que le numéro de la réponse choisie s’affiche dans la console quand tu cliques dessus.
De plus, la question affichée correspond à la question 0 de ta liste de questions.
Étape 4 : Mise à jour des cookies
Mise à jour de numero_question
Après chaque réponse, avant de rediriger vers la route /question, pense à ajouter 1 au cookie numero_question !
Le cookie symboles
À chaque question, on a besoin de mémoriser les symboles correspondants à chaque réponse pour pouvoir ensuite assigner les points correctement lorsque l’utilisateur cliquera sur l’une des réponses.
Sur la route /question, on mémorise donc les symboles actuels dans une liste stockée dans un cookie symboles. Par exemple, si cette liste contient [« triangle », « carré », « rond »], alors cela voudra dire que la réponse 0 est de type « triangle », la réponse 1 de type « carré » et la réponse 2 de type « rond ».
Mise à jour du score
Après chaque réponse, avant de rediriger vers la route /question pour afficher la question suivante, on doit mettre à jour le score en fonction de la réponse choisie.
Notre cookie symboles retient les symboles correspondants à chaque réponse. On peut donc récupérer le symbole choisi simplement en prenant le symbole ayant la même position dans la liste que notre numéro de réponse !
Une fois le symbole choisi récupéré, on ajoute 1 au score correspondant : session[« score »][symbole_choisi] += 1
À la fin de cette étape, tu as un test de personnalité quasi fonctionnel. Simplement, il n’y a pas beaucoup de questions et il est infini : on n’a encore aucun affichage de la page de résultats.
Étape 5 : Affichage du résultat
Afficher la page resultats.html
Fais en sorte que, après avoir choisi une réponse, si on a atteint la dernière question, alors cela affiche la page resultats.html plutôt que de rediriger vers une nouvelle question.
Pour cela, tu peux utiliser la méthode len(), qui permet d’obtenir la longueur d’une liste : len(questions) donne donc la longueur de la liste de questions !
Le dictionnaire des descriptions
Crée un dictionnaire descriptions qui donne la description correspondante à chaque symbole.
Dynamiser la page de résultats
Dans le code Python, on fait en sorte de récupérer le symbole gagnant, c’est-à-dire celui avec le meilleur score :
On peut alors passer la description correspondante à notre page de résultats :
return render_template(« resultats.html », description = description)
…et ajouter du Jinja sur notre page de résultats pour afficher la description voulue.
À la fin de cette étape, tu as un test de personnalité fini ! N’hésite pas à peaufiner tes descriptions, ajouter des questions, personnaliser l’apparence graphique de tes pages…