• Site Logo, Articulate

Door artikelen bladeren

Selecteer een Product

Supportdirectory van null

Bekijk alle artikelen van null. (Last Updated )

Geen artikelen gevonden.

Zoekresultaten

Geen artikelen gevonden.

Storyline 360: JavaScript-tips en -voorbeelden

Artikel laatst bijgewerkt 16 jan 2026

Voeg geavanceerde interactiviteit toe aan je Storyline 360-cursussen met JavaScript-triggers die verder gaan dan het alledaagse en bieden meer aangepaste cursistervaringen.

Tips ontdekken

We bieden geen directe ondersteuning voor JavaScript-codering, maar de volgende tips kunnen u op weg helpen:

  • Vermeld dit niet <script type="text/javascript"> in je triggers.
  • Merk op dat elke JavaScript-trigger maximaal 32.767 tekens code kan bevatten.
  • Maak gebruik van syntaxisaccentuering en regelnummers in de JavaScript-editorfuncties.
  • Los problemen met je code op met de ingebouwde console.
  • Als u jQuery gebruikt in uw JavaScript-triggers, raadpleeg dan de jQuery-bibliotheek.
  • Algemene informatie over JavaScript-codering vindt u op w3schools.com of Codecademy.
  • Gebruik de geavanceerde JavaScript-API om nauwkeurige controle te krijgen over objecteigenschappen en meer.
  • Storyline 360 bevat geen gedocumenteerde systeemvariabelen die je in JavaScript kunt gebruiken. Je kunt er een paar ontdekken door te werken met de gepubliceerde output van Storyline 360 of door te zoeken in de communityforums. Ze kunnen echter interfereren met het afspelen van de cursus en ze werken mogelijk niet in alle versies van Storyline 360.
  • Bekijk een voorvertoning van lokale JavaScript-triggers in de moderne player, bijvoorbeeld JavaScript-triggers waarmee de waarde van een Storyline 360-variabele wordt opgehaald of ingesteld. Als je complexe JavaScript-triggers gebruikt, wil je je cursus nog steeds publiceren op een webserver of LMS zodat je ze goed kunt testen.
  • Gebruik de methode Player.getVar om de waarde van Storyline 360-variabelen op te halen en gebruik de methode Player.setVar om de waarde van een Storyline 360-variabele in te stellen. Met andere woorden, je kunt informatie uit Storyline 360-variabelen halen met Player.getVar en informatie naar Storyline 360-variabelen pushen met Player.setVar.
  • Gebruik de trigger die de functie aanroept. JavaScript-functies worden alleen uitgevoerd binnen de trigger van waaruit u ze aanroept, niet via meerdere triggers.
  • Om al uw JavaScript-functies in een apart JavaScript-bestand (.js) op te nemen, plaatst u uw aangepaste JavaScript-bestand in de story-map van uw gepubliceerde uitvoer en voegt u de volgende coderegel toe aan het bestand story.html voordat de tag wordt gesloten</head>.

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

    Je kunt de juiste functies aanroepen in je Storyline 360-triggers. Merk op dat we deze methode niet ondersteunen.

Voorbeelden zoeken

Benieuwd wat je zou kunnen doen met JavaScript? Onze JavaScript-uitdaging en samenvatting biedt tientallen demo's van onze geweldige community van e-learningontwikkelaars. Lees verder om voorbeelden te vinden van enkele veelgebruikte JavaScript-triggers — en zelfs enkele demo's!

De waarde van een Storyline
360-variabele wijzigen In dit voorbeeld wordt de huidige datum toegewezen aan een Storyline 360-variabele. Videodemonstratie.

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

Pop-upbericht (alleen tekst)

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

Pop-upbericht (tekst en waarde van een Storyline 360-variabele)

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

Certificaat voor voltooiing afdrukken

Bekijk deze demo en het downloadbare voorbeeld van Tracy Carroll. Tracy gebruikt twee JavaScript-triggers om de huidige datum op te halen, de naam van de leerling vast te leggen en een certificaat af te drukken.

Een nieuw e-mailbericht 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 schuifbalk

Hier is een demo en een downloadbaar voorbeeld van Asbjorn Reinhold. Asbjorn stelt een JavaScript-trigger in om een schuifvariabele aan de positie van een object te koppelen, waardoor het effect van een horizontale schuifbalk ontstaat.

De webpagina automatisch naar een specifieke locatie scrollen

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

Automatisch scrollen op de webpagina ten opzichte van de huidige locatie

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

Een willekeurig getal genereren
Dit voorbeeld genereert een willekeurig getal tussen 1 en 10. Videodemonstraties hier en hier.

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

Wist je dat Storyline 360 willekeurige getalsvariabelen heeft? Bekijk deze videodemo en deze instructies voor meer informatie.

JavaScript-interacties toegankelijker maken

Vergeet bij het maken van interactieve elementen die JavaScript gebruiken de toegankelijkheid niet! Houd deze tips in gedachten om je interacties inclusiever te maken voor alle cursisten:

  • Verbeter met JavaScript, maar vertrouw er niet op. Begin met de ingebouwde triggers en functies in Storyline 360, die zijn ontworpen voor toegankelijkheid en de meeste interacties automatisch afhandelen. Gebruik JavaScript alleen als je extra functionaliteit nodig hebt, zoals aangepaste animaties of pop-ups. Je cursus zou ook zonder JavaScript moeten werken, zodat alle cursisten kunnen deelnemen.
  • Zorg voor duidelijke focusindicatoren. Help cursisten om zich te blijven oriënteren terwijl ze door je cursus navigeren. Verleg de focus op de juiste manier wanneer de inhoud verandert, gebruik het aria-hidden kenmerk om de zichtbaarheid van ondersteunende technologieën te beheren en om de focusindicatoren zichtbaar te houden (2.4.3 Focus Order en 2.4.7 Focus Visible).
  • Gebruik standaardbesturingselementen met duidelijke labels. Kies standaardknoppen en links voor betere toegankelijkheid. Voor aangepaste elementen kunt u betekenisvolle ARIA-labels of -rollen toevoegen en ervoor zorgen dat cursisten deze kunnen navigeren met behulp van een toetsenbord (4.1.2 Naam, Rol, Waarde en 2.1.1 Toetsenbord).
  • Respecteer voorkeuren. Laat cursisten de touwtjes in handen houden. Gebruik live-gebieden voor belangrijke wijzigingen, respecteer minder beweging en taalinstellingen, vermijd automatische bewegingen of audio en laat cursisten zoomen of schalen op de interface (2.3.3 Animatie uit interacties, 1.4.2 Audio Control en 2.2.2 Pauzeren, Stoppen, Verbergen).
  • Test met ondersteunende technologieën. Gebruik schermlezers, toetsenbordnavigatie en zoomfuncties om je cursus te testen. Controleer nogmaals of cursisten updates kunnen volgen en voldoende tijd hebben om te reageren of inhoud te bekijken (2.2.1 Timing Adjustable).

Pro-tip: Probeer eerst je interactiviteitsdoelen te bereiken met standaard HTML voordat je ARIA-attributen toevoegt.