Structure du fichier source

Pour maintenir le fichier source propre dans lequel sera implémenté Nuggets, scènes et diapositives seront structurées comme suit :

Scène et diapositives réservées

• Une scène entière sera réservée à la librairie.
  Nous la nommerons Nuggets, Add-on Nuggets ou Plug-in Nuggets, au choix.

• Dans cette scène, chaque version de Nuggets sera importée dans une diapositive distincte. Prenez l'habitude de nommer chacune de ces diapositives par le numéro de version de la librairie.

• Ces diapositives auront un masque de diapositive dédié au chargement de Nuggets, que l'on nommera Nuggets loader, dans lequel nous programmerons les déclencheurs responsables du chargement de la librairie.

Scène et diapositives « projet »

• Toutes les autres scènes, dont la scène de démarrage, et toutes les diapositives qui s'y trouveront, constitueront votre projet.

• Ces diapositives auront également un masque de diapositive dédié pour vérifier la présence de la librairie, avec les déclencheurs requis.

Variables dédiées

Afin d'enregistrer si oui ou non Nuggets est chargé dans le projet, nous allons créer une première variable nuggetsLoaded de type booléen (vrai/faux).

Elle sera utilisée avec le déclencheur dans le masque de diapositive principale.

Dans la foulée, nous allons créer une seconde variable de type booléen, que l'on nommera isOnline. Elle nous servira à désactiver/activer les déclencheurs exécutant du code JavaScript lorsque l'on est dans l'environnement de prévisualisation de Storyline ou le navigateur.

• Pour tout test n'ayant pas besoin de JavaScript, on basculera la valeur de cette variable à FAUX, ce qui nous permettra de tester dans Storyline.

• Dans le cas contraire, on basculera la valeur à VRAI et on testera le projet dans le navigateur.

Nous allons maintenant construire les 2 masques de diapositives. Cliquez sur l'onglet Affichage, puis Masque des diapositives.

Masque de diapositive principal

Sur ce premier masque, nous allons créer plusieurs déclencheurs.
Attention de bien être positionné sur le masque et non sur l'une des mises en page.

Déclencheurs Storyline

Quand la chronologie de 'cette diapositive' commence
- Suspendre la chronologie de 'cette diapositive'
    Si 'isOnline' = valeur 'Vrai'
- Exécuter 'JavaScript'  
    Si 'isOnline' = valeur 'Vrai'

Dans l'Éditeur JavaScript, saisissez ce code :

JavaScript

const loaded = null!==document.querySelector("[data-id='nuggets']");
GetPlayer().SetVar('nuggetsLoaded',loaded);

Ensuite, continuez avec les déclencheurs suivants :

Déclencheurs Storyline

Quand la chronologie de 'cette diapositive' commence
- Reprendre la chronologie de 'cette diapositive'
    Si 'isOnline' = valeur 'Vrai'
        et 'nuggetsLoaded' = valeur 'Vrai'
- Aller à la diapositive '1.1 nuggets 00.0.0a'
    Si 'isOnline' = valeur 'Vrai'
        et 'nuggetsLoaded' = valeur 'Faux'

où 1.1 nuggets 00.0.0a est la diapositive dans laquelle la librairie a été importée. À ce stade, elle n'existe pas encore.

Passons maintenant au deuxième masque de diapositive.

Masque de diapositive Nuggets

Créez un nouveau masque de diapositive et appelez-le Nuggets loader.

Comme la librairie se chargera toujours de la même manière, nous ne garderons que la mise en page vide et effaçons toutes les autres. Dans cette mise en page vide, réduisez la longueur de la chronologie à 0.25 seconde (équivalent à 2 crans) aussi bien sur le masque que sur la mise en page.

