Forum Discussion
Adding a digital clock with HH:MM:SS displaying to storyline
I'm working on a course that has a digital display screen for a vehicle. We've managed to mimic the digital display which pops up with alerts that display a time as they appear. Rather than just use a static time appear with messages as text i'd like to make it more lifelike and insert a variable maybe using javascript or something so that the times that appear are mimicing the real time. Problem is i have no idea how to do this. I watched some tutorials on how to create a trigger, enter the javascript code and it appears when timeline starts. But how do i get that to appear and also to display in multiple places on one slide? Ive included an image to show a mock up of the screen and where the times should be displaying.
Hi - Great question.
I may be able to help - we are just developing/testing a 'real-time' clock for use in Storyline. It appears to work OK - but still testing
RealtimeClock (profilelearning.com)
The key bit of JavaScript you need is this:
const date = new Date();
const time = date.toTimeString();
const hours = time.substring(0,2);
const minutes = time.substring(3,5);
const seconds = time.substring(6,8);
//Get Player and set variables
var player = GetPlayer();
player.SetVar("H",hours);
player.SetVar("M",minutes);
player.SetVar("S",seconds);This assumes you have three string variables "H", "M" and "S" defined in your Storyline Code.
Thanks John. This is great. I'll give this a definite go.
See if this will get you started. You can set the TotalSeconds to any start value you need.
I'm really not sure what that is. It looks like it counts up events triggered. I need a clock that mimics real time?
Toni,
Actually, it records at what time the events were triggered, with two methods of triggering them. The third display tracks elapsed time. If you set TotalSeconds to a larger number (like 300), the elapsed time will start at five minutes. Any time you change it, the elapsed time counts from that point. Any time you want to record the time of an event, Just change TotalSeconds, and it will run the JS, giving you the time back formatted to mimic a digital clock, unless I misinterpreted the graphic.
If you leave the two rectangles as they are, they will continually change TotalSeconds, mimicking more or less real time on the elapsed display. Otherwise, you can delete them if you just want to set a time and say this is when something happened. To do that, change TotalSeconds, and copy the returned timed to the text variable that you use to display it.
The mechanism used is actually not too complicated, We have a layer which is exactly 1 sec in duration. The layer executes the JavaScript above to update the clock and then "toggles" a true/false flag and closes. The base layer monitors the flag and when it detects a change it shows our clock update layer again...
Hence you get a tight loop with the update layer opening and closing in 1 sec intervals....
If you wanted to time stamp something - as in your sample display it should be fairly straightforward (how many times have I said that!)... If you trigger an event at a given point the variables H, M, and S, have the time you need - use them to set three new variables and you have the time that event occurred.
Let me know how that goes - I would be quite interested!
