Highlighted

Using External Javascript libraries in Adobe Captivate

Community Beginner ,
Apr 20, 2018

Copy link to clipboard

Copied

I am creating Adobe Captivate simulations of a dental software. There are many instances where it would be useful to display a date based off of todays date.  For example, tomorrow's date (today's date + 1 day) or a month ago (today's date - 1 month).

I see that there are libraries out there which can simplify creating variables and populating them with calculated dates (www.datejs.com or www.momentjs.com are two I have looked at, I would welcome other recommendations on this too).

I am unsure how to incorporate these external libraries into my Adobe Captivate projects. One resource I looked at said to find the standard.js file (which I found at C:\Program Files\Adobe\Adobe Captivate 2017 x64\Templates\Publish) and add the text into the existing file. I have done that but don't seem to be getting anywhere with the custom commands these libraries offer.

Using Adobe Captivate 2017 (10.0.0.192) and Windows 10 Enterprise version 1709. I would classify myself as a beginner, but fast learner, in the world of JavaScript.

Thank you in advance for your help!

Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

The standards.js is a file used for swf output.

To use an external ibrary, you just need to place the *.js file in a location relative to your index.html file. I put mine in the assets/js/ folder.

Then you need to put an include in the head of the html file:

<script src="assets/js/yourJSfile.js" type="text/javascript"></script>

The script below creates a past date: If you create a vraible called pastDate it will populate it. You would need to change the milliseconds to correspond to the amount of days you want to go back. There are calculators o the internet to figure out the milliseconds for you.

var d = new Date();

var t = d.getTime();

var nd = new Date(t - 1209600000);

so if you have a variable in Captivate call pastDate, execute this JS

var d = new Date();

var t = d.getTime();

window.pastDate = new Date(t - 1209600000);

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using External Javascript libraries in Adobe Captivate

Community Beginner ,
Apr 20, 2018

Copy link to clipboard

Copied

I am creating Adobe Captivate simulations of a dental software. There are many instances where it would be useful to display a date based off of todays date.  For example, tomorrow's date (today's date + 1 day) or a month ago (today's date - 1 month).

I see that there are libraries out there which can simplify creating variables and populating them with calculated dates (www.datejs.com or www.momentjs.com are two I have looked at, I would welcome other recommendations on this too).

I am unsure how to incorporate these external libraries into my Adobe Captivate projects. One resource I looked at said to find the standard.js file (which I found at C:\Program Files\Adobe\Adobe Captivate 2017 x64\Templates\Publish) and add the text into the existing file. I have done that but don't seem to be getting anywhere with the custom commands these libraries offer.

Using Adobe Captivate 2017 (10.0.0.192) and Windows 10 Enterprise version 1709. I would classify myself as a beginner, but fast learner, in the world of JavaScript.

Thank you in advance for your help!

Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

The standards.js is a file used for swf output.

To use an external ibrary, you just need to place the *.js file in a location relative to your index.html file. I put mine in the assets/js/ folder.

Then you need to put an include in the head of the html file:

<script src="assets/js/yourJSfile.js" type="text/javascript"></script>

The script below creates a past date: If you create a vraible called pastDate it will populate it. You would need to change the milliseconds to correspond to the amount of days you want to go back. There are calculators o the internet to figure out the milliseconds for you.

var d = new Date();

var t = d.getTime();

var nd = new Date(t - 1209600000);

so if you have a variable in Captivate call pastDate, execute this JS

var d = new Date();

var t = d.getTime();

window.pastDate = new Date(t - 1209600000);

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 20, 2018 1
Adobe Community Professional ,
Apr 20, 2018

Copy link to clipboard

Copied

The standards.js is a file used for swf output.

To use an external ibrary, you just need to place the *.js file in a location relative to your index.html file. I put mine in the assets/js/ folder.

Then you need to put an include in the head of the html file:

<script src="assets/js/yourJSfile.js" type="text/javascript"></script>

The script below creates a past date: If you create a vraible called pastDate it will populate it. You would need to change the milliseconds to correspond to the amount of days you want to go back. There are calculators o the internet to figure out the milliseconds for you.

var d = new Date();

var t = d.getTime();

var nd = new Date(t - 1209600000);

so if you have a variable in Captivate call pastDate, execute this JS

var d = new Date();

var t = d.getTime();

window.pastDate = new Date(t - 1209600000);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
New Here ,
Sep 24, 2019

Copy link to clipboard

Copied

Does an external library do the same as placing the Javascript on a Captivate slide using the script window? I tried an external Javascript library using script src, but it does not work. Thanks for any assistance

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0
Advocate ,
Apr 20, 2018

Copy link to clipboard

Copied

Not sure if this will be helpful or not but it would not require any external libraries - just a little javascript on your buttons.

I have a variable called days.

A variable called todayDate

and a variable called calcDate

Then I have a button that does two things.

1. increments the variable days by 1

2. calculates the new date

The code on the button looks like this.

days=(++days);

calcDate=new Date(new Date().getTime()+(days*24*60*60*1000));

Then I have a shape to show the variable for todayDate and one for the calcDate

Each click of the button results in the calcDate increasing by one day.

It may not match what you are looking for exactly but maybe some food for thought.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
Adobe Community Professional ,
Apr 20, 2018

Copy link to clipboard

Copied

Some information here about how to set this up using only User Variables and Advanced Actions:

http://www.infosemantics.com.au/adobe-captivate/template/02-dynamic-date-functions

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2018 0
Community Beginner ,
Apr 23, 2018

Copy link to clipboard

Copied

Thank you! I was overthinking it. I believe this will do exactly what I need! I will use the .getDate function to pull the month, day, and years to display in a string the way the software I am simulating does it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 0
Explorer ,
Nov 24, 2018

Copy link to clipboard

Copied

Thanks, David. This works, but are you manually putting this external js file into the published folder? I'm using a file named utils.js.   If so, isn't utils.js deleted (or attempted delete) each time you publish after that? Therefore, you have to copy the external js file into the published folder every time you publish, right?

Is it possible to put the external js file in a location where does not have to be copied over each time you publish?  I notice that Cp2017 does not have a js folder in its install location (under html/assets). 

Here is what I tried for a solution:

I created a js folder in the assets folder inside the html folder at the program file location.  Then, I put the following line after the head tag in the index.html template file:  Program Files/Adobe/ Adobe Captivate 2017/HTML: <script src="assets/js/cputils.js"></script>

This seems to work, just wanted to check with an expert to see if I'm doing it right.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 24, 2018 0
Adobe Community Professional ,
Nov 26, 2018

Copy link to clipboard

Copied

You can create the JS folder and edit the template file to have the JS include statement in it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 1
Explorer ,
Nov 27, 2018

Copy link to clipboard

Copied

That works, thanks, David.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 27, 2018 0
RodWard LATEST
Adobe Community Professional ,
Sep 24, 2019

Copy link to clipboard

Copied

Take a look at the information on this page that describes how to load the CpExtra javascript library by editing the HTML template in the Captivate install directory: http://www.infosemantics.com.au/adobe-captivate-widgets/cpextra/help/installing-cp-extra It's a little more complicated than the approach you tried, but it works for us.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2019 0