Le Village by Serious Factory vous propose donc une version utilisable tout au long de l’année ainsi que le fichier source que vous pourrez observer en parfaite autonomie. Pour accéder à l’expérience, téléchargez VTS Player et suivez les instructions suivantes :

Et son fichier source :

Une série d’articles débriefera de la conception de son projet épreuve par épreuve ! Dans un premier temps, regardons ensemble comment nous avons fait pour que cette expérience soit jouable uniquement au mois de décembre et comment chaque épreuve débloquait la suivante.

La construction de ce projet a eu lieu en plusieurs étapes :
– Déterminer le concept
– Imaginer des épreuves sans se soucier de la conception opérationnelle
– Trouver comment les réaliser dans VTS Editor
Ce premier article expliquera donc comment nous avons imaginé le concept et ce que cela donne fonctionnellement dans VTS Editor.

Bornez vos scénarios dans le temps

Un calendrier de l’Avent doit respecter deux règles : une durée limitée dans le temps et le respect d’une case par jour maximum, comme dans la vraie vie ! Comme il s’adresse principalement à nos utilisateurs et followers, nous nous sommes dits que l’engagement serait meilleur pendant les jours travaillés ! Nous avons donc décidé de limiter le nombre d’épreuves au nombre de jours ouvrés sur le mois de décembre, même si cela implique de commencer à une date paire du 2 décembre.
Pour motiver les apprenants à revenir chaque jour, des cases cadeaux doivent être implantées. Il faut que le premier apparaisse rapidement nous avons donc décidé de le placer dès la deuxième case. Un rythme régulier d’un cadeau par semaine permettait alors à l’apprenant de savoir quand était le prochain et augmentait nos chances qu’il se décide à atteindre cette case !
Regardons alors dans un premier temps comment borner dans le temps un scénario sur VTS Editor pour limiter son accès sur une période donnée.
Pour effectuer cette tâche, il faut une offre d’abonnement (Gold et plus) qui vous donne accès aux blocs Variables et Conditions. Fonctionnellement, voici le graphe très impressionnant qui permet au calendrier d’être accessible uniquement sur le mois de décembre :

Surprise, il suffit d’un seul bloc Condition ! Quand nous l’ouvrons, voici la fonction utilisée dans le bloc :
_month est une fonction des variables qui indique que la condition à observer portera sur les mois de l’année. Comment est déterminé le mois en cours ? Tout simplement en utilisant l’horloge de l’ordinateur de l’apprenant ! Cela permet d’ignorer les canaux horaires lors d’un déploiement à l’international. (triche)
On peut traduire littéralement la condition : Le mois en cours est-il le numéro 12 (décembre) ? Si oui, j’emprunte la sortie du haut, si non, la sortie du bas. La sortie du haut mène à la suite du scénario, celle du bas à un bloc Message qui indique que le scénario est jouable uniquement pendant le mois de décembre.
Maintenant, attaquons-nous à la partie du conditionnement pour que l’apprenant ne puisse pas ouvrir la case d’un jour qui n’est pas encore passé. Pour traduire cette condition en équation, il faut que le jour actuel soit toujours inférieur au numéro de la case correspondante.

On assigne une variable à chaque case (index_day). Ensuite on compare le jour avec la valeur de la case cliquée.
Par exemple, si nous sommes le 3 décembre (day), on ne peut pas ouvrir la case numéro 4 (index_day) on a bien car 3 < 4 .
Pour écrire cette équation dans VTS Editor, nous allons mettre un bloc variable après chaque zone qui permet d’ouvrir une case comme sur la photo ci-dessous.

Ce bloc attribue une valeur fixe à une variable (index_day) après un clic sur une case. Si l’apprenant clique sur la case 02, le bloc variable se traduit littéralement par : la valeur de la variable index_day est maintenant égale à 2. Une fois l’information stockée, il faut vérifier notre équation hypothèse.
Dans le graphe ci-dessus, le bloc Condition peut être traduit comme suit : « Le jour actuel est-il inférieur à la case cliquée ? »
Si oui (le cas à éviter), la sortie du haut est empruntée et reliée à un bloc message qui indique que la case ne peut pas s’ouvrir.
Si non (le cas que nous cherchons) la sortie du bas est empruntée et permet d’accéder à la suite du scénario de jouer l’épreuve.
Chacune des épreuves est donc maintenant conditionnée pour ne s’ouvrir qu’à partir d’une certaine date.
Voyons maintenant comment conditionner l’ouverture d’une case en fonction de la complétion de la précédente.

Conditionnez l’accès et la visibilité à vos épreuves à l’aide des variables

Maintenant que l’accès de notre scénario est réservé au mois de décembre et qu’il est impossible d’ouvrir une case à une date qui n’est pas encore passée, il faut conditionner chaque épreuve à s’ouvrir uniquement si la précédente a été remportée. Cette étape s’adresse principalement aux utilisateurs aguerris car elle fait appel à des notions avancées de variables. Une formation aux Variables est d’ailleurs prévue à cet effet !

