Formation Genially Salins

variable

Formation à Genially !!!

Start

Par S. Kaczmarek, collège V. Considerant, Salins-les-Bains

PEtit SOMMAIRE !

8. Glisser-déposer

9. Questions interactives

1. Créer un Génially

10. Learning-App

2. Insertion d'objets...

11. Calculatrice

3. Quelques interactions

12. Mot de passe, cadenas...

4. Navigation et transitions

13. Escape Game

5. Animations d'objets

14. Quelques infos

15. Pour se perfectionner

6. Audio

16. Publier son genially

7. Vidéo

1. Créer un genially

• A l'ouverture de votre compte Genially, cliquez sur "Créer un Genially" :

• Choisissez une création vierge (ou un modèle parmi les nombreux proposés).

• Les dimensions sont modifiables.

• Vous pouvez commencer en sélectionnant le 1er choix : vous obtenez une page blanche et pouvez commencer !

2. Insertion d'objets...

C'est à partir du menu de gauche que vous pouvez choisir ce que vous voulez insérer.

a. Insertion de textes

b. Insertion d'images

c. Insertion de ressources

d. Insertion d'éléments interactifs

Insertion de texte

Titre 1

Différents styles de texte sont proposés. Une fois l'un d'eux inséré, si vous cliquez dessus, un menu apparaît en haut de la page.

Sous-titre

Ceci est un paragraphe prêt à contenir créativité, expériences et histoires géniales.

Vous pouvez faire des réglages identiques à un traitement de texte : modifier la police, faire des copier-coller, centrer votre texte, régler l'espacement entre les lignes, paragraphes, lettres...

Quelques icônes sont un peu plus spécifiques :

Cette icône permet de placer l'objet dans la page, au milieu, haut, bas...

Cette icône permet de placer l'objet directement au sommet ou au dessous de tous les autres, ou de le déplacer d'un en un.

Cette icône permet de régler l'opacité de l'objet.

Cette icône permet d'activer le mode "glisser" : l'objet pourra être déplacé par celui qui visualisera le genially

Insertion d'image

Vous pouvez :

• copier-coller une image.

• déposer des images présentes dans votre ordinateur.

Cliquez sur "déposer ici vos images" : l'image sélectionnée apparaîtra en dessous et vous n'aurez qu'à la glisser au bon endroit de votre création.

• sélectionner des images parmi celles proposées. Elles proviennent de Pixabay et sont des images libres de droits. Une option vous permet de ne choisir que parmi des images au fond transparent.

• selectionner des gifs.

• accéder à votre google drive ou dropbox.

• renseigner directement le lien d'une image.

Des icônes spécifiques apparaissent quand l'image est sélectionnée :

Cette icône permet de rogner l'image.

Cette icône permet d'ajouter un cadre à l'image.

Insertion de ressources

• des graphiques interactifs

Vous pouvez insérer :

• des icônes

• des formes

• des connecteurs

• des illustrations

• des silhouettes

dont tous les paramètres sont réglables avec cette icône :

Insertion d'éléments interactifs

Parmi les éléments interactifs, il y a des boutons de différents styles : différentes formes, avec le "logo" transparent..., des boutons "texte", des chiffres... Les couleurs des boutons sont, bien sûr, modifiables.

01:30

Des widgets sont proposés : compte à rebours, chronomètre, dé... Un "carrousel" permet de présenter des images à faire défiler...

On retrouve les graphiques interactifs.

Et enfin, les zones interactives. C'est une zone transparente que l'on place à l'endroit souhaité afin de rendre cette zone de l'écran clicable sans que ce soit visible :

Cliquez sur le 7 !

3. QUELQUES INTERACTIONS

VOCABULAIRE

Chaque objet du genially peut être affecté d'une interaction. Une fois l'objet sélectionné, en cliquant sur l'icône , on affiche ce menu et on peut :

• faire apparaître une étiquette au survol de la souris ;

• faire apparaître une fenêtre en cliquant sur l'objet ;

• faire ouvrir un lien (dans un autre onglet par défaut ou dans le même) ;
• aller à une autre page du genially ;
• faire apparaître l'objet en plein écran ;
• faire écouter un son ;
• révéler un autre objet.

https://view.genial.ly/6595972212796b0014f3ea84?idSlide=

4. NAVIGATION ET TRANSITIONS

Pour accéder à ce réglage, vous pouvez cliquer sur cette icône en bas de page : ou sur celle-ci, tout à droite, mais qui n'apparait que dans le menu "Pages".

Pour naviguer entre les différentes pages de votre genially, trois solutions sont possibles :

-la navigation "standard" dans laquelle des petites flèches apparaissent sur les côtés pour avancer d'une page à l'autre ou reculer.

Les transitions entre les pages sont également réglages, à partir de l'onglet "Transitions", juste à côté de celui de la navigation.

-la navigation "vidéo" où les pages s'affichent les unes après les autres au bout d'un temps à définir.

-la navigation "microsite" où les flèches de navigation disparaissent et c'est en cliquant sur un objet qu'une nouvelle page s'affiche.

De très nombreuses possibilités sont diponibles pour faire apparaître la nouvelle page, à vous de tester !

5. Animations d'Objets

Apparition automatique.

Vous pouvez animer chaque objet : -de manière automatique :

• pour le faire apparaître (entrée),
• en continu une fois la page affichée,
• pour le faire disparaître (sortie).

-au survol ou au clic de la souris.

Apparition automatique puis en continu.

Apparition automatique puis disparition automatique.

Apparition automatique puis au survol de la souris.

Apparition automatique puis au clic de la souris.

L'icone permet d'accéder au menu de réglages. De nombreux effets sont disponibles. Pour l'apparition automatique, on peut régler le début de l'animation, sa vitesse et, pour certains effets, sa direction.

Différentes directions d'apparition

Différentes vitesses d'apparition

