Learn about the Common JavaScript interface for Adobe Captivate

Last updated on 27 Des 2022

Adobe Captivate enables its users to make more powerful, yet leaner content using the new JavaScript Interface feature. This feature gives a common platform for executing JavaScript actions between SWF and HTML. Also, it makes JavaScript access to the actual content easier.

Now, you can write smaller JavaScript snippets to access different variables in the content. You can subscribe to different events generated by the content. You can perform all these small but powerful tasks easily without worrying about whether the content is SWF content or HTML.

You can use the common JavaScript interface in two ways:

Execute JavaScript action from Captivate project.
Add JavaScript code to the published HTML at runtime.

See Examples section for more information.

As depicted in the above diagram, the JavaScript acts as an interface between the browser and your content (SWF/HTML5).

cpAPIInterface

This object is the main object which holds the complete JavaScript interface. It contains many small utility functions which are required often in Execute JavaScript actions.

cpAPIInterface is an object available in the window scope. To access the interface object, following is the recommended use: window.cpAPIInterface

Methods:

Name	Description	Parameters	Usage
getVariableValue	Returns the value of the given variable name.	-	window.cpAPIInterface. getVariableValue ("cpQuizInfoStudentID");
setVariableValue	Sets the value of the given variable name with the given value.	variableName:String	window.cpAPIInterface. setVariableValue ("cpQuizInfoStudentID", "John");
play	Plays the movie.		window.cpAPIInterface. play();
pause	Pauses the movie.		window.cpAPIInterface. pause();
stop	Stops the movie.		window.cpAPIInterface. stop();
rewind	Rewinds and plays the movie.		window.cpAPIInterface. rewind();
next	Seeks the movie to the next slide.		window.cpAPIInterface. next();
previous	Seeks the movie to the previous slide.		window.cpAPIInterface. previous();
fastForward	Increases the movie speed to 2x, then 4x and then back to normal on consecutive calls.		window.cpAPIInterface. fastForward();
getPlaySpeed	Returns the movie playback speed in Frames per second (fps).		window.cpAPIInterface. getPlaySpeed();
getDurationInFrames	Returns the total number of frames in the movie.		window.cpAPIInterface. getDurationInFrames();
getDurationInSeconds	Returns the total duration of the movie in seconds.		window.cpAPIInterface. getDurationInSeconds();
getVolume	Returns the volume of the movie in percentage.		window.cpAPIInterface. getVolume();
setVolume	Sets the volume of the movie.	volume:Number (range : 0 - 1)	window.cpAPIInterface. setVolume(0.7);
navigateToTime	Seeks to a particular time (milliseconds) in the movie.	timeInMilliseconds:Number	window.cpAPIInterface. navigateToTime(3000);
canNavigateToTime	Returns a boolean value showing whether you can seek to a particular time in the movie or not.	timeInMilliseconds:Number	window.cpAPIInterface. canNavigateToTime(3000);
getCurrentFrame	Returns the current frame of the movie.		window.cpAPIInterface. getCurrentFrame();
getCurrentSlideIndex	Returns the current slide index of the movie.		window.cpAPIInterface. getCurrentSlideIndex();
getEventEmitter	Returns the handle to the cpAPIEventEmitter object.		window.cpAPIInterface. getEventEmitter();

cpAPIEventEmitter

This object is similar to any other Event Manager. It provides you the mechanism to subscribe/unsubscribe to different events which are generated within the content.

cpAPIEventEmitter is an object available in the window scope. To access the interface object, following is the recommended use : window.cpAPIEventEmitter

Methods:

Name	Description	Parameters	Usage
add EventListener	Adds an event listener function to a particular event.	eventName : One of the event names listed in this page. eventListenerFunction : Any JavaScript function. variableName : optional. One of the Captivate variable name whose value change should be notified. Should only be used with CPAPI_ VARIABLEVALUECHANGED event.	window. cpAPIEventEmitter. addEventListener("CPAPI_ MOVIESTART", function(){alert ("Movie Started");}); window. cpAPIEventEmitter. addEventListener ("CPAPI_VARIABLE VALUECHANGED", function(){alert("Variable Value Changed");}, "cpQuizInfoStudentID");
remove EventListener	Removes the event listener function for a particular event.	eventName : One of the event names listed in this page. eventListenerFunction : Any JavaScript function. variableName : optional. One of the Captivate variable name whose value change should be notified. Should only be used with CPAPI_ VARIABLEVALUECHANGED event.	window. cpAPIEventEmitter. removeEventListener ("CPAPI_MOVIESTART", function() {alert("Movie Started");}); window. cpAPIEventEmitter. removeEventListener ("CPAPI_VARIABLE VALUECHANGED", function(){alert ("Variable Value Changed");}, "cpQuizInfoStudentID");