Étape numéro 1 : initialisation

Pour mettre en place ce système, il faut commencer par initialiser un Dictionnaire qui s’appellera « GameOK ». Un Dictionnaire c’est une liste de variables à laquelle on peut assigner plusieurs caractéristiques (ou clés) et valeurs. Dans notre exemple, le dictionnaire GameOK est créé dans le premier bloc Variable. Il faut ensuite initialiser ses caractéristiques ou clés (le numéro des épreuves) et leur assigner une valeur « True » ou « False ».

Pour cela, il faut créer un système qui permet d’initialiser les clés et leurs valeurs associées UNE SEULE fois. Dans le premier bloc Condition du graphe ci-dessus, on vérifie le nombre de GameOK activé via la fonction count(). Au premier passage, ce nombre est forcément égal à 0 (le dictionnaire vient d’être créé), la sortie du haut est alors empruntée (car la condition vérifiée est « le nombre de GameOK est il égal à 0 ?). Cela a pour effet de passer dans un bloc variable qui va initialiser la valeur des « GameOK » (une pour chaque épreuve) présents dans le Dictionnaire. On peut traduire littéralement ce bloc variable par : défini dans le Dictionnaire « GameOK » à la clé 2 la valeur « faux ».
Dans tous les autres passages (après avoir résolu au moins une épreuve), la sortie du bas sera empruntée, ce qui évite de repasser toutes leurs valeurs en « false ».

Étape numéro 2 : édition

Une fois les variables initialisées et toutes égales à « false », il faut créer le mécanisme pour les changer en « true » après la complétion d’une épreuve. Pour cela, un bloc variable est placé à la fin de chaque épreuve comme ci-dessous :

Nous pouvons traduire littéralement la fonction set(gameOK, « 11 », true) comme suivant :
Défini dans le Dictionnaire « GameOK » à la clef « 11 » la valeur « vraie » (souvenez-vous, nous les avons initialisées en les mettant toutes fausses). En cochant l’icône de sauvegarde à l’intérieur du bloc, cette valeur sera retenue même si l’apprenant quitte le scénario.
Maintenant que l’épreuve 11 est terminée et la variable sauvegardée, il faut limiter ou ouvrir l’accès aux cases correspondantes. Pour cela, nous allons utiliser des conditions de visibilité situées dans les Zones Cliquables !

Étape numéro 3 : usage

Pour la rendre visible ou non, nous allons jouer sur l’opacité du média.

Chaque case que vous voyez est une zone cliquable déposée sur un fond de calendrier ouvert et vide. Nous devons donc parvenir à les rendre invisible (transparente) quand l’épreuve liée est ouverte.
Si l’apprenant a fini l’épreuve 18, la clé 18 du dictionnaire GameOK devient « true » comme vu précédemment. Il suffit alors de conditionner l’opacité sur ces 2 valeurs « true » et « false » pour les afficher ou non en fonction des épreuves !
En littéral, il faut une fonction qui a l’effet suivant : si la variable est « false » (l’apprenant n’a donc pas fini l’épreuve), la case doit rester visible. Si la variable est « true » (l’apprenant a donc fini l’épreuve), la case doit disparaître.
Pour utiliser les conditions de visibilité situées dans les zones cliquables, il faut suivre le chemin suivant :
– Ouvrez le bloc Zone Cliquable
– Cliquez sur l’icône du pot de peinture (style)
– Cliquez sur la teinte du média au survol
En bas à droite, vous avez la possibilité d’intégrer une variable liée à un hexacode (une valeur hexadécimale qui correspond à une couleur et qui prend en compte la transparence). Nous allons donc commencer par associer une opacité totale et une opacité nulle à deux variables en début de scénario comme ci-dessous :

La variable color_case_done est associée à aucune opacité (l’élément devient donc invisible) et la variable color_case elle à une opacité complète (l’élément devient donc visible)
Nous allons donc maintenant utiliser notre Dictionnaire GameOK grâce à la fonction suivante placée dans la zone verte à droite de l’hexacode de la Zone Cliquable :
Condition(get(gameOK, « 2 »), color_case_done,color_case) qui se traduit littéralement par :
« Récupère la valeur 2 dans le Dictionnaire GameOK (vrai ou faux). Si elle est vraie, donne-lui la couleur color_cas_done, dans le cas contraire, donne-lui la couleur case_color. »
Par défaut, la valeur récupérée est « false » puisque l’apprenant ne l’a pas activée avant de finir une épreuve. Les cases sont donc visibles par défaut. Une fois que l’apprenant termine l’épreuve et passe la valeur en « true », la case disparaît, dévoilant le trou initial sous la case !

Dans le prochain article de cette série, nous débrieferons de la construction de la première épreuve : « mais où sont les personnages de VTS Editor ? » Si vous avez des questions sur les conditionnements vus dans cet article, n’hésitez pas à nous les poser dans notre forum ou directement en commentaire de cet article !