Le jeu en cours : la tâche qui tombe, la suivante à gauche et les quatre colonnes de destination.
Le concept
Le sujet de ce module porte sur les étapes d’un projet de motion design. Des tâches tombent comme les pièces d’un Tetris : l’apprenant doit les diriger vers la bonne étape. Un badge lui est attribué selon son score.
(Te)Tris est un module de démonstration dont j’ai conçu le jeu, réalisé le graphisme et l’intégration dans Storyline. Le code du jeu a été généré avec une IA à partir de mes maquettes et de mes instructions.
Spécificités techniques
Écran d’accueil : le bouton pour lancer le jeu et le commutateur du mode accessible.
Le mode accessible : même direction artistique, une question par tâche.
Mode accessible :
Dès la première slide, l’apprenant choisit son mode. Le mode standard lance le jeu codé. Le mode accessible lance un quiz construit dans Storyline qui reprend le même concept (16 questions tirées au hasard dans les mêmes 37 tâches), la même direction artistique, le score et la barre de progression. Il est navigable au clavier et testé avec le lecteur d’écran NVDA. Les deux parcours arrivent sur le même écran de résultats.
Le jeu en cours : trois bonnes réponses d’affilée ont effacé une erreur, un cœur le signale.
Analyse des erreurs : chaque tâche mal rangée est replacée dans sa colonne.
Mini-jeu intégré en objet web :
J’ai dessiné les maquettes dans Illustrator, puis le jeu a été codé avec une IA.
Chaque partie tire 16 tâches au hasard parmi 37, la vitesse augmente à chaque pièce et une colonne qui déborde arrête la partie. Trois bonnes réponses d’affilée effacent une erreur de la pile.
Dialogue avec Storyline :
Le jeu renvoie à Storyline des variables : score, nombre de bonnes réponses, pourcentage de réussite, fin de partie.
Elles servent à construire l’écran de résultats et sont disponibles pour un suivi LMS.
Analyse des erreurs :
En fin de partie, les tâches mal rangées sont replacées dans leur bonne colonne pour que l’apprenant voie ce qu’il a confondu.
Trois badges selon le score :
Le calque de résultats affiche "Stagiaire" en dessous de 70 %, "Motion designer" entre 70 et 90 % et "Légende du motion design" au-delà.
Le choix du badge est piloté par la variable de pourcentage.
Écran de résultats : le badge dépend du pourcentage de réussite.
Outils utilisés
Articulate Storyline, Photoshop, Illustrator, IA générative.
Voir le module : (Te)Tris