Genial.ly et les escape games

Article écrit par Mélanie Fenaert
le 21 avril 2018

En à peine trois années d’existence, le site genial.ly est devenu un outil très prisé dans le monde de l’éducation. Interface permettant de réaliser aisément des infographies, des présentations, des images interactives, des quiz, etc, ses diverses fonctionnalités ont aussi facilité le développement des escape games pédagogiques numériques et semi-numériques.

Créer un Genially peut être envisagé comme un simple support interactif avec divers éléments comme la vidéo d’introduction, le chronomètre, le fond sonore. Nombre d’enseignants sont allés plus loin et en ont fait l’interface accompagnant tout ou partie de leur jeu d’évasion, y intégrant des éléments de scénarisation, des décors, des indices cachés, des exercices, des codes et mots de passe.

Nous vous présentons ici quelques unes des fonctionnalités de l’interface, gratuites et utiles aux escape games pédagogiques, associées à des conseils, astuces et tutoriels. Des exemples de réalisations vous sont proposés en fin d’article.

Pour une prise en main des fonctionnalités de base (ajouter une diapo dans une présentation, insérer une image, créer une interactivité, partager, collaborer...) : se référer à la chaîne Youtube de Genially. Même si la plupart des tutoriels sont en espagnol ou en anglais, ils sont très compréhensibles ; l’équipe andalouse en a aussi réalisé en français. De plus, une recherche dans Youtube vous amènera à de nombreuses vidéos-tutoriels réalisées par des enseignants.

Paramétrer la navigation

Dans le cadre d’un escape game numérique, par nature non linéaire, nous vous conseillons d’utiliser une présentation en navigation libre, voire « en étoile », qui permet de proposer des choix en interaction avec l’image de fond et les objets, et de simuler le passage d’une pièce à l’autre par exemple.

JPEG - 65.4 ko

Or, une présentation Genially fonctionne par défaut comme un diaporama : en ajoutant des diapos, on peut créer différentes « scènes » mais elles se succèdent selon une navigation linéaire matérialisée par des flèches.
Pour modifier cela, aller dans l’éditeur, cliquer sur « Paramètres » et décocher la case « Habiliter la pagination » : tutoriel vidéo.
PNG - 70 ko

Il faudra ensuite insérer des boutons ou images permettant de faire l’aller-retour entre les scènes en fonction des choix de navigation : tutoriel vidéo.

Cacher des objets, des indices

Placer les éléments souhaités dans le décor. Noter qu’ils s’y fondent mieux si les images ont un fond transparent. Associer ensuite une interactivité (ouverture fenêtre, étiquette, lien externe, lien vers autre diapo) : tutoriel vidéo.
On peut aussi définir une zone invisible sur l’image de fond, et y appliquer les mêmes interactivités (voir plus loin dans le tutoriel Créer et améliorer un mot de passe avec Genially).

Les animations peuvent être intéressantes pour faciliter la fouille : repérage des objets animés, ou déclenchement d’une action au passage de la souris. Vous trouverez ici un tutoriel concernant ces animations.

Citons notamment une animation tout à fait pertinente dans le cadre d’un escape game, l’effet « Hide ». Au survol de la souris, l’élément disparaît, en révélant un autre. Pour cela, sélectionner l’élément à faire disparaître, cliquer sur « Animation », « Élément », « Souris dessus », « Hide ».
JPEG - 97 ko

Attention, une toute nouvelle fonctionnalité de Genially a été développée : la possibilité pour l’utilisateur de repérer les objets interactifs… Si l’intérêt est réel dans le cas de présentations professionnelles ou d’activités pédagogiques classiques, cela pose un gros souci dans un escape game numérique ! La fouille n’en est plus une, les codes sont révélés.

Une fouille rendue inutile par le bouton révélant les éléments interactifs

Très réactifs suite à notre demande, cette fonctionnalité est devenue optionnelle, mais elle est active par défaut : si ce n’est encore fait, il faut donc re-paramétrer tous les Genially avec fouille numérique ou codes, en décochant la case dédiée. Pour cela, dans l’éditeur, aller dans « Paramètres » et cocher la case « Occulter l’indicateur d’interactivité ».
PNG - 187.7 ko

Jouer avec le timing

Dans le cadre d’un défi en temps limité, on peut ajouter un peu de piquant au jeu en infligeant de petites pénalités aux joueurs trop pressés de réussir, ou peu enclins à réfléchir face à une énigme et préférant répondre au hasard. Pour cela, au clic sur un choix erroné, diriger la navigation vers une diapo indiquant l’erreur… Mais ne pas faire apparaître tout de suite l’élément interactif permettant d’en sortir ! Genially permet en effet la programmation de l’apparition de l’objet avec un délai compris entre 0 et 20 secondes.
Sélectionner l’élément, le faire pointer vers la diapo initiale de l’énigme grâce à une interactivité. Puis cliquer sur « Animation », « Élément », « Entrée », sélectionner l’effet souhaité et sa direction, puis dans « Début de l’effet », régler la durée avec le curseur.
JPEG - 113.7 ko

Si on souhaite une pénalité plus longue (mais pas trop tout de même, respectons le droit à l’erreur…), il suffira d’enchaîner plusieurs diapos avec le délai de 20 secondes.

