Adding a digital clock with HH:MM:SS displaying to storyline

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?

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.

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.

Thanks John. This is great. I'll give this a definite go. 

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!