Browse Articles

Browse Articles

Storyline 3: Best Practices und Beispiele für JavaScript

Letzte Aktualisierung des Artikels:

Dieser Artikel gilt für:

Storyline 3

Verwenden Sie JavaScript-Trigger, um erweiterte Interaktivität in Storyline 3 Kursen zu erstellen. (Weitere Informationen zu Triggern finden Sie in dieser Bedienungsanleitung.)

Best Practices

Obwohl wir keine support für JavaScript-Codierung bieten, helfen diese Tipps:

  • Verwenden Sie die player.GetVar Methode, um den Wert von Storyline Variablen abzurufen, und verwenden Sie die player.SetVar Methode, um den Wert einer Storyline-Variablen festzulegen. Mit anderen Worten, Sie können Informationen aus Storyline Variablen mit abrufen player.GetVar und Informationen in Storyline-Variablen mit player.SetVar.
  • Fügen Sie nicht <script type="text/javascript"> in Ihren Code ein.
  • Jeder JavaScript-Trigger kann bis zu 32.767 Zeichen Code enthalten.
  • Sie können JavaScript-Funktionen nicht von einem Trigger in einem anderen Trigger aufrufen. Sie können jedoch JavaScript-Funktionen innerhalb desselben Triggers aufrufen.
  • Wenn Sie alle Ihre JavaScript-Funktionen in eine separate JavaScript-Datei (.js) einfügen möchten, platzieren Sie Ihre benutzerdefinierte JavaScript-Datei im Ordner story_content Ihrer veröffentlichten Ausgabe und fügen Sie die folgende Codezeile der Datei story.html vor dem schließenden Tag hinzu </head>.

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

    Rufen Sie die entsprechenden Funktionen in Ihren Storyline Auslösern auf. Beachten Sie, dass diese Methode von Articulate nicht offiziell unterstützt wird.
  • Wenn Sie jQuery in Ihren JavaScript-Triggern verwenden, verweisen Sie darauf, auf die jQuery-Bibliothekzu verweisen.
  • Storyline 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 arbeiten oder in den Community-Foren durchsuchen. Beachten Sie nur, dass sie die KursPlayback gabe beeinträchtigen könnten und sie möglicherweise nicht in allen Versionen von Storyline funktionieren.
  • Allgemeine Informationen zur JavaScript-Codierung finden Sie unter w3schools.com oder Codecademy .

Beispiele:

Hier finden Sie Beispiele für gängige JavaScript-Trigger. Und schauen Sie sich unsere JavaScript-Herausforderung an und holen Sie sich Dutzende von Demos aus unserer wunderbaren Community von E-Learning-Entwicklern zusammen!

Ändern des Werts einer Storyline Variablen
In diesem Beispiel wird das aktuelle Datum einer Storyline-Variablen zugewiesen. Video-Demonstration.

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 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 Player. Wenn Sie nur den Folie inhalt drucken möchten, nicht den Storyline Player, lesen Sie diesen JavaScript-Code von Brian Batt .

Fertigstellungszertifikat drucken

Sehen Sie sich diese Demo und herunterladbare Beispiel von Tracy Carroll an, wo sie zwei JavaScript-Trigger verwendet, um das aktuelle Datum zu erhalten, den Namen des Teilnehmers zu erfassen und ein Zertifikat zu drucken.

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

Automatische BildlaufWebseite relativ zum aktuellen Standort

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

HTML-Hintergrundfarbe ändern

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

HTML-Hintergrundbild ändern
Platzieren Sie eine Kopie der Datei image.jpg im Stammordner der veröffentlichten Ausgabe. Kredit: Alexandros Anoyatis

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

Generieren einer Zufallszahl
In diesem Beispiel wird eine Zufallszahl zwischen 1 und 10. Video-Demonstrationen hier und hier .

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