9 octobre 2018 |  Rudy GUILLONNEAU

Superposer des zones cliquables pour créer des mécaniques de Gamification

Comment ça marche ?

Nous avons vu dans une astuce précédente comment rendre interactif un élément du décor avec le bloc zone cliquable. Une des particularités des zones cliquables est leur superposition. Similaires à des calques dans des applications de design, l’ordre d’agencement des zones cliquables est pris en compte dans VTS Editor.
Voici dans un premier temps l’effet que nous souhaitons réaliser :

points-chaudsv4

Comme vous le constatez, la consigne est de trouver les zones à risque ou « points chauds » présents dans la scène afin de les désamorcer. En cas de clics sur une zone « froide », l’apprenant perd des points. Enfin, une fois la zone trouvée, plusieurs solutions s’offrent à l’apprenant, et la bonne réponse est alors illustrée.

Et voici le graphe qui lui correspond :

graphe-points-chauds

 

Nous allons dans un premier temps configurer le décor. Pour cela, nous allons utiliser le « Média personnalisé » qui permet d’incruster une image comme décor. Sélectionnez la zone « M1 », et importez votre image. Dans notre exemple, cela correspond au décor de chantier avec un trou.

Configuration-decors
Maintenant, passons aux zones cliquables juxtaposées qui définissent les zones chaudes et froides.

  • La première à créer est celle qui définit toute la zone froide. Appelée « Faux » dans notre exemple, elle s’étend sur la totalité du décor, du coin supérieur gauche au coin inférieur droit.
  • La deuxième, appelée « Accident 1 » dans notre exemple, se place sur le point chaud au niveau de l’accident (le trou). Attention à bien respecter l’ordre de juxtaposition des zones, « Faux » se place en dessous de « Accident 1 », sinon le point chaud ne sera pas cliquable !

Le type de sortie utilisé est le premier, car il permet de ne pas avancer dans le scénario tant que l’apprenant n’a pas cliqué sur une zone interactive. Enfin, les zones sont visibles et cliquables.

zone-cliquable-ouverte

A ce stade, vous avez donc un décor interactif avec un point chaud sur la zone accidentée. Nous allons donc maintenant définir les actions associées à chaque clic de l’apprenant.

Graphe-bon-mauvais
En cas de clic sur la zone « Faux », nous attribuons un score négatif de -5 avec un bloc Score que nous rebouclons vers la zone cliquable. De ce fait, chaque clic attribue -5 points à l’apprenant et lui permet de retenter sa chance, jusqu’à ce qu’il trouve la bonne zone. Nous verrons dans une autre astuce une façon de laisser une porte de sortie à l’apprenant dans ce cas.

En cas de clic sur le point chaud « Accident 1 », nous proposons un quiz imagé grâce au bloc Quiz configuré comme suivant :

Quizz-ouvert
Un choix unique, 3 images proposées et une sortie multiple pour pouvoir différencier les différentes réponses.
SI la bonne réponse est sélectionnée, il est intéressant de la matérialiser pour augmenter l’immersion de l’apprenant. Pour donner l’impression de mouvement, il existe une astuce liée au décor que nous avons initialement sélectionné.

Grace au bloc Choix des médias, vous avez la possibilité de modifier en cours de scénario l’image qui vous sert de décor. Vous pouvez alors créer deux versions du décor, une avec le trou, l’autre quand il est réparé comme suivant :

decors-deux-versions

Après avoir choisi la bonne réponse, le décor change en arrière plan et simule alors la pose de la planche. Dans le cas contraire, un bloc Parler indiquant que ce n’était pas la bonne réponse est joué.

De nombreuses techniques de gamification au service de l’engagement des apprenants

Nous avons vu comment créer rapidement et simplement un jeu des 7 erreurs sur une thématique pourtant sérieuse. Mais ce n’est pas la seule technique de gamification disponible. Faire un on-boarding programme sous forme d’enquête policière, un tutoriel logiciel sous forme de jeu télévisé… Les possibilités sont infinies !