Crée un pendu en webapp

Dans cette activité, les makers vont créer un jeu de pendu avec Flask.
Ce projet permet de se rendre compte de ce qu’il est possible de faire avec Flask ainsi qu’avec les formulaires.
Les makers auront tout le loisir de personnaliser leur jeu de pendu comme ils le souhaitent.

Objectifs pédagogiques

Compétences techniques

  • Créer et savoir utiliser des formulaires
  • Dynamiser une page web avec le Jinja
  • Structurer et décorer sa page avec Tailwind (ou le CSS)

Compétences design

  • Création d’un wireframe sur Whimsical

Compétences projet

  • Priorisation et planification des tâches pour le projet libre

La place dans le module

Cette activité vient après l’activité Crée ton test de personnalité et avant l’activité Projet libre – Conception

Jour 1

Jour 2

Jour 3

Jour 4

Jour 5

1h

🤩

30 min

🤩

30 min

🤩

🤩

1h

🤩

🤩

Ressources

Matériel

Déroulé de l'activité

Segmentation de l’activité

Détail de l’activité

Segment 1 (30 min) : Démo & brainstorm

Démo (15 min)

Explique aux makers que l’on va créer un jeu de pendu sur cette séance et les prochaines.
Fais une démo de ces deux projets :

>>> Exemple de pendu A <<<
>>> Exemple de pendu B <<<

Partage ton écran en lançant ces projets, invite-les à proposer des lettres, à dire s’ils pensent avoir trouvé le mot, afin de commencer ton atelier par un moment ludique 🙂

En faisant tes démos, montre que ce n’est pas parce qu’on fera tous un pendu que ce sera forcément le même. On peut en effet voir que ces deux pendus sont assez différents :

  • Déjà, ils sont différents graphiquement !
  • L’un d’entre eux affiche une image de pendu qui s’affiche au fur et à mesure que l’on perd des vies
  • L’autre utilise un élément qui change de position au fur et à mesure que l’on perd des vies
  • le joueur peut entrer ses lettres soit via un champ de texte, soit via des boutons sur lesquels cliquer
  • le pendu B affiche quelles lettres ont déjà été utilisées
  • il utilise également un mode « infini » (il y a un nouveau mot à trouver après chaque victoire)
  • etc.

Il est important de pointer toutes ces mécaniques lorsque tu fais ta démo, cela pourra inspirer les makers pour le brainstorm qui suit !

Brainstorm (15 min)

Maintenant que l’on a vu deux exemples de pendu, chaque maker peut prendre un temps pour réfléchir au pendu qu’il aimerait créer. À quoi va-t-il ressembler graphiquement ? Comment gagne-t-on, comment perd-on ? Comment l’utilisateur entre-t-il ses lettres ?…

À l’issue de ce moment, l’objectif est que chaque maker sache à peu près sur quel genre de pendu il compte partir. Tu peux faire un petit tour de table où chacun explique ce qu’il souhaite faire avec son pendu.

Certains makers souhaiteront rester sur un pendu assez basique et préféreront se concentrer sur l’aspect graphique.

Ce n’est pas un souci ! Cette activité permet justement aux makers de s’approprier le pendu comme ils le souhaitent.
Et si jamais au cours de l’activité ils ne savent pas quoi ajouter à leur pendu, il sera toujours possible de suggérer des améliorations ! (ajout d’un score, choisir un mot aléatoirement avec un nombre de lettres précis, ajout d’une page d’accueil avant de démarrer le jeu, etc.)

Segment 2 (1h) : Conception & Initialisation du pendu

Conception sur Whimsical (30 min)

Invite les makers à forker le template Whimsical suivant :

>>> Template Whimsical <<<

Une fois cela fait, explique-leur comment remplir ce template : il faut répondre à chaque question (explique ce qui est attendu pour chaque question) et surtout faire un Wireframe qui représentera à quoi leur pendu devra ressembler.

Ce wireframe te sera très utile en tant qu’anim pour mieux comprendre ce que chaque maker souhaite faire quand inévitablement tu auras des questions sur la mise en page (« comment je mets tel élément à droite ? » / « comment je fais des colonnes ? » / « comment je fais un truc centré en bas ? »)

Profites-en pour noter le lien du document Whimsical de chaque maker dans un document, comme ça tu pourras avoir facilement accès à leur wireframes !

À l’issue de ces 30 minutes, chaque maker doit avoir une vision bien plus claire de son projet et de ce à quoi il devra ressembler graphiquement.

Initialisation du pendu (30 min)

Invite les makers à forker le template de pendu :

>>> Template de pendu <<<

Parcours avec eux le code pour faire un bref rappel : sur le fichier Python, on voit les imports, une route d’accueil, le app.run() à la fin…
Sur le fichier HTML, on voit que tout est à faire, il n’y a rien entre les balises body.

Dans le code, on peut voir un import « from pendu import Pendu« . Tu peux leur expliquer que cela importe des fonctions présentes dans le fichier pendu.py, mais qu’on ne touchera pas à ce fichier. Cet import nous permet d’avoir accès aux fonctions Pendu.initialiser() et Pendu.deviner() que l’on va découvrir !

