Skip to main content
Participating Frequently
November 30, 2021
Answered

Write and call custom JavaScript functions?

  • November 30, 2021
  • 2 replies
  • 653 views

In a Cp 2019 (Mac) responsive project, is there a way to:

  • write custom JavaScript functions in one place
  • call those functions from both Actions and code in web objects, AND
  • test functionality of that custom JavaScript in a local preview (e.g. using Live Preview on Devices)

?

This topic has been closed for replies.
Correct answer TLCMediaDesign

I don't know where it is on a Mac, but on a PC you can edit this file:

 

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

 

Add the bolded line just below the title tag:

 

<title>@MOVIETITLE</title>
<script type="text/javascript" src="assets/js/functions.js"></script>

 

Then in the same place create the "assets" folder and put your "functions.js" file in there.

 

When you preview in a browser (localhost), you js will be there and when you publish also.

 

I always start with at least these functions with the SLIDEENTER event listener as you will be able to see all of the information in e.Data.

 

var interfaceObj, eventEmitterObj;

window.addEventListener( 'moduleReadyEvent', function( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

//function to initialize all event listeners used
function initializeEventListeners()
{
if ( interfaceObj )
{
if ( eventEmitterObj )
{
eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', enterSlide, false );
}
}
}

function enterSlide( e )
{
console.log( e.Data );
}

2 replies

TLCMediaDesign
TLCMediaDesignCorrect answer
Inspiring
November 30, 2021

I don't know where it is on a Mac, but on a PC you can edit this file:

 

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

 

Add the bolded line just below the title tag:

 

<title>@MOVIETITLE</title>
<script type="text/javascript" src="assets/js/functions.js"></script>

 

Then in the same place create the "assets" folder and put your "functions.js" file in there.

 

When you preview in a browser (localhost), you js will be there and when you publish also.

 

I always start with at least these functions with the SLIDEENTER event listener as you will be able to see all of the information in e.Data.

 

var interfaceObj, eventEmitterObj;

window.addEventListener( 'moduleReadyEvent', function( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

//function to initialize all event listeners used
function initializeEventListeners()
{
if ( interfaceObj )
{
if ( eventEmitterObj )
{
eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', enterSlide, false );
}
}
}

function enterSlide( e )
{
console.log( e.Data );
}

Lilybiri
Legend
November 30, 2021

@TLCMediaDesign Thanks, that would have been my answer as well.

 

For a limited number of functions, you could also store them as shared actions in your shared actions Library. It is a breeze to use those shared actions as a template to create a new advanced action with all the JS you need. 

ΕricAuthor
Participating Frequently
November 30, 2021

Thanks @Lilybiri!

Astro The Goat
Inspiring
November 30, 2021

In Adobe Captivate you can execute JavaScript either by using an "Adavanced Action" or by using an interaction that executes JavaScript.

 

You can't build a libarary of JavaScript functions that are called via Adobe Captivate like you could do if you were using HTML (although once the project has been published into HTML you may be able to amend the code that is produced to inlcude JavaScript)

 

A local preview will enable you to test your JavaScript via your browser or other device, so long as it is on the same network  

ΕricAuthor
Participating Frequently
November 30, 2021

Thank you!