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 :
- Initialisation des cookies
- Dynamiser la page de question
- La route /reponse
- Mise à jour des cookies
- Affichage du résultat
On part du principe qu’une page d’accueil, une page de question, et une page de résultats ont déjà été créées.
Tu trouveras aussi un exemple de test de personnalité fini ci-dessous :
Étape 1 : Initialisation des cookies
Crée un projet Flask
Sur Replit, crée un nouveau projet de type « Flask ».
Tu auras ainsi le code de base d’une webapp déjà créé.
Crée une page d’accueil
Crée ton dossier templates (sur une application web avec Flask, toutes tes pages .html doivent être dans le dossier templates) et ajoutes-y une page accueil.html
Personnalise ta page comme tu le souhaites (tu peux ajouter un header, footer, des couleurs…). Pense juste à ajouter un lien ou un bouton qui servira à commencer le test !
Ajoute tes cookies
On aura besoin de deux variables pour faire fonctionner le test. Ces deux variables seront stockées dans des cookies.
- numero_question sera la numéro de la question actuelle
- score sera un dictionnaire qui contiendra le score pour chaque symbole possible.
Exemple : score = {« carre »: 0, « rond »: 3, « triangle »: 1 }
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 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…