Forum Discussion
Issue with Web Object Data in Storyline - Need Help Saving Input Values
Hi everyone,
I'm working on a small storyline project that involves some complex calculation, which I've built using JavaScript and HTML. I've embedded these as web objects within Storyline.
The issue I'm facing is that when users enters details into the web object, the data disappears when they navigate away to another slide and then return.
Is there a way to save the input values so that they remain intact when revisiting the slide? Any suggestions on how to achieve this would be greatly appreciated.
Thanks in advance for the help.
My first question would be: does it need to be a web object?
Because what I think is happening is that when the slide is revisited, you're calling a fresh session of the web object, which won't remember the last input.
Could you run the calculation natively in Storyline in a Javascript trigger? And store the outputs from the last time it ran as variables, which are then displayed whenever the timeline starts on revisiting the same slide? And overwritten if the calculation is executed again?
Hi Jonathan_Hill and PhilMayor ,
Thank you for your suggestion!
The reason I haven’t implemented the calculations directly in Storyline is that the results need to generate graphical charts based on the inputs, which as far as I know, isn’t feasible within Storyline alone. That’s why I opted for a web object where I could use HTML/JavaScript for both the calculations and the chart rendering.
Do you know if there’s a way to maintain the session state of the web object or pass data between the web object and Storyline so the input values can be preserved on revisit?
P.S. the output will be hosted on LMS.
Thanks again for your help!
You could save all the values in the web object to local storage and load them back in each time the web object loads.
Or
if you saved all of the values in storyline you could pass them back to the web objectWas thinking that too, but wouldn't there need to be another bit of Javascript in Storyline to resend the data to the web object, automatically on revisit?
I agree with Phil's suggestion. I created a simple chart and imported it into Storyline. The chart is generated based on input values and simultaneously updates the Storyline variables to match those values. When revisiting the slide (starting a new session), the chart retains values from the previous session, allowing users to view the saved chart and input new values to generate an updated one. The Reset button clears all input values, resets the local storage entries, and sets the Storyline variables back to '0'. I'm not entirely sure if this is exactly what you're looking for, but I've attached a short video demonstrating this option.
An option is saving the variables of the WebObject into custom data-attributes of itself. If the attributes are empty its a first time visit, if not use the attributes values.
This link provided some explanation about them.
https://blog.pixelfreestudio.com/how-to-implement-html5-custom-data-attributes/
And on my LinkedIN you can find a post about using them in Storyline.
https://www.dhiwise.com/post/improve-user-experience-with-html-data-attribute
Some great extra info on data-attributes.
To pass variable values from the web object to Storyline, use this code:
window.parent.GetPlayer().SetVar("nexttrigger", nexttrigger);
To pass variables from Storyline to the web object, use this code:
nexttrigger = window.parent.GetPlayer().GetVar("nexttrigger");
Change 'nexttrigger' to your variable.
