Using JavaScript to Show Dynamic Variable Captions in Adobe Captivate

Hello! It's me again, your friendly neighbourhood Trihan, with another Captivate tutorial that will help you leverage the amazing power of Javascript.

Forgive me if I'm not aware of an easier method, but traditionally if you want to have a caption in a Captivate project that changes its text based on a condition, you have two options:

1. Create two captions on the slide, both of which are hidden. Use a conditional advanced action to show the correct one.
2. Create two different slides, each of which has one of the captions on it, and use a conditional advanced action to jump to the correct slide.

Well, ladies and gentlemen, I am here to provide a third option that requires only one slide and one caption! Could it be true? Absolutely! (for all I know this is completely common knowledge and I'm making myself look like an idiot, but on the offchance that this turns out to be useful to anyone I will soldier on regardless)

All you need is one user variable. Yep, that's it!

Let's say, for instance, that we've asked the user to enter their name at the beginning of a project, and would like our captions throughout to include the name if they've entered one, or not if they left the box blank. Ordinarily, that would require a user variable set to nothing to compare to the box value, a user variable for the box itself, and two captions for every slide on which you might include the name.

Here's my way. For the purposes of the demonstration the user variable for the caption will be called v_Caption1, and the one for the name input box will be v_Username. Let's say we want to welcome the user to the course after they've entered their name, or have a little fun with them if they haven't.

In the slide with the caption, set its text to "$$v_Caption1$$". In the On Enter action, choose "Execute Javascript". Then in the script window enter the following:

var objCP = document.Captivate;
objCP.cpEISetValue('v_Caption1','Hi' + ((objCP.cpEIGetValue('v_Username') != '') ? ' ' + objCP.cpEIGetValue('v_Username') : '') + ', and welcome to the course!' + ((objCP.cpEIGetValue('v_Username') == '') ? ' I noticed that you didn\'t tell me your name. It\'s okay to be shy, but I like to call people by name when I\'m teaching them!' : ''));

Obviously this is a bit flippant for stuffy training modules, but that's my style and I make no apologies for this. :P the point is that you can tailor what the caption says based on the value of a variable--or many variables! The only limit is really your imagination and available RAM.

The driving power behind this is what's known as an immediate if, or iif statement. The syntax is: (condition) ? action if true : action if false

Note that you can have nested iifs, or iifs inside each other. So you could, for instance, have some text display if the condition is true, and if false check another condition, then show X text if that condition is true and Y text if it isn't. You can have many layers of nesting, which allows for truly dynamic feedback on your course without having to make many slides or captions to do so. However, caution is advised as it's easy to put a wrong bracket somewhere or forget a quote. Also note that any apostrophes in the text need to be escaped to avoid Captivate thinking you've ended a string early.

And that's all there is to it! It's a simple technique, easy to use but hard to master. The applications are many, and it could be just what you need to inject a spark into your e-learning.

If anyone has any questions about this technique or any of my other tutorials, feel free to contact me at [email protected].

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

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!