Diapositives visitées, complétées

Créer une expérience utilisateur vivante et intuitive

Gérer la visite et la complétion des diapositives

Rendre des écrans accessibles sous certaines conditions complexes ? C'est faisable !
Suivre la progression des écrans ou chapitres parcourus ? Tout à fait possible !

Ne vous restreignez plus dans vos idées ou dans la trajectoire (pédagogique ou ludique) que vous envisagez !

Avec Nuggets, rien n'est hors de portée !

Cas Client

Présentons tout de suite le cas client que nous avons eu à réaliser en 2023 !


Situation	Une administration régionale souhaite former ses employés à divers aspects de la réglementation en vigueur.
Mise en scène	Un plan de ville en vue isométrique propose d'aller à chacun des chapitres en sélectionnant un bâtiment. Tant que les grands principes ne sont pas consultés en entier, seul le bâtiment pour y accéder reste cliquable.
Conditions	Pour accéder aux chapitres plus spécifiques, les employés doivent d'abord avoir parcouru les trois chapitres contenant « les grands principes », peu importe l'ordre. Certains chapitres sont dédiés à des métiers spécifiques et sont facultatifs pour certains participants, mais obligatoires pour d'autres.
Besoins	Assurer que les employés puissent accéder aux chapitres spécifiques après avoir parcouru « les grands principes », sans restriction d'ordre. Permettre aux participants d'accéder aux chapitres dédiés à leurs métiers, en fonction de leurs besoins spécifiques.
Intérêts	Rendre possible un apprentissage tout à la fois individualisé et guidé.

Vous jetez l'éponge ? Pas nous !

Avant Nuggets

Tous les développeurs vous le diront : Storyline ne permet pas (encore) d'avoir le statut « vue/pas vue » par diapositive. Il est donc nécessaire de passer par du JavaScript pour garder un historique de navigation dans une variable de type Texte.

Par ailleurs, dans le cas qui nous intéresse ici, nous devons vérifier, toujours à l'aide du JavaScript, si telle ou telle diapositive a été visitée, consultée, voir validée si c'est un quiz, afin de débloqué telle ou telle partie.

A cela s'ajoute la notion d'obligatoire, de normal et d'optionnel, non pas sur une seule section mais au cas par cas sur tous les chapitres.

Une vraie usine à gaz en perspective entre JavaScript, les variables Storyline et les déclencheurs...

Et pourtant, c'est tout à fait réalisable en restant dans Storyline, et avec beaucoup d'élégance !

Avec Nuggets

Prérequis

Maîtriser l'utilisation des expressions opératoires fournies par la fonctionnalité LocalTrack ;
Paramétrer votre fichier .STORY pour utiliser LocalTrack :
- créer deux variable de traitement et deux variable de résultat ;
  Pour l'article, nous utiliserons les variables binômes :
  - ProgressByChapTracking et ProgressByChapResult ;
  - GlobalProgressTracking et GlobalProgressResult ;
- créer les déclencheurs qui manipuleront ces variables.

Déclencheurs Storyline

Quand 'ProgressByChapTracking' change
- Exécuter 'JavaScript'
    Si 'ProgressByChapTracking' ≠ valeur '(vide)'

Quand 'GlobalProgressTracking' change
- Exécuter 'JavaScript'
    Si 'GlobalProgressTracking' ≠ valeur '(vide)'

et pour chaque script JavaScript :

JavaScript

LocalTrack.parse('ProgressByChapTracking','ProgressByChapResult');

JavaScript

LocalTrack.parse('GlobalProgressTracking','GlobalResult');

Pour plus d'informations, référez-vous à la page « LocalTrack ».

Nous n'inclurons pas les conditions Si 'nuggetsLoad' = valeur 'Vrai' et Si 'isOnline' = valeur 'Vrai' dans les déclencheurs qui illustrent l'article..

Pour votre développement, pensez à les implémenter.

Comment ça marche ?

1. Préparation

Posons sous forme de tableau :

Binaire	Index	Métiers A et B	Métier A	Métier B
2¹ = 2	1	Chapitre 1.1	Chapitre 2.1	Chapitre 3.1
2² = 4	2	Chapitre 1.2	Chapitre 2.2	Chapitre 3.2
2³ = 8	3	Chapitre 1.3	Chapitre 2.3	Chapitre 3.3
2⁴ = 16	4	Chapitre 1.4	Chapitre 2.4	Chapitre 3.4
2⁵ = 32	5	Chapitre 1.5	Chapitre 2.5	Chapitre 3.5

Les chapitres obligatoires ont été mis en gras :

tous les métiers doivent suivre le chapitre 1 ;
le chapitre 2 est obligatoire pour les métiers A, optionnel pour les métier B ;
le chapitre 3 est obligatoire pour les métiers B, optionnel pour les métier A.

De là, calculons la somme des expressions binaires des sections obligatoires pour chaque métier.

Métiers	Chapitre 1	Chapitre 2	Chapitre 3
Métier A	62	14	0
Métier B	62	0	30

Ces sommes vont nous servir de paramètres de filtrage pour les expressions opératoires ultérieurement.

2. Initialisation

Pour partir sur un embranchement, métier A ou métier B, créons une diapositive qui nous proposera le choix via 2 boutons sur lesquels nous allons créer des déclencheurs.

Déclencheurs Storyline

