Forum Discussion

Anne-LaureTh636's avatar
Anne-LaureTh636
Community Member
2 years ago

Using a JS command to jump to a specific slide after a JS request.

Hello everyone and thank you in advance to those who will take the time to read and help me.

I'm looking to use a piece of javascript code that would allow me to create a redirect from my slide 1.1 to my slide 1.2 without using Storyline triggers. The idea is to automate a redirect via JS.

My storyline is composed as follows:
In slide 1.1, I make a JavaScript request to fetch the language used by the user on my LMS.

In slide 1.2 I have my content in FR
In slide 1.3 I have my content in EN
In slide 1.4 I have my content in ES

I would like a javascript code to be integrated into storyline that will redirect the user to the corresponding slide depending on the response to the request in 1.1.

Example: I launch my storyline in 1.1 - the response to the request is ES. How do I set up the redirection?

storyline 360
  • SamHill's avatar
    SamHill
    Super Hero
    2 years ago

    Hi Anne-Laure, 

    I've looked into using JavaScript to navigate to a slide in the past, and there isn't an API exposed for this. The best solution I came up with was using JavaScript to get my value, in your case language. Then using that value, set a variable value in Storyline. You can then have a trigger in Storyline that jumps to a particular Scene/Slide when the variable changes, and based on the value.

    For example:

    The following JS could run on a button click, or on slide load. Whatever trigger is needed

    getLanguage = function()
    {
       // magic happens that gets the language from the LMS
      return API.LMSGetValue("cmi.student_preference.language");
    }
    let JSuserLang = getLanguage(); // returns "en", "es-ES", "fr";
    // get the Storyline Player API
    const SLPlayer = GetPlayer();
    // set a Storyline variable named 'userLang' to the value JSuserLang
    SLPlayer.SetVar('userLang', JSuserLang);

    Then, within Storyline you have a trigger:

    Jump to slide 1.2 when variable changes "userLang" 
     if "userLang" === "fr"

    Jump to slide 1.3 when variable changes "userLang" 
     if "userLang" === "en"

    Jump to slide 1.4 when variable changes "userLang" 
     if "userLang" === "es-ES"

Related Content