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 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.
https://www.youtube.com/watch?v=J0t6xgEiG1g
And don't forget to download the files to explore the solution yourself!
James 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 onTwitter or connect with him on LinkedIn for additional tips and examples.
