Browse Articles

Browse Articles

Storyline 3 : Bonnes pratiques et exemples JavaScript

Dernière mise à jour de l’article le

Cet article s'applique à :

Storyline 3

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

Meilleures pratiques

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

  • Utilisez la player.GetVar méthode pour récupérer la valeur des variables Storyline et utilisez la player.SetVar méthode pour définir la valeur d'une variable Storyline. En d'autres termes, vous pouvez extraire des informations des variables Storyline avec player.GetVar et pousser des informations dans des variables Storyline avec player.SetVar.
  • Ne pas inclure <script type="text/javascript"> dans votre code.
  • Chaque déclencheur JavaScript peut avoir jusqu'à 32 767 personnages de code.
  • Vous ne pouvez pas appeler des fonctions JavaScript à partir d'un déclencheur dans un autre déclencheur. 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 distinct (.js), 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. 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 n'a pas de variables système documentées que vous pouvez utiliser en JavaScript. Vous pouvez en découvrir certains en travaillant avec la sortie publiée de Storyline ou en recherchant les forums de la communauté. Sachez simplement qu'ils pourraient interférer avec la lecture de module, et qu'ils pourraient ne pas fonctionner dans toutes les versions de Storyline.
  • Pour des informations générales sur le codage JavaScript, consultez w3schools.com ou Codecademy .

Exemples

Trouvez des exemples de déclencheurs JavaScript courants ci-dessous. Et n'oubliez pas de consulter notre défi JavaScript et de récapituler pour des dizaines de démonstrations de notre merveilleuse communauté de développeurs d'e-learning !

Modifier la valeur d'une variable Storyline
Cet exemple montre comment affecter la date actuelle à une variable Storyline. 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)

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. Si vous voulez imprimer uniquement le contenu de la diapositive, pas le lecteur de storyline, consultez ce code JavaScript de Brian Batt .

Imprimer le certificat d'achèvement

Voir 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

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

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

Modifier l'image d'arrière-plan HTML
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);