D-fil COULEURS Engl

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

Undo last line

Restart

Bravo

99

Bravo

Error

Check

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

2

Error

Check

Asia

Europe

Africa

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

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)

Error

Check

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

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