Genially est à l’origine un outil en ligne pour créer des supports de communication (infographie, présentation…). Très vite il a été détourné de son usage premier afin de ludifier les apprentissages [1]. L’interactivité offerte par son interface a également été largement exploitée pour réaliser des escape games virtuels.

Fonctionnant comme un diaporama, Genially souffre de l’absence de quelques fonctionnalités bien utiles que l’on retrouve habituellement dans les exerciseurs et les jeux. Notamment il est, par défaut, impossible d’exploiter les variables utilisateur permettant de sauvegarder temporairement les choix et les actions du joueur et de définir des conditions pour la suite des événements.

Par exemple, on pourrait envisager qu’un bouton permette d’ouvrir une porte à condition qu’un levier soit abaissé. Si ce dernier ne l’est pas, une variable X prend la valeur 0 ; si le joueur actionne la manette, la variable est alors égale à 1. Quand on clique sur le bouton de la porte, on teste la valeur de X pour déterminer si elle peut s’ouvrir ou pas [2].
C’est ce principe que nous avons utilisé dans notre défi Le laboratoire de S’CAPE. Il est nécessaire de ranger la verrerie pour pouvoir ouvrir le placard à l’aide de la clé dessinée sur le tableau. Une variable passe de 0 à 1 pour indiquer si le rangement est correct.

Une variable dans la page

Pour créer cette page, nous avons détourné la fonctionnalité Insérer- AUTRES et plus précisément intégré un code de type :

On crée ainsi une « boîte » portant un identifiant unique (id) et contenant le texte 0. Les deux balises <script></script> sont étrangement (mais absolument) nécessaires pour que le code soit accepté par Genially.

Par cette astuce, nous avons alors le moyen de définir une variable réutilisable. En effet, dans Genially, une variable créée dans un script ne semble pas être accessible par un autre script.

Pour récupérer et modifier le contenu de la « boîte », on utilise du javascript et plus particulièrement la propriété InnerHTML.
La ligne var x=document.get.ElementById(‘NOM_UNIQUE’).innerHTML; affecte à X le contenu de la « boîte ».
Inversement, la ligne document.get.ElementById(‘NOM_UNIQUE’).innerHTML=”1”; modifie le contenu et sauvegarde ainsi la valeur 1.

Dans le défi du laboratoire, le script correspondant au clic sur la clé peut se résumer de la manière suivante :

Si le contenu de la « boîte » (appelée ici ranger) est égal à 1 alors on cache un groupe contenant une autre « boîte » nommée placard et correspondant à l’image des portes du placard fermées. Dans le cas contraire, on affiche un message d’avertissement par l’intermédiaire d’une autre « boîte ». La « variable » ranger passe de 0 à 1 quand la verrerie est correctement rangée.

Rien de bien révolutionnaire dans le code utilisé, mais un subterfuge qui nous a permis par la suite de développer les diverses extensions que nous avons ajoutées à Genially.

Une variable pour plusieurs pages

Une deuxième étape dans notre utilisation des variables avec Genially est issue d’un bug détecté dans les premières versions de notre DND10. Alors que l’outil fonctionnait très bien sur une page unique, des dysfonctionnements apparaissaient lorsqu’on le dupliquait sur des pages successives.

Après recherche, il est apparu que des « interférences » étaient générées par la présence de plusieurs « boîtes » portant le même nom et provenant de pages différentes. Tout se passait comme si un transfert était possible au moment du changement de diapo... D’où l’idée de diffuser ainsi des variables de page en page.

La méthode est longue à mettre en place car il est nécessaire de procéder à la copie de chaque variable autant de fois qu’on doit changer de page, en tenant compte des retours en arrière.

Depuis, nous avons pu observer que placer la « boîte » variable en dehors de la page, ou plutôt en dehors de la zone d’affichage, la rendait disponible pour toutes les pages du Genially. Ainsi, sur chacune d’elles, il était possible de créer simplement des fonctions permettant de modifier le contenu de la « boîte ».

L’exemple précédent pouvait donc être simplifié, mais le principe restait le même. En voici une description pour un des éléments :

• la « boîte » contient la variable qui définit l’emplacement du cookie (le gâteau) ;
• les valeurs 1, 2, 3 ou 4 indiquent le numéro de page où se trouve le cookie ;
• la valeur 0 précise que le cookie est dans le panier ;
• sur chaque page, une fonction permet de déterminer si on doit afficher le cookie dans la page ou dans le panier (ou ni l’un, ni l’autre) ;
• un clic sur le cookie modifie la valeur de la variable.

D’autres cookies…

Dans l’exemple précédent nous avons utilisé le déplacement d’un cookie (une des images disponibles dans Genially) pour illustrer la gestion des variables. Joseph Ignácz, professeur d’informatique à Békéscsaba (Hongrie), quant à lui, a eu l’idée de stocker les variables non pas dans les pages du Genially mais dans les cookies du navigateur [3]. Ça va, vous suivez ?

Comme démonstration, Joseph a créé un exemple de quiz sur plusieurs pages avec un tableau récapitulatif en fin d’exercice.

Pour afficher le tableau des résultats, il a écrit une fonction récupérant le contenu du cookie. Ce dernier est complété au fur et à mesure des pages du questionnaire.

L’utilisation des cookies étant un sujet de controverses, Joseph s’est dirigé vers une autre méthode de stockage de l’information : le web storage.

Utilisation du web storage

Le web storage est sûrement la méthode la plus élégante et la plus simple pour notre situation. En effet, plus puissant que les cookies et peu consommateur de trafic puisqu’utilisant directement le cache du navigateur [4], il permet de stocker des données le temps de la session (sessionstorage) ou pour un temps plus long (localstorage).

Pour sauvegarder une variable, il suffit d’utiliser la méthode javascript sessionStorage.setItem(variable,valeur) ou localStorage.setItem(variable,valeur).
Pour récupérer la valeur, on utilise sessionStorage.getItem(variable) ou localStorage.getItem(variable).

En parallèle du travail de Joseph Ignácz, nous avons été contactés par Jean-François Parmentier, ingénieur pédagogique à Toulouse INP, qui nous a proposé un exemple utilisant également le web storage. Quand les grands esprits se rencontrent !

La réponse de Sophie, la suspecte, varie selon que l’on a trouvé ou non les photos placées dans la page suivante. En cliquant sur les documents, on affiche un message, mais on stocke également en mémoire une variable qui est testée lors de l’interrogatoire de la suspecte. Vous retrouverez le code écrit par Jean-François dans les interactions des boutons.

La facilité d’utilisation du web storage laisse entrevoir de nombreuses possibilités pour les jeux d’évasion et les exerciseurs dans Genially. Nous ne manquerons pas de les exploiter en espérant pouvoir proposer, principalement à ceux qui ne veulent pas se plonger dans les scripts, des outils clé-en-main permettant de gérer les variables.

Il est aussi envisageable, grâce aux cookies ou au localstorage, de stocker des données réutilisables pour une session ultérieure, ce qui permet d’envisager une « sauvegarde de la partie » autorisant ainsi un joueur de reprendre plus tard sur son ordinateur le jeu sans tout recommencer.

Pour conclure, nous tenons à préciser qu’un utilisateur averti pourra toujours récupérer, plus ou moins facilement, les mots de passe ou les réponses que vous aurez pu définir dans votre jeu ou exercice. Les diverses méthodes présentées ici utilisent en effet le javascript dont le code est accessible localement.