Quand l’utilisateur clique sur 'Bouton Métier A'
- Affecter à 'Filtre_Chap_1' la valeur '62' 
- Affecter à 'Filtre_Chap_2' la valeur '14' 
- Affecter à 'Filtre_Chap_3' la valeur '0' 

Quand l’utilisateur clique sur 'Bouton Métier B'
- Affecter à 'Filtre_Chap_1' la valeur '62' 
- Affecter à 'Filtre_Chap_2' la valeur '0' 
- Affecter à 'Filtre_Chap_3' la valeur '30'

Vous vous apercevez que l'on vient de créer au passage 3 variables de type Nombre : Filtre_Chap_1, Filtre_Chap_2 et Filtre_Chap_3.

Dans le même temps, créons 3 autres variables, de type Nombre, qui vont nous permettre de suivre l'avancée des chapitres : Progress_Chap_1, Progress_Chap_2 et Progress_Chap_3.

3. Progression

Continuons sur l'embranchement choisi. Pour chacune des diapositives que l'on va visitée, nous allons devoir garder une trace de notre visite.

Créons pour cela les déclencheurs dans chacune des diapositives du projet.

Déclencheurs Storyline

// Scène 'Chap 1' > Diapositive 1.1 
Quand la chronologie de 'cette diapositive' commence
- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_1+1' 

// Scène 'Chap 1' > Diapositive 1.2
Quand la chronologie de 'cette diapositive' commence
- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_1+2' 
// ...

// Scène 'Chap 2' > Diapositive 2.1 
Quand la chronologie de 'cette diapositive' commence
- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_2+1' 
// Etc.

4. Débloquage

A chaque fois que l'apprenant revient en ville, nous devons nous assurer que le chapitre 1 est terminé.

Comme nous avons suivi en temps réel sa progression et que nous savons exactement ce qui a été consulté, nous pouvons le vérifier en un seul déclencheur grâce aux expressions opératoires binaires !

Déclencheurs Storyline

// Scène 'introduction' > Plan de la ville
Quand la chronologie de 'cette diapositive' commence
- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_1&Filtre_Chap_1'

- Définir l’état de 'Bouton - Bâtiment Chap 2' à 'Normal' 
    Si 'ProgressByChapResult' = variable 'Filtre_Chap_1'
- Définir l’état de 'Bouton - Bâtiment Chap 2' à 'Désactivé'
    Si 'ProgressByChapResult' ≠ variable 'Filtre_Chap_1'

- Définir l’état de 'Bouton - Bâtiment Chap 3' à 'Normal'
    Si 'ProgressByChapResult' = variable 'Filtre_Chap_1'
- Définir l’état de 'Bouton - Bâtiment Chap 3' à 'Désactivé'
    Si 'ProgressByChapResult' ≠ variable 'Filtre_Chap_1'

5. Complétion

Par défaut, les paramètres du fichier .STORY considère que le module est terminé lorsque toutes les diapositives ont été consultées. Mais quid des parties optionnelles qui ne doivent pas être prises en compte dans la complétion ?

Pour y remédier, créons un calque dans le Masque de diapositive principal que l'on nommera _vérification complétion. et dont la durée de la chronologie sera réduite au minimum : 0.13s. Décochons également tout dans les propriétés du calque et sélectionnons Restaurer l'état initiale lors d'un nouvelle visite.

Sur le Masque de diapositive, plaçons ces déclencheurs :

Déclencheurs Storyline

Quand la chronologie de 'cette diapositive' commence
- Afficher le calque '_check completion'

Quand 'Progress_Chap_1' change
- Afficher le calque '_check completion'

Quand 'Progress_Chap_2' change
- Afficher le calque '_check completion'

Quand 'Progress_Chap_3' change
- Afficher le calque '_check completion'

Puis dans le calque _vérification complétion :

Déclencheurs Storyline

// Masque de diapositive principal > calque '_vérification complétion'
Quand la chronologie de 'ce calque' commence
- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_1&Filtre_Chap_1'
- Affecter à 'GlobalProgressTracking' la valeur 'ProgressGlobal+1'
    Si 'ProgressByChapResult' = variable 'Filtre_Chap_1'

- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_2&Filtre_Chap_2'
- Affecter à 'GlobalProgressTracking' la valeur 'ProgressGlobal+2'
    Si 'ProgressByChapResult' = variable 'Filtre_Chap_2'

- Affecter à 'ProgressByChapTracking' la valeur 'Progress_Chap_3&Filtre_Chap_3'
- Affecter à 'GlobalProgressTracking' la valeur 'ProgressGlobal+3'
    Si 'ProgressByChapResult' = variable 'Filtre_Chap_3'

- Marquer le module comme 'Complet / Réussi'
    Si 'ProgressGlobal' = valeur '14'

Quand la chronologie de 'ce calque' se termine
- Masquer le calque 'ce calque' // chronologie réduite à 0.13s (le plus court)

Le module est terminé, même si les parties optionnelles ne sont pas consultées !

Diapositives visitées, complétées

Gérer la visite et la complétion des diapositives

Cas Client

Avant Nuggets

Avec Nuggets

Prérequis

Déclencheurs Storyline

JavaScript

JavaScript

Comment ça marche ?

1. Préparation

2. Initialisation

Déclencheurs Storyline

3. Progression

Déclencheurs Storyline

4. Débloquage

Déclencheurs Storyline

5. Complétion

Déclencheurs Storyline

Déclencheurs Storyline

Plan du site

Ressources

Légales

Sitemap

Ressources

Legals