# data[].attributes.attachment_link.readable_text
Voici des roues César intégrant des notes de musique et pouvant éventuellement être utilisées au-delà des jeux d'évasion.

Deux d'entre elles sont proposées en version numérique et peuvent être ajoutées aux pages Web par un code i-frame.

# data[].attributes.attachment_link.description
Voici des roues César intégrant des notes de musique et pouvant éventuellement être utilisées au-delà des jeux d'évasion. Deux d'entre elles sont proposées en version numérique et peuvent être ajoutées aux pages Web par un code i-frame.

# data[].attributes.body
RND par Collectif SCAPE (scapedu) sur Genially

# data[].attributes.attachment_link.title
RND by Collectif SCAPE (scapedu) on Genially

# data[].attributes.attachment_link.description
Tirage au sort. D’autres outils sur https://scape.enepe.fr

# data[].attributes.headline
Mettre du son et le couper puis le remettre

# data[].attributes.subject
Mettre du son et le couper puis le remettre

# data[].attributes.attachment_link.readable_text
Éteinte par Lacrymosa Industry

Réutilisez !

LOUXOR !Un son maîtrisé

Extension proposée par Patrice Nadam

<audio controls autoplayloopid="audio" src="https://ia801309.us.archive.org/34/items/auboutdufil-archives/049/Eteinte.mp3"> </audio> <script></script>

Intégrer une musique d'ambiance

1. Intégrer le script ci-dessous à l'aide la fonction Insérer </>AUTRES

2. Placer le lecteur EN DEHORS de la page

Bien vérifier que tout est en dehors de la page !

Affiche les controles (peu utile ici)

LAncement automatique (variable selon les navigateurs)

joue en boucle

Indispensable pour la suite : donner un identifiant !

Source :lien vers le fichier mp3

La musique se joue sur toutes les pages

<script>const audio = document.querySelector("#audio");audio.volume = 0.2;</script>

Volume de 0 à 1

D'où l'importance de donnerun identifiant à l'audio

Le script est juste là

Avec possibilité de modifier le volume

<script>const audio = document.querySelector("#audio");audio.pause();</script>

Ce Script permet de mettre en pause la musique

D'où l'importance de donner un identifiant à l'audio

Alors je coupe le son

à intégrer par Insérer </>AUTRESCopier-coller de l'objet possible d'une page à l'autre

Le script est juste là

<script>const audio = document.querySelector("#audio");audio.play();</script>

Ce Script permet de relancer la musique

D'où l'importance de donner un identifiant à l'audio :-)

Et je remets le son !

à intégrer par Insérer </>AUTRESCopier-coller de l'objet possible d'une page à l'autre

Le script est juste là

<script>const audio = document.querySelector("#audio");audio.pause();audio.currentTime = 0;</script>

Ce Script permet de stopper la musique

D'où l'importance de donner un identifiant à l'audio :-D

Et je recoupe le son

à intégrer par Insérer </>AUTRESCopier-coller de l'objet possible d'une page à l'autre

Le script est juste là

qui reprendra depuis le début

<script>setTimeout(function(){document.getElementsByClassName('icon-close')[0].click()}, 10);document.getElementById('genially-view-modal').style.visibility = "hidden";const audio = document.querySelector("#audio_page");audio.play();</script>

<audio controls autoplay loop id="audio_page" src="https://www.auboutdufil.com/get.php?fla=https://archive.org/download/jamendo-037609/01.mp3"> </audio><script></script>

<script>setTimeout(function(){document.getElementsByClassName('icon-close')[0].click()}, 10);document.getElementById('genially-view-modal').style.visibility = "hidden";const audio = document.querySelector("#audio_page");audio.pause();</script>

Action sur un son d'une page

Deux boutons avec en intearctivité les scripts de PLAY et PAUSE

Script pour intégrer l'audio dans la pageLe lecteur peut être caché dans la page.

New Andromeda Theory par Wasaru

