February 1, 2017
How to Trigger Captivate Advanced Actions with Javascript
Comments
(5)
February 1, 2017
How to Trigger Captivate Advanced Actions with Javascript
I have worked in the eLearning industry for over 15 years. I enjoy making tools/applications/web apps do things they were not meant to do. I have launched several tools to help develop better eLearning. CoursePortfolios.com: Explore demos from the world's best eLearning designers and developers. Where the most creative eLearning professionals share demos of their craft. ReviewMyElearning.com :  The is the best way to collect feedback from SMEs, Team Members, Clients, etc. Plus it's all in the cloud. I use my skills to create custom solutions for Web, Mobile, and Desktop. Primarily in the eLearning arena but we provide solutions for many other industries.
Newbie 17 posts
Followers: 44 people
(5)

A lot of the work I do involves access to course variables, objects, and functions from outside via JavaScript. Some tools make it easier than others. One of the most common things I need to do is trigger a chain of actions to run when a variable is changed. For instance, I may want to lock all the navigation until the server reports that user may proceed. (Maybe they need to complete a task on the site before continuing.)

In Adobe Captivate, I would create a variable named ‘isLocked’ and set it to true. Then I would use JavaScript to watch for (or fetch) an update from the server. Then I would set the variable to false when I get the update: cp.cpEISetValue(“m_VarHandle.isLocked”, false). But that will not automatically change the state of my navigation or unlock slides, etc. So I need to run an Advanced Action that will take care of those items for me. But I will also need a way to run that from JavaScript.

My solution for Captivate 9 responsive projects requires just a little setup in the course and only two lines of JavaScript. You can play with this example here.

First, we need to create our variable in the course. In this example, I am naming it ‘isHighFiving’ with an initial value of ‘no’.

 

Next, I want to create an Advanced Action that will check the value of isHighFiving and change the states of our stick figures accordingly (and flip the value of isHighFiving). Here’s what that would look like:

 

Now, we need a way to trigger that Advance Action. Insert a Click Box and set it to execute the new Advanced Action when clicked. Turn off all the prompts, and uncheck the use Hand Cursor option. Our goal is to hide this box so that Learners will not accidentally click it. I like to make mine 1px X 1px and stick them along the edge. In the old days, we put a lot of “fake” click boxes in the corners and some learners have grown savvy to that.

We need to rename that click box to something useful we’ll remember later. I often use the same name as the Advanced Action. In this case ‘toggleHighFive’.

That is it in the course, go ahead and publish.

After it is published, I will add my JavaScript functionality to the the HTML file. How and when you decide to trigger the Action varies a lot. In this example, I am going to wait ten seconds after the page loads and then ask the learner. If they respond OK, we run the function. This may look complex but really the important part is just two lines.window.onload = askLearner
function askLearner(){
setTimeout(function(){
var r = confirm("Should we High Five?");
if (r == true) {
var box = $('#toggleHighFive')[0];
cp.clickHandler(box);
}
}, 10000)
}

The important two lines are:

var box = $('#toggleHighFive')[0];
cp.clickHandler(box);

First, we find our click box (we named it toggleHighFive).

Then, we trick Captivate into thinking it was clicked. 

If you would like trigger it manually yourself you can:

Press F12 to open your browser’s console.

Paste this line into the console:

var box = $('#toggleHighFive')[0]; cp.clickHandler(box);

Hit return.

Watch the video below to see all of this in more detail.

 

And don’t forget to download the Advanced Action Example files to explore the solution yourself!


James-Kingsley-BioJames Kingsley has worked in the eLearning Industry for over 15 years. He has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is the Senior Technology Architect for eLearning Brothers and the Co-Founder of ReviewMyElearning.com. You can also follow him on Twitter or connect with him on LinkedIn for additional tips and examples.

5 Comments
2019-07-08 17:05:27
2019-07-08 17:05:27

cool thanks. I’ve been complaining for years that Captivate won’t natively let you call one advanced action from another. This is a nice workaround for that.

Like
(1)
2019-07-03 09:53:02
2019-07-03 09:53:02

Thx!

This is working but not if you call the ‘toggleHighFive’ (in normal slide since you can not name buttons in a masterlide) from a MASTER SLIDE. (Function return an undefined ‘id’ message)

Like
(1)
2017-05-18 23:18:48
2017-05-18 23:18:48

This is an interesting concept. Can you use Javascript to populate User variables in Captivate? For instance if I have a random number generator — can I use that random number to fill a captivate user variable that I can then query using conditional actions from within Javascript?

Like
(1)
(2)
>
MICHAEL WILDAY
's comment
2017-11-27 18:00:33
2017-11-27 18:00:33
>
MICHAEL WILDAY
's comment

You can also use cp.changeState instead of having to use advanced actions.

Like
()
>
Jeremy Shimmerman
's comment
2017-11-28 20:43:57
2017-11-28 20:43:57
>
Jeremy Shimmerman
's comment

Right… I have another blog post on that somewhere… The point of this post was to demonstrate how to trigger Advanced Actions; which could be much more complicated this this demo.

Like
()
Add Comment