Genial.ly et les escape games

Article écrit par Mélanie Fenaert
le 21 avril 2018
Version actualisée !

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, pour la plupart 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 « Pages » dans le menu de gauche et activer l’option « Microsite ».
JPEG - 47.7 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 (ancienne version du site).

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 différents effets.

Citons notamment une animation tout à fait pertinente dans le cadre d’un escape game, l’effet « Occulter ». 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 », « Entrée », « Souris dessus », « Occulter ».
JPEG - 23.4 ko

Attention, une récente 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 » (en haut à droite de l’éditeur) et dans l’onglet « Visualisation », désactiver l’option « Indicateur d’interactivité ».
JPEG - 36.3 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 après un certain délai (30 secondes dans l’exemple ci-dessous... ce qui est déjà très long dans un escape game ! N’abusons pas de cette pénalité, et respectons le droit à l’erreur des joueurs).
Sélectionner l’élément, le faire pointer vers la diapo initiale de l’énigme grâce à une interactivité. Puis cliquer sur « Animation », « Entrée », sélectionner l’effet souhaité et sa direction, puis dans « Début », régler la durée en secondes.
JPEG - 39.4 ko

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 exercice par exemple créé avec LearningApps, d’un fichier son, d’un compte-à-rebours... 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 - 55 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.

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

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.

Depuis la dernière mise à jour de Genially, un fichier son hébergé sur Soundcloud, paramétré en écoute automatique, et intégré à une diapo particulière peut se déclencher à l’ouverture de cette diapo. La condition est que ce fichier intégré soit placé dans la diapo, masquée par un objet ou par l’image de fond. De quoi réaliser de beaux effets sonores, tels qu’une porte qui claque ou un personnage qui parle... Pour une ambiance musicale qui se prolonge sur l’intégralité du jeu, positionner le fichier intégré (toujours en écoute automatique) en dehors d’une des diapos : il sera invisible pour le joueur, et se déclenchera automatiquement à l’ouverture du Genially [2].

Pour insérer un compte-à-rebours ou un chronomètre, vous trouverez un tutoriel sur cette page. Cependant, dans le cadre d’un escape game, il faudra plutôt veiller à trouver un outil paramétrable non en fonction d’une date mais en fonction d’une durée.

NEW !

Nous regrettions dans la version précédente de l’article qu’il n’existe pas de chronomètre parfaitement adapté aux escape games virtuels. S’cape a donc conçu une solution : un outil complètement paramétrable, intégrable et sans publicité. Contrairement aux autres chronomètres, son déclenchement est automatique et ne pas être stoppé par un joueur. L’astuce du Genially dans le Genially permet de le faire apparaître sur l’ensemble des diapos de l’escape game virtuel. Tous les détails dans l’article Le minuteur de S’cape et dans le tutoriel ci-dessous.

On peut aussi rendre le décor interactif en intégrant un Genially dans un Genially. Une méthode astucieuse proposée par Dimitri Saputa dans ce tutoriel :

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 [3], le concept a été développé au printemps-été 2017 par plusieurs enseignants [4].

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 « Pages », sélectionner l’icône à côté de la diapo voulue pour accéder au menu « Transition de page », puis sélectionner « Aucun » dans le style de la transition et « Appliquer pour toutes les pages ».
JPEG - 71.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.

Genially propose depuis le 12 juillet 2018, avec les versions Edu et Master, de nouveaux thèmes dans l’esprit escape game, très travaillés des points de vue visuel et sonore. Six ambiances sont disponibles : Mystère, Industriel, Horreur, Espace, Espionnage et Aventure. Genially s’est inspiré de nos tutoriels développés durant l’été 2017 (voir ci-dessus) pour pré-programmer des codes variés : digicode, touches de piano, clavier de téléphone, combinaison de coffre-fort... Ils sont aisément adaptables à tout mot de passe, en déplaçant les zones d’interactivité et en supprimant ou dupliquant des diapositives. Une réelle source d’inspiration pour de nouvelles créations... Mais on compte aussi sur vous pour rester originaux et inventifs !

Attention, comme indiqué précédemment, il faut désactiver l’indicateur d’interactivité une fois un modèle choisi !

Des fonctionnalités Pro

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.

Activer le déplacement des objets sur un Genially permet de recréer la fouille d’une pièce, en cachant des éléments les uns derrière les autres. Attention toutefois à bien bloquer ce qui ne doit pas être déplacé grâce au bouton « Cadenas », sinon tout le décor chavire, et ceci pour toutes les diapos du Genially ! Notez que tous les éléments reprennent leur place initiale quand on quitte puis revient sur la diapositive.

Plusieurs des escape games proposés en fin de l’article utilisent cette fonctionnalité (Escape from Tortuga, La malle retrouvée…). Allez dans les Paramètres de votre Genially et, dans l’onglet Visualisation, activez l’option « Glisser les éléments ». Pour bloquer les autres éléments, cliquez dessus puis sur le « Cadenas » dans la barre d’outils.
JPEG - 33 ko

Astuce : pour éviter l’effet « tout le décor part en vrille », sélectionnez d’abord l’ensemble des objets de la diapositive en un seul cliqué-glissé, puis cliquez sur le cadenas : plus rien ne pourra bouger. Choisissez ensuite les seuls éléments à déplacer puis débloquez-les en cliquant à nouveau sur le cadenas.

Mais on peut aller encore au-delà, en simulant des énigmes réalisables normalement avec de vrais objets. Dans Break in Mars version réelle, créé en septembre 2017, Hélène Merlin a fait utiliser à ses élèves des filtres colorés pour révéler un message secret. Lors de la création de la version virtuelle de cet escape game, cette énigme a pu être reproduite grâce à cette fonctionnalité, tout en jouant avec la transparence des objets, ici des formes de couleur.

La transparence se règle finement, et il faut veiller à bien l’adapter aux différentes nuances de couleur du texte, afin que ne soient révélées que les lettres attendues.
JPEG - 22 ko

Dans le même escape game, des mots mêlés étaient proposés aux élèves. La possibilité d’écriture sur Genially permet aussi de recréer ce jeu. Tout comme pour le déplacement, les tracés disparaissent quand on sort de la diapositive.

L’activation de cette fonction passe par les « Paramètres », dans l’onglet Visualisation activer l’option « Dessiner sur le Genially ».
JPEG - 32.8 ko

Idée énigme : un schéma, un trajet entre des points, un labyrinthe… qui une fois complété constituerait une aura à révéler avec une application de réalité augmentée. On attend vos créations pour les publier ici !

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 :

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.

[2Ceci est à vérifier avec votre navigateur lors de l’aperçu : le son automatique ne fonctionne pas toujours, avec Google Chrome notamment.

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

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