Actual clock showing actual time

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.

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.

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.

 

Via ChatGPT. I asked it to amend the code to a function and add an interval for seconds. This is the code it produced and it works:

function updateTime() {
  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);
  var player = GetPlayer();
  player.SetVar("H",hours);
  player.SetVar("M",minutes);
  player.SetVar("S",seconds);
}
setInterval(updateTime, 1000);

Just in case anyone is interested, I have been keeping a file with all different snippets of time-related coding for a while and have compiled them into a demo module to test out on.

Here is a link to the demo in Review:

DateTimeTest | Review 360 (articulate.com)

The coding is listed above the blue execute buttons. Lots of the coding use the same base variables, so that is why when one clicks one button, values may change elsewhere. It was to kind of help me wrap my head around javascript, but I realise now that it is pointless. Everyone has different styles and methodologies, and I have just now discovered that ChatGPT can break down and analyse code and explain it to you, and also generate its own clean code. Amazing.

Here is a link to the Storyline file if anyone wants to yoink a particular bit of code from it:

https://www.dropbox.com/s/ihijnp3ez04mf6n/DateTimeTest-2023.story?dl=0