Timing is Everything: Measuring Course Duration in Articulate Storyline, Minute by Minute – Part 1

natestoker 21 August 2023 Quick Tips

Have you ever wanted to tell your learners exactly how much time they spent on a course? I’ve got a fun and easy way to not only track time but also present it in a friendly format. I’ve got it covered! Grab your favorite beverage, and let’s dive in!

Step 1: Start Your Engines 

First things first, let’s mark the beginning of our course:

  1. Create a variable called startTime.
  2. On the starting slide, add a “Execute JavaScript” trigger when the timeline starts.

Use this code snippet:

var player = GetPlayer();
var startTime = new Date().getTime();
player.SetVar("startTime", startTime);

Let’s break it down:

  1. Getting to Know the Player: First off, we’re grabbing hold of the Storyline player itself. It’s like shaking hands with the engine that runs the course, allowing us to chat with it, ask it to do stuff, and more.
  2. Clocking In: Next, we’re checking the time. Not just any time, though – it’s the exact millisecond since the good ol’ days of January 1, 1970. This gives us a precise moment, which we can use to track how long a user is spending somewhere in the course.
  3. Sharing the Time with Storyline: Finally, we’re telling Storyline about the time we just found. We’re basically saying, “Hey Storyline, remember this exact moment for me, will you?” That way, we can use that time later on in the course, whether we want to time quizzes, interactions, or even just see how long someone’s taking on a slide.

Step 2: Finish with Flair 

We’re going to calculate the time spent and present it elegantly. If the learner spends more than an hour, we’ll even show the hours! On the conclusion slide:

  1. Create variables called endTime and timeDisplay.
  2. Add a trigger to “Execute JavaScript” when the timeline starts.

Insert this versatile code:

var player = GetPlayer();var endTime = new Date().getTime();

var startTime = player.GetVar("startTime");

var timeDifferenceInSeconds = (endTime - startTime) / 1000;

var minutes = Math.floor((timeDifferenceInSeconds % 3600) / 60);
var seconds = Math.floor(timeDifferenceInSeconds % 60); // Ensuring no decimals

var timeDisplay = "";

timeDisplay += minutes + " minutes and " + seconds + " seconds";

player.SetVar("timeDisplay", timeDisplay);

Let’s make sense of this magic:

  1. Get the Player Again: Yep, we’re back shaking hands with the Storyline player.
  2. Check the Time, Again: This time, we’re marking the end time. This will help us figure out how much time has passed since the start time we recorded earlier.
  3. Fetch the Start Time: Remember when we told Storyline to remember the start time? Now we’re asking it to hand that back to us.
  4. Do the Math: Subtracting the start time from the end time gives us the difference in milliseconds. Divide that by 1000, and voila – seconds!
  5. Break It Down: We’re taking those seconds and breaking them down into minutes and the leftover seconds. A little bit of math magic, but nothing too scary!
  6. Make It Pretty: Finally, we’re putting together a friendly little message that says something like “3 minutes and 42 seconds,” making it easy for anyone to understand.

Step 3: Share the Love! 

You can display the timeDisplay variable on a concluding slide or even in a certificate. It’s a delightful way to personalize the learning experience.

A Friendly Reminder 

Always test in the environment where your course will be live. It ensures everything runs smoothly for your learners.

Wrap Up 

This simple trick adds a new layer of engagement to your courses. Have fun experimenting with it, and don’t hesitate to share your results!

Please also note there are built in variables into Articulate Storyline that could also do this. Storyline has built in variables thar will do this. Slide.ElaspseTime, Scene.ElaspseTime and Project.ElaspseTime will give you the total time in milliseconds. To get it into a useable format like mm:ss you can check out Articulate’s write up on their built in variables here. Erik Digre’s sample project will also get you there with no JavaScript (but 6 variables and 9 triggers).

Stay Tuned for Part Two: Countdown Timers! This video is just the beginning! In the next part of this series, we’ll dive into countdown timers, adding yet another layer of engagement to your courses. You won’t want to miss it, so make sure to subscribe and hit the notification bell so you’ll be the first to know when it’s live. Until next time!

You can watch a demo of this tutorial here:

 

Related Posts