Using Javascript to Gamify a Countdown Timer (incorrect answers subtract time)

But if you want to stick with JavaScript, I think you just need to retrieve the current value of the timer variable from Storyline each time before you update it.

Putting a line:

let sec = player.GetVar("timer");

Before you decrement the timer would be my initial thought, but I haven't tried it - so other changes might be needed. But the above would allow you to decrement the timer outside of the function (due to an incorrect answer) and still allow the countdown to work.

Hope that helps

John

Hi Maddie,

Although I sometimes prefer solving problems using JavaScript, this time I decided to take a different approach just for fun and to demonstrate that it's possible to achieve this using Storyline alone. Please check out my short video demonstrating this concept, and let me know if you're interested in incorporating it into your project. If you're interested, I can provide my .story file for you to rebuild and customize as necessary.

@John's reply is how I would handle it too.

With one addition perhaps, which is you will need to set up a new JS function which retrieves the timer value at any given moment. This function is necessary because Im guessing you have your JS trigger currently on a slide that Storyline stays on throughout.
Either way, you will need a trigger that is not constant (ie. part of the Interval ticks) in order to return the value.
So... 1 trigger counts down, while a different trigger returns values.

Below is a JavaScript code. It assumes that another variable named "incorrect" is created within Storyline, initialized with a value of false. This variable switches to true when the timeline starts on the "Try Again" layer. In the code, it is switched back to false as soon as 10 seconds are subtracted from the timer. Maddie, this code may need constant updates based on your final scenario interaction and as the project scales. That's why I preferred Storyline alone over JavaScript, allowing those without JavaScript experience to easily update and progress. Attached is a short video demonstration of your revised project, along with the .story file for reference.

const player = GetPlayer();
let sec = player.GetVar("timer");

//Set up the timer
function startTimer(){
  if (sec > 0) {
    if (player.GetVar('incorrect')) {
      if (sec < 10) { // Check if remaining time is less than 10 seconds
        sec = 0; // Set timer to 0 if less than 10 seconds remaining
      } else {
        sec -= 10;
      }
      player.SetVar('incorrect', false); // Set incorrect to false after subtracting 10 seconds
    } else {
      sec -= 1;
    }
    player.SetVar("timer", sec);
    if (sec <= 0) {
      clearInterval(timerId);
    }
  }
}

//Start the timer
let timerId = setInterval(startTimer, 1000);


Please set the timer value to 60 in Storyline and remove the trigger that subtracts 10 seconds from the timer, as it is now managed with JavaScript.