Have you ever needed to bring variable data values out of Storyline to use in the same user browser session, such as passing data between forms? Then the latest episode of our popular Articulate Storyline 360 Magic Series on Youtube is here to help!
Episode Four of our video tutorial series focuses on the Web Storage API and in particular localStorage, which can be used as a storage mechanism for user variable data generated in Articulate Storyline produced eLearning activities to pass between browser tabs during the user’s session.
To make this work, we need to implement some JavaScript code both within Articulate Storyline itself in order to store our variable values, and also on the receiving webpage. In the tutorial, Chris gives a working example of a web form produced in WordPress, where any value could potentially be loaded straight into a text field on the form itself.
Here is the latest episode to watch right now:
Be sure to subscribe to the Discover eLearning YouTube Channel to be notified of future episodes!
Discover eLearning are specialists in the development of engaging interactive digital learning content using Articulate Storyline 360, having created award-winning public exhibition eLearning work utilising everything that the software has to offer, as well as our entries into weekly eLearning Heroes Challenge ran on the official Articulate website.
You can read the written transcript for this episode of our Storyline Magic Series here:
Hello this Chris from Discover eLearning, and welcome to a new episode of our Storyline Magic Series for Articulate Storyline developers.
In this episode we’re going to be shining a spotlight on localStorage and how it can be used to transfer user variable data between tabs during the same browser session.
Let’s briefly talk about what the Web Storage API does – Web Storage provides a similar function to HTTP Cookies for the storage of data on the client-side. There are two different types of storage available, either Session Storage or Local Storage. As Session Storage will be cleared as soon as the user closes down their browser tab, it is Local Storage that instead gives us the opportunity to store data persistently, as well as providing access to that data to other tabs launched in the same browser as long as both web pages originate from the same domain, even when the browser is closed down and reopened later!
Despite this however, keep in mind that Local Storage cannot be relied upon as a permanent database solution, due to the fact that any stored data would be lost when the user or their device clears the browser cache, as well as the fact that the data cannot be accessed by any other device or alternate web browser that the user may be using.
This is where a solution like our own Variable Magic For Articulate Storyline plugin becomes a huge gamechanger for eLearning developers, because it can be used to effortlessly store and recall variable data from any Articulate Storyline project for any user on any device!
But that’s a topic for another day, so let’s get back to it and see what we need to do to store a variable value into our browser’s local storage.
And this is actually really easy. We of course will be using some JavaScript code to achieve this, so I will create a button and assign a trigger to Execute JavaScript when the button is clicked.
Then we only need to write a single line of code, which is localStorage and then in parenthesis we write the item key or identifier (using quotation marks if we are typing this directly into the snippet), then a comma, followed by item value itself. Finish the line with a semi-colon.
If we now upload this project to our web server and run within the browser we will be able to confirm that the value we set is being stored to localStorage by opening the browser’s developer console. I’m using Chrome myself so I just need to hit F12 on my keyboard and then navigate to the application tab where I can find the values held in localStorage.
Let’s now click the button in my Storyline activity, and as you can see the value has been entered into the table.
We can now make the value stored against our name key something dynamic that is set by the user.
I’ll go ahead and create a text entry field in Storyline which will be stored as a variable with the name TextEntry.
Let’s now return to our code, where we will include a new line in order to make our project variables accessible to our JavaScript code. Then we can replace the value text with player.getVar and in parenthesis we will enter our variable name in quotation marks.
Something else that we could do at this point is account for edge cases where the user may not have the ability to use Session storage in their browser.
To check this we can wrap our code inside of an IF statement which can check whether the Web Storage API is available to the function. If it is then our code will run, or else we can simply display an alert on screen letting the user know that this isn’t going to work for them.
I’ll upload this new published project onto my web server and test the results. And as you can see anything I now type into the box is being saved into localStorage.
So now that we have a working mechanism for storing simple text strings into our browser, let’s now consider how we can use this data in a useful way. Such as the values being passed into an evaluation questionnaire form that the user can submit after their course, with pre-filled data field values pulled from Storyline.
To demonstrate how we can do this I will quickly build up an HTML page which will sit alongside our Storyline project’s story.html file which we can then link with an Open URL trigger in Storyline. I’ve started things off with some basic heading and paragraph text so now I’m ready to build my form, and for now I’m just going to add a single text entry field which will load in my localStorage value. I’ve set both the ID and Name value for the input as vardata.
Now I will write my JavaScript function into the head tag for the page in order to bring in that stored data.
To do this we first need to grab the form field by using a getElementById selector and assigning this to a variable which I’ve called input.
Then we will type input dot value equals localStorage dot get item, and then in parenthesis the key title for the stored value I want to use, which in my case is NAME.
Lastly we need to activate this function when the HTML page itself loads in the browser, and a simple way we can do this is to add an on-load event to our body tag with the name of our function.
With my simple form ready to go I will go back to Storyline and add a new trigger to the same button that I used to save my variable to local storage. So immediately after that has happened I want a new trigger which will open a url, and all I need to type is dot forward slash and then the name of my html file.
This dot forward slash tells storyline that the print.html file is found in the same directory as the story.html file created by Storyline, so regardless of what domain my project is loaded onto, this link will always work.
Let’s publish the project once more, and make sure to include our print.html file in the project’s root folder before uploading to our web server.
Here now is the result loaded in our browser, and if I enter a value into the text entry field and click the button, we can see now that Storyline has loaded up our HTML file in a new browser tab, and the value I entered in the activity as a user is now displaying in the form.
Thank you for joining us for another episode of our Storyline Magic Series. Please be sure to like this video and subscribe to the Discover eLearning YouTube Channel for notifications of future episodes. Bye for now!
