Forum Discussion
Stop / reset JavaScript in a storyline
Hello, I have a timer that I built from a Storyline provided in another post; it uses a javascript snippet to start the timer and works great however, I am trying to add a feature to stop the timer and/or reset it (both would be nice but either would be helpful). Can anyone provide some help?
A script can be dynamically injected and appended to the head to work across the slides and scenes. In the attached demo, the timer can be paused, continued, or reset from any slide or scene without breaking the code. It consists of a single script in the master slide and a few triggers to ensure the Play/Pause button is properly toggled, based on whether the timer is running or not.
Thank you Nedim. Could you please share your storyline file, so I can see how did you manage to reset the timer when it's finished? I used the JS code provided by Jeremy, and indeed it resets the countdown before it's finished. But once the timer reaches 00:00 I can't reset the timer... Maybe I missed something (I started using JS in storyline a week ago...)
Attached.
Hi Toni,
Take a look at this timer.
Hi Toni
Did you ever get a javascript timer working that can be stopped manually or reset? I'm trying to do the same thing, but all the JS timers here start a new process when the trigger to start is fired again. And then go crazy by displaying 2 or more timers at the same time.
Sam, here is what I ended up with. Hope it helps.
exactly
Basically it is scope that makes most timers used onhere ( the one from Toni too ) tough to stop/pause and/or resume.
Scope means that if you define some javascript variable on some spot, it will not automatically be available in another spot. Eg. if you create a trigger on a slide with a function in it.... that function won't be available in any other slide. In fact it wont even be available in another trigger on that slide. It only is available in that particular trigger.
To overcome that you have 2 possibilities.
- Use Storyline variables to save and pass Javascript vars. SL vars are in a global scope.
- Add your Javascript functions and code to the HTML. By using external JS files like my generic_functions setup you can create global JS code that can be used at any time any where.
( https://community.articulate.com/discussions/articulate-storyline/including-javascript-for-repeating-functionality )Hi Math
Thanks for your reply and link to article about scope and adding JS functions to package.
If I understand the issue with the timer correctly - you can only access the function that operates the timer in the same slide and same trigger that initialize it.
So - as you say to use SL variables which have global scope, can you not have a variable called "pause" which fires on any slide you want if triggered, and a reference to that variable in the JS function that started the timer? So that whenever the pause variable is set to true - the JS timer will pause (provided of course the function is correctly coded to stop counting when pause = true)
Ditto for reset
Hi Sam,
Yeah basically thats correct. The difficulty in working with Storyline variables and scope for a timer is that with only one variable for pause it won't work. Say you initialize your timer on the first slide, lets call it slide A with trigger tA... the scope for that timer is then exactly there. You can tell the global variable ( varT = true ) the timer is running...and thus..when you get to slide B you do know the timer is running... and you can change the global variable ( varT = off )...but you then donot have access to the scope of the timer...because that is on slide A with trigger tA.
So when using variables only you need to add the timer itself to a global variable, so you access it anywhere. In fact that is cumbersome because in the end it takes quite a few variables for it to work. I prefer a global script on root level... i will make a sample when time permits this week.
Hi Math
Sorry to keep asking questions!
Doesnt the JS function just kind of keep on running once started, and then use the latest value of SL global variable when the getplayer function is called in the counter function? So that if pause=true, set on any slide, on its next cycle to add 1 second to the counter time, the js function will use pause=true and thus pause?
The moment you leave a slide...all JS related things not set in global variables or Storyline variables ( those are global too ) are gone. Im gonna make some samples in Storyline to share to explain the scope thing better. That way its a lot clearer.
The sample you sent me works because it uses Date as a global object. The current Date and Time are always the same ( timezone dependant ofcourse ) and each slide compares and calculates timedifference with the start time.
I will make samples showing explaining scope and a global timer script solution.
Only not this week ;-)I have updated a javascript countdown/timer example I have created several years ago.
You can start, pause or reset the timer.https://360.articulate.com/review/content/45c48644-63e2-427c-bf96-ab8f1d06360c/review
You just need to adjust the SL variable: timeINmilliseconds
Christoph Krieger this is exact the same method Sam already uses. The Date Object in your code uses the global date to parse the time elapsed. Although this works fine it only shows the scope issue thats underlying to all triggers in Storyline. The SetInterval method in this code only works because it uses the global Date Object.
Here is an quick and dirty example of global countdown made with javascript:
https://malziland.at/articulate/countdown_global_js/story.html
After publishing:
- Open .story file with a text editor and add the following line into the head:
<script src="scripts.js"></script>- Copy the scripts.js into the output folder
Code still the same...and SetInterval still depends on the Date Object. Works fine but not much difference with Sam's original.
