Page en construction : certains éléments manquent

Game Map : rétro 2024

Le module H5P « Game Map », développé par le formidable Oliver Tacke, est une perle ! J’ai eu un peu de mal à prendre en main son paramétrage au début, mais une fois que j’en ai saisi le principe, j’ai mesuré l’étendue de ce qu’il est possible de créer avec !

Avant : contenu d'origine

Je suis partie d’un contenu statique, conçu par Le Livre Scolaire et portant sur les événements qui se sont produits en 2024 sur la scène littéraire et, plus généralement, artistique. Il s’agit d’un PDF qui invite à répondre à 14 QCM, agrémentés d’illustrations, d’anecdotes et d’indices, et disposés le long d’une ligne sinueuse. La ressemblance avec un plateau de jeu de société (type « jeu de l’oie ») m’a tout de suite donné l’idée de le transposer dans le module « Game Map » de H5P :

Pendant : la création graphique

Pour gamifier cette « rétrospective 2024 », j’ai dû apprivoiser le module « Game Map » avec lequel je n’avais encore rien créé 🙂

Il faut charger une image de fond qui fera office de plateau de jeu. J’ai filé sur Canva, le studio de création graphique à tout faire : j’ai placé la ligne sinueuse (que j’avais détourée du document original) sur un fond gris, ai disposé autour des icônes en lien avec la thématique de chaque question, ajouté une case départ intitulée « Rétrospective 2024 » et une bande latérale bleue pour afficher le sous-titre et la source du jeu :

Comme ce fond me semblait un peu trop statique, j’ai animé les images en leur impulsant un mouvement aléatoire, toujours dans Canva. Puis j’ai exporté la présentation au format .gif et l’ai compressée dans ImagOptim, obtenant ainsi un fond dynamique, mais plus lourd et au rendu trop pixellisé à mon goût quand on passe en plein écran :

Fond animé pour le module Game Map de H5P

Après avoir importé le fond du jeu dans « Game Map », on dispose sur la carte les étapes (ou levels). Pour moi, ce sont 14 étapes, chacune abritant une question – mais avec un « twist » : au lieu de créer de simples QCM au format texte comme dans le quiz de départ, j’ai utilisé le module « Image Choice » afin de proposer des réponses illustrées. Mon but était double : rompre la monotonie que risquait d’engendrer la succession de QCM textuels et rendre le quiz plus attrayant en lui donnant une dimension visuelle plus attrayante.

À cet effet, je suis retournée dans Canva pour créer un template associant image et texte coloré et générer les vignettes des réponses. Cela donne de la cohérence à l’activité car le même code graphique est utilisé de la question 1 à la 12 :

J’ai également utilisé l’application mockup de Canva pour mettre en scène les couvertures des livres dans une situation concrète ou un joli décor :

Je me suis enfin occupée de l’animation sonore du jeu, qu’il ne faut pas négliger si l’on veut renforcer l’immersion dans un univers ludique. Aussi ai-je passé un long moment à parcourir les bibliothèques sonores de Pixabay et de Fifty Sounds pour y collecter des pastilles sonores susceptibles d’illustrer les diverses actions du jeu : niveau verrouillé / déverrouillé, vie gagnée, bonus temps, erreur, défaite, victoire… J’ai ajouté une musique de fond, mais je pense que j’aurais pu m’en dispenser.

Après : une adaptation gamifiée

Il ne me restait plus qu’à paramétrer le jeu en lui-même : dans « Game Map », depuis la mise à jour de 2025, les paramètres sont nombreux et cumulables / combinables, si bien que le nombre de scenarii possibles donne le vertige ! Pour cette fois, je me suis contentée d’un réglage basique.

J’ai choisi de ne pas subordonner l’avancée du joueur à la réussite : ainsi, l’étape suivante est-elle révélée quand la précédente est terminée, qu’elle se soit conclue sur un succès ou un échec. Libre au joueur de poursuivre son chemin ou de recommencer l’activité échouée : il n’est pas bloqué en cas d’erreur – du moins en a-t-il l’illusion car, en réalité, le système est conçu pour encourager le joueur à revenir sur ses échecs et in fine, à apprendre – ce qui est l’objectif. En effet, comme l’atteinte d’un certain score est requise pour déverrouiller les bonifications – 3 vies supplémentaires, habilement placées au fil du jeu – le joueur est poussé à réexaminer les questions sur lesquelles il s’est trompé s’il veut débloquer le bonus. C’est une stratégie efficace pour améliorer l’apprentissage.

Voici le résultat de cette adaptation gamifiée, que je trouve plutôt plaisante, bien que perfectible :

Remarques finales

  • Pour présenter l’activité et donner quelques conseils / consignes, j’ai inséré un module « Course Presentation » à l’étape 1. Par défaut, la présentation s’affiche avec le bouton « Plein écran » en bas à droite. Or, si on clique dessus, rien ne se passe et cela a au contraire pour effet de réduire le module « Game Map ». Je pense que le bouton ne devrait pas apparaître ; peut-être est-ce un oubli d’Oliver ?
  • Contrairement à tous ses cousins (« Question Set », « Single Choice »… ), le module « Image Choice » ne randomise pas les réponses : elles sont toujours présentées à la même place, même quand on recharge l’exercice, ce qui ruine complètement la « rejouabilité ». Je ne comprends pas pourquoi la randomisation n’a pas été intégrée dans ce module ; est-ce une contrainte technique ?
  • Certains sons insérés dans le module « Game Map » ne sont pas joués, notamment à la fin d’une étape en cas de réussite totale ou partielle, alors qu’ils sont chargés dans le back-office. Je n’arrive pas à savoir s’il s’agit un bug ou d’un réglage que j’interprète mal ?