260 1st Ave South Suite 200-Box#50 St. Petersburg, FL 33701
1+727.897.5456
info@enovatelearning.com

How to Display the Current Time in Storyline 360 Projects

Display Time in Storyline 360

Summary

There are times when you need to display the current time in Storyline 360 project. For example, you want to display the current time on a PDF certificate of completion. Unfortunately, as of the publishing of this post Storyline does not have a system variable that allows you to display the current time on a slide. This post shows how to use simple JavaScript code to display the current time on a slide in any Articulate Storyline project.

Skilled Articulate Storyline eLearning Designer and Developer

Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) and other training modalities for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.

Author: Rema Merrick, MSIT
Published: December 9, 2022
Time to Read: 6 minutes 

Display Time in Storyline 360

Development Time

This task should take about five minutes to complete.

Prerequisites

This task requires no prior Storyline knowledge.

Introduction

The development process to display the time in Storyline 360 four major steps: 1) create the Time variable; 2) create the execute JavaScript trigger; 3) insert the display text box; and finally, 4) save and publish the file. I added instructions for publishing the file because the time will not display in preview mode. The JavaScript support, including the time display, only works once the file is published.

Development Process to Display Time in Storyline 360

Create a new project.

  1. Once you open Storyline 360, select New Project. Notice a new scene opens in STORY VIEW.
  2. Double-click on the slide in the scene. Notice the slide opens into SLIDE VIEW, which allows you to access the slide.
Illustrates Step 1
Illustrates Steps 1 and 2
Illustrates Step 2

Create a new text variable; name the variable DateValue.

  1. Select the Manage Project Variables Notice the Variables box displays.
  1. Select the Create a New Variable icon. Notice the Variable box displays.
Variable Box
  1. Type Time in the Name: field located in the Variable box. The Variable box is smaller than and opens on top of the Variables
  2. Select Text from the Type: drop-down menu, if it is not already selected.
  3. Leave the Default value: field blank.
  4. Select the OK button in the Variable box. Notice the variable displays in the Variables
  5. Select the OK button in the Variables.
Illustrates Steps 3 to 6

Add a new slide trigger to execute JavaScript to display time in Storyline 360.

  1. Select the Add a New Trigger icon. Notice the Trigger Wizard displays.
  1. Select Execute JavaScript from the Action drop-down menu.
    1. Select timeline starts from the When drop-down menu.
    2. Select this slide from the Object drop-down menu.
      1.  
Illustrates Step 2, 2a and 2b
  1. Select the JavaScript link in the JavaScript field. Notice the JavaScript Editor displays.
Illustrates Step 3
  1. Type the following code in the JavaScript Editor (to display the time in Storyline 360). I found the following JavaScript code in an Articulate Community Discussion shared by Matthew Bibby.*

var date = new Date();
var hours = date.getHours() < 10 ? “0” + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? “0” + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? “0” + date.getSeconds() : date.getSeconds();
var time = hours + “:” + minutes + “:” + seconds;
var player = GetPlayer();
player.SetVar(“Time”,time);

*Credit: Matthew Bibby

https://community.articulate.com/discussions/articulate-storyline/help-please-how-to-show-the-current-time-on-a-slide

https://community.articulate.com/users/MatthewBibby

JavaScript to Display Time in Storyline 360
  1. Select the OK button in the Trigger Wizard.
  2. Notice the slide trigger Execute JavaScript When the timeline starts on this slide displays in the Triggers section.
Illustrates Steps 6 and 7

Insert a text box on the slide's base layer to display the time in Storyline 360.

  1. Select the Insert tab on the top menu bar.
  2. Select the Text Box button.
Illustrates Steps 1 and 2
  1. Hold down the left button on the mouse and drag to create a shape.
  2. Type %Time% in the text box.
Variable to Display Time in Storyline 360

Save and publish the file.

  1. Select File. Notice the File drop-down menu displays.
  2. Select Save.

NOTE: You can also use the shortcut; press Ctrl + S to save the file.

  1. Select File. Notice the File drop-down menu displays.
  2. Select Publish. Notice the Publish box displays.
Illustrates Steps 3 and 4
  1. Select the Review 360 publish type, if it is not already selected.
  2. Select the Create a new item radio button, if it is not already selected.
  3. Select the PUBLISH button.
Illustrates Steps 5 to 7

NOTE: The time will not display in Preview mode; it only displays once the file has been published. When you view the file in Preview mode, you’ll get a message that says “JavaScript support is not available while previewing.”

JavaScript Support Not Available in Preview Mode Message Box

Final Product Displays the Time in Storyline 360

Image 1 shows the time display when viewing the published file.

Display Time in Storyline 360

Wrap Up

Remember, you can display the current time on a slide using four main steps: 1) create the time variable; 2) create the execute JavaScript trigger; 3) insert the display text box; and finally, 4) save and publish the file. Again, you’ll need to publish the file to view the time. JavaScript is not supported in preview mode. 

If you would like to learn how to add the current date to an Articulate Storyline project, check out this article: How to Display the Current Date in an Articulate Storyline Project.

ENOVATE LEARNING HOW -TO CREATE INTERACTIONS GUIDE

Contact

If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.