Comment appeler du code JavaScript depuis Storyline

Comment appeler du code JavaScript depuis Storyline

Vous pouvez étendre les fonctionnalités d’Articulate Storyline avec du code JavaScript. Voici une brève présentation de la façon de procéder.

Définir le déclencheur qui va appeler le code

Pour appeler du code JavaScript depuis un module Articulate Storyline, définissez un déclencheur (trigger) de type Exécuter le JavaScript.
Fenêtre Storyline permettant de définir le déclencheur qui va appeler le code JavaScript.
Les points de suspension que l’on voit dans cette fenêtre vous conduisent à un éditeur de texte. C’est là que vous devez écrire votre code JavaScript. Les déclencheurs JavaScript peuvent être composés d’au plus 32 767 caractères de code.

Établir un pont entre JavaScript et Storyline

La fonction GetPlayer(), écrite par Articulate, vous retourne un objet qui représente le lecteur de votre module. Cet objet vous permet de faire le pont entre le code JavaScript et votre module Storyline. Une fois que vous avez votre « pont », vous pouvez utiliser la méthode GetVar() pour obtenir la valeur des variables de Storyline et la méthode SetVar () pour assigner une valeur à une variable de Storyline. Voyons un exemple en détailé

Un exemple : obtenir la date courante

Parfois, on a besoin d’afficher la date courante. C’est le cas, notamment, lorsque l’on désire offrir un certificat à notre apprenant.
Ouvrez un projet Storyline. Créez une variable de texte, nommez-la selon votre choix. Dans mon cas, je l’ai appelée « stDateCourante », car c’est une variable Storyline qui va contenir la date courante une fois que le code JavaScript va nous l’avoir récupérée du système de l’ordinateur. Créez un déclencheur JavaScript à exécuter lorsque la chronologie démarre et collez-y le code suivant.

var dateCourante = new Date();

var jour = dateCourante.getDate();

var mois = dateCourante.getMonth() + 1;

var annee = dateCourante.getFullYear();

var dateFormatee = jour + ‘/’ + mois + ‘/’ + annee;

var lecteur = GetPlayer();

lecteur.SetVar( “stDateCourante”, dateFormatee);

Voici le déclencheur.
Code JavaScript du déclencheur.
Date()  est un objet JavaScript prédéfini. Vous pouvez en savoir plus sur l’objet Date() en lisant la documentation de l’excellent site www.w3schools.com.
En instanciant l’objet dateCourante, on lui assigne le jour, le mois et l’année en cours. On récupère ces trois éléments avec les méthodes getDate(), getMonth() et getFullYear() respectivement. On formate ensuite la date par concaténation du jour, du mois et de l’année. GetPlayer() retourne ensuite le lecteur qui va permettre d’établir la communication entre JavaScript et le module Storyline. Il retourne un objet qui contient les méthodes et les variables du module de formation courant. La variable lecteur devient ainsi le pont entre JavaScript et Storyline. On  récupère le lecteur de sorte à pouvoir assigner la date courante à notre variable Storyline.
Pour afficher la valeur de votre variable, ajoutez une zone de texte sur la diapositive avec votre nom de variable entre les signes « % », comme indiqué ci-dessous.

% stDateCourante %

Voici un exemple d’utilisation de la valeur récupérée.
Affichage de la date récupérée.
Notez que la prise en charge de JavaScript n’est pas disponible dans l’aperçu. Vous devez publier votre module pour que le code JavaScript soit exécuté.

Inclure le code JavaScript dans un fichier séparé

Vous pouvez définir des fonctions JavaScript dans un déclencheur JavaScript. Sachez néanmoins que vous ne pouvez pas appeler une fonction définie dans un déclencheur JavaScript dans un autre déclencheur JavaScript. Si vous souhaitez inclure toutes vos fonctions JavaScript dans un fichier d’extension js, placez votre fichier dans le dossier story_content de votre sortie publiée. Ensuite, incluez le fichier en ajoutant une balise ˂script> à la fin de l’en-tête du fichier story.html, soit avant la fin de la balise ˂head>.
˂ script LANGUAGE=”Javascript1.2″ SRC=”story_content/VotreCodeJavaScript.js” TYPE=”text/javascript”> ˂ /script>
Ensuite, appelez les fonctions appropriées dans vos déclencheurs JavaScript.

Patricia
Merci de partager !

Un commentaire? On vous écoute.

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.