Storyline 360 : bonnes pratiques et exemples JavaScript

Dernière mise à jour de l’article le

Cet article s'applique à :

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

Meilleures pratiques

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

  • Dans la mise à jour de 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 à partir des variables Storyline 360 avec Player.GetVar et envoyer des informations dans les variables Storyline 360 avec Player.SetVar.
  • Ne pas inclure<script type="text/javascript"> dans vos déclencheurs.
  • Chaque déclencheur JavaScript peut contenir jusqu'à 32 767 personnages de code.
  • Vous ne pouvez pas appeler des fonctions JavaScript à partir d'un déclencheur dans un autre déclencheur. Toutefois, 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 de fermeture</head>.

    <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 à référencer la bibliothèque jQuery.
  • Storyline 360 ne contient pas de variables système documentées que vous pouvez utiliser en JavaScript. Vous pouvez en découvrir quelques-uns en utilisant la sortie publiée de Storyline 360 ou en effectuant une recherche sur les forums de la communauté. Sachez simplement qu'ils peuvent interférer avec la lecture du module et qu'ils peuvent ne pas fonctionner dans toutes les versions de Storyline 360.
  • Pour obtenir 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ésumer les dizaines de démos de notre merveilleuse communauté de développeurs de e-learning !

Modifier la valeur d'une variable Storyline 360
Cet exemple montre comment attribuer 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 actuelle (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 de fin d'impression

Découvrez cette démo et l'exemple téléchargeable de Tracy Carroll où elle utilise deux déclencheurs JavaScript pour obtenir la date actuelle, capturer 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

Défilement automatique de la page Web 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. Des 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 possède des variables nombres aléatoires ? Ils sont super faciles à utiliser ! Consultez cette vidéo de démonstration et ces instructions pour en savoir plus.