S'cape tools for Genially

Menu

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

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

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.

Menu

Menu

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.

Menu

Menu

Drag & Drop

Post -eat

Accordeon

Bloc note

Flip Flip

under construction

RND

CAC

Gicode

Swiss knife

Chronos

Meli-Melo

under construction

Tapuscript

Couise

Minuteur

Télatépala

Cruz

Page reference

Youx

Integrate a tiered hint system

Instructions

Template

Tutorial

Examples

Simple example

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?

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>

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

Correct answer

Correct answer

by

Wrong 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

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

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

OK

Code looks like this:

<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

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:

<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)

Example 3

On the picture are a and a

Code looks like this:

Check

<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)

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

Le Couise (Quiz)

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

Check

Template

Instructions

Examples

Tutorial

Maze - Description French

Flowers - word / definition (reusable)

Dress up your teacher (reusable)

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

VALIDER

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

Les chèques (French numbers spelling)

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

How to use the template:

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

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

The message "Error loading enriched content" is normal!

Drag and Drop 10++

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

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

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

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

Julia to add

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"

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

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 10 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

page for your creation

120

3000

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

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

Hiden objects appear on mouse hover

Instructions

Template

Tutorial

Examples

Hidden Pigs

Mystery Jigsaw

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

Movement Restrictions (YouX)

Try it!

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

Menu

Thank you to the following people for letting us share their Genially creations: Marie Darif Char Lie Caroline Latière Heyney Sébastien Nouailler 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.