Using JavaScript to track page views and enable navigation

Hi Everyone,

 

I’ve made a few unsuccessful attempts, and am wondering if anyone has any ideas. I’m new to JavaScript, and would really appreciate your help!

 

Problem

For compliance reasons, I need to confirm that learners do one of the following before moving to the next slide or layer:

• View for a minimum time, e.g. three (3) seconds.
• Interact with multimedia.
• Complete a learning activity.

 

Proposed workflow

Disable the ‘Next’ button until the requirement has been met. 

1. Disable the Next button on slide load (initial slide view).
2. After three seconds:
   • Capture variable that slide has been viewed.
   • Enable Next button.
3. Do the same for layer views.
4. If the learner returns to slide or layer:
   1. Check to see if it has been viewed.
   2. If yes, enable Next button on slide load.

 

Issue

This isn’t ideal, so I want to make it as learner friendly as possible.

Using Storyline project variables is possible, but requires:

• A custom ‘visited’ variable on each slide and layer
• A trigger to set ‘visited’ variable to ‘True’ for each slide and layer
• A trigger to enable the Next button on each slide and layer
• A trigger to automatically enable the Next button on each slide and layer

 

If a course has 48 slides, and 12 slides with 5 layers, this means:

• 48 custom page ‘visited’ variables
• 60 custom layer ‘visited’ variables
• 108 triggers to capture ‘visited’ variables
• 108 triggers to enable Next buttons (initial slide view)
• 108 triggers to enable Next buttons on slide load (already viewed)

 

This makes it harder to use variables and triggers to create the actual learning content. It's also harder to edit and maintain content.

 

Goal

To save time and effort, I’d like to do as much of this using JavaScript as possible.

I’ve included a file that uses project variables and triggers. Please feel free to make changes!