S'cape tools for Genially

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

Menu

Introduction

How do the S'cape tools work?

S'cape tools

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

Webinars and MFL Twitterati padlet

Menu

Menu

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 javascript that give Genial.ly more functionality and add options for educational activities and escape games.

All copyright by S'cape, no commercial use

S'CAPE

Menu

What does it look like?S'cape tools 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

Menu

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.

2/4

Menu

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 zeroYou 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.

3/4

Menu

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.

4/4

Menu

RND

Pick a random object

Télatépala

Add a button to turn objects on and off

Flip Flip

Mirrored objects

Drag & Drop

Combine objects

Couise

To create a quiz

Chronos

Post -eat

Make notes in your Genially

Minuteur

Insert a timer in your Genially

Meli-Melo

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

Gicode

Create a code on one page on Genially

Youx

force items to move only horizontally or vertically

Tapuscript

Typewriter effect in your Genially

Swiss knife

Objects are rotated or enlarged on click or hover

under construction

Menu

Cruz

Ticking boxes - an extension of CAC

Accordeon

tiered hint system

CAC

Ticking boxes

Bloc note

Note pad

Page reference

How to find a link to a specific page in a Genially

under construction

Instructions

Template

Tutorial

Examples

Integrate a tiered hint system

Simple example

Stuck?

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

Example for tiered hints

Puzzle 1Hint 1 You need to find the sequenceHint 2 How much do you need to go up between each number?Solution The answer is 16Puzzle 2Hint 1 Numbers are lettersHint 2 1 is A, 2 is B ...Solution The answer is Bear

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>

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>

Click here for example

Puzzle Name 1 Hint 1 explanation 1 Hint 2 explication 2 Hint 3 explanation 3

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>

Hint System

Instructions

Template

Tutorial

Examples

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

To have a notepad on Genially

Instructions

Template

Tutorial

Examples

Tick the boxes - Description suspects

By Marie Allirot

to create on activity ticking boxes

valider

Correct answer

Try it out!

Correct answer

Correct answer

Correct answer

Wrong answer

Wrong answer

Number of correct answers ticked

Number of wrong answers not ticked

Score

CAC

by

version 1.1

Functions to keep grouped together

to group with object for feedback

You can copy and paste as many as you need

optional: Number of green boxes tickednumber of red boxes not tickedScore (Sum of 2 values above)

