Actual clock showing actual time

Brilliant!! Thank you! I will get onto that asap and try it out!

https://www.clocklink.com/gallery/view/html5-004

How do I find the direct link to this clock? I need to have a transparent clock to fit over an image of an iPad.

I did try that - but previewing as you showed, or publishing, simply shows it as a white box.
But if I test the link it DOES show the clock.
Odd....

 

Thanks for helping so much here. It's hugely appreciated. 
One thing - on the link you just gave, I can make the clock appear - but no transparent background even if I select transparent. Have you had any luck there?

Don't be afraid of JavaScript. Here are the steps and the code you need.

1. Create a text variable in your project. I named mine "DisplayTime" and gave it a default value of 0:00 for testing but you can leave the default blank.
2. Execute JavaScript when the timeline starts, on your first slide. Here is the JavaScript:
   

   // Establish StoryLine player connection
   var player=GetPlayer();

   // Check time, update it every second, send result to StoryLine
   var myVar = setInterval(myTimer, 1000);
       function myTimer() {
          var d = new Date();
          var dT = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
          player.SetVar("DisplayTime", dT);
   }

3. Everywhere you want the time displayed in Storyline, add a text box with your variable's name included between two % signs. Like this: %DisplayTime%
   
   See example here: https://360.articulate.com/review/content/1d37a5f8-f200-450d-a12a-3b37d8043c41/review

Because you are using a text box to display the time, the background will be transparent.

I was going to suggest what Owen suggests.

Nice solution Owen!

Just one edit needed to your post Owen, the variable should be DisplayTime in Storyline

I was typing quickly. LOL
Thanks for catching my variable "name switch".

Amazing! Thanks. I will have a go (I am an absolute novice at Javascript - so thank you for the code). I will give it a go!

Works brilliantly! Thank you!

Where is it referencing the time from? PC or Internet? Local PC I assume?

Javascript will always be the local machine

Thank you so much, Owen. It's really helpful. Would you mind if you could show me how to trigger this DisplayTime to the result slide when the clock reaches 5 pm daily for example?

I have been searching around the community for a while and didn't find the solution yet. Thank you in advance.

I'm not sure I understand the use case. The use would have to be on your results page at 5:00 to see anything triggered.

Hi Owen. I know this is a bit old, but is there any chance you could breakdown your very simple-looking code into bite-sized chunks so a dullard like me can make sense of what is happening?

var dT = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

What is the dT doing? Is it possible to convert this to a 24hr clock, with seconds and have NO AM or PM at the end?

Apologies for having to ask for something so simple to be explained.

Hi Diarmaid

I created this demo of a real-time clock with seconds and I think I made it 24 hour:

https://demo10.profilelearning.com

The JavaScript I used in this Storyline module is:

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);

Obviously H, M and S are the Storyline Variables used in the clock display. I would load the story file but it was done very quickly for another post and if you accidentally try and 'preview' it it gets in an infinite loop you can't exit from! I should really tidy it up a bit.

But if this is helpful let me know if you need more information.

Oh, by the way - the font used in the display is 'Digital-7 Mono' If I remember it took me a while to find a font that replicated a digital clock display...

Cool. Thank you for that.

How do you get the seconds to change within your code? When I demo the code it just displays the time once. I have to refresh to get the seconds to change.

I think he is running it every second inside storyline. I would write it as a function and run every second, same solution probably a bit more elegant.

Sent from my iPhone

Phil is correct - and I like the idea of incorporating the code as a function - indeed elegant.

What I actually did was have the JavaScript code above executed in a layer called "Get Time" and in the layer was an:

Execute Javascript when the timeline starts on this layer

then:

Showlayer NewTime when the timeline ends on this layer

In the Layer NewTime it just has:

Show layer GetTime when the timeline reaches 0.5 seconds

In this way I update the clock every half second.

Although effective my solution is a bit inelegant - and you can get into an infinite loop if you try and preview it - although that can be fixed.