CpExtra Basic Concepts

This page explains basic concepts related to JavaScript, HTML5 and the Infosemantics CpExtra widget for Adobe Captivate.

How Captivate widgets worked previously

In the past, Captivate widgets were usually developed as a single widget that filled a single need. 

For example, if you wanted to add a drag and drop interaction to a course (in the days before Captivate had native drag and drop functionality), you would design and build a drag and drop widget. If you want to fix an issue in Captivate where TOC items are not being marked as completed, you would create a different widget to accomplish that task alone.

Each widget was usually designed as a single tool for a specific task; just as a hammer is designed to drive nails, a screwdriver to drive screws, or a knife to cut bread.

As a result, Captivate developers often found they accumulated a whole toolbox full of widgets to cover each different piece of added functionality they required for projects. They would often need to add multiple widgets to projects, sometimes even several widgets on a single slide in order to achieve instructional design goals.

How is CpExtra different to other Captivate widgets?

CpExtra is still a widget that you insert into your CPTX file, but instead of delivering just one primary feature or performing one main task, it can do many different things. It’s like one those amazing multi-tools that have dozens of tools inside a very compact package.

In a similar way, CpExtra has many built-in software functions designed to resolve annoying issues or limitations in Captivate’s HTML5 output, as well as add extra out-of-the-box functionality that Captivate never had before. This means instead of inserting multiple widgets on various slides throughout your project, you only need to insert one CpExtra widget for the entire project.

Additionally, while other widgets usually need a Widget Properties Dialog to configure what the widget can do, CpExtra is designed to use standard features and dialogs in Captivate’s existing user interface to access its features and configure how they work. 

All of this means that CpExtra is much more than just a widget. It was designed from the ground up as a system or platform that can be used to extend the capabilities of Captivate’s HTML5 and Responsive output.  

How do I access or configure CpExtra features?

There are several ways the Captivate interface can be used to interact with CpExtra. They are listed below.

Assign a value to specially named User Variables

Most of the time CpExtra features are accessed through Captivate user variables that use a certain special naming format beginning with the letter x.  CpExtra will respond whenever it detects one of these special variables is assigned a value.  (NOTE:  If you intend to use these special variables with CpExtra, you need to create them as custom User Variables in Captivate and add them to your CPTX project file first. See this blog post for an explanation about how to create a User Variable.)

For example, the xcmndHide variable can be used to hide objects on a Captivate slide.

Note that the names of these special variable are case sensitive and you need to make sure they are spelled and capitalized correctly when you create them. For example, CpExtra will recognize and use xcmndHide but WILL NOT recognize or work with a variable named xcmndhide because the capitalization does not match correctly.  (Captivate does not as yet allow you to change the name or spelling of a user variable once it has been created.  If you inadvertently spell the variable name incorrectly, delete that variable and create another one.)

Since all of these special variables start with the letter 'x' (short for 'extra') this means they will sort alphabetically and be easily found near the bottom of any Variables drop down menus in Captivate. (See an example in the screenshot below.)

But what if you find yourself using a certain variable more often than others, and you'd like to save time by making that variable sort to the top of the variable's dialog? Then you can put an underscore ( _ ) character in front of any CpExtra variable name (e.g. _xcmndHide) so that it sorts to the top of menu lists, yet it will still be recognized by CpExtra at run-time.  (See an example in the screenshot below.)

Click Here to see a list of all specially named user variables which CpExtra will recognize.

Variables with a certain prefix

CpExtra allows certain user variables to be assigned a given type based on the letters at the start of their name. For example, you may want a course user's userName to be saved into local storage so this data can be recalled at a later date (or by another project).  To do this, simply ensure that you name the variable as: ls_userName  (The letters ls_ stand for local storage.)

CpExtra will respond when it detects any variable that starts with ls_ and will save the variable's data to the browser's local device storage area. This means the number of local storage variables you can have is only limited by the resources of your mobile device or system. It doesn't matter what name comes after the ls_ prefix, CpExtra will still identify that variable as one whose data requires local storage and treated as such.

Just as with the specially named x variables mentioned above, you may add an underscore ( _ ) character in front of the prefix to make it sort to the top of the variables list. So _ls_userName will still be recognized by CpExtra as a storage variable.

In the case of storage variables prefixes are NOT case sensitive. So LS_userName is still a valid variable name.

Recognized prefixes include:

  • ls_ - Local Storage
  • ss_ - Session Storage
  • get_ - Get Variables

See this page for more information about persisting data across sessions with CpExtra.

Slide object state names

CpExtra's automatic state swapping feature makes object states automatically appear under certain conditions. The conditions under which a given object state should become visible are specified by its object state name.

Please see the automatic state swapping help page for more information about what constitutes a valid object state name that will work with CpExtra's automatic state swapping feature. But in general, all state names starting with x_ will be regarded by CpExtra as special. If a state name is not valid, CpExtra will display an error message informing you and stating why the name is not valid.

JavaScript API

The CpExtra JavaScript API adds some useful tools for JavaScript developers working on Captivate HTML5 projects. However, this feature is still being developed and there is currently no documentation to explain it. However, if you're feeling brave, use your browser's developer tools to check out the 'X' object attached to Captivate's window object.

If you have any enquires about the JavaScript API, please contact us here


Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!