Petit scoop : l’équipe de Genially est en train de travailler sur l’allongement de la durée des animations, qui devrait pouvoir monter jusqu’à 180 secondes. On attend avec impatience la prochaine mise à jour !

Voici un simple quiz, pour la démonstration, non contextualisé dans le cadre d’un escape game : pour voir la pénalité, il faut vous tromper bien sûr !

Intégrer des ressources externes

Il peut s’agir d’une vidéo, d’un fichier son, d’un exercice par exemple créé avec LearningApps...voire même d’un autre Genially. Utiliser le bouton « Intégrer » pour placer la ressource directement sur la diapo. Elle peut être aussi insérée derrière un objet grâce à une interactivité, par exemple dans une fenêtre : accéder alors à la fenêtre de code html grâce au bouton <>, insérer le lien ou le code d’intégration (iframe ou embed), et sauvegarder.
JPEG - 130.9 ko

Pour une vidéo, le lien peut suffire (par exemple le lien Youtube) ou l’iframe [1]. La vidéo peut aussi être hébergée sur un Google Drive, la manœuvre est un peu plus complexe, pour cela se référer à ce tutoriel.

Pour un fichier son, il doit être déposé sur une plate-forme comme Souncloud, on récupérera ensuite le lien d’intégration. On sélectionnera de préférence une musique qui complétera l’ambiance choisie par l’enseignant (angoissante, stressante... voire un compte-à-rebours). Un tutoriel réalisé par Gaëlle Gonnet.

Les exercices de type LearningApps possèdent aussi un iframe intégrable directement dans une diapo, ou dans une fenêtre.

Créer des codes

Éléments incontournables d’un escape game, les codes sous différentes formes peuvent être facilement intégrés à un Genially : par exemple un digicode pour passer un sas, ou un mot de passe d’ordinateur. Sur une idée de Thierry Guquet, inénarrable et ingénieux professeur de physique-chimie de l’académie d’Orléans-Tours [2], le concept a été développé au printemps-été 2017 par plusieurs enseignants [3].

La combinaison correcte est 3241.

Vous trouverez ici différents tutoriels pour réaliser vos mots de passe et codes :

Créer un code nécessite plusieurs diapos, tout en conservant l’illusion que l’on reste sur la même image. Pour un rendu parfait, soulignons l’importance du retrait des transitions entre ces diapos : dans la barre de gauche, cliquer sur « Animations », « Pages », Sans transition (cadres rouges). Pour étendre rapidement ce retrait à toute la présentation, sélectionner l’option Sans transition (cadre vert).
JPEG - 78.3 ko

Il faut aussi un parfait alignement des éléments d’une diapo à l’autre : utiliser pour cela le mode Design, comme indiqué dans le tutoriel précédent Associer un affichage à un Genially à mot de passe + mode Design.

Certaines fonctionnalités, présentes uniquement dans les licences payantes, cependant, sont également adaptées à la création d’un escape game numérique : déplacement d’objets, outils de dessin.

Quelques exemples de réalisations d’enseignants

Un Genially créé pour l’introduction

Dans Escp’rimes, voyage en Oulipo, Anne Petit a créé un Genially simple mais efficace avec deux diapos, un gif et un fichier Soundcloud.

Autre exemple : Reflex’On de Véronique Joyeux pour une introduction en vidéo.

Un Genially servant d’interface de jeu

La malle retrouvée est un escape game complètement numérique de Dimitri Saputa, mêlant fouille, codes, interactivités variées, liens externes vers des documents historiques. Un chronomètre et un fond sonore complètent l’ambiance du jeu.

Autres exemples :

  • Desapariciòn misteriosa, de Gaëlle Hallez, une belle ambiance et une fouille bien pensée.
  • Le temps des rois : François Ier de Mallory Monhard, un escape game à la réalisation élaborée, même si linéaire.
  • Coal me ! de Claire Lambert, et ses LearningApps variés.
  • Escape from Tortuga de Mélanie Fenaert et Grégory Michnik, notamment dans sa version 100% numérique, pour son ambiance sonore et sa grande variété de mots de passe et codes.
  • Complot de Valérie Rambaud, support numérique d’un escape game ancré dans le réel.
  • Commerkon, sauvez Superman de Johnny Eisenhauer, un escape game en éco-gestion.
  • Le piège des profondeurs de Stéphane Gambey, recréant parfaitement l’atmosphère confinée d’un sous-marin.

Citons aussi la possibilité de créer un Genially pour une seule énigme, dont le lien est découvert par les élèves lors de la fouille. Franck Turlan a réalisé ce quiz en y intégrant un fond sonore (cris de singe), des éléments cliquables et des gifs pour son escape game kiDNApping.

Vous trouverez à cette page l’ensemble des escape games utilisant Genially partagés sur notre site.

[1Notamment si on souhaite retirer les suggestions de vidéos, il faudra choisir « Partager » puis « Intégrer » directement sur le site Youtube, puis sélectionner les bonnes options avant de copier l’iframe.

[2N’hésitez pas à lui exprimer toute votre gratitude pour cette invention, vous le trouverez sur Twitter : @TGuquet :-)

[3Mélanie Fenaert, Amélie Silvert, Patrice Nadam, Régine Berthois