boxes t0 tick (correct and wrong answers

button to validate your answers

Do not delate, hide if you are not using

3 different sizes

VALIDER

Instructions

Template

Tutorial

Examples

Instructions

Template

Tutorial

Examples

French activities and weather

By Caroline Latière Heyney

Cross the valley challenge

By Sébastien Nouailler

to create a quiz with words / numbers as answers

password check

OK

SCAPE6GTpala

Example 1

UsernamePassword

Wrong username or password

<script> //-----VARIABLES UTILISATEUR----- var solution = ['SCAPE', '6GTpala']; //enter your answers between the quotation marks, delete or add extra ones var ordre = 1; // change to 1 if order of answers is important (otherwise 0) var casse = 0; // change to 1 if capital letters are important (otherwise 0) var correct=0; // change to 1 to change box colour red/green for

Code looks like this:

Check

Example 2

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

Not all correct. Check capital letters

Correct!The passcode is 12874

Code looks like this:

<script> //-----VARIABLES UTILISATEUR----- var solution = ["London", "9", "yellow"]; //enter your answers between the quotation marks, delete or add extra ones var ordre = 1; // change to 1 if order of answers is important (otherwise 0) var casse = 1; // change to 1 if capital letters are important (otherwise 0) var correct=1; // change to 1 to change box colour red/green for correct/incorrect answer (otherwise 0)

On the picture are a and a

Check

Example 3

<script> //-----VARIABLES UTILISATEUR----- var solution = ["cat", "dog"]; //enter your answers between the quotation marks, delete or add extra ones var ordre = 0; // change to 1 if order of answers is important (otherwise 0) var casse = 0; // change to 1 if capital letters are important (otherwise 0) var correct=0; // change to 1 to change box colour red/green for correct/incorrect answer (otherwise 0)

Code looks like this:

Check

How to use the template

Don't delete these and leave outside of slide.

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

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

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.

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.

Check

Le Couise (Quiz)

Use this template to create a quiz, gap fill text or password check.

Instructions

Template

Tutorial

Examples

Maze - Description French

By Marie Allirot - Original template by Marie Darif

Flowers - word / definition (reusable)

By Marie Darif

Dress up your teacher (reusable)

By Marie Allirot using template by Marie Darif

VALIDER

Reconnaissance des instruments

Clique dans les cases des instruments que tu entends.

Exemple (d'après Caroline Pras Pesce)

solution

ring!

open!

Functions to keep grouped together

to group with object for feedback

You can copy and paste as many as you need.

optional: number of green boxes tickednumber of red boxes not tickedScore (Sum of the 2 values above))

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

Button to validate

do not delete - hide if not needed

VALIDER

VALIDER

VALIDER

DND 10++

DND X

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

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

DND

Combine 2 objects to make another object appear

Instructions

Template

Tutorial

Examples

Combine 2 objects to make another object appear

Simple instructions

Rotation and colour change

Simple example

OFF/ON 1

OFF/ON

ON/OFF 1

ON/OFF

Appears once

Disappears once.

Disappears every time

Test !

Appears every time

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

Drag and drop (DND)

Key

Target

+

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

DND Rotation or colour change on/off,

Trigger objects :

appears each time the key elements are combined

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

appears only once

disappears each time

disappear once

Use this template to create your drag and drop activity.

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

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

Simple Drag and Drop

Instructions

Template

Tutorial

Examples

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

Les chèques (French numbers spelling)

By Marie Darif

<nombre>X</nombre> <script></script>

1. Turn on "drag elements" in settings
2. Replace the X in the formula with the number of combinations you want to be made (in the example it was 3)
3. Copy and paste the forumula into "insert" "others", and click "insert. The number will appear in the middle of the page.
4. Group the number, one of these reaction and your reward object.
5. Delete the formula on the page or move it off the page.
6. 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.
7. 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->

How to use the template:

<nombre>X</nombre> <script></script>

The message "Error loading enriched content" is normal!

Drag and Drop 10++

Instructions

Template

Tutorial

Examples

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

appear once only

apear repeatedly

Making magic

Circle correct!

Square correct!

Images de brgfx

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

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 timesGroup O1 with your first key elemenGroup 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!

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

Drag and Drop X (appear once)

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

Drag and Drop X (appear repeatedly)

Instructions

Template

Tutorial

objects are mirrored, turned by 90 degrees or upside down

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 downKeep red codes to reverseKeep peach to turn 90 degree left.Keep blue to turn 90 degree right.

Flip

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

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

By Marie Allirot

12345

OPEN

1234

ERROR

can be hidden

1234

you can choose different fonts

SELECT (double-clicK) and change the design

the buttons can be resized, grouped and be transparent

SELECT (double-clicK) and change the code

To have little stars as you type yhe code

To copy and paste and group with objects

Optional eements- delete if not needed

You can change the messages

12345

OUVERT

1234

ERREUR

Instructions

Template

Tutorial

Examples

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

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

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

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.

Access to Timer

Translation in English

timer to include in your Genial.ly

Escape game French - Facebook, Studio 3

By Marie Allirot

Instructions

Examples

Tutorial

Instructions

Template

Tutorial

Examples

Julia to add

How to get a link to a page

Google form

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.

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.

How to get a link to a page

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"

Example: Using a Google form as a lock.

reference number.

slide url

slide embed code

Page links

Remerciements à : Stéphane Agniel pour l'idée d'intégration de code javascript dans une page Genially ; Mireille Philippe et à son frère pour l'astuce afin de retrouver l'URL d'une page Genially ; Alveria Val pour l'idée d'intégrer une page Genially dans une autre page Genially.

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

Access to Post-Eat

Translation in English

Instructions

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

By Marie Allirot

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

By Marie Allirot

Examples

Tutorial

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

Dobble

By Marie Allirot (original idea by Laura Mari Navarro)

Where is Brian?

By Nathalie Pledran

Petit bac

By Char Lie

What time is it?

By Nathalie Pledran

Instructions

Template

Tutorial

Examples

Pronunciation

Be Nathalie Pledran

draw

SUSPENSe

RND

from

Try it

356x11

9x56

33+77

38+7

18-9

3+7

1/3+1/7

3:7

132+56

336-87

7-3

35+79

178415+1

3

7

version 1.2

20/07/2020

NEW VERSION with automatic start !

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

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

draw

SUSPENSe

optional option hiding the objects when you open the page

Duplicate. You can have as many as you want.

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

choose button

tutorial

launch

without launching

draw

SUSPENSe

Page for your creation

draw1

draw9

draw

draw7

draw3

draw8

draw5

draw2

draw6

draw4

SUSPENS4

SUSPENS

SUSPENS8

SUSPENS9

SUSPENS5

SUSPENS2

SUSPENS7

SUSPENS3

SUSPENS6

SUSPENS1

Version with 10 different RND on the same page

Instructions

Template

Tutorial

Examples

Simple example

Objects are rotated or enlarged on click or hover

Hover over to zoom in

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

Rotation and Zoom (Couteau suisse)

Left-Click to rotate!

Right-Click to rotate!

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

Hover over to rotate

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

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

Don't delete and keep outside slide

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

Can be duplicated

Rotate 90 degrees with every left click/ right click

Rotation and Zoom

to include a text appearing as being typed on typewriter

Escape game French - the suspects

By Marie Allirot

Escape game French school subjects

By Marie Allirot

Escape game French animals

By Marie Allirot

Instructions

Template

Tutorial

Examples

0

200

type writer effect

Version 2.2- 27/06/20

TAPUSCRIT

delay

speed

10000

120

speed of typing text

delay to appear

the text appears 10 seconds after the page is on

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

Speed - select (double-click) and amend

Delay - select (double-click) and amend

only one paragraph

select (double-click) and amend

modify font as you wish

3000

120

page for your creation

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

Instructions

Template

Tutorial

Examples

Add a button to turn objects on and off

Simple example

Lightswitch

Hidden object

=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

On/Off Buttons (telatepala)

Well donenext task

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

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

The MULTI object will react to all buttons

=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.

Don't delete this and keep out of slide

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

How it works

=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

Instructions

Template

Tutorial

Examples

2

Hiden objects appear on mouse hover

Hidden Pigs

Mystery Jigsaw

By Marie Darif

Hidden Objects

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

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

Don't delete - this makes the items invisible

Hidden Objects

Instructions

Template

Tutorial

Examples

force items to move only horizontally or vertically

Walking down the street

Try it!

Movement Restrictions (YouX)

Le voilà...Montrons-nous !

C'est lui...

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

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

Déplacez le personnage jusqu'au milieu de la rue

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

Movement restrictions

Menu

Thank you to the following people for letting us share their Genially creations:Marie DarifChar LieCaroline Latière HeyneySébastien NouaillerThank 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.