Ou encore ne déclencher le son qu'au moment où l'utilisateur cliquera sur lecture. Pour cela, décochez "Masquer le lecteur" :

6. Audio

On peut aussi rendre le lecteur plus joli en mettant son opacité à zéro et en ajoutant "en dessous" un bouton au niveau du triangle de lecture.

Vous pouvez ajouter un fond sonore en continu qui démarre dès le début du genially en cliquant juste en haut de la page sur :

et une fois le son téléchargé, en cochant l'option "Fond sonore". L'option "Loop" permet relancer le son du début pour qu'il soit en continu. Ou vous pouvez choisir de déclencher un son à l'ouverture d'une page précise en cochant "Autoplay" et "Masquer le lecteur".

Comme on l'a déjà vu, ajouter un son au clic sur un objet fait partie des interactions possibles :

Vous pouvez aussi passer par le menu "Insérer" et l'onglet Audio.

7. VIdEo

Pour ajouter une vidéo, aller dans le menu de gauche sur "Insérer" puis sur l'onglet Vidéo.

Vous pouvez coller le lien d'une vidéo Youtube ou Viméo. Vous pouvez aussi télécharger vos propres vidéos depuis Google Drive. Vos vidéos seront intégrées à la page et vous pourrez les redimensionner.

Quelques exemples de vidéos intégrées :

Vous demandez au docteur comment ces leucocytes peuvent lutter contre les microbes.

Comme vous êtes le dernier patient du docteur, il accepte de prendre encore un peu de temps pour vous expliquer. Il veut vous montrer une vidéo de l'action des phagocytes dans notre organisme.

Clique sur l'écran de l'ordinateur pour voir cette vidéo.

Mme TRUC a 38 ans : sa grossesse est donc à risque. En effet, plus l'âge de la maman est élevé plus le risque d'anomalies chromosomiques augmente. Vous décidez donc de vérifier les chromosomes de son foetus en pratiquant une amniocentèse. Avant de l'emmener en salle d'examen, vous lui montrez donc une vidéo pour lui expliquer le principe de l'amniocentèse.

https://view.genial.ly/6595972212796b0014f3ea84?idSlide=

8. Glisser-deposer

Quelques exemples :

• Des schémas à compléter :

-avec une vérification automatique quand tout est bien placé : -avec un bouton vérification : (des options sont possibles comme faire revenir à leur place initiale les éléments mal placés...)

• Des éléments à remettre dans l'ordre chronologique :

• Des éléments à classer :

Quand vous avez insérer un objet, vous pouvez le rendre déplaçable par l'utilisateur du Genially. Pour cela, vous devez cliquer sur l'icône qui s'affiche dans la barre du haut, une fois l'objet sélectionné.

Cela permet de créer de petits exercices pour les élèves dans lesquels ils doivent déplacer des éléments aux bons endroits. Pour cela, il faut indiquer des "zones cibles" correspondant aux bons objets avec l'outil DnD du site Scape.

(avec des éléments "objets" qui sont aussi des "cibles")

(Drag and drop)

Annotez ce schéma du système nerveux d'une grenouille.

moelle épinière

nerf optique

nerf sciatique

muscle

cerveau

oeil

Associez chaque photo à l'étape correspondante de la méiose.

Première division de méiose :

ANAPHASE 1

TELOPHASE 1

METAPHASE 1

PROPHASE 1

Deuxième division de méiose :

ANAPHASE 2

METAPHASE 2

TELOPHASE 2

PROPHASE 2

Dans cet exemple, une flèche pour passer à la suite ne s'affiche que quand l'exercice est réussi. Je vous en ai mise une pour que vous puissiez avancer sans le faire.

Remets ces 6 étapes de la phagocytose dans l'ordre chronologique.

étape 2

étape 1

étape 3

étape 4

étape 5

étape 6

BRAVO !

Un message s'affichera quand les croquis seront placés dans le bon ordre.

Complétez le schéma en déplaçant les croquis pour les mettre dans l'ordre chronologique :

cellule-oeuf

embryon à 8 cellules

ovule et spermatozoÏde

cellule contenant le noyau d'un spermatozoïde et le noyau d'un ovule

embryon à 4 cellules

embryon à 2 cellules

Replacez chaque titre à côté de la flèche correspondante :

1ère division de la cellule-oeuf

3ème division de la cellule-oeuf

Union du noyau de l'ovule et du noyau du spermatozoïde

Union des cellules reproductrices

2ème division de la cellule-oeuf

embryon à 2 cellules

embryon à 4 cellules

embryon à 8 cellules

cellule contenant le noyau d'un spermatozoïde et le noyau d'un ovule

ovule et spermatozoÏde

cellule-oeuf

Le message "Impossible de charger le contenu enrichi" est normal -->

Reconstituez le cycle de vie des grenouilles :

<nombre>11</nombre> <script></script>

embryon

adultes

Bravo ! Bon travail !

tétard (larve)

cellules-oeufs

tétard (4 membres)

tétard (2 membres)

Emboîte correctement les groupes et classe les animaux dedans en déplaçant les images. Clique sur l'oeil pour voir le tableau des attributs

AIDE

Martin pêcheur

Agrion élégant

Grenouille rousse

Gerris des lacs

Héron cendré

Crapaud commun

Attribut : Bouche

Attribut : Squelette interne

BRAVO !

Attribut : Squelette externe

Pour classer davantage encore, on peut ajouter les groupes correspondant aux attributs "plumes" et "4 doigts à la main" : à toi de placer ces groupes et de classer les animaux dedans.

AIDE

Martin pêcheur

Agrion élégant

Gerris des lacs

Héron cendré

Grenouille rousse

Crapaud commun

Attribut : Bouche

Attribut : Plumes

Attribut : Squelette interne

BRAVO !

Attribut :

4 doigts à la main

Attribut : Squelette externe

