{"id":922,"date":"2020-02-27T13:46:38","date_gmt":"2020-02-27T12:46:38","guid":{"rendered":"https:\/\/seriousfactory.com\/blog\/?p=922"},"modified":"2025-08-22T15:23:17","modified_gmt":"2025-08-22T13:23:17","slug":"epreuve-mais-ou-est-calendrier-avent","status":"publish","type":"post","link":"https:\/\/seriousfactory.com\/blog\/fr\/epreuve-mais-ou-est-calendrier-avent\/","title":{"rendered":"Comment cr\u00e9er rapidement une \u00e9preuve gamifi\u00e9e \u00ab mais o\u00f9 est [\u2026] \u00bb dans VTS Editor gr\u00e2ce \u00e0 son bloc Zones cliquables !"},"content":{"rendered":"

Rappel des instructions \u00e0 suivre pour jouer le Calendrier de l’Avent des jours ouvr\u00e9s<\/h3>\n

Suivez les instructions suivantes :<\/p>\n

\"\" \"\" \"\"<\/p>\n

Et son fichier source :<\/p>\n

\"\"<\/a><\/p>\n

La superposition de zones cliquables, comment \u00e7a marche ?<\/h3>\n

Ce type d\u2019\u00e9preuve gamifi\u00e9e peut refl\u00e9ter plusieurs comp\u00e9tences \u00e0 observer :
\n– R\u00e9flexion
\n– Attention aux d\u00e9tails
\n– D\u00e9tection d\u2019anomalies
\n– [\u2026]
\nElle peut \u00eatre cr\u00e9\u00e9e \u00e0 partir du \u00ab Pack Silver \u00bb<\/a> car elle n\u00e9cessite principalement l\u2019utilisation des blocs \u00ab Zones cliquables \u00bb. Si vous disposez des variables, nous verrons en fin d\u2019article l\u2019utilisation qu\u2019elles peuvent avoir pour encore am\u00e9liorer le rendu de l\u2019\u00e9preuve.
\nVoici le graphe de l\u2019\u00e9preuve d\u00e9conditionn\u00e9e :<\/p>\n

\"gaphe\"<\/p>\n

 <\/p>\n

Pour cr\u00e9er une \u00e9preuve du type \u00ab mais o\u00f9 sont \u00bb, il faut que seules les zones \u00e0 cliquer rapportent des points, et que chaque autre clic enregistre une perte de point. Cela permet d\u2019ajouter un facteur stress \u00e0 l\u2019apprenant et \u00e9vite toute tentative de tricherie !<\/p>\n

Pour comprendre comment faire, il faut bien assimiler comment fonctionnent les zones cliquables :
\nLes zones cliquables disposent d\u2019un syst\u00e8me de superposition similaire \u00e0 des calques pour les initi\u00e9s du graphisme :
\nLa zone cliquable (calque) la plus en dessous est en arri\u00e8re-plan
\nLa zone cliquable (calque) la plus au-dessus est au premier plan<\/p>\n

\"zones<\/p>\n

Dans notre exemple, la zone \u00ab faux<\/em> \u00bb est tout en bas de la liste et est donc dans le plus arri\u00e8re des plans. Elle s\u2019applique \u00e0 la totalit\u00e9 de l\u2019\u00e9cran (entour\u00e9e en rouge). Cette zone repr\u00e9sente donc \u00ab l\u2019anti triche \u00bb qui \u00e9vite que l\u2019apprenant puisse cliquer partout dans l\u2019espoir de trouver la bonne r\u00e9ponse.
\nOn remarque ensuite que chacune des zones qui permet de trouver un personnage est plac\u00e9e au-dessus dans la liste, elles sont donc dans un plan plus avanc\u00e9. Si ces zones se chevauchaient, \u00ab Perso 4 \u00bb serait en dessous de \u00ab Perso 3 \u00bb elle-m\u00eame en dessous de \u00ab Perso 2 \u00bb et enfin \u00ab Perso 1 \u00bb au premier plan.
\nDans notre cas, cela n\u2019a pas d\u2019importance car elles ne sont pas li\u00e9es les unes aux autres. En proc\u00e9dant ainsi, on a donc cr\u00e9\u00e9 la m\u00e9canique principale de notre \u00e9preuve. Il reste donc \u00e0 pond\u00e9rer chacune des r\u00e9ponses !<\/p>\n

\"zones<\/p>\n

La condition situ\u00e9e au d\u00e9but du graphe [zone 1] pour valider l\u2019\u00e9preuve est de trouver les 4 personnages. On a donc un bloc \u00ab\u00a0V\u00e9rifier Flag\u00a0\u00bb qui d\u00e9bute l\u2019\u00e9preuve et v\u00e9rifie la condition suivante : l\u2019apprenant a-t-il trouver personnage 1, 2, 3 et 4 ? Si oui, il emprunte la sortie du haut (reli\u00e9e \u00e0 la fin de l\u2019\u00e9preuve). Si non, il reste dans la boucle principale de la zone cliquable.
\nIl faut donc maintenant placer notre 4 flags [Zone 2] \u00e0 chacune des sorties des zones cliquables pour activer cette condition. A chaque clic sur un personnage, le flag s\u2019active et est retenu par VTS Editor.
\nVous remarquerez s\u00fbrement l\u2019utilisation d\u2019un bloc son [Zone 2] (storytelling pour marquer l\u2019appui sur un personnage) et un bloc compteur [Zone 3]. Pour comprendre l\u2019utilisation du bloc compteur, il faut anticiper le cas suivant : que se passe-t-il si l\u2019apprenant reclique sur un personnage d\u00e9j\u00e0 trouv\u00e9 ? Logiquement le marqueur est d\u00e9j\u00e0 lev\u00e9, aucun souci de ce c\u00f4t\u00e9. Par contre, il risque de marquer 2 fois les points du bloc score ce qui peut avoir des cons\u00e9quences sur votre scoring. Gr\u00e2ce au bloc compteur r\u00e9gl\u00e9 sur 1, seul le premier clic est reli\u00e9 au bloc score. Le deuxi\u00e8me clic sort par la sortie du bas qui est reli\u00e9e en boucle au bloc condition de victoire (qui ne peut pas s\u2019activer si on clique 2 fois sur le m\u00eame personnage), la boucle est boucl\u00e9e !<\/p>\n

L\u2019apparition d\u2019un \u00e9l\u00e9ment graphique de validation<\/h3>\n

Cette partie de l\u2019article n\u00e9cessitera un Pack Gold et plus<\/a> car les variables sont obligatoires pour conditionner l\u2019apparition d\u2019\u00e9l\u00e9ments. Quand nous avons pens\u00e9 l\u2019\u00e9preuve, nous souhaitions qu\u2019un \u00e9l\u00e9ment graphique vienne valider le clic de l\u2019apprenant. Pour r\u00e9aliser \u00e7a, nous avons donc d\u00e9couper le visuel d\u2019un cercle.
\nDans le bloc zone cliquable principale, vous remarquerez qu\u2019il existe 4 zones non cliquables. Quand on l\u2019ouvre pour v\u00e9rifier ses param\u00e8tres on obtient l\u2019\u00e9cran suivant :
\n\"zones
\nVous remarquerez en bas dans la case \u00ab Visible si \u00bb la condition P1 == \u00ab\u00a0true\u00a0\u00bb<\/em>
\nCette zone non cliquable appara\u00eet donc uniquement si la condition d\u2019avoir trouv\u00e9 le personnage 1 est remplie. Le cercle apparait alors autour de la t\u00eate du personnage cliqu\u00e9, validant graphiquement la r\u00e9ussite de l\u2019apprenant !<\/p>\n

Dans le prochain article de cette s\u00e9rie, nous verrons comment mettre en place un systeme d’aide pour votre apprenant dans le cas o\u00f9 il ne r\u00e9ussit pas une \u00e9preuve bloquante ! Si vous avez des questions sur la fa\u00e7on de cr\u00e9er des \u00e9preuves de type \u00ab\u00a0Mais ou est […]\u00a0\u00bb vue dans cet article, n’h\u00e9sitez pas \u00e0 nous les poser dans notre forum ou directement en commentaire de cet article !<\/p>\n

\n

Liens utiles<\/h2>\n