Want to create interactive content? It’s easy in Genially!

Genially Hints !

Ambassador

Created on December 22, 2020

Start designing with a free template

Discover more than 1500 professional designs like these:

Explore all templates

Presentation by Julia Morris and Marie Allirot Translating S'cape tools in English, video tutorials and links to MFL Genially activities using S'cape tools.

Introduction

How do the S'cape tools work?

S'cape tools

Webinars and MFL Twitterati padlet

Please send us your creations on Twitter and we can add them up to this presentation @MarieAllirot @JuschMo

Introduction

How do the S'cape tools work?

S'cape tools

Webinars and MFL Twitterati padlet

Please send us your creations on Twitter and we can add them up to this presentation @MarieAllirot @JuschMo

This presentation will show how to use S'cape tools to enhance your Genial.ly presentations.Genial.ly is a website for creating interactive presentations and digital escape rooms.S'cape is a group of teachers from France who have developed tools, based on java script that give Genial.ly more functuality and add options for educational activities and escape games.

All copyright by S'cape, no commercial use

S'CAPE

What does it look like? S'cape tool are pieces of code working in the background of Genially - they were added by the S'cape group by using the "insert - other" box. You can see the tool as a small written text on your page (you can't change the size or text), for example. How do I use it? Simply group the small code text with the picture or text that you want to apply it to. Group them by holding down shift and clicking the code and then your picture/text, then click the group icon: Use the preview (eye) button at the top to try it. For most of the tools you will need to enable "drag elements" in settings (cog symbol) to be able to move objects on the slide in view mode.

1/4

2/4

How do I use the templates? Each tool in this presentation comes with an example, an explanation how to use it and a blue template. To use the tools in your own presentation: 1. Click underneath this presentation, it will then be added to your library. 2. Create your own presentation and add the templates by clicking then "My creations" and find this S'cape presentation. Now choose the yellow slide for the tool that you need and adapt it by grouping code with objects and deleting any codes and text you don't need.

3/4

How do I make the code text invisible? You can't delete the code text or change its colour, but you can change to transparency to zero you can also hide it behind the object it is grouped with. Use this icon at the top to put the code on the bottom layer before you combine it.

4/4

Can I use several codes at once? Some, but not all, codes can be copied and pasted to be used with several objects, it will usually tell you in the instructions. You can normally combine several different tools with the same object, just make sure they are all grouped together.

Accordeon

Youx

Meli-Melo

Bloc note

Memopos

CAC

Minuteur

Chronos

Page reference

Couise

Post -eat

Cruz

RND

Drag & Drop

S'kins

Flip Flip

Swiss knife

Tapuscript

Gicode

Télatépala

Magnum

Integrate a tiered hint system

Instructions

Template

Tutorial

Examples

Simple example

How to add a hint system

Add a "hint" button, group it with text. Click on the button and click the inveraction button: Select "window" and click codde button: Paste in one of the code below and change highlighted words. Simple version (one puzzle with one hint): <details> <summary>Puzzle Name</summary> explanation</details>

Click here for example

Staged version: several puzzles with several hints - use the example button to see the code below in action. You can add or delete lines for more/less hints and puzzles. <details> <summary>Puzzle Name 1</summary> <details><summary>Hint 1</summary> explanation 1</details> <details> <summary>Hint 2</summary> explication 2</details> <details> <summary>Hint 3</summary> explanation 3</details></details>

Hint System

Simple version (one puzzle with one hint): <details> <summary>Puzzle Name</summary> explanation</details>

Staged version: several puzzles with several hints :. <details> <summary>Puzzle Name 1</summary> <details><summary>Hint 1</summary> explanation 1</details> <details> <summary>Hint 2</summary> explication 2</details> <details> <summary>Hint 3</summary> explanation 3</details></details>

Duplicate objects

Instructions

Template

Tutorial

Examples

Christmas tree decoration

Version 1 - 29/09/20

Alain, finis !

To duplicate objects

Extension by Patrice Nadam

TEXTE

Click on the pig to clone it

Group DUPLIC with a Genially object

<div style="border: silver solid 1px;background: linear-gradient(to bottom right, silver, grey); border-radius: 10px; display:flex; flex-direction: column; justify-content: center; width:100%; height:100%;" Onclick=" var elt=document.querySelectorAll('.DUPLIC3'); if (elt.length>0){ var pnode = elt[0].parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display='block'; elt[0].classList.remove('DUPLIC3'); } "><p style=" color: #fff; text-align:center; font-size: 2rem; font-weight:bold;">BOUTON 3</p></div> <script> </script>

<div class="DUPLIC3" style="width:100%;height:100%;text-align:center;color:white;background-color:darkred" data-auteur="scape">DUPLIC3<br>(à grouper avec un objet Genially)</div> <script></script>

Edit numbers in the scripts and insert them as others

Element to group

Corresponding button

To have a notepad on Genially

https://scape.enepe.fr/bloc-notes-pour-genially.html

Instructions

Template

Tutorial

Examples

to create on activity ticking boxes

Instructions

Template

Tutorial

Examples

Tick the boxes - Description suspects

version 1.1

CAC

Correct answer

Wrong answer

Correct answer

Try it out!

valider

Number of correct answers ticked

Number of wrong answers not ticked

Score

Functions to keep grouped together

to group with object for feedback

boxes t0 tick (correct and wrong answers

Do not delate, hide if you are not using

optional: Number of green boxes ticked number of red boxes not ticked Score (Sum of 2 values above)

You can copy and paste as many as you need

button to validate your answers

3 different sizes

Example for tiered hints

Puzzle 1: What comes next? 1 - 2 - 4 - 7 - 11 - ...? Puzzle 2: What is the word? 2 - 5 - 1 - 19

Stuck?

VALIDER

Instructions

Template

Tutorial

Examples

to create a quiz with words / numbers as answers

Instructions

Template

Tutorial

Examples

password check

French activities and weather

Cross the valley challenge

SCAPE 6GTpala

Example 1

Username Password

Wrong username or password

Code looks like this:

Example 2

What is the capital of the UK?4+5= What colour are lemons?

Correct! The passcode is 12874

Check

Not all correct. Check capital letters

Code looks like this:

Example 3

On the picture are a and a

Code looks like this:

Check

Don't delete these and leave outside of slide.

How to use the template

Group this with text/picture you want to appear if all answers are correct.

Group this with text/picture you want to appear if any of the answers are incorrect

You need to change the code:1. Select "check" button. 2. Select link icon 3. Select code icon 4. In the code box, follow the instructions to change the variables at the top. Make sure there are the same number of answers between the [ ] as there are answer boxes on your slide. If you put a text box next to the answer box, make sure it is in a layer underneath the answer box so it doesn't cover it up.

Move as many question boxes as you need onto your slide (use in right order)

Don't ungroup the check button! You can still change the text and colour.

Check

Aşağıdakilerden hangisi eğitime ilk katılan 3 kişiydi ?

Check

Template

Instructions

Examples

Tutorial

Maze - Description French

Flowers - word / definition (reusable)

Dress up your teacher (reusable)

Sound maze

Reading

Reconnaissance des instruments

Clique dans les cases des instruments que tu entends.

VALIDER

Exemple (d'après Caroline Pras Pesce)

solution

ring!

open!

Functions to keep grouped together

to group with object for feedback

boxes to tick (correct and wrong answers - to group with genially objects)

Button to validate

You can copy and paste as many as you need.

optional: number of green boxes ticked number of red boxes not ticked Score (Sum of the 2 values above))

do not delete - hide if not needed

VALIDER

DND

Combine 2 objects to make another object appear

DND 10++

Up to 51 items can be combined to make an object appear

DND X

Up to 51 items can be combined, each combination makes a different object appear

Combine 2 objects to make another object appear

Simple instructions

Instructions

Rotation and colour change

Template

Tutorial

Examples

Simple example

Drag and drop (DND)

When the key and the target element are combined, other objects appear or disappear

Test !

Key

Target

Disappears every time

Appears every time

Appears once

Disappears once.

ON/OFF

ON/OFF 1

OFF/ON 1

OFF/ON

DND Rotation or colour change on/off,

To turn rotation on and off, create two idential items. Group one with off/on. Group the other on/off and add a continuous rotation animation. Layer both object on top of each other. When the key elements are combined, the still object disappears and the rotation object appears. Can also be used for colour change, if you create idential objects in different colours

Simple Drag and Drop

Use this template to create your drag and drop activity.

Trigger objects :

group this with the key object that gets moved ( in the example the green square)

group this with the target object that stays in place (in the example the pink square

Available reactions when grouped with objects (in the example the 4 wheel shapes):

appears each time the key elements are combined

(each can only be used once, but you don't have to use all of them)

appears only once

disappears each time

disappear once

Up to 51 items can be combined to make an object appear

Instructions

Template

Tutorial

Examples

Simple example

Verb table

The message "Error loading enriched content" is normal->

How to use the template:

Turn on "drag elements" in settings
Replace the X in the formula with the number of combinations you want to be made (in the example it was 3)
Copy and paste the forumula into "insert" "others", and click "insert. The number will appear in the middle of the page.
Group the number, one of these reaction and your reward object.
Delete the formula on the page or move it off the page.
Group one of the "O" numbers on the left with each of your key objects, that will be moved around. (in the example, yellow box was O1, green box O2 etc.). Ignore the left over ones.
Group each of your target items with one of the "C" numbers on the right. (in the example, yellow frame was C1, green frame C2 etc.)

The message "Error loading enriched content" is normal!

Drag and Drop 10++

Up to 51 items can be combined, each combination makes a different object appear

Instructions

appear once only

Template

Tutorial

apear repeatedly

Examples

Making magic

Circle correct!

Square correct!

This is a more complex example, in which the reward object is at the same time a key object for another combination

Images de brgfx

How to use the templates

In the activity, key and target need to be dragged on top of each other to make the action object appear. Choose the 1st template for the object to appear only once or the 2nd for it to appear several times Group O1 with your first key elemen Group C1 with your first target object Group A1 with your first action (reward) object. Then do the same with the second element with O2, C2, A2 etc. Make sure to delete all other As that aren't used!

Drag and Drop X (appear once)

Use this template to create your drag and drop X activity where objects appear once and stay

Drag and Drop X (appear repeatedly)

Use this template to create your drag and drop X activity where objects appear and disappear if key and target are separated

objects are mirrored, turned by 90 degrees or upside down

Instructions

Template

Tutorial

Keep only one of these four. Keep outside of slide.

Flip

Use this template to flip your object upside down or mirror it.You can only keep ONE type of flip, delete the other 3 sets. Keep green codes to flip upside down Keep red codes to reverse Keep peach to turn 90 degree left. Keep blue to turn 90 degree right.

Group one of these with object to be flipped. Keep only one colour of these 4, but you can duplicate that colour (no need to duplicate "fonction")

to create a code in one slide on Genial.ly

Instructions

Template

Tutorial

Examples

French numbers - Open locks

can be hidden

you can choose different fonts

12345

1234

ERROR

OPEN

1234

SELECT (double-clicK) and change the design

SELECT (double-clicK) and change the code

You can change the messages

To have little stars as you type yhe code

Optional eements- delete if not needed

To copy and paste and group with objects

the buttons can be resized, grouped and be transparent

12345

1234

OUVERT

ERREUR

Add drop-down options to a Genail.ly presentation.

Examples

Templates

Tutorial

Finish the Lyrics

Bravo !

Bohemian Rhapsody

Oups

Queen

man
fish
horse
whale
ram

Mama, just killed a Put a gun against his Pulled my trigger, now he's Mama, life had just But now I've gone and thrown it all

head
chest
leg
arm
back

dead
well
bleeding
in bed
red

begun
began
begin
started
ended

away
ah ouais
tramway
afar
hallway

Check

Correct words

Errors

Source : LyricFind Paroliers : Freddie Mercury Paroles de Bohemian Rhapsody © Sony/ATV Music Publishing LLC

The box is to be grouped with a bullet point list containing the options. The 1st option on the list must be your correct one, the options will be displayed in random order. You can change the appearance and font by using the yellow slide.

option 1 (correct)
option 2
option 3
etc....

Group an image with this box, it will appear when the player wins.

Group this element with the "check" button or text.

Group an image with this box, it will appear when the player loses. It only appear after all boxes have been filled in.

This optional item should be grouped with a BOLD Genially text (which you can change the appearance of) in which the number of correct answers will be displayed.

This optional item is to be grouped with a BOLD Genially text (which you can change the appearance) in which the number of wrong answers will be displayed.

Optional: If you add this invisible element to your page, the number of correct/incorrect answers will only be displayed when the check button is pressed.

This elements needs to be on your page to work. It will be invisible

Hight

Hauteur

Length

Largeur

Border size

Taille bordure

Preview of your modified box

Transparency

Opacité fond

Go into preview mode to change the settings - you can delete the slide after you inserted the drop-down box

Border style

Style bordure

Border colour

Couleur bordure

Background colour

Couleur fond

Font colour

Couleur police

Font size

Taille police

The font for the list needs to be present on the question page (e.g. in the text with the questions or the title) to work.

Font name

Nom police

Copy the text from this box. Then go to the slide with the questions, go to "insert" , "</> Others" and paste the text. When you click insert, a drop-down box with your design will be entered in the page. You can now copy and paste it and group it with the different lists of options.

To add a timer to a slide that automatically moves to the next or last slide when the time is up

Instructions

Template

Tutorial

Examples

Memory Game (opens new presentation)

How to use automatic slide Change

Use standard navigation mode - clickthen choose Navigation - Standard

Place the function outside the slide - it hides the navigation arrows and triggers scrolling

Change the X for the number of seconds until slide change. Copy and paste this into Insert </>Others then click insert - it will add a small countdown to your page (it can be hidden outside the slide)

Any following pages will not have navigation arrows, you will need to add your own link buttons. You can add this to go one slide backwards instead of forward

Add this to the first slide of your presentation. It hides the 3 dots at the bottom that allow slide navigation. Needs to be inside the slide but can be transparent.

These are pictures only, the real formulars are on the template

objects stay in the position they are moved to, even if the presentation is restarted

Examples

Templates

Tutorial

Example

Reset

Maintaining the position of objects on a page from one session to another

The function is mandatory IN every page that requires the positions to be saved.

The elements can be duplicated. Each of them must be grouped to a Genially object. Two available shapes

Reset button: A click resets the start positions in the pages.

Reset function automatically resets the positions when the page is opened. It cancels the PERMANENT FUNCTION. It can be used at the end of a game for example.

All elements are AUTOMATICALLY hidden in preview and view modes: there is no need to make them transparent.

Preserving the position of objects on a page during a session only

The function is mandatory IN every page that requires the positions to be saved.

The elements can be duplicated. Each of them must be grouped to a Genially object. Two available shapes

Reset button: A click resets the start positions in the pages.

Reset function automatically resets the positions when the page is opened. It cancels the SESSION FUNCTION. It can be used in a game in case of an error.

All elements are AUTOMATICALLY hidden in preview and view modes: there is no need to make them transparent.

Maintaining the position of objects on all pages during a session

The function is mandatory IN every page that requires the positions to be saved.

The elements can be duplicated. Each of them must be grouped to a Genially object. Two available shapes

Reset button: A click resets the start positions in the pages.

Reset function automatically resets the positions when the page is opened. It cancels the SESSION FUNCTION. It can be used in a game in case of an error.

All elements are AUTOMATICALLY hidden in preview and view modes: there is no need to make them transparent.

Maintaining the position of objects on all pages during all sessions

The function is mandatory IN every page that requires the positions to be saved.

The elements can be duplicated. Each of them must be grouped to a Genially object. Two available shapes

Reset button: A click resets the start positions in the pages.

Reset function automatically resets the positions when the page is opened. It cancels the SESSION FUNCTION. It can be used in a game in case of an error.

All elements are AUTOMATICALLY hidden in preview and view modes: there is no need to make them transparent.

timer to include in your Genial.ly

Instructions

Access to Timer

Translation in English

Examples

Tutorial

Escape game French - Facebook, Studio 3

How to get a link to a page

Instructions

Template

Tutorial

Examples

Google form

How to get a link to a page

Copy one of the boxes below onto the slide you want to link to. In preview mode, you can then see the link/embed code and copy it. You can then delete the box again. Use the copied address to link to that slide from another slide or from another place. The Genially must be public to be able to embed a page in another page. To embed a slide, use the green box to get the code. Then use "Insert" "Others" and paste it in the text box.

Copy and paste the blue frame in a page to get its reference number.

Copy and paste the red frame in a page to get its url

Copy and paste the green frame into a page to get its iframe for embedding.

Example: Using a Google form as a lock.

1. Create a google form with your questions. 2. Turn on "required" and "response validation" (in the 3 dots) 3. Add the answer with "regular expression" "matches" 4. Add a new section with the link to the page you got from the Reference page tool. 5. Get the embed code in "Send" 5. Embed the form in Genially by clicking "Insert" "other"

Page links

reference number.

slide url

slide embed code

to have a post-it note / piece of paper to take notes while you are completing your escape room.

Instructions

Access to Post-Eat

Translation in English

Examples

Tutorial

Escape game French school subjects (Post-eat on one slide)

Escape game French animals (Post-eat on more than one slide)

to pick an element at random (for example a card in a pack of cards or dice)

Instructions

Template

Tutorial

Examples

Pronunciation

Petit bac

Dobble

What time is it?

Where is Brian?

38+7

RND

7-3

version 1.2

18-9

20/07/2020

3+7

from

3:7

356x11

178415+1

9x56

NEW VERSION with automatic start !

132+56

33+77

35+79

Press this button if you want all the options to flash up before stopping on one.

SUSPENSe

1/3+1/7

336-87

Try it

draw

Press this button if you want one option to pop up without flashing the others. Tirage is "draw"

38+7

RND

7-3

version 1.2

18-9

20/07/2020

3+7

from

3:7

356x11

178415+1

9x56

NEW VERSION with automatic start !

132+56

33+77

35+79

Press this button if you want all the options to flash up before stopping on one.

SUSPENSe

1/3+1/7

336-87

Try it

draw

Press this button if you want one option to pop up without flashing the others. Tirage is "draw"

tutorial

optional option hiding the objects when you open the page

launch

without launching

Group "hasard" with your object (Picture / words, etc...)

Duplicate. You can have as many as you want.

SUSPENSe

choose button

draw

Page for your creation

SUSPENSe

draw

Version with 10 different RND on the same page

SUSPENS1

SUSPENS2

SUSPENS3

SUSPENS4

SUSPENS

draw

draw1

draw2

draw3

draw4

SUSPENS5

SUSPENS6

SUSPENS7

SUSPENS8

SUSPENS9

draw5

draw6

draw7

draw8

draw9

players can choose an avatar to add to the activity

Examples

Template

Tutorial

Chose your avatar

Where is the mysterious book?

S'kins Template

On the pages where you want the avatar to appear, group the green box with a random picture. That picture will be replaced by the chosen avatar. The size and position of the picture will determine the size and position of the avatar.

On the choice page, duplicate the red box as many times as needed, then group each one with one picture of an avatar.

Objects are rotated or enlarged on click or hover

Instructions

Template

Tutorial

Examples

Simple example

Rotation and Zoom (Couteau suisse)

This tool rotates objects on click/hover or zooms in.Try it out below.

Left-click to zoom in, Right-click to zoom out

Hover over to rotate

Left-Click to rotate!

Hover over to zoom in

Right-Click to rotate!

Don't delete and keep outside slide

Rotation and Zoom

Group one of these with the object to be turned/zoomed in on. Size of the square=clickable area

Rotate 15 degrees with every left click/ right click/ hover

Rotate 90 degrees with every left click/ right click

Zoom in x2 with every left click/ right click/ hover

Zoom out x2 with every left click/ right click/ hover

Zoom in with left click +zoom out with right click /Zoom in with hover

Can be duplicated

to include a text appearing as being typed on typewriter

Template

Instructions

Examples

Tutorial

Escape game French - the suspects

Escape game French school subjects

Escape game French animals

Version 2.2- 27/06/20

TAPUSCRIT

speed

200

delay

type writer effect

speed of typing text

120

Tapuscrit is an extension that gives a typewriter effect to a paragraph which style you can easily modify.

10000

the text appears 5 seconds after the page is on

delay to appear

select (double-click) and amend

modify font as you wish

Speed - select (double-click) and amend

Delay - select (double-click) and amend

only one paragraph

200

5000

Dijital Oyun Tasarımı

Add a button to turn objects on and off

Instructions

Template

Tutorial

Examples

Simple example

Lightswitch

Hidden object

Don't delete this and keep out of slide

On/Off button

=will switch object grouped with red code off for good=will switch on object for good =will swtich object off, then on again. =will swtich object off, then on again =works will all objects

On/Off Buttons (telatepala)

Well done next task

Don't delete this and keep out of slide

How it works

Buttons: Each control the object grouped with the code in the same colour (except MULTI) Buttons of the same colour can be duplicated, but any blue button will control all blue

Codes: Group these with the items you want to appear/disappear

=will switch object grouped with red code off for good=will switch on object for good =will switch object off, then on again. =will switch object off, then on again.

The MULTI object will react to all buttons

Buttons can be group with an object (and hidden behind it)Size of the button defines the clickable area, even when grouped

This button will react with all these objects

Don't delete this and keep out of slide

On/Off button

=will switch object grouped with red code off for good=will switch on object for good =will swtich object off, then on again. =will swtich object off, then on again =works will all objects

Don't delete this and keep out of slide

On/Off button

=will switch object grouped with red code off for good=will switch on object for good =will swtich object off, then on again. =will swtich object off, then on again =works will all objects

Hiden objects appear on mouse hover

Instructions

Template

Tutorial

Examples

Hidden Pigs

Hidden Objects

The objects are invisible until you scroll over them. Example: can you find the 6 pigs?

Hidden Objects

Don't delete - this makes the items invisible

Group this element with the hidden objectwith objects Can be duplicated and can be resized = The size of the element corresponds to the area detecting mouse-over

force items to move only horizontally or vertically

Instructions

Template

Tutorial

Examples

Walking down the street

Le voilà...Montrons-nous !

C'est lui...

Là, il y a un DND pour déclencher la réaction

D'après une idée de David Billon

Movement restrictions

Use this template to force items to move horizontally only by grouping with x or vertically only by grouping with y

Movement Restrictions (YouX)

Try it!

Thank you to the following people for letting us share their Genially creations: Marie Darif Char Lie Caroline Latière Heaney Sébastien Nouailler Céline El Ouartassi Thank you to Esmeralda Delgado for letting us share the MFL Twitterati Padlet. Thank you to Joe Dale and Helen Myers for organising the TILT webinars and initiating all these connections. Thank you to Patrice Nadam from S'cape for letting us use the S'cape pictures.

Genially Hints !

Start designing with a free template

Transcript