Forum Discussion

KatelynThedf665's avatar
KatelynThedf665
Community Member
31 days ago

Help: Need Project to Loop Back to Menu After 60 Seconds

Hello! I am building a project that will serve as an interactive demo. There will be no audio, but it will have text/asset/mouse animations to guide users through the experience. The slides animate and then are triggered to pause the timeline. Then when users click the Continue button, the slide animates things out and then is triggered to jump to the next slide when the timeline ends. 

Here's where I need help: 
This will be an interactive demo where customers can walk up and view what they want, so we recognize that they may also watch for a bit and then walk away. We want the demo to be ready for the next person who may walk up shortly after, so we would like the project to jump back to the menu/selection (first) slide if there is no activity for 60 seconds. When we built this project in the past using Captivate, we were able to use the advanced action of "delay the next action for 60 seconds" and then "jump back to menu". Is there a somewhat simple way to do this Storyline? 

advice
e-learning development
General E-Learning
storyline 360

1 Reply

  • SamHill's avatar
    SamHill
    Super Hero
    31 days ago

    Hi KatelynThedf665​ firstly you will need to create a Storyline variable that will trigger the action to return to the menu/selection slide, when the variable changes.

    1. Create a Storyline True/False variable called resetPresentation and ensure the initial value is False.

    2. Add a timeline starts trigger to your menu/selection slide that will set the value of resetPresentation to False. 
    3. Add a variable changes trigger to the MASTERSLIDE. When variable resetPresentation changes, and resetPresentation is equal to True, jump to the menu/selection slide in the project.

    4. Add the following JavaScript to the MASTERSLIDE and trigger on timeline starts.

      function resetInactivityTimer() {
  console.log('resetInactivityTimer');
  clearTimeout(window.inactivityTimerB19063f9);
  window.inactivityTimerB19063f9 = setTimeout(() => {
    console.log('reset presentation');
    setVar('resetPresentation', true);
  }, 60000);
}

function initInactivityDetection() {
  // add event listeners
  console.log('initInactivityDetection');
  document.addEventListener("mousemove", resetInactivityTimer);
  document.addEventListener("keydown", resetInactivityTimer);
  document.addEventListener("click", resetInactivityTimer);
  document.addEventListener("scroll", resetInactivityTimer);
  // Start the timer initially
  resetInactivityTimer(); 
}
// Initialise the inactivity detection
if (!window.inactivityTimerB19063f9) initInactivityDetection();

       

    I've attached a simple example of the functionality (shortened to 10 second timeout for demo).

Related Content