Transformer l’attribution des places de notre classe en jeu en ligne - Seat Stealer

Contexte

• C’est un side project que j’ai lancé au lycée, avec l’envie de rendre l’attribution des places, fastidieuse et ennuyeuse, plus amusante.
• L’idée était que les élèves participent directement depuis leur propre appareil et se disputent les places qu’ils veulent.
• À l’époque, la liste des élèves était codée en dur et le code était devenu un véritable spaghetti, mais le résultat final était tout de même convaincant.
• Je n’oublierai jamais le premier jour de démonstration après avoir obtenu l’autorisation du professeur principal. La réaction a été extrêmement enthousiaste, et le projet a été utilisé toute l’année.

Refonte

• Après l’obtention de mon diplôme, l’école m’a recontacté. On m’a demandé d’adapter ce programme à la classe actuelle.
• Mais le code était trop emmêlé, et comme la liste des élèves et le plan de classe étaient codés en dur, j’ai décidé de repartir sur une refonte pour en faire un projet maintenable.
• Structure
  • Backend : pour que toutes les données des élèves soient traitées côté client, le backend ne sert qu’à transmettre les données, un peu comme un « serveur de jeu ».
    • Node.JS
    • Socket.IO
  • Frontend - admin : gère l’ensemble des données des élèves et supervise le déroulement du jeu. Cette interface a été conçue en partant du principe qu’elle serait diffusée sur une TV.
    • SvelteKit
    • Socket.IO
  • Frontend - élève : communique avec l’admin via le backend pour échanger des données.
    • SvelteKit
    • Socket.IO
• Un éditeur avec une interface soignée a été ajouté pour pouvoir modifier facilement le plan de classe et la liste des élèves.

Scénario

1. Sur la page admin, on lance « attribution des places en ligne » et on téléverse le fichier de données des élèves : une nouvelle « salle » est créée et un QR code permettant aux élèves de se connecter s’affiche.
2. Les élèves scannent le QR code avec leur appareil pour rejoindre la partie. Depuis la page admin, il est possible de consulter et gérer l’état des connexions des élèves.
3. Quand l’admin démarre le jeu, l’écran « choix de la place » apparaît côté élève. Les élèves votent pour la place qu’ils veulent, et cela est enregistré sur la page admin.
4. Une fois que tous les élèves ont terminé de voter, la page admin affiche les résultats.
5. Les élèves ayant choisi la même place font ensuite un petit jeu sur place pour se départager.
   • Pierre-feuille-ciseaux, dé, mini-jeu, etc. : cela dépend du professeur.
6. L’élève qui gagne le jeu obtient la place concernée.
7. On répète jusqu’à ce que tous les élèves aient une place attribuée.

Retour d’expérience

• Afin de communiquer en toute transparence sur le fait qu’aucune donnée élève n’est collectée ni utilisée, le projet a été publié en open source.
• Comme l’outil est pensé pour être utilisé dans un cadre scolaire, le plus difficile a été de le concevoir pour gérer toutes sortes de cas particuliers.
  • Si un élève perd sa connexion pendant la partie, une reconnexion est tentée, et si elle échoue, il peut reprendre là où il en était en se reconnectant plus tard.
  • Si un élève est absent, la partie peut continuer même sans sa participation.
  • Si un élève est en retard, il peut rejoindre la partie en cours de route.
  • En cas d’usurpation de l’identité d’un autre élève, une expulsion est possible.
• Un guide d’utilisation détaillé a été réalisé et publié sur YouTube afin que l’outil puisse aussi être utilisé dans d’autres classes.
  • https://youtu.be/C4ezwIrIfjc
• Comme c’est encore la période des vacances, je n’ai pas encore pu voir le résultat du projet, et cela m’a donné une raison d’attendre avec impatience le semestre de printemps, ce qui ne m’était jamais arrivé auparavant.
• Si vous connaissez des enseignants autour de vous, n’hésitez pas à leur partager ce projet. Merci.

[seoulrain]

Avec Chrome, même si j’ajoute des noms d’élèves, le compteur n’augmente pas.

[2147483647]

Comme écrire tous les noms peut être fastidieux, ce serait bien de pouvoir les remplacer simplement par des numéros.

[joon14]

C’est mignon haha
Je vois bien quelques petits points à corriger, mais je vais le partager avec des enseignants autour de moi.

[geeksk553]

C’est une idée amusante !