Browse Articles

Browse Articles

Storyline 360: Bewährte Methoden und Beispiele für JavaScript

Letzte Aktualisierung des Artikels:

Dieser Artikel gilt für:

Storyline 360

Verwenden Sie JavaScript-Trigger für erweiterte Interaktivität in Storyline 360-Kursen. (Weitere Informationen zu Triggern finden Sie in dieser Benutzeranleitung.)

Bewährte Methoden

Wir bieten zwar keine support für die JavaScript-Codierung, aber diese Tipps helfen:

  • Installieren Sie das Update vom Februar 2024 oder später, um die integrierte Konsole zu verwenden.
  • Ab Januar 2024 können Sie im modernen Player eine Vorschau lokaler JavaScript-Trigger anzeigen. Zum Beispiel JavaScript-Trigger, die den Wert einer Storyline 360 360-Variablen abrufen oder festlegen. Wenn Sie komplexe JavaScript-Trigger verwenden, sollten Sie Ihren Kurs trotzdem auf einem Webserver oder LMS veröffentlichen, damit er ordnungsgemäß getestet werden kann.
  • Ab November 2021 haben wir den JavaScript-Editor in Storyline 360 verbessert. Er bietet jetzt Syntaxhervorhebung und Zeilennummern.
  • Verwenden Sie die Player.GetVar-Methode, um den Wert von Storyline 360 360-Variablen abzurufen, und verwenden Sie die Player.setVar-Methode, um den Wert einer Storyline 360 360-Variablen festzulegen. Mit anderen Worten, Sie können mit Player.GetVar Informationen aus Storyline 360 360-Variablen abrufen und mit Player.SetVar Informationen in Storyline 360 360-Variablen übertragen.
  • Nehmen <script type="text/javascript"> Sie das nicht in Ihre Trigger auf.
  • Jeder JavaScript-Trigger kann bis zu 32.767 Codezeichen enthalten.
  • Sie können JavaScript-Funktionen nicht von einem Trigger aus in einem anderen Trigger aufrufen. Sie können jedoch JavaScript-Funktionen innerhalb desselben Triggers aufrufen.
  • Wenn Sie alle Ihre JavaScript-Funktionen in einer separaten JavaScript-Datei (.js) aufnehmen möchten, platzieren Sie Ihre benutzerdefinierte JavaScript-Datei im Ordner story_content Ihrer veröffentlichten Ausgabe und fügen Sie dann vor dem schließenden Tag die folgende Codezeile zur Datei story.html</head> hinzu.

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

    Rufen Sie die entsprechenden Funktionen in Ihren Storyline 360-Triggern auf. Beachten Sie, dass diese Methode von Articulate nicht offiziell unterstützt wird.
  • Wenn Sie jQuery in Ihren JavaScript-Triggern verwenden, achten Sie darauf, auf die jQuery-Bibliothek zu verweisen.
  • Storyline 360 hat keine dokumentierten Systemvariablen, die Sie in JavaScript verwenden können. Sie können einige entdecken, indem Sie mit der veröffentlichten Ausgabe von Storyline 360 arbeiten oder die Community-Foren durchsuchen. Beachten Sie jedoch, dass sie die Kurswiedergabe beeinträchtigen können und möglicherweise nicht in allen Versionen von Storyline 360 funktionieren.
  • Allgemeine Informationen zur JavaScript-Codierung finden Sie auf w3schools.com oder Codecademy.

Beispiele

Nachfolgend finden Sie Beispiele für gängige JavaScript-Trigger. Schauen Sie sich auch unsere JavaScript-Herausforderung an und schauen Sie sich die Zusammenfassung von Dutzenden von Demos aus unserer wunderbaren Community von E-Learning-Entwicklern an!

Ändern Sie den Wert einer Storyline 360 360-Variablen
In diesem Beispiel wird das aktuelle Datum einer Storyline 360 360-Variablen zugewiesen. Videodemonstration.

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);

Popup-Nachricht (nur Text)

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

Popup-Nachricht (Text und Wert einer Storyline 360 360-Variablen)

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

Aktuelle Folie drucken (nur HTML5)

window.print();

Der einfache Code oben druckt die aktuelle Folie und den Storyline 360-Player. Wenn Sie nur den Folieninhalt drucken möchten, nicht den Storyline 360-Player, lesen Sie diesen JavaScript-Code von Brian Batt. Beachten Sie, dass diese Methode nur mit dem klassischen Spielerstil funktioniert.

Abschlusszertifikat ausdrucken

Sehen Sie sich diese Demo und ein herunterladbares Beispiel von Tracy Carroll an, in dem sie zwei JavaScript-Trigger verwendet, um das aktuelle Datum abzurufen, den Namen des Lernenden zu erfassen und ein Zertifikat auszudrucken.

Neue E-Mail-Nachricht starten

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');

Automatisches Scrollen der Webseite zu einem bestimmten Ort

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

Automatisches Scrollen der Webseite relativ zum aktuellen Standort

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

HTML-Hintergrundfarbe ändern (nur Classic Player)

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

HTML-Hintergrundbild ändern (nur Classic Player)
Platzieren Sie eine Kopie der Datei image.jpg im Stammordner Ihrer veröffentlichten Ausgabe. Quelle: Alexandros Anoyatis

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

Generieren Sie eine Zufallszahl
In diesem Beispiel wird eine Zufallszahl zwischen 1 und 10 generiert. Videovorführungen hier und hier.

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

Wussten Sie, dass Storyline 360 zufällige Zahlenvariablen hat? Sie sind super einfach zu bedienen! Schauen Sie sich diese Videodemo und diese Anweisungen an, um mehr zu erfahren.