User Guide Cancel

How to add JavaScript to boxes and buttons in Adobe Captivate Classic

Last updated on 9 Oct 2023 | Also applies to Captivate

You can add JavaScript to click boxes, text entry boxes, and buttons in Adobe Captivate Classic projects. The JavaScript can run when a user clicks inside or outside the box or button. Using JavaScript gives you the opportunity to extend projects in numerous ways while adding interactivity.

Click the click box, text entry box, or the button.
In the Action section of the Property inspector, select Execute JavaScript in the On Success drop-down list.
Click Script_Window.
Enter your JavaScript code in the text box and click OK. If you have the JavaScript in another location, copy it and paste it into the text box.

Examples

In this example, you will enter a name in a text entry box and click a button. If the name matches a pre-defined value, you will see a success message, else you will see a failure message.

Create a variable uName for the project. Do not assign any value to uName. For more information on creating a variable, see Create variables.
Insert a text entry box (Text > Text Entry Box) and assign the variable as a value in the text entry box. Highlight the text caption in the box and click [X] in the Properties Inspector. When you click [X], you can see a drop-down list from where choose the variable you had created and insert the variable as text in the text entry box.

This acts as a validation against any name other than the one you will set in the Advanced Actions panel.
Insert a button (Interactions > Button) near the text entry box. Select the button, click Actions in the Properties Inspector, and choose Execute JavaScript from the On Success drop-down list.

Also, clear the Continue Playing the Project check-box to pause the slide after clicking the Submit button in the browser.

Enter the following JavaScript code in the script editor.

myName=window.cpAPIInterface.getVariableValue("uName");
if (myName=="John")
{
         alert("Hello "+ myName + "!");
}
else
{
         alert("Wrong name. Try again.");
}

Run the project in the browser. If you enter "John" in the text field and click Submit, you can see a pop-up that displays Hello John!

If you enter anything else, you can see a pop-up that displays a failure message.

In the second example, you will use some in-built Captivate Classic variables and view information, such as, current date or number of slides in a project. For a list of all Captivate Classic system variables, see Captivate Classic variables.

As shown in the previous procedure, create a button, and assign it to execute some JavaScript code upon a click event.

To display the current date in DD/MM/YYYY format, use the variable cpInfoCurrentDateStringDDMMYYYY. Enter the following JavaScript code in the code editor.

myDate=window.cpAPIInterface.getVariableValue("cpInfoCurrentDateStringDDMMYYYY");
alert(myDate);

Adobe

Get help faster and easier

New user?

How to add JavaScript to boxes and buttons in Adobe Captivate Classic

Examples

Get help faster and easier

Ask the Community

Contact Us