List of Events:

Name	Description	Event Data	Enumerations
CPAPI_SLIDEENTER	Notifies that movie has entered a new slide.	slideNumber=NUMBER; frameNumber=NUMBER; lcpversion=STRING;
CPAPI_SLIDEEXIT	Notifies that movie is exiting a slide.	slideNumber=NUMBER; frameNumber=NUMBER; lcpversion=STRING; percentageSlideSeen= NUMBER;
CPAPI_ STARTPLAYBARSCRUBBING	Notifies that user has started seeking the movie using playbar.
CPAPI_ ENDPLAYBARSCRUBBING	Notifies that user has stopped seeking the movie using playbar.
CPAPI_ INTERACTIVEITEMSUBMIT	Notifies that user has performed an interaction with an interactive item.	frameNumber=NUMBER; includedInQuiz=BOOLEAN; issuccess=BOOLEAN; itemname=STRING; objecttype=NUMBER; questioneventdata= [object Object]; slideNumber=NUMBER;
CPAPI_MOVIEPAUSE	Notifies that movie has paused.
CPAPI_MOVIERESUME	Notifies that movie has resumed from a paused state.
CPAPI_MOVIESTART	Notifies that movie has started.
CPAPI_MOVIESTOP	Notifies that movie has stopped.
CPAPI_QUESTIONSKIP	Notifies that user has skipped a question slide.	correctAnswer=STRING; infiniteAttempts=BOOLEAN; interactionID=NUMBER; objectiveID=STRING; questionAnswered=BOOLEAN; questionAnsweredCorrectly =BOOLEAN; questionAttempts=NUMBER; questionMaxAttempts=NUMBER; questionMaxScore=NUMBER; questionNumber=NUMBER; questionScore=NUMBER; questionScoringType= [object Object],{Name:STRING}; questionType=STRING; quizName=STRING; reportAnswers=BOOLEAN; selectedAnswer=STRING; slideNumber=NUMBER;	interactionType - choice true-false fill-in long-fill-in hotspot sequencing matching likert questionType - choice true-false fill-in long-fill-in hot-spot sequencing matching likert questionScoringType ["Name"] - PretestQuestion GradedQuestion SurveyQuestion
CPAPI_QUESTIONSUBMIT	Notifies that movie has answered a question slide.	correctAnswer=STRING; infiniteAttempts=BOOLEAN; interactionID=NUMBER; objectiveID=STRING; questionAnswered=BOOLEAN; questionAnsweredCorrectly= BOOLEAN; questionAttempts=NUMBER; questionMaxAttempts=NUMBER; questionMaxScore=NUMBER; questionNumber=NUMBER; questionScore=NUMBER; questionScoringType=[object Object],{Name:STRING}; questionType=STRING; quizName=STRING; reportAnswers=BOOLEAN; selectedAnswer=STRING; slideNumber=NUMBER;
CPAPI_ VARIABLEVALUECHANGED	Subscribing to this event requires an additional parameter - variableName. Once subscribed, any change to the value of the supplied variable will be notified.	captivateVersion=STRING; varName=STRING; oldVal=STRING; newVal=STRING;

moduleReadyEvent

Captivate content also fires a moduleReadyEvent on the parent window object to notify that the content is loaded. Users can use this event as the notification for the availability of the JavaScript interface. Following snippet allows you to add a listener to moduleReadyEvent :

window.addEventListener("moduleReadyEvent", function(evt)
{
 //evt.Data carries the interface object.
 //It is same as window.cpAPIInterface
 var interfaceObj = evt.Data;
 var eventEmitterObj = interfaceObj.getEventEmitter();
});

Examples

Generating a random number

The code below generates a random number between 0 and 1.

alert(Math.random());

The following code generates a number between 1 and 10.

alert(Math.floor((Math.random()*10)+1));

The following code uses a function to generate a random number between two integers that are passed as arguments in the function.

function getRandomInt(min, max) {
   var jsRandomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
   alert(jsRandomNumber);
}

getRandomInt(10, 300);

Using Geolocation

Using geolocation, you can use a learner's geographic location to trigger certain events in a course or determine which learning objects stay hidden or displayed.

You can configure this scenario using Advanced Actions, but you can also configure geolocation support using JavaScript.

Create a variable of type Geolocation and assign the following values to the variable:
- Latitude
- Longitude
- Accuracy
Create a project with two objects, ss1 and ss2.

Depending on the configured Geolocation variable, you will show object ss2 and hide object ss1.

Note:

To hide any object, use cp.hide("object_name");

To show any object, use cp.show("object_name");