Puis, montre aux makers comment initialiser le pendu en leur invitant à faire de même sur leur code :

  • Création d’un template HTML
  • Initialisation du pendu sur la route d’accueil
  • Redirection vers une route /jeu que l’on crée
    • Expliquer pourquoi l’on crée cette route : la route / sera la route d’accueil qui initialise le pendu, la route /jeu correspond à l’affichage de la page du pendu.
      Il est important de distinguer les deux : après chaque lettre entrée par l’utilisateur, on souhaitera simplement réafficher la page (et non pas réinitialiser le pendu) !
  • Remplacement des données statiques par des données dynamiques dans le document HTML
Pense également à ajouter les imports nécessaires !
Clique sur l'image pour la voir en grand !

On peut maintenant tester notre projet : notre page affiche bien un mot « caché » (constitué de symboles ‘_’) et notre nombre de vies est bien affiché.
Bien entendu, on ne peut pas encore y jouer car pour le moment on n’a aucun moyen de proposer une lettre… c’est donc ce que l’on va voir ensuite !

Segment 3 (1h) : Formulaire et personnalisation

Ajout du formulaire (30 min)

En partage d’écran, montre aux makers comment créer un formulaire pour rendre le pendu fonctionnel et invite-les à en faire de même sur leur projet en même temps.

  • Ajout du formulaire sur la page HTML
    • Pense bien à expliquer les label, input, l’action…
  • Création de la route /deviner
    • Montre comment récupérer la valeur d’un élément de formulaire : le champ « name » sur les éléments de notre formulaire nous permet d’accéder à ceux-ci !
Clique sur l'image pour la voir en grand !

Prend bien le temps d’expliquer le fonctionnement du formulaire : c’est normalement la première fois que les makers découvrent les formulaires. Tu peux bien sûr partager la page ressource sur les formulaires HTML.

Chacun peut alors tester son projet : on a un pendu très basique mais fonctionnel !

S’il reste du temps, les makers peuvent tout de suite passer à la personnalisation de leur pendu.

 
Personnalisation (30 min)
Les makers personnalisent leur pendu.
Passe voir les makers, accompagne-les et aide-les à personnaliser leur pendu.
 
N’oublie pas que tu peux les rediriger vers les ressources Magic Makers en fonction de ce qu’ils souhaitent faire :

Segment 4 (30 min) : Choix aléatoire du mot & personnalisation

Choix aléatoire du mot (5 min)
Le pendu que l’on a réalisé jusqu’ici a un défaut : on doit tout le temps deviner le même mot.

Rappelle donc aux makers l’existence du module random et plus particulièrement de la fonction random.choice() en montrant comment choisir un mot aléatoirement dans une liste de mots.

liste_mots = [« fraise », « banane », « abricot »]
mot_choisi = random.choice(liste_mots)

Il est possible que certains makers aient déjà réalisé cette étape : si c’est le cas, tu peux leur demander d’expliquer aux autres comment ils ont fait pour générer un mot aléatoire plutôt que de l’expliquer toi-même.
 
Personnalisation (25 min)
Les makers continuent de personnaliser leur pendu.
Passe voir chacun des makers, assure-toi d’être disponible pour pouvoir répondre à ceux et celles qui ont besoin d’aide.
 
Si tu es sur Discord, rappelle-leur qu’ils peuvent te mentionner (@TonNom sur Discord) à tout moment pour que tu puisses passer les voir dès que possible !

Segment 5 (30 min) : Message de victoire & personnalisation

Message de victoire (10 min)
Le pendu que l’on a réalisé jusqu’ici ne détecte pas les cas de victoire / défaite.

Demande si un maker a déjà fait en sorte qu’on ait un message qui s’affiche en cas de victoire, et s’il veut bien présenter à tout le monde sa solution.

Sinon, montre-leur comment réaliser cela (cf image ci-contre).

Dans tous les cas, profites-en pour faire un petit rappel du Jinja aux makers (comment afficher une variable, faire des conditions, des boucles). Tu peux leur redonner la ressource Magic Makers sur le Jinja !

Clique sur l'image pour la voir en grand !
Personnalisation (20 min)
Les makers continuent de personnaliser leur pendu.
 

Segment 6 (1h) : Fin de création et partage

Avancée en autonomie (40 min)

Les makers continuent à personnaliser leur pendu / à avancer en autonomie dessus. Pense bien à annoncer aux makers qu’ils ont 40 minutes avant de passer au partage des projets, et rappelle-leur une fois qu’il ne reste plus que 20 minutes ! Ces 20 dernières minutes devraient d’ailleurs être purement dédiées aux finitions : ce n’est plus le moment d’ajouter de nouvelles fonctionnalités.

Partage des projets (20 min)

Invite les makers à partager leur projet : il s’agit de copier le lien du projet lancé (c’est-à-dire le lien qui s’affiche dans la barre d’adresse une fois le projet lancé dans un nouvel onglet).

Puis, invite les makers qui le souhaitent à montrer leur projet en partage d’écran. C’est le moment où on peut tous ensemble proposer des lettres pour essayer de trouver le bon mot !

Finis cette activité avec une petite déclusion habituelle : est-ce que les makers ont aimé ? ont-ils trouvé ça trop facile / trop difficile ? S’ils avaient eu plus de temps, qu’auraient-ils aimé ajouter ?…

Tips 

 

Tips truc

machin bidule

Tips truc

machin bidule

Retour en haut