How to share variables between two different Storyline modules (JavaScript & Cookies)

Important: This is not a method to share variables between modules on an LMS. This method is using cookies, and is therefore device specific. Two different users, using the same device will have the same shared variables. With some JavaScript knowledge, you could program around that though. See the note at the end of this post.

--------------------------------------------------------------------------------------------------------------------------

Copy this into your Master Slide so that the script is available throughout your project.

window.rebusmedia = {
    StorylinePlayer: GetPlayer(),
    getSLCookie: function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) {
                return c.substring(nameEQ.length, c.length);
            }
        }
        return null;
    },
    setSLCookie: function(name, value, days) {
        days = (days ? days : 999);
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=None; Secure";
    },
    getSharerdVar: function(sharedVarName) {
        // try and get value from a stored cookie 
        const val = this.getSLCookie(sharedVarName);
        // update the value in Storyline 
        if (val !== null) this.StorylinePlayer.SetVar(sharedVarName, val);
    },
    setSharerdVar: function(sharedVarName) {
        // get value from Storyline 
        const value = this.StorylinePlayer.GetVar(sharedVarName);
        // set the value in a cookie 
        this.setSLCookie(sharedVarName, value);
    }
}

You can then call the following JavaScript function to Get and Set the shared variables between the two Storyline modules (on the same domain):

window.rebusmedia.setSharerdVar("UserName");

This will execute JavaScript that will then retrieve the value of a Storyline variable called UserName from the current Storyline module. So, as an example, you have an input box for the users name. You might then have a trigger in Storyline that executes the above JavaScript, like this:

You could use the following JavaScript:

window.rebusmedia.getSharerdVar("UserName");

To try and and retrieve an existing "UserName" and determine whether to show the input box for the user. The getSharerdVar function will only populate the Storyline variable, if the value is not null. So, if it is the first time the user enters the module, the "UserName" variable would remain empty, as their is not a cookie storing the data, therefore, we could show the user name input box, after the script has executed, but if "UserName" is no longer empty, we can assume an existing UserName cookie value has been located and populated the one in storyline.

This is one example of usage.

Three important points:

1. The content has to be on the same domain, as the cookies are domain specific
2. You must ensure the On restart player property is set to Always resume
3. The pages must be run via an internet/intranet as setting cookies does not work on your local file system, for example your C: drive.

Advanced JavaScript for multiple user login

Multiple users solution: If you do have multiple users using a shared device, it would be possible to program a solution that stores unique data for each user. You would need the user to enter some unique data that identifies them, for example an email address. This email address could then be used in combination with the cookie/variable name to associate data with the users. For example, the cookie name could be the users email address, and all shared data could be stored in JSON format within the cookie, for example:

// The email address has been stripped of "@" and "." and replaced with "_" 
shaun_smith_gmail_com : { 'audio' : 'off', 'captions' : 'on', 'location' : 'scene 1 slide 6' }

Each time a user, accesses the module, they would need to enter the same details, for example:

shaun.smith@gmail.com

The email address is then processed and characters other than A-Z are removed "shaun_smith_gmail_com", and a cookie match is then searched for. If found, the JSON data is then process, and the properties "audio", "captions" and "location" are then used to set the equivalent variables you have set-up in Storyline. The variables names could be anything you want. "audio", "captions" and "location" are just examples.

// cookie retrieve for user, as a string 
const data = window.rebusmedia.getSLCookie("shaun_smith_gmail_com")
// Returned data example {"audio":"off","captions":"on","location":"scene1slide6"} 
// Convert cookies to JSON and set Storyline variables 
const slvars = JSON.parse(data);
// Get the Storyline Player instance 
const player = GetPlayer();
// Loop through cookie data and set Storyline variable 
for (let key in slvars) {
    if (settings.hasOwnProperty(key)) {
        player.SetVar(`${key}`, `${slvars[key]}`);
    }
}