Locking questions in Articulate Storyline

I read a forum post recently where another eLearning professional wanted some ideas to help them create a Question of the Day quiz in Articulate Storyline.

Using an unfinished digital advent calendar I started building last year, I came up with my own take on this and pulled a quick demo together to show one possible solution.

In the demo you’ll see seven buttons. One button for each date in the range 12th-18th Feb 2019. Each button links to a multiple-choice question slide that can’t be viewed until the date on the button has been reached.

Storyline Buttons

Storyline Story View

To help keep track of whether the dates associated with each button had been reached I created seven True/False variables, all with an initial value of false. I named the variables ‘date01’, ‘date02’, date03 and so on.

Storyline 360 Variable Manager

The date locking itself is achieved using JavaScript, with each button having an Execute JavaScript trigger attached to it.

Storyline Execute JavaScript Panel

Overview of how to lock questions in Storyline using JavaScript

When one of the buttons is clicked the JavaScript is triggered. Storyline will run through the code to check if the date specified has been reached. If it has, the associated variable is set to true, if the date is still in the future the date variable retains its initial value of false.

Each button also has two further triggers. The first is set to jump to a specific MCQ slide if the date variable has a value of true.

Storyline 360 Triggers Panel

If the variable has a value of false, the final trigger opens a layer telling the user that they’re too early.

Too Early Layer Storyline

Reusing the JavaScript code in your own Storyline projects

If you’re planning on reusing this code, you’ll need to know the following.

The date is specified on Line 3 of the JavaScript: var date = “2019-02-13”;

The other important bits to update are:

  • Line 2 – where the variable is declared: var date01 = false;
  • Line 20 – where the date-tracking variable is set to True on condition that the date on Line 3 has been reached: player.SetVar(“date01”,true);
  • Line 23 – where the date-tracking variable is set to False if the date on Line 3 is in the future: player.SetVar(“date01”,false);

Storyline 360 source file download

You can download the source file here and play with this yourself.

The great thing is that this demo is completely scalable in that you can add more buttons/dates as needed. I’ve linked each button to a single MCQ slide but you could just as easily add an entire question bank to each button, or as I had originally planned, use the code to create your very own advent calendar!

Related eLearning Insight Posts

Pin It on Pinterest

Share This