• Site Logo, Articulate

Recherche d'articles

Sélectionnez un produit

Répertoire d'assistance de null

Explorez tous les articles de null (Last Updated )

Aucun article trouvé.

Résultats de recherche

Aucun article trouvé.

Storyline 360 : conseils et exemples relatifs à JavaScript

Article mis à jour pour la dernière fois le 16 janv. 2026

Ajoutez une interactivité avancée à vos modules Storyline 360 grâce à des déclencheurs JavaScript qui vont au-delà du quotidien pour offrir aux apprenants des expériences plus personnalisées.

Découvrez les astuces

Nous ne fournissons pas de support technique direct pour le codage JavaScript, mais les conseils suivants peuvent vous aider à démarrer :

  • Ne l'incluez pas <script type="text/javascript"> dans vos déclencheurs.
  • Notez que chaque déclencheur JavaScript peut comporter jusqu'à 32 767 personnages de code.
  • Tirez parti de la mise en évidence de la syntaxe et des numéros de ligne dans les fonctionnalités de l'éditeur JavaScript.
  • Résolvez les problèmes liés à votre code à l'aide de la console intégrée.
  • Si vous utilisez jQuery dans vos déclencheurs JavaScript, faites référence à la bibliothèque jQuery.
  • Obtenez des informations générales sur le codage JavaScript sur w3schools.com ou Codecademy.
  • Utilisez l'API JavaScript avancée pour contrôler précisément les propriétés des objets et plus encore.
  • 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é. Toutefois, ils peuvent interférer avec la lecture des modules et ne pas fonctionner dans toutes les versions de Storyline 360.
  • Prévisualisez les déclencheurs JavaScript locaux dans le lecteur moderne, par exemple les 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.
  • 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.
  • Utilisez le déclencheur qui appelle la fonction. Les fonctions JavaScript ne s'exécutent que dans le déclencheur à partir duquel vous les appelez, et non sur plusieurs déclencheurs.
  • Pour 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>

    Vous pouvez appeler les fonctions appropriées dans vos déclencheurs Storyline 360. Notez que nous ne prenons pas en charge cette méthode.

Trouvez des exemples

Vous vous demandez ce que vous pourriez faire avec JavaScript ? Notre défi JavaScript et notre résumé proposent des dizaines de démos réalisées par notre merveilleuse communauté de développeurs d'apprentissage en ligne. Poursuivez votre lecture pour découvrir des exemples de déclencheurs JavaScript courants, et même quelques démos !

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") + ".");

Certificat d'achèvement de l'impression

Découvrez cette démo et cet exemple téléchargeable de Tracy Carroll. Tracy 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');

Barre de défilement horizontale

Voici une démo et un exemple téléchargeable par Asbjorn Reinhold. Asbjorn définit un déclencheur JavaScript pour connecter une variable de curseur à la position d'un objet, créant ainsi l'effet d'une barre de défilement horizontale.

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

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 ? Consultez cette vidéo de démonstration et ces instructions pour en savoir plus.

Rendre les interactions JavaScript plus accessibles

Lorsque vous créez des éléments interactifs utilisant JavaScript, n'oubliez pas l'accessibilité ! Gardez ces conseils à l'esprit pour rendre vos interactions plus inclusives pour tous les apprenants :

  • Améliorez avec JavaScript, mais ne vous fiez pas à lui. Commencez par les déclencheurs et fonctionnalités intégrés à Storyline 360, qui sont conçus pour être accessibles et gèrent automatiquement la plupart des interactions. Utilisez JavaScript uniquement lorsque vous avez besoin de fonctionnalités supplémentaires, telles que des animations personnalisées ou des fenêtres contextuelles. Votre module doit également fonctionner sans JavaScript, afin que tous les apprenants puissent y participer.
  • Maintenez des indicateurs de focalisation clairs. Aidez les apprenants à rester orientés tout au long de leur parcours dans votre module. Modifiez le focus de manière appropriée lorsque le contenu change, utilisez l'aria-hiddenattribut pour gérer la visibilité des technologies d'assistance et maintenez les indicateurs de focus visibles (2.4.3 Ordre de focalisation et 2.4.7 Focus visible).
  • Utilisez des contrôles standard avec un étiquetage clair. Choisissez des boutons et des liens standard pour une meilleure accessibilité. Pour les éléments personnalisés, ajoutez des étiquettes ou des rôles ARIA significatifs et assurez-vous que les apprenants peuvent les parcourir à l'aide d'un clavier (4.1.2 Nom, rôle, valeur et clavier 2.1.1).
  • Respectez vos préférences. Laissez les apprenants garder le contrôle. Utilisez les régions dynamiques pour les modifications importantes, respectez les paramètres de langue et de mouvement réduits, évitez les mouvements automatiques ou le son, et laissez les apprenants zoomer ou redimensionner l'interface (2.3.3 Animation issue des interactions, 1.4.2 Contrôle audio et 2.2.2 Pause, arrêt, masquage).
  • Testez avec des technologies d'assistance. Utilisez les lecteurs d'écran, la navigation au clavier et les fonctionnalités de zoom pour tester votre module. Vérifiez que les apprenants peuvent suivre les mises à jour et disposent de suffisamment de temps pour répondre ou explorer le contenu (2.2.1 Timing ajustable).

Conseil de pro : essayez d'atteindre vos objectifs d'interactivité avec du HTML standard avant d'ajouter des attributs ARIA.