0

I have an output of Articulate Storyline 3 here but as the whole output of this software is just Javascript and HTML and CSS I won't use storyline tag for this question (we can consider this Javascript question).

Here is a very simple output I have prepared to ask my question, please have look:

https://langfox.ir/pause/story_html5.html

As you see and hear! there is a SFX playing and a counter which is counting from 1 to end.

But behind this simple thing we have a beautiful and perhaps complex functionality... What? Here it is:

Reload the given page and when you see the number 2 (it could be any number) click on another tab in your browser. (so you jump out from the given page without closing it)

As you see as you click on another tab the playing sound is paused. don't go back to the page right away, wait any amount of time and again go back, we expect the counter to show the end right? but as you see the counter is still in the last position when you left the page (in our example number 2) and the SFX play at the point it paused.

How can we do such thing with Javascript?

I want a function to pause the page when I want?

How Storyline Engineers did such a thing?

Here is the files in case anyone wants to have a look:

https://langfox.ir/pause/Untitled1%20-%20Storyline%20output.zip

1 Answers1

-1

I reckon their code is listening for events for when the window or page loses focus like when the user changes tabs or something. Take a look at this SO answer: here. Listen for these events then do what you like.

Kolokoy
  • 118
  • 1
  • 5
  • Thanks for the answer Kolokoy. Yes this is obvious but how they paused the timeline of the page... –  Dec 26 '20 at 16:06
  • @Pixier They would call some method in their code when window becomes inactive. What that method is depends on the code used. There is no universal "freeze the page" method – charlietfl Dec 26 '20 at 16:10
  • How you implement it depends entirely on you. If I want to achieve the same result as the one you showed, assuming that I only have a basic HTML5 video playing. Using the event listeners previously mentioned, I would pause the video if they leave the tab and resume if they come back. – Kolokoy Dec 26 '20 at 16:15