Want to make creations as awesome as this one?

## Transcript

Instructions

Template

Tutorial

Examples

extension to make pairings by drawing lines + chosing categories with colours

Reuse

This is the tutorial for D-Fil, which work on the same principle

Easy example

1

1

1

3

3

2

2

Error

4

4

uneven numbers

even numbers

Choose a colour, then click the two dots that match

Check

Undolast line

Restart

Bravo

var couleur= "#FF0000" //

/* You must enter the instructions separated by commas in the variable solution. For example, if point 0 is to be connected to point 2, write "P0P2". the inverted commas are essential, then separate the answers by commas */ var solution = [ "P0P1*#30A5E8","P2P3*#30A5E8","P4P5*#FF0000","P6P7*#FF0000"]; // actions adéquate sur les boutons //comportement différent selon que les lignes excedentaires soient problématiques var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; if (!empecherLesLignesEnTrop) { if (score==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { erreur.style.display="block"; gagne.style.display="none"; } } else //partie avec les lignes en trop considérées comme erreur { if (tableauReponse.length > solution.length) { if (compteur) { let qte=tableauReponse.length-solution.length ; affichage.innerHTML = qte + textePourEnTrop; affichage.style.display = "block"; } erreur.style.display="block"; gagne.style.display="none"; } else if (score==solution.length && bonnesCouleurs==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { gagne.style.display="none"; erreur.style.display="block"; } } }

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; //declaration des variables nécessaires var leCompteur = document.getElementById("compteur"); var affichageCouleursJustes = document.getElementById("compteurCouleurs"); var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); //reinitialisatation des variables de départ sessionStorage.setItem("caller","nobody"); sessionStorage.setItem("reponse",""); sessionStorage.setItem("couleurChoisie",""); var mine = document.getElementById('pinceau'); mine.style.backgroundColor="rgba(0,0,0,0)"; //changement du contenu des boutons gauche par n'importe quoi sauf un "x" pour les reutiliser var pointU = document.querySelectorAll(".universalPoint"); for (var i=0;i

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); sessionStorage.setItem("caller","nobody"); var reponseLettree = sessionStorage.getItem("reponse"); if (reponseLettree!="") { var tableauReponse = reponseLettree.split("|"); ctx.clearRect(0,0, 1200,675); var derniereEntreeAvecCouleur=tableauReponse[tableauReponse.length-1].split("*"); var derniereEntree=derniereEntreeAvecCouleur[0].split("P"); var point1=document.getElementById("P"+derniereEntree[1]); point1.value--; var point2=document.getElementById("P"+derniereEntree[2]); point2.value--; var taille = point1.width; taille = taille/2; reponseLettree=""; tableauReponse = tableauReponse.slice(0,-1); if (tableauReponse.length>0) { for (var i=0;i

var couleur= "#30A5E8" //

99

Bravo

Error

Check

Undolast line

Restart

S

Connect A-B-C

Connect D-E-F-G-H-I

Connect J-K-L-M-N-O

Connect P-Q-R-S-P

Rules

Pour tracer ,il faut:- d'abord sélectionner une couleur (carrés en haut à gauche)- puis cliquer sur deux points

G

F

E

D

C

B

A

M

L

K

J

I

H

R

P

Q

O

N

var couleur= "#FF0000" //

var couleur= "#318CE7" //

var couleur= "#008000" //

var couleur= "#000000" //

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; //declaration des variables nécessaires var leCompteur = document.getElementById("compteur"); var affichageCouleursJustes = document.getElementById("compteurCouleurs"); var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); //reinitialisatation des variables de départ sessionStorage.setItem("caller","nobody"); sessionStorage.setItem("reponse",""); sessionStorage.setItem("couleurChoisie",""); var mine = document.getElementById('pinceau'); mine.style.backgroundColor="rgba(0,0,0,0)"; //changement du contenu des boutons gauche par n'importe quoi sauf un "x" pour les reutiliser var pointU = document.querySelectorAll(".universalPoint"); for (var i=0;i

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); sessionStorage.setItem("caller","nobody"); var reponseLettree = sessionStorage.getItem("reponse"); if (reponseLettree!="") { var tableauReponse = reponseLettree.split("|"); ctx.clearRect(0,0, 1200,675); var derniereEntreeAvecCouleur=tableauReponse[tableauReponse.length-1].split("*"); var derniereEntree=derniereEntreeAvecCouleur[0].split("P"); var point1=document.getElementById("P"+derniereEntree[1]); point1.value--; var point2=document.getElementById("P"+derniereEntree[2]); point2.value--; var taille = point1.width; taille = taille/2; reponseLettree=""; tableauReponse = tableauReponse.slice(0,-1); if (tableauReponse.length>0) { for (var i=0;i

/* You must enter the instructions separated by commas in the variable solution. For example, if point 0 is to be connected to point 2, write "P0P2". the inverted commas are essential, then separate the answers by commas */ var solution = ["P0P1*#FF0000","P1P2*#FF0000","P3P4*#318CE7","P4P5*#318CE7","P5P6*#318CE7","P6P7*#318CE7","P7P8*#318CE7","P9P10*#008000","P10P11*#008000","P11P12*#008000","P12P13*#008000","P13P14*#008000","P15P16*#000000","P16P17*#000000","P17P18*#000000","P18P15*#000000" ]; // actions adéquate sur les boutons //comportement différent selon que les lignes excedentaires soient problématiques var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; if (!empecherLesLignesEnTrop) { if (score==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { erreur.style.display="block"; gagne.style.display="none"; } } else //partie avec les lignes en trop considérées comme erreur { if (tableauReponse.length > solution.length) { if (compteur) { let qte=tableauReponse.length-solution.length ; affichage.innerHTML = qte + textePourEnTrop; affichage.style.display = "block"; } erreur.style.display="block"; gagne.style.display="none"; } else if (score==solution.length && bonnesCouleurs==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { gagne.style.display="none"; erreur.style.display="block"; } } }

2

Error

Check

Asia

Europe

Africa

Undolast line

Restart

France

Italy

Iran

Pakistan

Tanzania

Democratic Republic of Congo

Germany

Austria

Turkmenistan

Bravo

Tajikistan

Kenya

South Sudan

Click first the continent, then connect the countries with every other country that they share a border with

/* You must enter the instructions separated by commas in the variable solution. For example, if point 0 is to be connected to point 2, write "P0P2". the inverted commas are essential, then separate the answers by commas */ var solution = [ "P0P1*#FF0000","P1P3*#FF0000","P3P2*#FF0000","P2P0*#FF0000", "P4P5*#FFFFFF","P5P7*#FFFFFF","P7P6*#FFFFFF","P6P4*#FFFFFF", "P8P9*#0000FF","P9P11*#0000FF","P11P10*#0000FF","P10P8*#0000FF"]; // actions adéquate sur les boutons //comportement différent selon que les lignes excedentaires soient problématiques var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; if (!empecherLesLignesEnTrop) { if (score==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { erreur.style.display="block"; gagne.style.display="none"; } } else //partie avec les lignes en trop considérées comme erreur { if (tableauReponse.length > solution.length) { if (compteur) { let qte=tableauReponse.length-solution.length ; affichage.innerHTML = qte + textePourEnTrop; affichage.style.display = "block"; } erreur.style.display="block"; gagne.style.display="none"; } else if (score==solution.length && bonnesCouleurs==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { gagne.style.display="none"; erreur.style.display="block"; } } }

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; //declaration des variables nécessaires var leCompteur = document.getElementById("compteur"); var affichageCouleursJustes = document.getElementById("compteurCouleurs"); var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); //reinitialisatation des variables de départ sessionStorage.setItem("caller","nobody"); sessionStorage.setItem("reponse",""); sessionStorage.setItem("couleurChoisie",""); var mine = document.getElementById('pinceau'); mine.style.backgroundColor="rgba(0,0,0,0)"; //changement du contenu des boutons gauche par n'importe quoi sauf un "x" pour les reutiliser var pointU = document.querySelectorAll(".universalPoint"); for (var i=0;i

var couleur= "#FF0000" //

var couleur= "#FFFFFF" //

var couleur= "#0000FF" //

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); sessionStorage.setItem("caller","nobody"); var reponseLettree = sessionStorage.getItem("reponse"); if (reponseLettree!="") { var tableauReponse = reponseLettree.split("|"); ctx.clearRect(0,0, 1200,675); var derniereEntreeAvecCouleur=tableauReponse[tableauReponse.length-1].split("*"); var derniereEntree=derniereEntreeAvecCouleur[0].split("P"); var point1=document.getElementById("P"+derniereEntree[1]); point1.value--; var point2=document.getElementById("P"+derniereEntree[2]); point2.value--; var taille = point1.width; taille = taille/2; reponseLettree=""; tableauReponse = tableauReponse.slice(0,-1); if (tableauReponse.length>0) { for (var i=0;i

I am blue

Template 1/4

Copy and paste as many "P" items as needed. There are 3 different sizes to choose from. To see the numbering, go to a different slide and come back, the numbering updates automatically.

Area to be placed in the background on the entire page. Needs to be lined up with top left corner.

Elements displaying the number of correct answers and coloursafter clicking "check". The text can be changed in the code of the "check button" (see templage 4/4)

Shows the selected colour. It can be put behind the tip of the pencil to make it look better.

Choose 1 of the 3 for each colour.Coloured box, invisible area or text box can be used to select the colour. The code needs to be changed (see template 3/4)

var couleur= "#FF0000" //

var couleur= "#00FF00" //

var couleur= "#0000FF" //

Error

Check

Undolast line

Restart

Bravo

Template 2/4

Don't ungroup these 3 buttons. Colour and text can be changed while grouped.

Group this with the element that shows when the game is won

Group this with the element that shows when the game is lost

keep this image of the dot in the page (will be invisible)

Keep this function in the page

Write here how many lines per dot are allowed

Check button with hidden code for the answers (see template 3/3)

2

/* You must enter the instructions separated by commas in the variable solution. For example, if point 0 is to be connected to point 2, write "P0P2". the inverted commas are essential, then separate the answers by commas */ var solution = [ "P0P1*#FF0000","P1P3*#FF0000","P3P2*#FF0000","P2P0*#FF0000", "P4P5*#FFFFFF","P5P7*#FFFFFF","P7P6*#FFFFFF","P6P4*#FFFFFF", "P8P9*#0000FF","P9P11*#0000FF","P11P10*#0000FF","P10P8*#0000FF"]; // actions adéquate sur les boutons //comportement différent selon que les lignes excedentaires soient problématiques var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; if (!empecherLesLignesEnTrop) { if (score==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { erreur.style.display="block"; gagne.style.display="none"; } } else //partie avec les lignes en trop considérées comme erreur { if (tableauReponse.length > solution.length) { if (compteur) { let qte=tableauReponse.length-solution.length ; affichage.innerHTML = qte + textePourEnTrop; affichage.style.display = "block"; } erreur.style.display="block"; gagne.style.display="none"; } else if (score==solution.length && bonnesCouleurs==solution.length) { erreur.style.display="none"; gagne.style.display="block"; } else { gagne.style.display="none"; erreur.style.display="block"; } } }

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; //declaration des variables nécessaires var leCompteur = document.getElementById("compteur"); var affichageCouleursJustes = document.getElementById("compteurCouleurs"); var gagne = document.getElementById("gagne").parentNode.parentNode.parentNode.parentNode.parentNode; var erreur = document.getElementById("erreur").parentNode.parentNode.parentNode.parentNode.parentNode; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); //reinitialisatation des variables de départ sessionStorage.setItem("caller","nobody"); sessionStorage.setItem("reponse",""); sessionStorage.setItem("couleurChoisie",""); var mine = document.getElementById('pinceau'); mine.style.backgroundColor="rgba(0,0,0,0)"; //changement du contenu des boutons gauche par n'importe quoi sauf un "x" pour les reutiliser var pointU = document.querySelectorAll(".universalPoint"); for (var i=0;i

//--- DISPARITION FENETRE ---- honteusement piqué sur S'Cape setTimeout(function() { document.getElementsByClassName('icon-close')[0].click() }, 10); document.getElementById('genially-view-modal').style.visibility = "hidden"; var monCanevas = document.getElementById("leCanvas"); var ctx = monCanevas.getContext("2d"); sessionStorage.setItem("caller","nobody"); var reponseLettree = sessionStorage.getItem("reponse"); if (reponseLettree!="") { var tableauReponse = reponseLettree.split("|"); ctx.clearRect(0,0, 1200,675); var derniereEntreeAvecCouleur=tableauReponse[tableauReponse.length-1].split("*"); var derniereEntree=derniereEntreeAvecCouleur[0].split("P"); var point1=document.getElementById("P"+derniereEntree[1]); point1.value--; var point2=document.getElementById("P"+derniereEntree[2]); point2.value--; var taille = point1.width; taille = taille/2; reponseLettree=""; tableauReponse = tableauReponse.slice(0,-1); if (tableauReponse.length>0) { for (var i=0;i

Code for colour selctor

Choose your colour with the colour selector and copy the Hex Code underneath

Then click on either coloured box, invisible area or text box on template1/4.Click the interactivity indicator (pointing finger). In the window. click the code icon.Then paste in the Hex code of your colour here.

Template 3/4

Go into the code view of the "check" button (see previous slide to see how).You will find this code:var solution = [ "P0P1*#FF0000","P1P3*#FF0000"]; // <== Modify here Check on your slide which dots you want to be linked and copy the hex code of the colour you want to use for the connection (needs to be exacly the same colour that is available in the colour selector).Then change the text in the square brackets : write which dots need to be joined up, e.g. if P0 needs to join to P1, write P0P1. It needs to be followed by *# and the hex code of the colour that needs to be used to match the two dots. Each combination needs to be in quotation marks and separated with a comma from next combination. If the same dot is linked to two dots, then each needs to be written as a separate combination, e.g. P0P1 and then P1P2.You can also change the other part of the code according to the description next to it to change the feedback.

Template 4/4