Pour avoir les outils permettant de réaliser du "glisser-déposer" = "Drag and Drop" : l'outil DnD du site S'cape :

9. QUestioNs interactives

Des questions interactives peuvent être ajoutées à votre génially. -soit directement à partir des fonctionnalités de genially : Vous avez le choix de faire des QCM, des Vrai/Faux, Choisir une image correcte, mettre des réponses dans l'ordre.

Quelques exemples sur les pages suivantes...

-soit à partir d'outils disponibles sur le site S'cape : Des exercices de cases à cocher (QCM, Vrai/Faux), des tableaux à remplir, sélectionner une image...

Extensions du site S'cape pour les questions interactives :

Des questions interactives disponibles dans Genially :

Plusieurs modèles dispo : QCM (avec une ou plusieurs réponses correctes possibles à paramétrer), Vrai-Faux...

On peut choisir d'activer le passage à la page suivante en cas de bonne réponse (pas dans le 1er mais oui dans le 2nd)

Choix d'une image correcte, réponses à replacer dans l'ordre :

Pour chaque type de question interactive, on peut personnaliser toutes les couleurs : celle de la police, du fond, des réponses, du bouton envoyer, des feed back... MAIS on peut aussi faire soi-même des boutons ou utiliser des extensions du site Scape.

L'apparition des anticorps

Des prélèvements sanguins ont été effectués sur une personne non vaccinée contaminée par le tétanos

QUESTION 1/3

Combien de temps après la contamination l'organisme commence-t-il à fabriquer des anticorps ?

Après quelques heures.

C'est immédiat.

Après quelques jours.

L'apparition des anticorps

Des prélèvements sanguins ont été effectués sur une personne non vaccinée contaminée par le tétanos

QUESTION 2/3

Au 10ème jour après la contamination par le tétanos, les anticorps fabriqués peuvent-ils agir ?

Oui mais uniquement contre la bactérie du tétanos

Non, il n'y en a pas

Oui, ils agissent contre tous les microorganismes

L'apparition des anticorps

Des prélèvements sanguins ont été effectués sur une personne non vaccinée contaminée par le tétanos

QUESTION 3/3

La souris de l'expérience n°1 est morte au 4ème jour...

...car les anticorps n'ont pas agi contre la bactérie.

...car elle était très âgée.

...car les anticorps n'ont pas été produits à temps.

Des expériences historiques

• La 1ère expérience permet de conclure que les protéines ne se fabriquent pas directement à partir de l'ADN.

Vrai

Faux

• L'intermédiaire entre l'ADN et les protéines a une durée de vie de quelques heures.
• La seconde expérience permet de conclure que la synthèse des protéines nécessite :

Vrai

Faux

de l'ADN

de l'ARN

des enzymes détruisant l'ARN

des enzymes détruisant l'ADN

VALIDER

Réinitialiser

A - Un intermédiaire entre ADN et protéine

Cette photographie montre une cellule réalisant une importante activité de synthèse protéique : les chercheurs ont modifié un gène de telle sorte que lorsque celui-ci s'exprime, certains acides aminés assemblés en protéine réagissent avec une substance qui émet une fluorescence orange.

La photographie de cette expérience nous montre que les protéines sont fabriquées au niveau du de la cellule. Mais l'ADN est situé dans le de la cellule. Il doit donc exister un intermédiaire qui transporte l'information contenue dans l' pour qu'elle soit traduite en .

VALIDER

Tu vas maintenant pouvoir classer 6 des animaux photographiés. Tu peux cliquer sur les images pour avoir une description de l'animal. Lis bien tous les textes.

Grenouille rousse

Martin pêcheur

Agrion élégant

Héron cendré

Gerris des lacs

Crapaud commun

Pour que ce soit plus facile pour faire des groupes, on peut indiquer les points communs (= attributs) qu'ils ont entre eux dans un tableauDeux lignes n'ont pas été complétées (pour l'Agrion élégant et pour le Martin pêcheur). A toi de les compléter en cliquant dans les cases de ce qu'ils possèdent.

Bravo ! Le tableau est bien complété !

Eh non ! Il y a une ou des erreurs... Relis bien les fiches de description des animaux !

Pour des cases à cocher : l'outil CAC du site S'cape ou pour faire des croix dans un tableau... : l'outil CRUZ.

Pour compléter un texte à trous : l'outil COUISE du site S'cape (hé oui toujours lui !!!)

10. LEARNING-APP

Vous utilisez peut-être déjà des activités learning-app. Ce sont des activités que vous pouvez créer à partir de ce site : https://learningapps.org/ Il y en a de toutes sortes :

Vous pouvez intégrer vos learning-app dans un Genially ! Dans learning-apps, il faut récupérer le code d'intégration (iframe) dans "Utiliser cette appli" / "intégrer".

Dans Genially, il faut aller dans "Insérer" et dans l'onglet "Autres", où vous devez coller, dans "insérer du contenu externe", l'iframe que vous avez copié.

Quelques exemples sur les pages suivantes...

Dans cet exemple, on obtient à la réussite du learning-app un code (5426) qui permet d'ouvrir le cadenas pour passer à la page suivante.

Eh non ! Ce n'est pas le bon code !

Dans cet exemple, à la réussite du learning-app s'affiche le bouton qui permet de changer de page. Pour cela, il faut utiliser l'extension LAVAR du site Scape ! J'en ai ajouté un pour vous.

eco

Pour créer une interaction dans le Genially à la réussite du learning-app : l'outil LAVAR du site S'cape !

Et voilà un genially qui donne des indications de paramétrages pour personnaliser les learning-app :

(fond transparent, ...)

eco

variable

variable

variable

modifié le 09/02/23)

variable

variable

modifié le 09/02/23)

PAGE DE REACTION

PAGE DE DEFINITION

Code à copier en mode prévisualisation et à coller dans le feedback du learning-apps.

