A member of the Articulate Storyline eLearning Development Community recently got in touch with me with a specific technical problem. They needed a way for variable data entered by the user in an Articulate Storyline form to be transferred into a separate stylised HTML form, displayed in a new browser tab, ready for printing.
This process can be managed fairly simply with the use of JavaScript and localStorage. In the end, I never heard back from the person who got in touch after I’d shared our solution. So, in case this may be useful to any other Storyline users out there in the future I will detail the full process for you in this blog post!
Articulate Storyline and localStorage
Articulate Storyline already makes use of localStorage within the user’s browser. This is how for example a Storyline module is able to store user progress information in any project and ask the question whether they wish to resume or start from beginning when they return to the activity at a later date.
The localStorage keys and values that Storyline generates and saves to the browser memory is a scrambled series of encrypted numbers and letters, making it difficult for us to manipulate the values that Storyline automatically generates for the session. Thankfully though, we can go ahead and create our own keys and values with a bit of JavaScript code triggered within the Storyline project.
For my demo, I created a simple text field and a button in SL360. Behind the button we will add an Execute JavaScript trigger to save the value of the text field into localStorage:
if ( window.sessionStorage ) { var player = GetPlayer(); localStorage.setItem("Chris", player.GetVar("TextEntry")); } else { alert('Sorry but your browser does not support this function.'); }
The use of an IF statement is helpful just in case the user is running a really old browser or has security measures in place (set by their organisation) that prevents the localStorage entry, so they are told that it isn’t going to work for them.
With the Key value ‘Chris‘ now set to contain the value of the Text Entry field written by the user in Storyline, we can now focus our attention on the HTML page that will display this data in a new browser tab.
Building an HTML form to handle the variable data
The HTML page containing our form can be styled and presented in any way you wish. The most important thing is that we give each input tag element it’s own unique ID, which is how we will be able to load a value into it automatically when the page has loaded.
At it’s most basic, your form should look something like this:
<form id="myForm"> <label for="vardata">Storyline Variable Shown Here:</label> <input id="vardata" type="text" name="vardata" size="100"> </form>
Now there are three blocks of code that we need to include in our HTML page in order to both grab the key value from localStorage and place it into our form input element when the page has loaded.
First, we must include a reference to the public jQuery library in order to give us the ability to do what we need to do using JavaScript!:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Second, we will write a function which grabs the key value in local storage (with the key name of ‘Chris’) and enter this as the value of our form input element:
function dataLoad() {
var input = document.getElementById("vardata");
input.value = localStorage.getItem("Chris");
}
And finally, we will include a ‘body onLoad’ tag to trigger our function only once the page has loaded, meaning that the form is ready to have data placed into it:
<body onload="dataLoad();">
Opening the HTML page from within the Storyline project
Before we go ahead and upload both the published Storyline project and our HTML form page to our web server, it makes sense to include one additional trigger in our SL360 project to open the HTML form page as soon as the localStorage item has been generated. All we have to do is include an Open URL/File trigger onto our button, at the bottom of the stack, and set the URL to wherever the HTML form page will be held.
And we’re done!
You can take a look at the results in action here! – LINK.
This solution works just as well on modern smartphone devices as well as all of the usual suspect web browsers.
Hey Chris! Awesome walkthrough! I was wondering if you knew if there was a way to pull the text entry data back into storyline? For example, if you wanted to allow text entry fields to retain the variable data from visit to visit.
Hey TJ.
We’re working on something here at Discover eLearning which sounds like it will deliver exactly what you are looking for. So keep watching this site for future updates!
Thanks for sharing this with us
I hope you explain steps in more details also how to pass variables from website to Storyline
Hi Chris,
I like your working example. It sounds really useful, but when I re-create it, the variable doesn’t appear on the form. I wonder if you still have the source file and if so, could you email it to me please?
Many thanks in advance.
Gavin