Change the status of CheckBox on restart based on localStorage

Mar 29, 2024

Hello!

There is a task to make sure that the progress between sessions is saved in localStorage. Specifically, the CheckBox states (Normal/Selected).

1. Using JavaScript, I made it so that when clicking on the CheckBox, information about its status was added to localStorage (true) and to the global variable Storyline (true).

2. When restarting the browser and opening the slide in a new session, JavaScript checks for localStorage, and if there is = true, then the global variable Storyline also sets = true.

3. Next, a trigger is created to change the state to "Selected" if the global variable Storyline = true, but this does not happen.

Please tell me, what could be the matter? As I understand it, it is not provided to change the states when running through pure JavaScript.

Thanks.

LocalStorage.story

1 Reply

Sam Hill
Hero

20 days ago04/09/24 at 5:05 am (UTC)

Hi there,

if you want to update variables in storyline through JavaScript, you must do it like this:

var red = localStorage.getItem("Red")
var green = localStorage.getItem("Green")
var blue = localStorage.getItem("Blue");
// get a reference to the player
var $player = GetPlayer();
// set the storyline variable
$player.SetVar('globalRed', red+"" === "true");
$player.SetVar('globalGreen', green+"" === "true");
$player.SetVar('globalBlue', blue+"" === "true");

You can then use a trigger in Storyline to update whatever you need:

I'm attaching a working example of how you could do this with your file. I'm using the the variables in the Storyline to provide the initial trigger only. The rest of the functions just work on the localStorage data and the state of the checkboxes.

LocalStoragedemo.story