JavaScript to display an adjusted date - "x" days ago.

Nov 25, 2019

Greetings, 

I'll start by saying I barely consider myself "amateur" level with JavaScript code.  (More than anything, I know how to Google stuff...)  In any case, I have pieced together a little nugget of code that came in handy on a Storyline 360 quiz, so hoping some of you may find it useful as well.

Quick backstory: I'm making a quiz where in each question, learners evaluate several things on a given document.  One of the things to evaluate is that the date on the document is not older than 6 months. 

I will likely need this quiz to be used for the next few years, and I didn't want to have to go in and change the document dates every 6 or fewer months.

The tricky part was trying to figure out how to adjust the date to be various lengths of time into the past - some very recent, some *almost* 6 months ago, some a little over, etc.  I couldn't just use code for the currentDate, then subtract a number from the month or the day without having it return negative numbers.  For example, if it's April 3rd (month/day = 04/03), and the code said to subtract 190 from the current day (3 minus 190), it would return a month/day of 04/-187.  The same thing happens with the month.  If the code says subtract 6 from the current month (4 minus 6), it returns -2/03.

...So that ain't gonna work.

Hence, I called upon my Googling skills and applied my minimal coding knowledge to experiment with several solutions proposed in various JS/coding forums.  This code was the winner.  I'll provide a bit more explanation below.

var date1 = new Date();
var daysToMove = -90;
date1.setDate(date1.getDate() + daysToMove);
var player = GetPlayer();
player.SetVar("90daysPrior",date1.toDateString().replace(/^\S+\s/,'') );

The bold numbers are the ones that I changed out on each question, depending on how far back I wanted to go.  The .toDateString() method within the code makes it return a date this format: Mon Nov 25 2019. Adding .replace(/^\S+\s/,'') after .toDateString() makes it so that the day of the week doesn't display (it is replaced by a blank space).  

For those of you who, like me, are new to using JavaScript, new to using it in Storyline 360, or both, here's how to make it all happen on a slide: 

  1. Create the text variable "xdaysPrior" (where x is the number of days you want to go back) in your Storyline project, and add a text box that references it on the desired slide.
  2. Create a new trigger to Execute JavaScript when the timeline starts (or at whatever other cue your heart desires).
  3. Within the trigger you just created, paste the code above into the JavaScript panel.  Change the numbers to match the x value that you put in the name of your Storyline variable.
  4. Publish to Review 360 to make sure it worked right. (Previewing the course within Storyline will not execute the JavaScript.)

TIP: If you happen to need a future date, just change "daysToMove" to a non-negative number and adjust the name of your Storyline variable accordingly (something like xdaysAhead) - within Storyline AND within the code.

Here's a link to an example I made to demonstrate.  The .story file is attached as well.

Happy course building!

 

Be the first to reply

This discussion is closed. You can start a new discussion or contact Articulate Support.