Fonction obligatoire dans la page.

Élément à grouper avec un objet Genially (hors texte).

CETTE PAGE NE DOIT PAS CONTENIR LE LEARNING APPS NI ETRE MASQUEE ! SE METTRE EN MICROSITE POUR L'EVITER DANS LA NAVIGATION.

DANS LA PAGE AVEC LE LEARNING APPS OU UNE AUTRE

Permet de définir une variable accessible le temps d'une session (même onglet même navigateur).

Élément à grouper avec un objet Genially (hors texte).

OU

Permet de définir une variable accessible d'une session à l'autre (même navigateur). Utilisable dans des Genially différents.

Permet de réinitialiser une variable. Utilisable en début de Genially par exemple. Placer dans la même diapo la fonction jaune pour que ce bloc soit invisible en visualisation.

11. CALCULATRICE

On peut afficher une calculatrice dans une page du genially.

Voilà un genially que vous pourrez réutiliser afin de pouvoir copier-coller la calculatrice de votre choix et l'insérer ensuite dans votre propre genially :

Un exemple à la page suivante

L'IMC = Indice de Masse Corporelle :

L' indice de masse corporelle (IMC) permet de savoir si la masse d'un individu est normale ou présente des risques pour sa santé.

On le calcule ainsi :

IMC = masse ÷ (taille x taille)

(masse en kg et taille en mètre)

I M C

Consulte l'onglet IMC. Utilise la calculatrice ci-dessous pour calculer l'IMC de Anne puis clique sur valider.

Patients

IMC

Prénoms

Donia

Anne

Maxime

Infos

Age (en années)

16

12

15

1,5

1,6

Taille (en m)

1,6

Masse (en kg)

37

60

46

Eh non, il doit y avoir une erreur de calcul...

aIDE

logiciel énergie

VALIDER

IMC

Masse normale

Masse normale

Masse normale

Tu peux passer à la suite !

Corpulence

Masse insuffisante

Masse insuffisante

Masse insuffisante

Surpoids ou obésité

Surpoids ou obésité

Surpoids ou obésité

Cette page est protégée par mot de passe

Introduire le mot de passe

L'indice 4, c'est la couleur des leucocytes !!!

Des cadenas avec Lockee :

Christophe Colomb

Le site Lockee permet de créer toutes sortes de cadenas : A vous de jouer !!!

Indice 2 : La couleur du dioxyde de carbone !!!

Pour trouver un indice, c'est par ici !!!

Lille, Marseille, Salins, Nice

13. ESCAPE GAME

1. Un décor immersif

2. La fouille

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

13. ESCAPE GAME

Pour que l'escape game soit réussi, la question des décors est importante. Pour obtenir des images libres de droits, vous pouvez parcourir des sites comme :

1. Un décor immersif

-Pixabay, -Freepik ...

2. La fouille

3. La roue césar

4. S'pot pour trouver un indice

Vous pouvez aussi créer votre propre décor grâce à l'IA. Cette page vous donne quelques exemples et explications :

5. "Dépoussiérer" l'indice

6. Créer un puzzle

Il est possible de glisser un indice parmi de nombreux objets qu'il faudra déplacer pour le trouver (dans un tiroir, sur un bureau...). Pour cela, il faut privilégier des objets au fond transparent.

13. ESCAPE GAME

-6 oeufs -Jambon blanc -Champignons

1. Un décor immersif

E = X

2. La fouille

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

13. ESCAPE GAME

Parmi les énigmes que vous pouvez incorporer à votre escape game, vous pouvez inclure la roue-césar afin de déchiffrer un message. L'image centrale peut être modifiée.

1. Un décor immersif

2. La fouille

Yvzl klz zhislz !

3. La roue césar

L'extension Caesar de S'cape :

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

Une version existe avec des nombres de 1 à 26.

6. Créer un puzzle

13. ESCAPE GAME

L'extension S'pot du site s'cape permet de simuler une recherche à la lampe torche ou à la loupe en faisant apparaître des objets au survol de la souris ou en zoomant dessus.

1. Un décor immersif

2. La fouille

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

indice

Fonction OBLIGATOIRE à placer DANS la page

Élément UNIQUE à grouper avec un objet déplaçable. On vérifie si le centre de cette zone est dans la zone FLAMME.

Élément DUPLICABLE à grouper avec un objet devant apparaître quand le centre de la TORCHE est dans cette zone. L'objet reste affiché.

Numérotation automatique des groupes selon l'ordre de leur création

Élément DUPLICABLE à grouper avec un objet devant disparaître quand le centre de la TORCHE est dans la zone FLAMME.

Élément UNIQUE à grouper avec un objet déplaçable. On vérifie si le centre de cette zone est dans la zone INVISIBLE ou PETIT.

Élément DUPLICABLE à grouper avec un objet devant apparaître quand le centre de la LAMPE-LOUPE est dans cette zone.

Élément DUPLICABLE à grouper avec un objet devant grossir quand le centre de la LAMPE-LOUPE est dans cette zone.

13. ESCAPE GAME

L'extension S'crape permet de "gratter" une image pour faire apparaitre celle de dessous et pouvoir révéler un indice.

1. Un décor immersif

2. La fouille

Code de l'ordi : 9876

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

Élément À GRATTER : À grouper avec une IMAGE Genially pour la transformer en image "grattable" ou à "gommer".

Cet élément a été créé pour dépanner en espérant un retour à la normale..

REMARQUES L'élément À GRATTER doit être placé sur ou dessous l'image sans débordement. Dans le cas contraire, l'image serait déformée. L'image n'est pas réellement effacée, mais elle est rendue transparente. Il n'est pas possible de rendre interactifs les objets placés sous l'image. Ne pas placer l'image trop près des bords du Genially pour éviter certains petits soucis sur tablette.

Élément TAILLE PIECE : Élément facultatif afin de définir la taille de la "gomme". Par défaut, la taille est définie à 5. À simplement placer dans la diapo.