On the first slide, choose Actions and select Execute JavaScript from the On Enter drop-down list. In the script window, enter the following code:

window.cpAPIInterface.setVariableValue("cpInfoGeoLocation","BLR");
if (window.cpAPIInterface.getVariableValue("cpInfoGeoLocation")==="BLR")
{
    cp.hide("ss1"); // hide object ss1
    cp.show("ss2"); // show object ss2
}

Preview the project. You can see that an object is displayed or hidden based on the Geolocation variable.

Using local storage

With local storage, you can store data locally within the browser. For example,

localStorage.setItem("learnerName","John");

Using the dot notation,

localStorage.learnerName="John";

In local storage, data is persisted even after you close and reopen the browser.

In Adobe Captivate, you can use local storage to transfer variables from one course to the next. To implement local storage,

In a blank project, create a variable learnerName that stores the name of the learner.
Assign the variable to a text entry box. Any name you enter in the box gets assigned to the new variable.
Create a button near the text entry box. Enter the following JavaScript code so that the code is triggered when you click the button.
```
localStorage.setItem("learnerName", window.cpAPIInterface.getVariableValue("learnerName"));
```
Preview the project in a browser. Enter the name of a learner and click Submit. Once you assign the name to the variable, the value is now stored in the local storage.

Open the browser's debugger mode. For example, in Chrome, open the debugger mode and click the Resources tab. Expand Local Storage and choose the required host.

You can see the variable value stored in the local storage as a key-value pair.

1	Name of the learner.
2	Name of the variable.
3	Value of the variable.

Using session storage

In session storage, data stored gets cleared when you end a page session. A page session lasts as long as the page is open in a browser. If you open the page in a new tab or window, a new session starts.

sessionStorage("learnerName","John");

To get the data from session storage,

var myData = sessionStorage.getItem("learnerName");

To remove data from session storage,

sessionStorage.removeItem("learnerName");

In Captivate, you can store the name of a learner in session storage. For example,

sessionStorage.setItem("newLearner", window.cpAPIInterface.getVariableValue("newLearner"));

After previewing the project in browser, open the debugger console and in sessionStorage, you can find the name of the learner, as shown below:

1	Name of the variable.
2	Value of the variable.

Incrementing slide counter

The following code gets value of a custom variable "mySlideVisitCounter", increments it whenever user enters a slide and sets it back in the content.

//check if window.cpAPIInterface is available
if(window.cpAPIInterface) 
{
 //check if window.cpAPIEventEmitter is available
 if(window.cpAPIEventEmitter) 
 {
  //add a listener to CPAPI_SLIDEENTER event
  window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER",function(e)
                 {
                  //get the current value of mySlideVisitCounter from Captivate content 
                  var lSlideVisitCtr = window.cpAPIInterface.getVariableValue("mySlideVisitCounter"); 
                  //increment lSlideVisitCtr by 1
                  lSlideVisitCtr = lSlideVisitCtr + 1;
                  //set the value of mySlideVisitCounter in the Captivate content
                  window.cpAPIInterface.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
                 });
 }
}

The above code can be used as follows :

Execute JavaScript action
1. From Captivate project, click Actions tab in Property Inspector
2. In OnEnter drop-down, select Execute JavaScript and click Script_Window
3. Paste the JavaScript code in the window.
You can execute javascript action from any Captivate action as shown in the following screenshot:

Modifying the published content

You can also publish the content and then access the content internals using the JavaScript interface from outside.

Add the following snippet in the published HTML :

<script>
var interfaceObj;
var eventEmitterObj;
window.addEventListener("moduleReadyEvent", function(evt)
{
    //evt.Data carries the interface object.
    //It is same as window.cpAPIInterface
    interfaceObj = evt.Data;
    eventEmitterObj = interfaceObj.getEventEmitter();
});
//check if window.cpAPIInterface is available
if(interfaceObj)
{
    //check if window.cpAPIEventEmitter is available
    if(eventEmitterObj)
    {
        //add a listener to CPAPI_SLIDEENTER event
        eventEmitterObj.addEventListener("CPAPI_SLIDEENTER",function(e)
                                                            {
                                                                //get the current value of mySlideVisitCounter from Captivate content  
                                                                var lSlideVisitCtr = interfaceObj.getVariableValue("mySlideVisitCounter");   
                                                                //increment lSlideVisitCtr by 1
                                                                lSlideVisitCtr = lSlideVisitCtr + 1;
                                                                //set the value of mySlideVisitCounter in the Captivate content
                                                                interfaceObj.setVariableValue("mySlideVisitCounter",lSlideVisitCtr);
                                                            });
    }
}
</script>

Dapatkan bantuan lebih cepat dan lebih mudah

Pengguna baru?