{"id":902,"date":"2020-02-19T15:10:18","date_gmt":"2020-02-19T14:10:18","guid":{"rendered":"https:\/\/seriousfactory.com\/blog\/?p=902"},"modified":"2025-08-22T15:23:17","modified_gmt":"2025-08-22T13:23:17","slug":"borner-scenario-temps-calendrier-avent","status":"publish","type":"post","link":"https:\/\/seriousfactory.com\/blog\/fr\/borner-scenario-temps-calendrier-avent\/","title":{"rendered":"Comment borner dans le temps une exp\u00e9rience immersive : exemple du Calendrier de l’Avent des jours ouvr\u00e9s"},"content":{"rendered":"

Le Village by Serious Factory vous propose donc une version utilisable tout au long de l\u2019ann\u00e9e ainsi que le fichier source que vous pourrez observer en parfaite autonomie. Pour acc\u00e9der \u00e0 l\u2019exp\u00e9rience, t\u00e9l\u00e9chargez VTS Player et suivez les instructions suivantes :<\/p>\n

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

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

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

Une s\u00e9rie d’articles d\u00e9briefera de la conception de son projet \u00e9preuve par \u00e9preuve ! Dans un premier temps, regardons ensemble comment nous avons fait pour que cette exp\u00e9rience soit jouable uniquement au mois de d\u00e9cembre et comment chaque \u00e9preuve d\u00e9bloquait la suivante.<\/p>\n

La construction de ce projet a eu lieu en plusieurs \u00e9tapes :
\n\u2013 D\u00e9terminer le concept
\n\u2013 Imaginer des \u00e9preuves sans se soucier de la conception op\u00e9rationnelle
\n\u2013 Trouver comment les r\u00e9aliser dans VTS Editor
\nCe premier article expliquera donc comment nous avons imagin\u00e9 le concept et ce que cela donne fonctionnellement dans VTS Editor.<\/p>\n

Bornez vos sc\u00e9narios dans le temps<\/h1>\n

Un calendrier de l\u2019Avent doit respecter deux r\u00e8gles : une dur\u00e9e limit\u00e9e dans le temps et le respect d\u2019une case par jour maximum, comme dans la vraie vie ! Comme il s\u2019adresse principalement \u00e0 nos utilisateurs et followers, nous nous sommes dits que l\u2019engagement serait meilleur pendant les jours travaill\u00e9s ! Nous avons donc d\u00e9cid\u00e9 de limiter le nombre d\u2019\u00e9preuves au nombre de jours ouvr\u00e9s sur le mois de d\u00e9cembre, m\u00eame si cela implique de commencer \u00e0 une date paire du 2 d\u00e9cembre.
\nPour motiver les apprenants \u00e0 revenir chaque jour, des cases cadeaux doivent \u00eatre implant\u00e9es. Il faut que le premier apparaisse rapidement nous avons donc d\u00e9cid\u00e9 de le placer d\u00e8s la deuxi\u00e8me case. Un rythme r\u00e9gulier d\u2019un cadeau par semaine permettait alors \u00e0 l\u2019apprenant de savoir quand \u00e9tait le prochain et augmentait nos chances qu\u2019il se d\u00e9cide \u00e0 atteindre cette case !
\nRegardons alors dans un premier temps comment borner dans le temps un sc\u00e9nario sur VTS Editor pour limiter son acc\u00e8s sur une p\u00e9riode donn\u00e9e.
\nPour effectuer cette t\u00e2che, il faut une offre d\u2019abonnement (Gold et plus)<\/a> qui vous donne acc\u00e8s aux blocs Variables et Conditions. Fonctionnellement, voici le graphe tr\u00e8s impressionnant qui permet au calendrier d\u2019\u00eatre accessible uniquement sur le mois de d\u00e9cembre :<\/p>\n

\"\"<\/p>\n

Surprise, il suffit d\u2019un seul bloc Condition ! Quand nous l\u2019ouvrons, voici la fonction utilis\u00e9e dans le bloc :
\n_month<\/em> est une fonction des variables qui indique que la condition \u00e0 observer portera sur les mois de l\u2019ann\u00e9e. Comment est d\u00e9termin\u00e9 le mois en cours ? Tout simplement en utilisant l\u2019horloge de l\u2019ordinateur de l\u2019apprenant ! Cela permet d\u2019ignorer les canaux horaires lors d\u2019un d\u00e9ploiement \u00e0 l\u2019international. (triche)
\nOn peut traduire litt\u00e9ralement la condition : Le mois en cours est-il le num\u00e9ro 12 (d\u00e9cembre) ? Si oui, j\u2019emprunte la sortie du haut, si non, la sortie du bas. La sortie du haut m\u00e8ne \u00e0 la suite du sc\u00e9nario, celle du bas \u00e0 un bloc Message qui indique que le sc\u00e9nario est jouable uniquement pendant le mois de d\u00e9cembre.
\nMaintenant, attaquons-nous \u00e0 la partie du conditionnement pour que l\u2019apprenant ne puisse pas ouvrir la case d\u2019un jour qui n\u2019est pas encore pass\u00e9. Pour traduire cette condition en \u00e9quation, il faut que le jour actuel soit toujours inf\u00e9rieur au num\u00e9ro de la case correspondante.<\/p>\n

On assigne une variable \u00e0 chaque case (index_day)<\/em>. Ensuite on compare le jour avec la valeur de la case cliqu\u00e9e.
\nPar exemple, si nous sommes le 3 d\u00e9cembre (day)<\/em>, on ne peut pas ouvrir la case num\u00e9ro 4 (index_day<\/em>) on a bien car 3 < 4 .
\nPour \u00e9crire cette \u00e9quation dans VTS Editor, nous allons mettre un bloc variable apr\u00e8s chaque zone qui permet d\u2019ouvrir une case comme sur la photo ci-dessous.<\/p>\n

\"\"<\/p>\n

Ce bloc attribue une valeur fixe \u00e0 une variable (index_day<\/em>) apr\u00e8s un clic sur une case. Si l\u2019apprenant clique sur la case 02, le bloc variable se traduit litt\u00e9ralement par : la valeur de la variable index_day<\/em> est maintenant \u00e9gale \u00e0 2. Une fois l\u2019information stock\u00e9e, il faut v\u00e9rifier notre \u00e9quation hypoth\u00e8se.
\nDans le graphe ci-dessus, le bloc Condition peut \u00eatre traduit comme suit : \u00ab Le jour actuel est-il inf\u00e9rieur \u00e0 la case cliqu\u00e9e ? \u00bb
\nSi oui (le cas \u00e0 \u00e9viter), la sortie du haut est emprunt\u00e9e et reli\u00e9e \u00e0 un bloc message qui indique que la case ne peut pas s\u2019ouvrir.
\nSi non (le cas que nous cherchons) la sortie du bas est emprunt\u00e9e et permet d\u2019acc\u00e9der \u00e0 la suite du sc\u00e9nario de jouer l\u2019\u00e9preuve.
\nChacune des \u00e9preuves est donc maintenant conditionn\u00e9e pour ne s\u2019ouvrir qu\u2019\u00e0 partir d\u2019une certaine date.
\nVoyons maintenant comment conditionner l\u2019ouverture d\u2019une case en fonction de la compl\u00e9tion de la pr\u00e9c\u00e9dente.<\/p>\n

Conditionnez l\u2019acc\u00e8s et la visibilit\u00e9 \u00e0 vos \u00e9preuves \u00e0 l\u2019aide des variables<\/h1>\n

Maintenant que l\u2019acc\u00e8s de notre sc\u00e9nario est r\u00e9serv\u00e9 au mois de d\u00e9cembre et qu\u2019il est impossible d\u2019ouvrir une case \u00e0 une date qui n\u2019est pas encore pass\u00e9e, il faut conditionner chaque \u00e9preuve \u00e0 s\u2019ouvrir uniquement si la pr\u00e9c\u00e9dente a \u00e9t\u00e9 remport\u00e9e. Cette \u00e9tape s\u2019adresse principalement aux utilisateurs aguerris car elle fait appel \u00e0 des notions avanc\u00e9es de variables. Une formation aux Variables est d\u2019ailleurs pr\u00e9vue \u00e0 cet effet !<\/a><\/p>\n

\u00c9tape num\u00e9ro 1 : initialisation<\/b><\/p>\n

Pour mettre en place ce syst\u00e8me, il faut commencer par initialiser un Dictionnaire qui s\u2019appellera \u00ab GameOK<\/em> \u00bb. Un Dictionnaire c\u2019est une liste de variables \u00e0 laquelle on peut assigner plusieurs caract\u00e9ristiques (ou cl\u00e9s) et valeurs. Dans notre exemple, le dictionnaire GameOK<\/em> est cr\u00e9\u00e9 dans le premier bloc Variable. Il faut ensuite initialiser ses caract\u00e9ristiques ou cl\u00e9s (le num\u00e9ro des \u00e9preuves) et leur assigner une valeur \u00ab True<\/em> \u00bb ou \u00ab False<\/em> \u00bb.<\/p>\n

\"\"<\/p>\n

Pour cela, il faut cr\u00e9er un syst\u00e8me qui permet d\u2019initialiser les cl\u00e9s et leurs valeurs associ\u00e9es UNE SEULE fois. Dans le premier bloc Condition du graphe ci-dessus, on v\u00e9rifie le nombre de GameOK<\/em> activ\u00e9 via la fonction count()<\/em>. Au premier passage, ce nombre est forc\u00e9ment \u00e9gal \u00e0 0 (le dictionnaire vient d\u2019\u00eatre cr\u00e9\u00e9), la sortie du haut est alors emprunt\u00e9e (car la condition v\u00e9rifi\u00e9e est \u00ab le nombre de GameOK<\/em> est il \u00e9gal \u00e0 0 ?). Cela a pour effet de passer dans un bloc variable qui va initialiser la valeur des \u00ab GameOK<\/em> \u00bb (une pour chaque \u00e9preuve) pr\u00e9sents dans le Dictionnaire. On peut traduire litt\u00e9ralement ce bloc variable par : d\u00e9fini dans le Dictionnaire \u00ab GameOK<\/em> \u00bb \u00e0 la cl\u00e9 2<\/em> la valeur \u00ab faux<\/em> \u00bb.
\nDans tous les autres passages (apr\u00e8s avoir r\u00e9solu au moins une \u00e9preuve), la sortie du bas sera emprunt\u00e9e, ce qui \u00e9vite de repasser toutes leurs valeurs en \u00ab false \u00bb.<\/p>\n

\u00c9tape num\u00e9ro 2 : \u00e9dition<\/b><\/p>\n

Une fois les variables initialis\u00e9es et toutes \u00e9gales \u00e0 \u00ab false<\/em> \u00bb, il faut cr\u00e9er le m\u00e9canisme pour les changer en \u00ab true<\/em> \u00bb apr\u00e8s la compl\u00e9tion d\u2019une \u00e9preuve. Pour cela, un bloc variable est plac\u00e9 \u00e0 la fin de chaque \u00e9preuve comme ci-dessous :<\/p>\n

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

Nous pouvons traduire litt\u00e9ralement la fonction set(gameOK, \u00ab 11 \u00bb, true)<\/em> comme suivant :
\nD\u00e9fini dans le Dictionnaire \u00ab GameOK<\/em> \u00bb \u00e0 la clef \u00ab 11<\/em> \u00bb la valeur \u00ab vraie<\/em> \u00bb (souvenez-vous, nous les avons initialis\u00e9es en les mettant toutes fausses). En cochant l\u2019ic\u00f4ne de sauvegarde \u00e0 l\u2019int\u00e9rieur du bloc, cette valeur sera retenue m\u00eame si l\u2019apprenant quitte le sc\u00e9nario.
\nMaintenant que l\u2019\u00e9preuve 11 est termin\u00e9e et la variable sauvegard\u00e9e, il faut limiter ou ouvrir l\u2019acc\u00e8s aux cases correspondantes. Pour cela, nous allons utiliser des conditions de visibilit\u00e9 situ\u00e9es dans les Zones Cliquables !<\/p>\n

\u00c9tape num\u00e9ro 3 : usage<\/b><\/p>\n

Pour la rendre visible ou non, nous allons jouer sur l\u2019opacit\u00e9 du m\u00e9dia.<\/p>\n

\"\"<\/p>\n

Chaque case que vous voyez est une zone cliquable d\u00e9pos\u00e9e sur un fond de calendrier ouvert et vide. Nous devons donc parvenir \u00e0 les rendre invisible (transparente) quand l\u2019\u00e9preuve li\u00e9e est ouverte.
\nSi l\u2019apprenant a fini l\u2019\u00e9preuve 18, la cl\u00e9 18 du dictionnaire GameOK<\/em> devient \u00ab true \u00bb<\/em> comme vu pr\u00e9c\u00e9demment. Il suffit alors de conditionner l\u2019opacit\u00e9 sur ces 2 valeurs \u00ab true<\/em> \u00bb et \u00ab false<\/em> \u00bb pour les afficher ou non en fonction des \u00e9preuves !
\nEn litt\u00e9ral, il faut une fonction qui a l\u2019effet suivant : si la variable est \u00ab false<\/em> \u00bb (l\u2019apprenant n\u2019a donc pas fini l\u2019\u00e9preuve), la case doit rester visible. Si la variable est \u00ab true<\/em> \u00bb (l\u2019apprenant a donc fini l\u2019\u00e9preuve), la case doit dispara\u00eetre.
\nPour utiliser les conditions de visibilit\u00e9 situ\u00e9es dans les zones cliquables, il faut suivre le chemin suivant :
\n\u2013 Ouvrez le bloc Zone Cliquable
\n\u2013 Cliquez sur l\u2019ic\u00f4ne du pot de peinture (style)
\n\u2013 Cliquez sur la teinte du m\u00e9dia au survol
\nEn bas \u00e0 droite, vous avez la possibilit\u00e9 d\u2019int\u00e9grer une variable li\u00e9e \u00e0 un hexacode (une valeur hexad\u00e9cimale qui correspond \u00e0 une couleur et qui prend en compte la transparence). Nous allons donc commencer par associer une opacit\u00e9 totale et une opacit\u00e9 nulle \u00e0 deux variables en d\u00e9but de sc\u00e9nario comme ci-dessous :<\/p>\n

\"\"<\/p>\n

La variable color_case_done<\/em> est associ\u00e9e \u00e0 aucune opacit\u00e9 (l\u2019\u00e9l\u00e9ment devient donc invisible) et la variable color_case<\/em> elle \u00e0 une opacit\u00e9 compl\u00e8te (l\u2019\u00e9l\u00e9ment devient donc visible)
\nNous allons donc maintenant utiliser notre Dictionnaire GameOK<\/em> gr\u00e2ce \u00e0 la fonction suivante plac\u00e9e dans la zone verte \u00e0 droite de l\u2019hexacode de la Zone Cliquable :
\nCondition(get(gameOK, \u00ab 2 \u00bb), color_case_done,color_case)<\/em> qui se traduit litt\u00e9ralement par :
\n\u00ab R\u00e9cup\u00e8re la valeur 2 dans le Dictionnaire GameOK (vrai ou faux). Si elle est vraie, donne-lui la couleur color_cas_done<\/em>, dans le cas contraire, donne-lui la couleur case_color. \u00bb
\nPar d\u00e9faut, la valeur r\u00e9cup\u00e9r\u00e9e est \u00ab false<\/em> \u00bb puisque l\u2019apprenant ne l\u2019a pas activ\u00e9e avant de finir une \u00e9preuve. Les cases sont donc visibles par d\u00e9faut. Une fois que l\u2019apprenant termine l\u2019\u00e9preuve et passe la valeur en \u00ab true \u00bb<\/em>, la case dispara\u00eet, d\u00e9voilant le trou initial sous la case !<\/p>\n

Dans le prochain article de cette s\u00e9rie, nous d\u00e9brieferons de la construction de la premi\u00e8re \u00e9preuve : \u00ab\u00a0mais o\u00f9 sont les personnages de VTS Editor ?\u00a0\u00bb Si vous avez des questions sur les conditionnements vus 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