Cet élément peut être dupliqué et groupé à plusieurs images.

L'extension Peuzeul permet de créer un puzzle à partir d'une image de départ. Il suffit de paramétrer le nombre de colonnes et de lignes qui donneront le nombre de pièces du puzzle.

13. ESCAPE GAME

1. Un décor immersif

2. La fouille

Code de l'ordi : 9876

A la réussite du puzzle, vous pouvez choisir l'objet à afficher : indice, ...

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

• 3
• 5
• oui

<div class="nePasRetirerPuzzle" style="background-color:orange;"> A ne pas retirer, contient le script du puzzle - PIECES SANS BRODURE </div> <script> var inEditor = (window.location.pathname.split("/")[1]=="editor" ? true : false); const limite=5; function getViewItem(objet) { var trouve=false; while(!trouve) { objet=objet.parentNode; if (objet==null) { trouve=true; } else if (objet.getAttribute("class")!=null) { if (objet.getAttribute("class").slice(0,18)=="genially-view-item") { trouve =true; } } } return objet; } function getAnimatedItem(objet) { var trouve=false; while(!trouve) { objet=objet.parentNode; if (objet==null) { trouve=true; } else if (objet.getAttribute("class")!=null) { if (objet.getAttribute("class").slice(0,25) == "genially-animated-wrapper") { trouve =true; } } } return objet; } if (!inEditor) { var NPR = document.querySelector(".nePasRetirerPuzzle"); NPR.setAttribute("class","fini"); NPR.style.display="none"; var divConsignesPuzzle = document.querySelector(".consignesPuzzle"); divConsignesPuzzle.setAttribute("class","fini"); divConsignesPuzzle.innerHTML=""; var groupeConsignes = getViewItem(divConsignesPuzzle); groupeConsignes.style.display="none"; var lignesConsignes = groupeConsignes.getElementsByTagName("li"); var nbColonnes=parseInt(lignesConsignes[0].innerText); var nbLignes=parseInt(lignesConsignes[1].innerText); var piecesLisses = (lignesConsignes[2].innerText=="oui" ? false : true); var divImagePuzzle = document.querySelector(".imagePuzzle"); divImagePuzzle.setAttribute("class","fini"); divImagePuzzle.innerHTML=""; var groupeImagePuzzle=getAnimatedItem(divImagePuzzle); var racine=groupeImagePuzzle.parentNode; var largeurPuzzle=groupeImagePuzzle.offsetWidth; var hauteurPuzzle=groupeImagePuzzle.offsetHeight; var coinGauche=groupeImagePuzzle.offsetLeft; var coinHaut=groupeImagePuzzle.offsetTop; var indexZ = groupeImagePuzzle.style.zIndex; var imageConsigne=groupeImagePuzzle.getElementsByTagName("img").item(0); imageConsigne.onload=imageChargee; var divGagne=document.querySelectorAll(".gagnePuzzle"); var groupeGagne=[]; divGagne.forEach(elt=> { elt.setAttribute("class","fini"); elt.innerHTML=""; let groupe=getViewItem(elt); groupeGagne.push(groupe); groupe.style.display="none"; }); var pieces=[]; var moveActif=-1; var xAppel; var yAppel; function imageChargee() { var largeurConsigne=imageConsigne.naturalWidth; var hauteurConsigne=imageConsigne.naturalHeight; for (var j=0;j<nbLignes;j++) { for (var i=0;i<nbColonnes;i++) { let newDiv = document.createElement("div"); let gauche=coinGauche+i*largeurPuzzle/nbColonnes; let haut=coinHaut+j*hauteurPuzzle/nbLignes; let largeur=largeurPuzzle/nbColonnes; let hauteur=hauteurPuzzle/nbLignes; let xStartOri=i/nbColonnes*largeurConsigne; let yStartOri=j/nbLignes*hauteurConsigne; let largeurOri=largeurConsigne/nbColonnes; let hauteurOri=hauteurConsigne/nbLignes; if (!piecesLisses) { if (i<nbColonnes-1) { largeur*=1.2; largeurOri*=1.2; } if (j<nbLignes-1) { hauteur*=1.2; hauteurOri*=1.2; } } newDiv.setAttribute("style","position:absolute;left:"+ gauche +"px;top:" + haut +"px;height:" + hauteur + "px;width:" + largeur +"px;z-index:"+ indexZ +";"); let newPattern = document.createElement("canvas"); newPattern.height=hauteur; newPattern.width=largeur; let patternCtx=newPattern.getContext('2d'); patternCtx.drawImage(imageConsigne,xStartOri,yStartOri,largeurOri,hauteurOri,0,0,largeur,hauteur); let newCanvas = document.createElement("canvas"); newCanvas.height=hauteur; newCanvas.width=largeur; let ctx=newCanvas.getContext('2d'); newDiv.appendChild(newPattern); newDiv.appendChild(newCanvas); racine.appendChild(newDiv); largeur=largeurPuzzle/nbColonnes, hauteur=hauteurPuzzle/nbLignes, pieces.push({ physique:newDiv, pattern:newPattern, ctx:ctx, largeur:largeur, hauteur:hauteur, appartenance:i+j*nbColonnes, bougeant:false, xStart:gauche, yStart:haut, gDSize:largeur*0.15, gDelta:hauteur*0.12, gRMid:hauteur/2.4, dDSize:largeur*0.15, dDelta:hauteur*0.12, dRMid:hauteur/2.4, hDSize:hauteur*0.15, hDelta:largeur*0.12, hRMid:largeur/2.4, hDSize:hauteur*0.15, bDelta:largeur*0.12, bRMid:largeur/2.4 }); } } for (var i=0;i<pieces.length;i++) { if (i%nbColonnes!=nbColonnes-1) { var alea = (Math.random()*9+10)/100; pieces[i].dDSize=alea*pieces[i].largeur; pieces[i+1].gDSize=alea*pieces[i].largeur; alea = (Math.random()*10+5)/100; pieces[i].dDelta=alea*pieces[i].hauteur; pieces[i+1].gDelta=alea*pieces[i].hauteur; alea = (Math.random()*0.6+0.2); pieces[i].dRMid=alea*pieces[i].hauteur; pieces[i+1].gRMid=alea*pieces[i].hauteur; } if (i<pieces.length-nbColonnes) { var alea = (Math.random()*9+10)/100; pieces[i].bDSize=alea*pieces[i].hauteur; pieces[i+nbColonnes].hDSize=alea*pieces[i].hauteur; alea = (Math.random()*10+5)/100; pieces[i].bDelta=alea*pieces[i].largeur; pieces[i+nbColonnes].hDelta=alea*pieces[i].largeur; alea = (Math.random()*0.6+0.2); pieces[i].bRMid=alea*pieces[i].largeur; pieces[i+nbColonnes].hRMid=alea*pieces[i].largeur; } } for (var i=0;i<pieces.length;i++) { var pattern = pieces[i].ctx.createPattern(pieces[i].pattern,"no-repeat"); pieces[i].ctx.fillStyle=pattern; pieces[i].ctx.beginPath(); pieces[i].ctx.lineWidth = 0.1; pieces[i].ctx.strokeStyle = "#000000"; pieces[i].ctx.moveTo(0,0); if (!piecesLisses &&i>=nbColonnes) { pieces[i].ctx.lineTo(pieces[i].hRMid-pieces[i].hDelta,0); pieces[i].ctx.bezierCurveTo(pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid-2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,pieces[i].hDSize); pieces[i].ctx.bezierCurveTo(pieces[i].hRMid+2*pieces[i].hDelta,0.10*pieces[i].hauteur,pieces[i].hRMid,0.3*pieces[i].hDSize,pieces[i].hRMid+pieces[i].hDelta,0); } pieces[i].ctx.lineTo(pieces[i].largeur,0); if (!piecesLisses && i%nbColonnes!=nbColonnes-1) { pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].dRMid-pieces[i].dDelta); pieces[i].ctx.bezierCurveTo(pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid+0.5*pieces[i].dDelta,1.10*pieces[i].largeur,pieces[i].dRMid-2*pieces[i].dDelta,pieces[i].largeur+pieces[i].dDSize,pieces[i].dRMid); pieces[i].ctx.bezierCurveTo(1.10*pieces[i].largeur,pieces[i].dRMid+2*pieces[i].dDelta,pieces[i].largeur+0.3*pieces[i].dDSize,pieces[i].dRMid-0.5*pieces[i].dDelta,pieces[i].largeur,pieces[i].dRMid+pieces[i].dDelta); } pieces[i].ctx.lineTo(pieces[i].largeur,pieces[i].hauteur); if (!piecesLisses&&i<pieces.length-nbColonnes) { pieces[i].ctx.lineTo(pieces[i].bRMid+pieces[i].bDelta,pieces[i].hauteur); pieces[i].ctx.bezierCurveTo(pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid+2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+pieces[i].bDSize); pieces[i].ctx.bezierCurveTo(pieces[i].bRMid-2*pieces[i].bDelta,1.10*pieces[i].hauteur,pieces[i].bRMid,pieces[i].hauteur+0.3*pieces[i].bDSize,pieces[i].bRMid-pieces[i].bDelta,pieces[i].hauteur); } pieces[i].ctx.lineTo(0,pieces[i].hauteur); if (!piecesLisses&&i%nbColonnes!=0) { pieces[i].ctx.lineTo(0,pieces[i].gRMid+pieces[i].gDelta); pieces[i].ctx.bezierCurveTo(0.3*pieces[i].gDSize,pieces[i].gRMid-0.5*pieces[i].gDelta,0.10*pieces[i].largeur,pieces[i].gRMid+2*pieces[i].gDelta,pieces[i].gDSize,pieces[i].gRMid); pieces[i].ctx.bezierCurveTo(0.10*pieces[i].largeur,pieces[i].gRMid-2*pieces[i].gDelta,0.3*pieces[i].gDSize,pieces[i].gRMid+0.5*pieces[i].gDelta,0,pieces[i].gRMid-pieces[i].gDelta); } pieces[i].ctx.lineTo(0,0); pieces[i].ctx.fill(); pieces[i].ctx.stroke(); pieces[i].pattern.style.display="none"; } pieces.forEach(function (elt,indice) { elt.physique.addEventListener('mousedown',function (evt) {enfonce(evt,indice)}); elt.physique.addEventListener('touchstart',function (evt) {enfonceTactile(evt,indice)}); elt.physique.addEventListener('touchmove',function (evt) {tactileDeplace(evt,indice)}); elt.physique.addEventListener('touchend',function (evt) {tactileFin()}); elt.physique.addEventListener('touchleave',function (evt) {tactileFin()}); }); groupeImagePuzzle.style.display="none"; shuffle(); } function shuffle() { var xMin=coinGauche; var xMax=coinGauche+largeurPuzzle*(nbColonnes-1)/nbColonnes; var yMin=coinHaut; var yMax=coinHaut+hauteurPuzzle*(nbLignes-1)/nbLignes; pieces.forEach(elt=> { let alea=Math.random()*(xMax-xMin)+xMin; elt.physique.style.left=alea+"px"; alea=Math.random()*(yMax-yMin)+yMin; elt.physique.style.top=alea+"px"; }); } function enfonce(evt,qui) { evt.preventDefault(); moveActif=qui; xAppel=evt.clientX; yAppel=evt.clientY; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[qui].appartenance) { pieces[i].bougeant=true; pieces[i].xStart=pieces[i].physique.offsetLeft; pieces[i].yStart=pieces[i].physique.offsetTop; } else { pieces[i].bougeant=false; } } } function enfonceTactile(evt,qui) { if (moveActif==-1) { evt.preventDefault(); moveActif=qui; xAppel=evt.changedTouches[0].clientX; yAppel=evt.changedTouches[0].clientY; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[qui].appartenance) { pieces[i].bougeant=true; pieces[i].xStart=pieces[i].physique.offsetLeft; pieces[i].yStart=pieces[i].physique.offsetTop; } else { pieces[i].bougeant=false; } } } } document.addEventListener('mouseup',function() { moveActif=-1; }); function tactileFin() { moveActif=-1; } document.addEventListener('mousemove',sourisDeplace) function sourisDeplace(evt) { if (moveActif>-1) { var contours=racine.getBoundingClientRect(); var deltaX=(xAppel-evt.clientX)/contours.width*1200; var deltaY=(yAppel-evt.clientY)/contours.height*675; pieces.forEach(function (elt,indice) { if (elt.bougeant) { elt.physique.style.left=(elt.xStart-deltaX)+"px"; elt.physique.style.top=(elt.yStart-deltaY)+"px"; } }); pieces.forEach(function (elt,indice) { if (elt.bougeant) { checkForNeighbours(indice,evt.clientX,evt.clientY); } }); } } function tactileDeplace(evt) { if (moveActif>-1) { var contours=racine.getBoundingClientRect(); var deltaX=(xAppel-evt.changedTouches[0].clientX)/contours.width*1200; var deltaY=(yAppel-evt.changedTouches[0].clientY)/contours.height*675; pieces.forEach(function (elt,indice) { if (elt.bougeant) { elt.physique.style.left=(elt.xStart-deltaX)+"px"; elt.physique.style.top=(elt.yStart-deltaY)+"px"; } }); pieces.forEach(function (elt,indice) { if (elt.bougeant) { checkForNeighbours(indice,evt.changedTouches[0].clientX,evt.changedTouches[0].clientY); } }); } } function checkForNeighbours(numero,x,y) { if (numero%nbColonnes>0) { if ((Math.abs(pieces[numero].physique.offsetLeft-pieces[numero].largeur-pieces[numero-1].physique.offsetLeft)<limite) && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero-1].physique.offsetTop)<limite) && !pieces[numero-1].bougeant) { pieces[numero-1].physique.style.left=(pieces[numero].physique.offsetLeft-pieces[numero].largeur)+"px"; pieces[numero-1].physique.style.top=pieces[numero].physique.offsetTop+"px"; repositionGroupe(numero-1); xAppel=x; yAppel=y; pieces[numero-1].bougeant=true; return; } } if (numero%nbColonnes<nbColonnes-1) { if ((Math.abs(pieces[numero].physique.offsetLeft+pieces[numero].largeur-pieces[numero+1].physique.offsetLeft))<limite && (Math.abs(pieces[numero].physique.offsetTop-pieces[numero+1].physique.offsetTop)<limite)&& !pieces[numero+1].bougeant) { pieces[numero+1].physique.style.left=(pieces[numero].physique.offsetLeft+pieces[numero].largeur)+"px"; pieces[numero+1].physique.style.top=pieces[numero].physique.offsetTop+"px"; repositionGroupe(numero+1); xAppel=x; yAppel=y; pieces[numero+1].bougeant=true; return; } } if (numero>=nbColonnes) { if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero-nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero-nbColonnes].physique.offsetTop-pieces[numero].hauteur)<limite && !pieces[numero-nbColonnes].bougeant) { pieces[numero-nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px"; pieces[numero-nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop-pieces[numero].hauteur)+"px"; repositionGroupe(numero-nbColonnes); xAppel=x; yAppel=y; pieces[numero-nbColonnes].bougeant=true; return; } } if (numero<pieces.length-nbColonnes) { if (Math.abs(pieces[numero].physique.offsetLeft-pieces[numero+nbColonnes].physique.offsetLeft)<limite && Math.abs(pieces[numero].physique.offsetTop-pieces[numero+nbColonnes].physique.offsetTop+pieces[numero].hauteur)<limite && !pieces[numero+nbColonnes].bougeant) { pieces[numero+nbColonnes].physique.style.left=pieces[numero].physique.offsetLeft+"px"; pieces[numero+nbColonnes].physique.style.top=(pieces[numero].physique.offsetTop+pieces[numero].hauteur)+"px"; repositionGroupe(numero+nbColonnes); xAppel=x; yAppel=y; pieces[numero+nbColonnes].bougeant=true; return; } } } function switchAppartenance(transfuge) { pieces.forEach(elt=> { if (elt.appartenance==transfuge) { elt.appartenance=moveActif; } }); pieces.forEach(elt=> { elt.xStart=elt.physique.offsetLeft; elt.yStart=elt.physique.offsetTop; }); checkGagne(); } function checkGagne() { var premier=pieces[0].appartenance; var cBon=true; for (var i=1;i<pieces.length;i++) { if (pieces[i].appartenance!=premier) { cBon=false; } } if (cBon) { groupeGagne.forEach(elt=>elt.style.display="block"); } } function repositionGroupe(refferent) { var xRef=pieces[refferent].physique.offsetLeft; var yRef=pieces[refferent].physique.offsetTop; for (var i=0;i<pieces.length;i++) { if (pieces[i].appartenance==pieces[refferent].appartenance) { pieces[i].physique.style.left=xRef+(i%nbColonnes - refferent%nbColonnes)*pieces[0].largeur+"px"; pieces[i].physique.style.top=yRef+(Math.floor(i/nbColonnes)-Math.floor(refferent/nbColonnes))*pieces[0].hauteur+"px"; } } switchAppartenance (refferent); } } </script>

Il faut grouper l'élément "image pour le puzzle" avec l'image à reconstituer. La taille du groupe formé par ces deux éléments déterminera la taille de votre puzzle. Par ailleurs, les pièces du puzzle apparaitront aléatoirement dans cet espace au chargement de la page

Ce groupe formé par un élément scripté et une liste à puce permet de définir le nombre de pièces du puzzle ainsi que l'aspect des pièces.

nombre de pièces en largeur

nombre de pièces en hauteur

oui :

non :

L'élément "Gagné" est à grouper avec quelque chose (image, forme genially, texte, ...). Cela apparaîtra une fois le puzzle complet.

OU

Contient le script du puzzle, à laisser sur la page

• 5
• 4
• oui

L'extension CCX permet de créer un puzzle circulaire.

13. ESCAPE GAME

A la réussite du CCX, vous pouvez choisir d'afficher ou de masquer un objet.

1. Un décor immersif

2. La fouille

Code de l'ordi : 9876

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

L'extension CCX permet de créer un puzzle circulaire.

13. ESCAPE GAME

A la réussite du CCX, vous pouvez choisir d'afficher ou de masquer un objet.

1. Un décor immersif

2. La fouille

Code de l'ordi : 9876

3. La roue césar

4. S'pot pour trouver un indice

5. "Dépoussiérer" l'indice

6. Créer un puzzle

14. QUELQUES infoS

Il va souvent vous être utile de grouper des objets pour les assembler et pouvoir les déplacer ensemble, pour leur affecter la même interactivité...

Il faut pour cela les sélectionner : -avec la souris en créant un petit cadre qui inclue tous les objets souhaités ou

1. Grouper /dégrouper

2. Prévisualiser

3. Le mode designer

-en cliquant sur les objets les uns après les autres en s'aidant de la touche du clavier "Ctrl" : en la maintenant enfoncée, on peut sélectionner différents objets même éloignés les uns des autres. Il faut ensuite cliquer sur l'icône "grouper" :

4. Dessiner sur le genially

14. QUELQUES infoS

Vous pouvez à tout moment prévisualiser votre genially afin de voir le résultat et vérifier que tout est correct : que les interactions sont bien faites, que le timing des animations fonctionne bien...

1. Grouper /dégrouper

2. Prévisualiser

Pour cela, cliquez sur l'icône "Prévisualiser" qui se trouve en haut vers la droite :

3. Le mode designer

Vous pouvez alors tester votre genially comme il apparaîtra aux utilisateurs.

4. Dessiner sur le genially

14. QUELQUES infoS

Dans le menu "Options du genially", dans l'angle en haut à droite, le Mode designer est accessible :

Cela permet d'afficher une petite "fenêtre" avec deux menus :

1. Grouper /dégrouper

-Eléments : qui donne la taille exacte, l'emplacement x et y, et l'angle de rotation de chaque objet, ce qui permet donc de faire des réglages fins.

2. Prévisualiser

3. Le mode designer

-Couches : qui donne une liste de tous les objets de la page classés du plus "haut" au plus "bas" : ce qui permet de vérifier quel objet s'affiche au dessus de quel autre. C'est très pratique quand des objets sont déplaçables et qu'il faut s'assurer qu'ils restent visibles et ne soient pas cachés par d'autres.

4. Dessiner sur le genially

14. QUELQUES infoS

Dans le menu "Options du genially", dans l'angle en haut à droite, puis dans les "Préférences", on peut rendre possible de dessiner sur le genially :

1. Grouper /dégrouper

2. Prévisualiser

Cela peut permettre de tracer des figures, de dessiner sur un labyrinthe par exemple ou toutes sortes d'autres choses...

3. Le mode designer

4. Dessiner sur le genially

15. POUR SE PERFECTIONNER

Le site S'cape a développé des extensions pour Genially mais le site est, à la base, créé pour des escape game réels. Il contient de très nombreuses informations pour en développer. N'hésitez pas à y piocher le mode d'emploi et de nombreuses astuces pour en créer un vous-mêmes... sur genially... ou pas !!! Et enfin un site : "Créer un Escape Game pédagogique : Le guide complet" !

Bien évidemment, le site S'cape fourmille d'idées. Vous retrouverez sur ce site toutes les extensions qu'ils proposent :

Un groupe facebook est utilisé pour s'échanger des idées, proposer ses genially, demander de l'aide :

De nombreux tutoriels sont disponibles. Par exemple :

16. PUBLIER SON GENIALLY

Et maintenant bon courage à tous !

Pour rendre accessible votre genially, il faut le publier sur interner.

Pour cela, cliquez sur : Vérifiez les différentes options (le rendre public sur le web ou privé, le rendre réutilisable par quelqu'un d'autre, lui donner un titre...)

Et merci à S'cape sans lequel peu de choses seraient possibles !!!

Vous obtenez alors un lien que vous pouvez copier pour le donner aux utilisateurs du genially ou vous pouvez vous en servir pour créer un QrCode à scanner...

Pour faciliter l'immersion et rendre moins évident le fait que certains objets soient déplaçables, on peut paramétrer le genially pour que le symbole "main" n'apparaisse pas lorsque la souris survole un objet déplaçable. Pour cela, dans les préférences du genially (icône menu en haut à gauche), on peut décocher l'indicateur d'éléments déplaçables ou encore l'indicateur d'interactivité.

YES !

Ben non ! J'ai dit le 7 !!!

Sérum : Le sérum est la partie liquide du sang (=plasma) débarrassée des protéines responsables de la coagulation. Diphtérie : Nom d'une maladie causée par une bactérie dont les toxines affectent les voies respiratoires, le cœur et le système nerveux. La contamination se fait d'individu à individu par les gouttelettes de salive. Tétanos : Nom d'une maladie causée par une bactérie dont les toxines affectent le système nerveux. La contamination se fait par une plaie avec de la terre ou un objet rouillé... Toxines : Molécules libérées dans l'organisme par certaines bactéries.