Dans le masque (attention d'être bien sur le masque et non la mise en page), nous allons créer 2 groupes de déclencheurs.

Déclencheurs Storyline

Quand la chronologie de 'cette diapositive' commence
- Exécuter 'JavaScript'
- Suspendre la chronologie de 'cette diapositive'

et dans l'Éditeur JavaScript, saisissez ce code :

JavaScript

(()=>{let e=t=>{if("nuggets"===t.data.origin){if(void 0===t.data.lib||null===t.data.lib)t.source.postMessage({nuggetsID:GetPlayer().GetVar("nuggetsID"),courseID:GetPlayer().GetVar("Project.ActivityId")},"*");else{window.removeEventListener("message",e,!1);let a=e=>{let s=document.createElement("script");document.querySelector("head").appendChild(s);for(let d=0;d<e.length;d+=2)s.setAttribute(e[d],e[d+1]||`${t.data.lib.shift()}`);s.addEventListener("load",()=>{t.data.lib.length?a(t.data.attr):GetPlayer().SetVar("nuggetsLoaded",!0)},!1)};a(t.data.attr)}}};window.addEventListener("message",e,!1)})();

La chronologie est arrêtée, et le code JavaScript ci-dessus attend en retour les références aux fichiers .js de Nuggets pour les inclure dans le lecteur Storyline.

Une fois cette tâche effectuée, la variable nuggetsLoaded bascule à Vrai ; le groupe de déclencheur suivant réagit :

Déclencheur Storyline

Quand 'nuggetsLoaded' change
- Reprendre la chronologie de 'cette diapositive'
    Si 'nuggetsLoaded' = valeur 'Vrai'

La lecture de la chronologie reprend, mais nous ne donnons aucune consigne supplémentaire ici. Elles seront données dans la diapositive elle-même.

Voilà pour les masques de diapositive. Retournons maintenant sur la vue Story de Storyline.

Diapositive Nuggets

Comme précisé dans la partie « Structure du fichier source », nous allons importer la librairie dans une diapositive dédiée.

Si la scène et/ou la diapositive ne sont pas encore créées, faisons-le maintenant. Une fois créées, appliquons la mise en page Nuggets loader > vide à la diapositive et raccourcissons tout de suite la chronologie à 0,25s.

Ensuite, importons la librairie Nuggets. Si vous n'avez pas encore récupéré la dernière version de la librairie, vous la trouverez ici :

Nuggets sur Github

Via l'onglet Insertion de Storyline, cliquons sur Objet Web et dans le panneau qui s'ouvre, ciblons le contenu de l'archive précédement récupérée et préalablement décompressée. Nous ne touchons pas aux autres paramètres, puisque nous voulons que la librairie se charge automatiquement dans la diapositive.

Ensuite, créons 2 déclencheurs :

Déclencheurs Storyline

   Quand la chronologie de 'cette diapositive' se termine
    - Exécuter 'JavaScript'   // déclencheur principal d'initialisation
    - Aller à 'la diapositive précédente'

Rappelez-vous, dans le masque Nuggets loader, la chronologie reprenait une fois le chargement de la librairie terminé mais n'avait aucune consigne à suivre ensuite.

La lecture reprend donc ici et à la fin de la chronologie, nous exécutons du code JavaScript.

Pour l'instant, nous mettons juste cette ligne :

JavaScript

console.log('Hello World!');

Puis nous utilisons la navigation naturelle du lecteur Storyline pour retourner à la diapositive précédente.

L'intégration de la librairie est terminée. Retournons sur la première diapositive de notre scène de démarrage.

Diapositive de départ

A ce stade, le fichier source .story est prêt pour démarrer n'importe quel projet. Comme pour le modèle de fichier source disponible sur Github, nous vous conseillons de garder précieusement ce fichier.

Pour tester simplement, créons un calque Hello world! et insérons-y un champ texte dans lequel nous écrivons : Hello world!. Ensuite, dans le calque de base, créons un déclencheur.

Déclencheur Storyline

Quand la chronologie de 'cette diapositive' commence
- Afficher le calque 'Hello world!'
    Si 'isOnline' = valeur 'Vrai'
        et 'nuggetsLoaded' = valeur 'Vrai'

Il ne reste plus qu'à publier en mode Web et lancer dans votre navigateur.

Hello world! s'affichera dans la diapositive, ainsi que dans la console de débogage.