Skip to main content
Pkoel
Inspiring
September 19, 2016
Answered

Captivate 9 - JavaScript stored in a separate file

  • September 19, 2016
  • 2 replies
  • 1228 views

Hello All,

  I am very new to using Java script in Captivate. I have seen numerous suggestions about placing the code in a separate file and referencing the function in the Captivate JavaScript  window. I know this will seem like a vague question, but: How do I do that? What is the name of the file, where do I place it in the directory path, and where should it go if I am creating SCORM modules? I can find very little help on the Captivate sites. Does a book or specific site exist for this type of learning?

Sincerely,

Peter

This topic has been closed for replies.
Correct answer TLCMediaDesign

The best option is to place the include in the html template;

C:\Program Files\Adobe\Adobe Captivate 9 x64\HTML\index.html

Place your include as shown in the bold text:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>@MOVIETITLE</title>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>
<script src="assets/js/your_javascript.js"></script>
<script>

function initializeCP()

Then put your JavaScript file here:

C:\Program Files\Adobe\Adobe Captivate 9 x64\HTML\assets\js\

This way it will always publish.

2 replies

TLCMediaDesign
TLCMediaDesignCorrect answer
Inspiring
September 19, 2016

The best option is to place the include in the html template;

C:\Program Files\Adobe\Adobe Captivate 9 x64\HTML\index.html

Place your include as shown in the bold text:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name='viewport' content='initial-scale = 1, minimum-scale = 1, maximum-scale = 1'/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>@MOVIETITLE</title>
<style type="text/css">#initialLoading{background:url(assets/htmlimages/loader.gif) no-repeat center center;background-color:#ffffff;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;z-index:10010;}</style>
<script src="assets/js/your_javascript.js"></script>
<script>

function initializeCP()

Then put your JavaScript file here:

C:\Program Files\Adobe\Adobe Captivate 9 x64\HTML\assets\js\

This way it will always publish.

Pkoel
PkoelAuthor
Inspiring
September 19, 2016

Hello and thanks for the reply. Do you know of a book or web resource where these ideas are documented? I will be attending the 2016 DevLearn conference in Las Vegas. Is there a session that you would recommend I attend to learn more?

Sincerely,

Peter

TLCMediaDesign
Inspiring
September 19, 2016

I don't know of any book. I also have not looked at the DevLearn sessions.

We may be doing online seminars or possibly an eBook specifically for JavaScript and Captivate.

Inspiring
September 19, 2016

After publishing a file, open your index.html (or index_scorm.html if you published scorm version) and add the following line in the <head> section:

<script src="name_of_your_script_ here.js"></script>
(please note - this is assuming your js file is in the same folder as your html file.  If the js file resides in a different folder, you'll have to point to it by typing src="folder_name/name_of_your_script_here.js"