Podręcznik użytkownika Anuluj

Learn about the Common JavaScript interface for Adobe Captivate

  1. Captivate User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Download Adobe Captivate
    4. What's New in Adobe Captivate (2019 release) Update 5
    5. What's New in Adobe Captivate (2019 release) Update 2
    6. Adobe Captivate 11.8 Release Notes
    7. Adobe Captivate Release Notes
    8. System requirements and download instructions for Adobe Captivate Draft
    9. Responsive Project Design with Adobe Captivate
  3. Create Projects
    1. Create different types of projects in Adobe Captivate
    2. Customize the size of an Adobe Captivate project
    3. Responsive Project Design with Adobe Captivate
    4. Create Virtual Reality (VR) projects
    5. Work with responsive text in Adobe Captivate
    6. Work with themes in Adobe Captivate
    7. How to apply view specific properties in responsive projects
    8. How to create backup files for Adobe Captivate projects
    9. Asset panel
    10. Create branching and forced navigation in Captivate
    11. Replace image on the stage
  4. Add and Manage Objects
    1. Work with multi-state objects in Adobe Captivate
    2. Object effects
    3. Insert web objects in Adobe Captivate projects
    4. Work with object styles in Adobe Captivate
    5. How to rotate objects in Adobe Captivate
    6. Resize and reposition objects by pixel
    7. How to manage objects with the Main Options toolbar
    8. How to merge objects in a slide
    9. How to manage objects in the library
    10. How to group objects in Adobe Captivate
    11. Edit object information using the Advanced Interaction panel
    12. How to copy, paste, and duplicate objects in Adobe Captivate
    13. Control the visibility of objects
    14. How to change the display order of objects in Adobe Captivate
    15. Apply shadows to objects
    16. How to align objects in Adobe Captivate
    17. How to add reflection to objects in Adobe Captivate
    18. Import assets into a Captivate project
  5. Slides
    1. Add slides to an Adobe Captivate project
    2. Editing slides in an Adobe Captivate project
    3. Delete Adobe Captivate project slides
    4. Change slide order in Adobe Captivate
    5. Set slide properties in Adobe Captivate
    6. Add and convert slide notes to audio files with Adobe Captivate
    7. Set up knowledge check slides in Adobe Captivate
    8. How to add slide transitions in Adobe Captivate
    9. How to work with master slides in Adobe Captivate
    10. How to lock Adobe Captivate slides
    11. How to hide or exclude slides in an Adobe Captivate project
    12. How to group and ungroup slides in Adobe Captivate
  6. Timeline and grids
    1. Use rulers and guides
    2. Work with grids in Adobe Captivate
    3. Work with the timeline
    4. Shortcut keys in Adobe Captivate
    5. Working with the filmstrip
    6. How to customize the Adobe Captivate workspace
    7. How to use the Adobe Captivate Library
    8. How to use the Branching panel in Adobe Captivate
  7. Create Quizzes
    1. Insert question slides in Adobe Captivate projects
    2. Set quiz preferences for Adobe Captivate
    3. How to enable learners to submit all quiz responses simultaneously
    4. How to set up question slides with Adobe Captivate
    5. Using random question slides in Adobe Captivate
    6. How to allow users to return to quiz
    7. Import questions from CSV format files
    8. Import questions from GIFT format files
    9. How to insert pretests in Adobe Captivate
  8. Audio
    1. How to insert audio into an Adobe Captivate project
    2. How to preview audio in Adobe Captivate
    3. How to edit audio files with Adobe Captivate
    4. View audio details in Adobe Captivate
    5. Set audio recording preferences and recording audio
    6. How to export audio from Adobe Captivate
  9. Video
    1. Slide videos
    2. Work with event videos in Adobe Captivate
    3. Differences between events and synchronized videos in Adobe Captivate
  10. Interactive Objects
    1. Add interactive buttons to your Captivate projects
    2. Create click boxes in Adobe Captivate
    3. Add text entry boxes with Adobe Captivate
    4. How to add audio to boxes and buttons
    5. How to add JavaScript to boxes and buttons in Adobe Captivate
  11. Interactions
    1. Create learning interactions in Adobe Captivate
    2. Create drag-and-drop interactions in Adobe Captivate
    3. How to configure widgets and interactions in Adobe Captivate
    4. Use Adobe Captivate variables in widgets
    5. Set the properties of widgets with Adobe Captivate
    6. How to create static, interactive, and question widgets in Adobe Captivate
    7. How to add widgets to your Adobe Captivate project
  12. Non-interactive objects
    1. Create and edit smart shapes
    2. Edit and create text captions with Captivate
    3. How to use images and rollover images with Captivate
    4. How to customize smart shapes in Adobe Captivate
    5. How to create zoom areas in Adobe Captivate
    6. How to set audio for noninteractive objects
    7. How to create rollover slidelets in Adobe Captivate
    8. How to create rollover captions in Adobe Captivate
    9. Change mouse properties in Adobe Captivate
    10. Use highlight boxes in Captivate
    11. Work with swatches in Adobe Captivate
    12. Fix size and position of non-interactive objects
    13. Add animations to a Adobe Captivate project
  13. Advanced Editing and Project Reviews
    1. How to link Adobe Captivate projects
    2. Import, export, and delete content
    3. Skins
    4. Create accessible projects in Adobe Captivate
    5. Create a table of contents (TOC) with Adobe Captivate
    6. Resize Adobe Captivate projects
    7. Projects and project preferences
    8. How to preview projects in Adobe Captivate
  14. Variables and Advanced Actions
    1. Adobe Captivate variables
    2. How to create user-defined variables in Adobe Captivate
    3. Advanced actions in Adobe Captivate
    4. Shared actions in Adobe Captivate projects
    5. Edit or delete user-defined variables in Adobe Captivate
    6. How to assign advanced actions to an event
  15. Record Projects
    1. Create interactive videos
    2. Automatic and manual recording with Captivate
    3. Set recording preferences in Adobe Captivate
    4. Record video demonstrations with Adobe Captivate
    5. How to record software simulations in Adobe Captivate
    6. How to pause recording
  16. Publish Projects
    1. Preview and publish responsive projects
    2. Publish project to Adobe Captivate Prime
    3. Publish projects as HTML5 files with Adobe Captivate
    4. Publish projects as executable files
    5. Publish projects as MP4 files with Adobe Captivate
    6. Set publishing preferences in Adobe Captivate
    7. Using web fonts from Adobe Fonts in Adobe Captivate
    8. Report quiz results to an internal server
  17. Use Adobe Captivate with Other Applications
    1. Import and edit PowerPoint presentations in Captivate
    2. Upload an Adobe Captivate project to a Learning Management System
    3. Learn about the Common JavaScript interface for Adobe Captivate
    4. How to publish Captivate projects to Microsoft Word
    5. Using Adobe Connect with Captivate
    6. How to add Captivate projects to a RoboHelp online help system
    7. How to package multiple SCOs using the Adobe Multi-SCORM Packager
  18. Troubleshoot Adobe Captivate
    1. Resolve known issues and limitations in the latest versions of Adobe Captivate, Adobe FrameMaker, and Adobe RoboHelp.
    2. Early build for Captivate (2019 release) on macOS Big Sur (macOS 11)
    3. Hotfix for VR content not playing on devices
    4. Configure SSL for Live Preview on Devices
    5. Captivate (2019 release) activation issues on macOS Catalina
    6. Captivate responsive courses will not auto-play on browsers
    7. Issues with Asset panel in Adobe Captivate (2019 release)
    8. Error 103 while installing Adobe Captivate
    9. Issues when previewing a Captivate project

 

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: 

  1. Execute JavaScript action from Captivate project. 
  2. 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 : 
    1. optional. 
    2. One of the Captivate
      variable name whose value change should be notified.
    3. 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.

  1. Create a variable of type Geolocation and assign the following values to the variable:

    • Latitude
    • Longitude
    • Accuracy
  2. Create a project with two objects, ss1 and ss2.

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

    Uwaga:

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

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

  3. 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
    }
    
  4. 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,

  1. In a blank project, create a variable learnerName that stores the name of the learner.

  2. Assign the variable to a text entry box. Any name you enter in the box gets assigned to the new variable.

  3. 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"));
  4. 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.

  5. 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 :

 

  1. 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: 

  2. 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>
Logo Adobe

Zaloguj się na swoje konto

[Feedback V2 Badge]