• Site Logo, Articulate

Artikelsuche

Wählen Sie ein Produkt aus

Supportverzeichnis von null

Entdecken Sie alle Artikel von null (Last Updated )

Keine Artikel gefunden.

Suchergebnisse

Keine Artikel gefunden.

Storyline 360: JavaScript-Tipps und Beispiele

Artikel zuletzt aktualisiert am 16.01.2026

Erweitern Sie Ihre Storyline 360-Kurse um erweiterte Interaktivität mit JavaScript-Triggern, die über das Alltägliche hinausgehen und den Lernenden individuellere Erlebnisse bieten.

Entdecken Sie die Tipps

Wir bieten keinen direkten Support für die JavaScript-Codierung, aber die folgenden Tipps können Ihnen den Einstieg erleichtern:

  • Nehmen Sie sie nicht <script type="text/javascript"> in Ihre Trigger auf.
  • Beachten Sie, dass jeder JavaScript-Trigger bis zu 32.767 Codezeichen enthalten kann.
  • Nutzen Sie die Syntaxhervorhebung und die Zeilennummerierung in den Funktionen des JavaScript-Editors.
  • Beheben Sie Fehler in Ihrem Code mit der integrierten Konsole.
  • Wenn Sie jQuery in Ihren JavaScript-Triggern verwenden, verweisen Sie auf die jQuery-Bibliothek.
  • Allgemeine Informationen zur JavaScript-Codierung erhalten Sie auf w3schools.com oder Codecademy.
  • Verwenden Sie die erweiterte JavaScript-API, um präzise Kontrolle über Objekteigenschaften und mehr zu erlangen.
  • 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. Sie könnten jedoch die Kurswiedergabe beeinträchtigen und funktionieren möglicherweise nicht in allen Versionen von Storyline 360.
  • Zeigen Sie eine Vorschau lokaler JavaScript-Trigger im modernen Player an — zum Beispiel JavaScript-Trigger, die den Wert einer Storyline 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.
  • Verwenden Sie die Player.GetVar-Methode, um den Wert von Storyline 360-Variablen abzurufen, und verwenden Sie die Player.setVar-Methode, um den Wert einer Storyline 360-Variablen festzulegen. Mit anderen Worten, Sie können mit Player.GetVar Informationen aus Storyline 360-Variablen abrufen und mit Player.SetVar Informationen in Storyline 360-Variablen übertragen.
  • Verwenden Sie den Trigger, der die Funktion aufruft. JavaScript-Funktionen werden nur innerhalb des Triggers ausgeführt, von dem aus Sie sie aufrufen, nicht über mehrere Trigger hinweg.
  • Um all Ihre JavaScript-Funktionen in eine separate JavaScript-Datei (.js) aufzunehmen, 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>

    Sie können die entsprechenden Funktionen in Ihren Storyline 360-Triggern aufrufen. Beachten Sie, dass wir diese Methode nicht support.

Finden Sie Beispiele

Sie fragen sich, was Sie mit JavaScript machen könnten? Unsere JavaScript-Herausforderung und Zusammenfassung bieten Dutzende von Demos aus unserer wunderbaren Community von E-Learning-Entwicklern. Lesen Sie weiter, um Beispiele für einige gängige JavaScript-Trigger zu finden — und sogar ein paar Demos!

Ändern Sie den Wert einer Storyline 360-Variablen
In diesem Beispiel wird das aktuelle Datum einer Storyline 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-Variablen)

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

Abschlusszertifikat drucken

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

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

Horizontale Bildlaufleiste

Hier ist eine Demo und ein herunterladbares Beispiel von Asbjorn Reinhold. Asbjorn setzt einen JavaScript-Trigger, um eine Slider-Variable mit der Position eines Objekts zu verbinden, wodurch der Effekt einer horizontalen Scrollleiste entsteht.

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

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? Schauen Sie sich diese Videodemo und diese Anweisungen an, um mehr zu erfahren.

Machen Sie JavaScript-Interaktionen zugänglicher

Vergessen Sie bei der Erstellung interaktiver Elemente, die JavaScript verwenden, nicht die Barrierefreiheit! Behalte diese Tipps im Hinterkopf, um deine Interaktionen für alle Lernenden inklusiver zu gestalten:

  • Verbessern Sie es mit JavaScript, aber verlassen Sie sich nicht darauf. Beginnen Sie mit den integrierten Triggern und Funktionen in Storyline 360, die auf Barrierefreiheit ausgelegt sind und die meisten Interaktionen automatisch verarbeiten. Verwenden Sie JavaScript nur, wenn Sie zusätzliche Funktionen benötigen, z. B. benutzerdefinierte Animationen oder Popups. Ihr Kurs sollte auch ohne JavaScript funktionieren, damit alle Lernenden teilnehmen können.
  • Sorgen Sie für klare Fokusindikatoren. Helfen Sie den Lernenden, sich in Ihrem Kurs zu orientieren. Verlagern Sie den Fokus entsprechend, wenn sich der Inhalt ändert, verwenden Sie das aria-hidden Attribut, um die Sichtbarkeit unterstützender Technologien zu verwalten, und sorgen Sie dafür, dass die Fokusindikatoren sichtbar bleiben (2.4.3 Fokusreihenfolge und 2.4.7 Fokus sichtbar).
  • Verwenden Sie Standardsteuerungen mit klarer Kennzeichnung. Wählen Sie Standardschaltflächen und Links für eine bessere Zugänglichkeit. Fügen Sie für benutzerdefinierte Elemente aussagekräftige ARIA-Bezeichnungen oder -Rollen hinzu und stellen Sie sicher, dass die Lernenden mit einer Tastatur darin navigieren können (4.1.2 Name, Rolle, Wert und 2.1.1 Tastatur).
  • Respektieren Sie Ihre Präferenzen. Lassen Sie die Lernenden die Kontrolle behalten. Verwenden Sie Live-Regionen für wichtige Änderungen, respektieren Sie die Einstellungen für Bewegungseinschränkungen und Sprache, vermeiden Sie automatische Bewegungen oder Audiosignale und lassen Sie die Lernenden die Benutzeroberfläche zoomen oder skalieren (2.3.3 Animation aus Interaktionen, 1.4.2 Audiosteuerung und 2.2.2 Pause, Stopp, Ausblenden).
  • Testen Sie mit unterstützenden Technologien. Verwenden Sie Screenreader, Tastaturnavigation und Zoomfunktionen, um Ihren Kurs zu testen. Vergewissern Sie sich, dass die Lernenden Updates verfolgen können und genügend Zeit haben, um zu antworten oder Inhalte zu erkunden (2.2.1 Zeitlich einstellbar).

Profi-Tipp: Versuchen Sie zunächst, Ihre Interaktivitätsziele mit Standard-HTML zu erreichen, bevor Sie ARIA-Attribute hinzufügen.