Browse Articles

Browse Articles

Storyline 360 : bonnes pratiques et exemples de JavaScript

Dernière mise à jour de l’article le

Cet article s'applique à :

Storyline 360

Utilisez des déclencheurs JavaScript pour une interactivité avancée dans les modules Storyline 360. (Pour en savoir plus sur les déclencheurs, consultez ce guide de l'utilisateur.)

Bonnes pratiques

Bien que nous ne fournissions pas de support technique pour le codage JavaScript, ces conseils vous aideront à :

  • Installez la mise à jour de février 2024 ou ultérieure pour utiliser la console intégrée.
  • À partir de janvier 2024, vous pouvez prévisualiser les déclencheurs JavaScript locaux dans le lecteur moderne. Par exemple, des déclencheurs JavaScript qui récupèrent ou définissent la valeur d'une variable Storyline 360. Si vous utilisez des déclencheurs JavaScript complexes, vous devez tout de même publier votre module sur un serveur Web ou un LMS afin de le tester correctement.
  • En novembre 2021, nous avons amélioré l'éditeur JavaScript dans Storyline 360. Il comporte désormais un surlignage syntaxique et des numéros de ligne.
  • Utilisez la méthode Player.getVar pour récupérer la valeur des variables Storyline 360 et utilisez la méthode Player.setVar pour définir la valeur d'une variable Storyline 360. En d'autres termes, vous pouvez extraire des informations des variables Storyline 360 avec Player.getVar et transférer des informations dans des variables Storyline 360 avec Player.setVar.
  • Ne l'incluez pas <script type="text/javascript"> dans vos déclencheurs.
  • Chaque déclencheur JavaScript peut comporter jusqu'à 32 767 personnages de code.
  • Vous ne pouvez pas appeler des fonctions JavaScript d'un déclencheur à l'autre. Cependant, vous pouvez appeler des fonctions JavaScript dans le même déclencheur.
  • Si vous souhaitez inclure toutes vos fonctions JavaScript dans un fichier JavaScript (.js) distinct, placez votre fichier JavaScript personnalisé dans le dossier story_content de votre sortie publiée, puis ajoutez la ligne de code suivante au fichier story.html avant la balise</head> de fermeture.

    <script LANGUAGE="JavaScript1.2" SRC="/story_content/MyJavaScriptFunctions.js" TYPE="text/javascript"></script>

    Appelez les fonctions appropriées dans vos déclencheurs Storyline 360. Notez que cette méthode n'est pas officiellement prise en charge par Articulate.
  • Si vous utilisez jQuery dans vos déclencheurs JavaScript, veillez à faire référence à la bibliothèque jQuery.
  • Storyline 360 ne dispose pas de variables système documentées que vous pouvez utiliser en JavaScript. Vous en découvrirez peut-être en utilisant les résultats publiés par Storyline 360 ou en effectuant des recherches sur les forums de la communauté. Sachez simplement qu'ils peuvent interférer avec la lecture des modules et qu'ils peuvent ne pas fonctionner dans toutes les versions de Storyline 360.
  • Pour des informations générales sur le codage JavaScript, consultez w3schools.com ou Codecademy.

Exemples

Vous trouverez ci-dessous des exemples de déclencheurs JavaScript courants. Et n'oubliez pas de consulter notre défi JavaScript et de récapituler les dizaines de démos proposées par notre merveilleuse communauté de développeurs d'apprentissage en ligne !

Modifier la valeur d'une
variable Storyline 360 Cet exemple attribue la date actuelle à une variable Storyline 360. Démonstration vidéo.

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var dateString=month + "/" + day + "/" + year
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

Message contextuel (texte uniquement)

alert("Your message here...");

Message contextuel (texte et valeur d'une variable Storyline 360)

var player = GetPlayer();
alert("Welcome back, " + player.GetVar("FirstName") + ".");

Imprimer la diapositive en cours (HTML5 uniquement)

window.print();

Le code simple ci-dessus imprime la diapositive actuelle et le lecteur Storyline 360. Si vous souhaitez imprimer uniquement le contenu de la diapositive, et non le lecteur Storyline 360, consultez ce code JavaScript de Brian Batt. Notez que cette méthode ne fonctionne qu'avec le style de lecteur classique.

Certificat d'achèvement de l'impression

Regardez cette démonstration et cet exemple téléchargeable de Tracy Carroll dans lesquels elle utilise deux déclencheurs JavaScript pour obtenir la date actuelle, saisir le nom de l'apprenant et imprimer un certificat.

Lancer un nouveau message électronique

var email="yourAddress@email.com";
var subject="subject line";
var body_start="How you want to begin your body.";
var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_start;
win=window.open(mailto_link,'emailWin');

Défilement automatique de la page web vers un emplacement spécifique

window.scroll(0,150); // horizontal and vertical location

Page web à défilement automatique par rapport à l'emplacement actuel

window.scrollBy(0,150); // horizontal and vertical scroll increments

Modifier la couleur d'arrière-plan HTML (lecteur classique uniquement)

parent.document.body.style.backgroundColor = "#990000";

Modifier l'image d'arrière-plan HTML (lecteur classique uniquement)
Placez une copie du fichier image.jpg dans le dossier racine de votre sortie publiée. Crédit : Alexandros Anoyatis

parent.document.body.style.backgroundImage = "url('image.jpg')";
parent.document.body.style.backgroundSize = "cover";
parent.document.body.style.backgroundRepeat = "no-repeat";

Générer un nombre aléatoire
Cet exemple génère un nombre aléatoire compris entre 1 et 10. Démonstrations vidéo ici et ici.

var randomnumber = Math.floor((Math.random()*10)+1);
var player = GetPlayer();
player.SetVar("randnum",randomnumber);

Saviez-vous que Storyline 360 comporte des variables numériques aléatoires ? Ils sont super faciles à utiliser ! Consultez cette vidéo de démonstration et ces instructions pour en savoir plus.