Bac à sable Genial.ly pour la création d'escape game
Le timer : l'extension obligatoire
Modèle simple et linéaire
Les extensions pour aller plus loin
Modèle simple et linéaire
Dans cette exemple nous verrons comment créer un escape game, avec 4 ou 5 étapes, un début et une fin, en utilisant de simples outils comme learning apps et la protection de page dans Genial.ly. Un sorte de chasse aux trésors.
Modèle simple et linéaire
Principes et 1ers réglages
De manière générale, le jeu peut comporter une introduction, 4 ou 5 étapes (plus ou moins) et une fin. Chaque étape a au moins une énigme à résoudre avec quelques indices. Pour notre exemple, il faut résoudre l'énigme pour passer à l'étape suivante. On ajoutera une page de transition entre chaque énigme nécessitant un mot de passe.
L'introduction ou début du jeu
C'est ici que vous posez l'univers. Vous racontez le début de l'histoire, le but du jeu, les épreuves à surmonter, les personnages s'il y en a, le temps pour y arriver. Techniquement, vous pouvez utiliser plusieurs pages pour réaliser cette introduction. Trouver de belles images que vous placerez comme FOND à chaque diapo. Servez-vous également des réglages d'apparition des objets pour donner un rythme et aussi de l'interactivité en révélant un objet du fait de cliquer sur un autre.
interactivité
animation
L'introduction ou début du jeu
Bonjour, bienvenue dans mon bureau Cliquez pour lire la suite
A chaque clique, vous pouvez faire apparaître des objets Suite...
Etape 1
ENIGME 1
J'utilise ici learningApps qui permet de créer plein de petits jeux et que l'on peut facilement intégrer à l'aide de l'iframe (faire "insérer" dans le menu de gauche puis "autre" et copier/coller le code de l'iframe. Le feedback dans le jeu proposé donnera la clé pour sortir de cette étape.
Le bouton pour passer à l'étape suivante est présent, mais on vous demandera un mot de passe. Donc obligé de résoudre l'énigme proposé
Cette page est protégée par mot de passe
Introduire le mot de passe
Etape 2
Garde en toi l'espoir,Ombres dans le soir,Murmures du vent,Mes rêves s'élèvent,Echos de l'instant.
ENIGME 2
Ici, vous pouvez jouer avec des éléments qui se déplacent, d'autres cliquables et qui en révèlent de nouveaux. Plusieurs indices cachés qui donnent la solution pour passer à l'étape suivante.
Pour passer à l'étape suivante, tu dois m'indiquer le code
le code
le timer : l'extension obligatoire
30
Quelque soit le modèle utilisé, le Timer est l'élément indispensable de l'escape game. C'est le temps qui crée le stress et la mise en action. Ce "timer" n'est pas natif dans genial.ly. Il faut alors utiliser ce que l'on nomme les extensions genial.ly. Ce sont des présentations génial.ly bidouillées et programmées pour faire plus que ce que propose l'interface. Pour le timer vous pouvez utiliser l'extension : "CHRONOS" https://www.scape.enepe.fr/chronos.html Vous pourrez installer soit un minuteur soit un chrononomètre.
HH:MM:SS
30
le timer : l'extension obligatoire
En changeant de diapo, il suffit de copier/coller l'objet minuteur sur chaque page.
HH:MM:SS
https://scape.enepe.fr/chronos.html
Afficher un chrono sur plusieurs diapos
Afficher l'heure
HH:MM:SS
HH:MM
Vignette rouge et zone de texte à placer sur toutes les diapos où le chrono sera visible.
Pour afficher l'heure réelle, placer une des 2 vignettes noires, associée à la zone de texte (style modifiable).
Vignette rouge à placer sur la diapo où démarre le chrono.
HH:MM:SS
Vignette rouge à placer éventuellement sur la diapo où doit redémarrer le chrono.
Afficher un minuteur sur plusieurs diapos
... et la même chose mais en secondes
SS
HH:MM:SS
Vignette verte et zone de texte à placer sur toutes les diapos où le minuteur sera visible.
Vignette orange et zone de texte à placer sur toutes les diapos où le minuteur sera visible.
Vignette groupée à un objet qui apparaît quand le temps est écoulé.
40
Vignette verte et valeur à placer sur la diapo où démarre le minuteur : temps à indiquer en minutes.
Vignette orange et valeur à placer sur la diapo où démarre le secondeur : temps à indiquer en s.
Vignette groupée à un objet qui disparaît quand le temps est écoulé.
60
Vignette verte et valeur à placer éventuellement sur la diapo où doit redémarrer le minuteur : temps en min.
Vignette orange et valeur à placer éventuellement sur la diapo où doit redémarrer le secondeur : temps en s.
En cas de difficultés pour changer la couleur du texte, ne pas hésiter à recréer une zone de texte et la grouper avec la vignette.
Les extensions pour aller plus loin
Les extensions
Genial.ly permet l'intégration de code javascript/html dans son interface. Ainsi, un développeur peut créer ses propres "objets" avec un comportement spécifique. Il faut se rendre, depuis le menu de gauche dans "insérer" puis "autre" et écrire son code. Evidemment, tout le monde n'est pas codeur, alors une communauté "genialyssime" a produit ce que l'on nomme aujourd'hui des "extensions", en fait des présentations avec des objets proposant une interactivité nouvelle. Ces présentations sont gratuites et proposées dans un mode "réutilisation". Ainsi, tout le monde peut les installer sous son compte et réaliser des copier/coller en suivant les instructions du concepteur. Toutes les "extensions" sont globalement conçues de la même manière : 1 - l'exemple pour comprendre 2 - la page avec tous les objets à copier/coller + les explications d'utilisation car il faut souvent les grouper avec vos propres objets.
Les extensions pour aller plus loin
Les extensions
Scape.enepe.fr répertorie toutes les extensions existantes pour genial.ly Elles sont plus ou moins difficiles à prendre en main. Pour débuter et parce qu'elles sont pratiques, je vous conseille :
- CHRONOS : permet de mettre un minuteur ou un chronomètre
- COUISE : permet de créer des textes à trous ou des quizz dans genial.ly, et l'on peut s'en servir pour faire des logins/mots de passe
- COUTEAU SUISSE : permet de créer plein de comportements différents sur vos objets (zoom, pivoter, bloquer etc.)
- SPO'T : pour faire apparaître ou disparaître un éléments au passage de la souris
- GICODE : permet d'intégrer un digicode dans génal.ly
- DNDoo : permet de relier des objets entre eux.
Pour aller plus loin, mais un peu plus complexe :
- LAVAR : permet de faire apparaître ou disparaître des éléments si le jeu "learning apps" intégré est réussi ou non.
- SACéFé : permet de faire apparaître ou disparaître des éléments en fonction des choix (des clics) précédents du joueur
- FELBONCHOI : permet de simuler un vrai cadenas dans Genial.ly
Toutes les extensions en ligne
Exemple usage de COUISE
Nicolas Thibault
VALIDER
Les extensions dans Genial.ly
DND
BRAVO Tu peux continuer
Les extensions dans Genial.ly
|Cnam|le Cnam
BRAVO Tu peux continuer
mot clé étape 1 :
COUISE 3
GAME OVER
|formation|formations
mot clé étape 2 :
|alternance
CHRONOS
mot clé étape 3 :
|distance|à distance|a distance
mot clé étape 4 :
HH:MM:SS
Valider
1593
Les extensions dans Genial.ly
YES
ABCD
erreur
GICODE
GAME OVER
OK
CHRONOS
HH:MM:SS
raz
retour
valider
BRAVO Tu as pu trouver le code à temps mais il reste une dernière énigme
GAME OVER
HH:MM:SS
FIN
Margot
Garde en toi l'espoir,Ombres dans le soir,Murmures du vent,Mes rêves s'élèvent,Echos de l'instant.
il est ou le code
post it - premières lettres
merci
Garde en toi l'espoir,Ombres dans le soir,Murmures du vent,Mes rêves s'élèvent,Echos de l'instant.
bac à sable - escape game
Pole Pédagogie Digit
Created on February 12, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Business Proposal
View
Project Roadmap Timeline
View
Step-by-Step Timeline: How to Develop an Idea
View
Artificial Intelligence History Timeline
View
Microlearning: Teaching Innovation with AI
View
Microlearning: Design Learning Modules
View
Video: Responsible Use of Social Media and Internet
Explore all templates
Transcript
Bac à sable Genial.ly pour la création d'escape game
Le timer : l'extension obligatoire
Modèle simple et linéaire
Les extensions pour aller plus loin
Modèle simple et linéaire
Dans cette exemple nous verrons comment créer un escape game, avec 4 ou 5 étapes, un début et une fin, en utilisant de simples outils comme learning apps et la protection de page dans Genial.ly. Un sorte de chasse aux trésors.
Modèle simple et linéaire
Principes et 1ers réglages
De manière générale, le jeu peut comporter une introduction, 4 ou 5 étapes (plus ou moins) et une fin. Chaque étape a au moins une énigme à résoudre avec quelques indices. Pour notre exemple, il faut résoudre l'énigme pour passer à l'étape suivante. On ajoutera une page de transition entre chaque énigme nécessitant un mot de passe.
L'introduction ou début du jeu
C'est ici que vous posez l'univers. Vous racontez le début de l'histoire, le but du jeu, les épreuves à surmonter, les personnages s'il y en a, le temps pour y arriver. Techniquement, vous pouvez utiliser plusieurs pages pour réaliser cette introduction. Trouver de belles images que vous placerez comme FOND à chaque diapo. Servez-vous également des réglages d'apparition des objets pour donner un rythme et aussi de l'interactivité en révélant un objet du fait de cliquer sur un autre.
interactivité
animation
L'introduction ou début du jeu
Bonjour, bienvenue dans mon bureau Cliquez pour lire la suite
A chaque clique, vous pouvez faire apparaître des objets Suite...
Etape 1
ENIGME 1
J'utilise ici learningApps qui permet de créer plein de petits jeux et que l'on peut facilement intégrer à l'aide de l'iframe (faire "insérer" dans le menu de gauche puis "autre" et copier/coller le code de l'iframe. Le feedback dans le jeu proposé donnera la clé pour sortir de cette étape.
Le bouton pour passer à l'étape suivante est présent, mais on vous demandera un mot de passe. Donc obligé de résoudre l'énigme proposé
Cette page est protégée par mot de passe
Introduire le mot de passe
Etape 2
Garde en toi l'espoir,Ombres dans le soir,Murmures du vent,Mes rêves s'élèvent,Echos de l'instant.
ENIGME 2
Ici, vous pouvez jouer avec des éléments qui se déplacent, d'autres cliquables et qui en révèlent de nouveaux. Plusieurs indices cachés qui donnent la solution pour passer à l'étape suivante.
Pour passer à l'étape suivante, tu dois m'indiquer le code
le code
le timer : l'extension obligatoire
30
Quelque soit le modèle utilisé, le Timer est l'élément indispensable de l'escape game. C'est le temps qui crée le stress et la mise en action. Ce "timer" n'est pas natif dans genial.ly. Il faut alors utiliser ce que l'on nomme les extensions genial.ly. Ce sont des présentations génial.ly bidouillées et programmées pour faire plus que ce que propose l'interface. Pour le timer vous pouvez utiliser l'extension : "CHRONOS" https://www.scape.enepe.fr/chronos.html Vous pourrez installer soit un minuteur soit un chrononomètre.
HH:MM:SS
30
le timer : l'extension obligatoire
En changeant de diapo, il suffit de copier/coller l'objet minuteur sur chaque page.
HH:MM:SS
https://scape.enepe.fr/chronos.html
Afficher un chrono sur plusieurs diapos
Afficher l'heure
HH:MM:SS
HH:MM
Vignette rouge et zone de texte à placer sur toutes les diapos où le chrono sera visible.
Pour afficher l'heure réelle, placer une des 2 vignettes noires, associée à la zone de texte (style modifiable).
Vignette rouge à placer sur la diapo où démarre le chrono.
HH:MM:SS
Vignette rouge à placer éventuellement sur la diapo où doit redémarrer le chrono.
Afficher un minuteur sur plusieurs diapos
... et la même chose mais en secondes
SS
HH:MM:SS
Vignette verte et zone de texte à placer sur toutes les diapos où le minuteur sera visible.
Vignette orange et zone de texte à placer sur toutes les diapos où le minuteur sera visible.
Vignette groupée à un objet qui apparaît quand le temps est écoulé.
40
Vignette verte et valeur à placer sur la diapo où démarre le minuteur : temps à indiquer en minutes.
Vignette orange et valeur à placer sur la diapo où démarre le secondeur : temps à indiquer en s.
Vignette groupée à un objet qui disparaît quand le temps est écoulé.
60
Vignette verte et valeur à placer éventuellement sur la diapo où doit redémarrer le minuteur : temps en min.
Vignette orange et valeur à placer éventuellement sur la diapo où doit redémarrer le secondeur : temps en s.
En cas de difficultés pour changer la couleur du texte, ne pas hésiter à recréer une zone de texte et la grouper avec la vignette.
Les extensions pour aller plus loin
Les extensions
Genial.ly permet l'intégration de code javascript/html dans son interface. Ainsi, un développeur peut créer ses propres "objets" avec un comportement spécifique. Il faut se rendre, depuis le menu de gauche dans "insérer" puis "autre" et écrire son code. Evidemment, tout le monde n'est pas codeur, alors une communauté "genialyssime" a produit ce que l'on nomme aujourd'hui des "extensions", en fait des présentations avec des objets proposant une interactivité nouvelle. Ces présentations sont gratuites et proposées dans un mode "réutilisation". Ainsi, tout le monde peut les installer sous son compte et réaliser des copier/coller en suivant les instructions du concepteur. Toutes les "extensions" sont globalement conçues de la même manière : 1 - l'exemple pour comprendre 2 - la page avec tous les objets à copier/coller + les explications d'utilisation car il faut souvent les grouper avec vos propres objets.
Les extensions pour aller plus loin
Les extensions
Scape.enepe.fr répertorie toutes les extensions existantes pour genial.ly Elles sont plus ou moins difficiles à prendre en main. Pour débuter et parce qu'elles sont pratiques, je vous conseille :
- CHRONOS : permet de mettre un minuteur ou un chronomètre
- COUISE : permet de créer des textes à trous ou des quizz dans genial.ly, et l'on peut s'en servir pour faire des logins/mots de passe
- COUTEAU SUISSE : permet de créer plein de comportements différents sur vos objets (zoom, pivoter, bloquer etc.)
- SPO'T : pour faire apparaître ou disparaître un éléments au passage de la souris
- GICODE : permet d'intégrer un digicode dans génal.ly
- DNDoo : permet de relier des objets entre eux.
Pour aller plus loin, mais un peu plus complexe :Toutes les extensions en ligne
Exemple usage de COUISE
Nicolas Thibault
VALIDER
Les extensions dans Genial.ly
DND
BRAVO Tu peux continuer
Les extensions dans Genial.ly
|Cnam|le Cnam
BRAVO Tu peux continuer
mot clé étape 1 :
COUISE 3
GAME OVER
|formation|formations
mot clé étape 2 :
|alternance
CHRONOS
mot clé étape 3 :
|distance|à distance|a distance
mot clé étape 4 :
HH:MM:SS
Valider
1593
Les extensions dans Genial.ly
YES
ABCD
erreur
GICODE
GAME OVER
OK
CHRONOS
HH:MM:SS
raz
retour
valider
BRAVO Tu as pu trouver le code à temps mais il reste une dernière énigme
GAME OVER
HH:MM:SS
FIN
Margot
Garde en toi l'espoir,Ombres dans le soir,Murmures du vent,Mes rêves s'élèvent,Echos de l'instant.
il est ou le code
post it - premières lettres
merci
Garde en toi l'espoir,Ombres dans le soir,Murmures du vent,Mes rêves s'élèvent,Echos de l'instant.