setTimeout(function(){document.getElementsByClassName('icon-close')[0].click()}, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; const audio = document.querySelector("#audio_page"); audio.play();

setTimeout(function(){document.getElementsByClassName('icon-close')[0].click()}, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; const audio = document.querySelector("#audio_page"); audio.pause();

<audiocontrols loop id="audio_temps"src="https://www.auboutdufil.com/get.php?fla=https://archive.org/download/jamendo-037609/01.mp3"></audio><script> setTimeout(function(){ const audio = document.querySelector("#audio_temps");audio.play();}, 10000);</script>

Déclenchement retardé d'un son dans une page

Script pour intégrer l'audio dans la pageLe lecteur peut être caché dans la page.

Temps en millisecondes (ici 10 s.)

On joue le morceau en boucle (facultatif)

# data[].attributes.attachment_link.title
Louxor by Collectif SCAPE (scapedu) on Genially

# data[].attributes.attachment_link.description
Éteinte par Lacrymosa Industry Réutilisez ! LOUXOR !Un son maîtrisé Extension proposée par Patrice Nadam Intégrer une musique d'ambiance 1. Intégrer le script ci-dessous à l'aide la fonction Insérer AUTRES 2. Placer le lecteur EN DEHORS de la page Bien vérifier que tout est en dehors de la page !

# data[].attributes.attachment_link.title
GENIALLY : créer un tableau avec des croix validées.

# data[].attributes.attachment_link.title
Genially : Envoi vers page si validation + facilité récupération URL

# data[].attributes.attachment_link.title
Feuilles de style CSS -Mettre en forme un texte

# data[].attributes.attachment_link.description
Support de cours HTML XHTML et CSS par UpyUpy

# data[].attributes.attachment_link.title
Genially Javascript tuto 1 correction validation 1 par 1.txt

# data[].attributes.attachment_link.title
GENIALLY : afficher la progression score des validations

# data[].attributes.attachment_link.readable_text
On ne présente plus Genially, originellement outil de présentation interactive en ligne, mais qui peut être complètement détourné pour créer un univers de fiction proche du jeu vidéo... ou du roman photo, selon ses goûts !

Si le site propose une grande variété de modèles dans de nombreuses catégories (présentation, infographie, image interactive, gamification...), l'interface se présente aussi comme une page vierge douée de nombreuses fonctionnalités très intéressantes pour créer un décor immersif.

Nicolas Gaube, professeur de SVT, a proposé lors de la période de confinement liée au Covid-19, l'idée pour les enseignants de se créer une salle de classe virtuelle avec Google Slide via un tutoriel vidéo. Rapidement, l'idée a connu un grand succès, les salles de classes virtuelles ont fleuri sur les réseaux, et certains en ont même fait une salle de présentation d'escape games, comme Sandrine Saint-Genès, professeure de Physique-Chimie.

Parallèlement, les amateurs de Genially n'ont pas tardé à l'adapter avec leur outil de prédilection. Jamais à court d'idées et pour aider les novices, Nicolas propose ici un second tutoriel permettant de prendre en main Genially, d'y importer très facilement les éléments d'un Google Slides, et d'y ajouter des interactivités simples.

On apprécie chez l'auteur les nombreuses astuces glissées au fil du tutoriel, comme comment Intégrer des ressources externes dans Genially. Cette vidéo est destinée à un niveau débutant, avec la création d'un décor de salle de classe en une seule diapo. En y glissant quelques énigmes, on a déjà de quoi créer un petit escape game !

Le tutoriel suivant, toujours de Nicolas, permet d'aborder la construction d'une interface plus complexe, se rapprochant des nombreux escape games virtuels partagés sur notre site.

Avec des techniques plus poussées, il est tout à fait possible de créer une escape room digne des meilleurs jeux vidéos, que ce soit avec plusieurs ou une seule diapo. C'est ce que propose Dimitri Saputa dans le tutoriel ci-dessous, avec la création d'un décor interactif, ici un mur fissuré que l'on casse avec un marteau !

Vous retrouverez tous nos tutoriels et astuces dans la rubrique Utilisation de Genially avec bien sûr les derniers outils créés par S'CAPE, comme le POST-EAT, le Minuteur, le Drag'n'Drop (DND), le Couise ou encore le petit dernier : l'Effet Machine à écrire. N'oubliez pas de faire un tour du côté des résultats de notre concours de Drag'n'drop, la créativité des participants est une riche source d'inspiration.

# data[].attributes.attachment_link.title
S'CAPE-Créer un décor immersif avec Genially

# data[].attributes.attachment_link.description
On ne présente plus Genially , originellement outil de présentation interactive en ligne, mais qui peut être complètement détourné pour créer un univers de fiction proche du jeu vidéo... ou du roman photo, selon ses goûts !

# data[].attributes.headline
YouX permettre de bloquer le déplacement d'objets

# data[].attributes.subject
YouX permettre de bloquer le déplacement d'objets

# data[].attributes.attachment_link.readable_text
YouX est un des outils développés par S'CAPE à intégrer dans Genially. Il permet de bloquer la direction (horizontale ou verticale) de déplacement des objets placés dans une page.

L'utilisation est très facile ! Dans une page contenant les deux éléments FonctionbloqueX et FonctionbloqueY, il suffit de grouper l'élément H avec un objet Genially (texte, image, forme...) pour limiter horizontalement son déplacement. En groupant avec V, on impose un déplacement vertical.

On peut copier-coller autant de fois que l'on veut H et V pour contraindre les déplacements d'autant d'objets dans la page.

# data[].attributes.attachment_link.description
YouX est un des outils développés par S'CAPE à intégrer dans Genially. Il permet de bloquer la direction (horizontale ou verticale) de déplacement des objets placés dans une page. L'utilisation est très facile ! Dans une page contenant les deux éléments FonctionbloqueX et FonctionbloqueY, il suffit de grouper l'élément H avec un objet Genially (texte, image, forme...)

# data[].attributes.attachment_link.readable_text
Pas d'escape game, qu'il soit réel ou virtuel, sans code ni mot de passe. Pour les jeux sous Genially, il est possible de mimer la frappe d'un code en une dizaine de diapositives : la méthode est expliquée dans notre article Créer des codes avec Genially. On peut également intégrer un cadenas virtuel Lockee, quasiment devenu indispensable pour celui qui veut proposer un jeu d'évasion en ligne.

Stéphane Agniel, professeur de SVT et créateur d'escape games pour la DANE de l'académie de Montpellier, nous propose ici de créer un mot de passe directement dans Genially, sans utiliser de service tiers. Le joueur clique sur un élément de l'interface et un message apparaît en haut de sa fenêtre pour lui demander le mot de passe. En fonction de sa saisie, il est dirigé différemment.

La méthode d'intégration est identique à celle d'une iframe : qui sait ajouter un cadenas Lockee ou un exercice LearningApps dans une diapositive, saura insérer ce mot de passe. Le script (du Javascript) est suffisamment simple pour être adapté même si on ne connaît rien dans ce langage.

Le script proposé par Stéphane

Passons en revue les cinq lignes de ce script.

var mp = prompt('entrez le mot de passe : ');
ouvre une boite de dialogue qui réclame le mot de passe. Il est possible de changer le message entrez le mot de passe : en conservant bien tout le reste de la ligne.

if (mp == 'montpellier')
teste si le mot de passe est montpellier. Il peut bien sûr être modifié. Attention à la casse (majuscules/minuscules) du mot saisi.

{location.href = 'https://view.genial.ly/5ae350f44a89652667e7051f';}
renvoie à un premier Genially si le mot de passe est bon. Vous pouvez y indiquer l'adresse d'un autre site web ou d'un autre Genially.

else
indique que le reste du script n'est lu que si le mot de passe n'est pas le bon.

{location.href = 'https://view.genial.ly/5ca4808c55aa9044bbf48a97';}
renvoie à un autre Genially en cas d'erreur. Comme précédemment, le lien peut être modifié.

L'ensemble du script est enserré entre deux balises <script> et </script> qu'il ne faut pas oublier.

Intégration du script dans le Genially

Pour intégrer le script, il faut cliquer sur l'icône d'interactivité d'un objet Genially (1), ouvrir une fenêtre (2) dans laquelle, en mode HTML (3), on collera le script (4). On valide en cliquant sur Sauvegarder (5).

Avantages et prolongements

Cette astuce très simple permet de modifier rapidement le code d'accès.
Si une partie du scénario est divulgâchée ou si on désire en proposer plusieurs versions successives, on peut très rapidement changer le mot de passe dans le script. Encore faut-il que le jeu le permette et que sa découverte soit facilement modifiable (un message à décoder, un bout de papier manuscrit bien caché...).

Un autre point positif est l'avantage technique apporté par cette solution. Ne faisant pas appel à un service tiers, nous ne sommes plus tributaires d'un éventuel dysfonctionnement.

Il est donc possible d'intégrer des scripts qui sont interprétés par Genially : Stéphane ouvre ici des possibilités intéressantes qui nous laissent entrevoir des fonctionnalités qui ne vont pas tarder à paraître. Merci à lui !

Reste encore un défi à relever, celui de réussir à pointer vers une page spécifique du Genially.

# data[].attributes.attachment_link.title
S'CAPE-Intégrer un mot de passe dans Genially

# data[].attributes.attachment_link.description
Pas d'escape game, qu'il soit réel ou virtuel, sans code ni mot de passe. Pour les jeux sous Genially, il est possible de mimer la frappe d'un code en une dizaine de diapositives : la méthode est expliquée dans notre article Créer des codes avec Genially .

# data[].attributes.attachment_link.description
Quelques champs réponse et un bouton de validation... le Couise permet de créer quiz, textes à trous, mais aussi des codes d’identification dans vos escape games.

# data[].attributes.attachment_link.readable_text
Le logiciel en ligne Genially ne prévoit pas de zone de texte permettant à l'utilisateur de saisir du texte directement dans l'interface. Comment faire alors si on désire faire prendre des notes à l'écran en cours de jeu ?

Actuellement, nous vous proposons trois solutions. La première utilise la fonctionnalité Dessiner sur le Genially, la seconde, l'insertion d'un petit bout de code HTML dans une étiquette et la dernière est bien sûr notre outil POST-EAT.

Le crayon pour prendre des notes

Genially propose la fonctionnalité Dessiner sur le Genially. En ajoutant une forme pour délimiter à l'écran une zone d'écriture, on simule un post-it.

Cependant, les notes ne sont pas associées au post-it : il est donc impossible de le déplacer. La manipulation de l'outil n'est pas aisée. Il faut, en effet, activer le crayon pour prendre des notes et le désactiver pour continuer de jouer : les annotations ne sont alors plus affichées à l'écran. Écrire à l'écran avec la souris n'est pas facile.

En revanche cette technique permet de reproduire schémas ou symboles que l'on pourrait rencontrer dans le jeu.

Une étiquette interactive

On vous l'avait dit ! L' astuce proposée par Stéphane Agniel allait ouvrir des possibilités. La prise de notes en est une.

La méthode est très simple et à la portée de tous. On associe une étiquette à un objet ou une zone interactive transparente. Dans cette étiquette, en mode HTML </>, on tape les balises correspondant à une zone de texte d'un formulaire <textarea></textarea> et on n'a plus qu'à valider !

On peut bien sûr compléter le code pour habiller davantage le " post-it " ainsi créé, mais il faut alors connaître les paramètres à ajouter.

Attention, il faut utiliser une étiquette et non une fenêtre, sinon les notes disparaîtront à chaque fermeture. Mais, même avec une étiquette, les notes seront effacées si on change de page.

Utilisation de POST-EAT

Nous avons développé un outil simple et paramétrable, le POST-EAT, qui facilite la prise de notes dans un Genially. Les possibilités d'habillage, notamment la version transparente, permettent de fondre l'outil dans le décor du jeu que vous aurez choisi. Tout est expliqué dans notre article dédié au Post-EAT !

Un post-it à portée de main pendant toute la partie ?

Si votre Genially comporte plusieurs pages, vous devrez avoir recours à une astuce afin de permettre la conservation des notes de page en page. En effet les diapositives de Genially sont à chaque fois réinitialisées. Quelle que soit la méthode que vous utiliserez, le " post-it " sera effacé.

Il est nécessaire de créer un Genially dans lequel vous insérerez l'outil (crayon, étiquette ou POST-EAT) et qui servira à intégrer l'autre Genially correspondant au jeu, avec changement de diapositives. Ainsi, on utilise deux couches dont la supérieure contient le " post-it " accessible en permanence et dont les notes ne seront pas effacées.

La méthode est expliquée pour l'intégration du Minuteur S'CAPE.

# data[].attributes.attachment_link.description
Le logiciel en ligne Genially ne prévoit pas de zone de texte permettant à l'utilisateur de saisir du texte directement dans l'interface. Comment faire alors si on désire faire prendre des notes à l'écran en cours de jeu ? Actuellement, nous vous proposons trois solutions.

# data[].attributes.attachment_link.description
S’CAPE vous permet d’ajouter un “drag and drop” dans vos Genially.

# data[].attributes.attachment_link.readable_text
Suite à une demande sur notre groupe Facebook, voici un peu de code que vous pouvez intégrer directement dans votre Genially pour créer un effet d'apparition des lettres à la manière d'une machine à écrire.

Modifiez en fonction de vos besoins quelques éléments du code (le texte à afficher, sa taille et la vitesse d'affichage).

Copiez le code.

Collez-le dans le cadre Insérer >AUTRES de Genially.

Redimensionnez et positionnez dans la page l'élément créé.

Source du code : https://webdevpro.net/js-effet-apparition-lettres/

Il est possible de modifier la couleur du texte, la couleur du fond, la graisse du texte en ajoutant des paramètres idoines dans l'attribut style.

# data[].attributes.attachment_link.title
S'CAPE-Un effet machine à écrire dans Genially

# data[].attributes.attachment_link.description
Suite à une demande sur notre groupe Facebook, voici un peu de code que vous pouvez intégrer directement dans votre Genially pour créer un effet d'apparition des lettres à la manière d'une machine à écrire. Modifiez en fonction de vos besoins quelques éléments du code (le texte à afficher, sa taille et la vitesse d'affichage).

# data[].attributes.attachment_link.title
Genially : valider un élément à déplacer

# data[].attributes.attachment_link.title
Genially: valider un ensemble de déplacements

# data[].attributes.body
Merci à Manon Lasserre

# data[].attributes.headline
Aller à une page précise dans un genially

# data[].attributes.subject
Aller à une page précise dans un genially

# data[].attributes.body
Merci S'cape

# data[].attributes.attachment_link.readable_text
Nouvelle version avec générateur de QR-CODE !

On peut être amené à vouloir connaître le lien direct d'une page de Genially afin de l'intégrer dans une autre page ou de pointer dessus directement. Plusieurs méthodes existent, plus ou moins compliquées pour un non initié. Nous vous proposons des " outils ", des boîtes à copier et à coller directement dans la page dont vous désirez récupérer l'adresse.
IL NE FAUT PAS AVOIR DE PAGES CACHÉES AVANT LA PAGE RÉFÉRENCÉE
Cette adresse précise (url) peut-être renseignée dans un cadenas Lockee par exemple : déverrouiller le cadenas permettra alors de passer à une page précise du même Genially (jusqu'ici cette manipulation imposait de créer un second Genially).

S'CAPE vous propose un outil pour cela : de simples cadres à copier-coller dans votre page Genially pour en visualiser la référence, l'adresse (url) ou le code d'intégration (iframe). Pour cela, réutilisez le Genially ci-dessous (bouton bleu), et laissez-vous guider.

Pour de plus amples explications, et notamment comprendre le principe de la récupération de l'adresse, voici une vidéo créée et partagée par Valérie Perreaut.

# data[].attributes.attachment_link.description
Nouvelle version avec générateur de QR-CODE ! On peut être amené à vouloir connaître le lien direct d'une page de Genially afin de l'intégrer dans une autre page ou de pointer dessus directement. Plusieurs méthodes existent, plus ou moins compliquées pour un non initié.