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 3, 2022 Time to Read: 6 minutes
Summary
There are times when you need to display the current date in an Articulate Storyline project. For example, you want to display the current date 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 date on a slide. This post shows how to use simple JavaScript code to display the current date on a slide in any Articulate Storyline project.
Development Time
This task should take about five minutes to complete.
Prerequisites
This task requires no prior Storyline knowledge.
Introduction
The development of this interaction has four major steps: 1) create the date 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 date will not display in preview mode. The JavaScript support, including the date display, only works once the file is published.
Development Process
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 DateValue 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.
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.
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear();var time = currentDate.getTime();
var player = GetPlayer();
var newName = month + “/” + day + “/” + year “|” + time
player.SetVar(“DateValue”, newName);
Select the OK button in the JavaScript Editor
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 date.
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 %DateValue% 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 date 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
Image 1 shows the date display when viewing the published file.
Wrap Up
Remember, you can display the current date on a slide using four main steps: 1) create the date 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 date. JavaScript is not supported in preview mode.
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.
This blog was founded and is operated by Rema Merrick, instructional designer and Articulate Storyline 360 e-Learning developer. She has been a staple in the e-Learning industry since 2014. Her exciting career started after she received her master of science in Instructional Technology from Bloomsburg University. When she's not participating in Articulate’s E-Learning Heroes E-Learning Challenges, you can find her practicing yoga, jogging or biking in sunny, St. Petersburg, FL.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.