How to Display the Current Time in Storyline 360 Projects
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.
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
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.
- Once you open Storyline 360, select New Project. Notice a new scene opens in STORY VIEW.
- Double-click on the slide in the scene. Notice the slide opens into SLIDE VIEW, which allows you to access the slide.
Create a new text variable; name the variable DateValue.
- Select the Manage Project Variables Notice the Variables box displays.
- Select the Create a New Variable icon. Notice the Variable box displays.
- Type Time in the Name: field located in the Variable box. The Variable box is smaller than and opens on top of the Variables
- Select Text from the Type: drop-down menu, if it is not already selected.
- Leave the Default value: field blank.
- Select the OK button in the Variable box. Notice the variable displays in the Variables
- Select the OK button in the Variables.
Add a new slide trigger to execute JavaScript to display time in Storyline 360.
- Select the Add a New Trigger icon. Notice the Trigger Wizard displays.
- Select Execute JavaScript from the Action drop-down menu.
- Select timeline starts from the When drop-down menu.
- Select this slide from the Object drop-down menu.
- Select the JavaScript link in the JavaScript field. Notice the JavaScript Editor displays.
- 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
- Select the OK button in the Trigger Wizard.
- Notice the slide trigger Execute JavaScript When the timeline starts on this slide displays in the Triggers section.
Insert a text box on the slide's base layer to display the time in Storyline 360.
- Select the Insert tab on the top menu bar.
- Select the Text Box button.
- Hold down the left button on the mouse and drag to create a shape.
- Type %Time% in the text box.
Save and publish the file.
- Select File. Notice the File drop-down menu displays.
- Select Save.
NOTE: You can also use the shortcut; press Ctrl + S to save the file.
- Select File. Notice the File drop-down menu displays.
- Select Publish. Notice the Publish box displays.
- Select the Review 360 publish type, if it is not already selected.
- Select the Create a new item radio button, if it is not already selected.
- Select the PUBLISH button.
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.”
Final Product Displays the Time in Storyline 360
Image 1 shows the time display when viewing the published file.
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.
