Capturing a Keypress in Captivate

Sometimes you need to control Captivate functionality and you struggle finding ways to accomplish your task. In this blog series, we'll be addressing different issues we've encountered personally and popular questions and problems discussed on forums regarding Captivate. Ready? Let's get started.

Tip 1: Controlling Keypress Entries

Have you ever needed to capture a keypress in Captivate? It's easy enough to capture a keypress in Captivate, but how do you capture the incorrect key? Someone recently posted in a Captivate forum that while they were able to capture the correct and incorrect key press entries and branch to slides based on a user's entries, they wanted an easy way to also capture if a user enters something outside of the entries they were evaluating, similar to a Catchall. In this post we'll give you a simple way to capture keypress entries and jump to a slide based on the results.You may find this useful when evaluating user responses to an interaction or use your imagination for ways you could implement this feature.

How it Works

First, we have created a swf file in Flash that will capture the keypress. This animation captures the keypress and sends the key to a function in JavaScript. Then, the script navigates to a specific slide based on the key. In this example, the keypress "A" will navigate to slide 2, keypress "B" will navigate to slide 3, and any other keypress will navigate to slide 4.

Click here to download demo that illustrates this fix in action.

Let's examine the JavaScript. First we have inserted this script just above the head tag in the Captivate generated html file.

Line 2 is the function declaration the swf file calls after a keypress.
Line 4 is used to capture the Captivate object in the variable "cp" so we can communicate with Captivate.
Line 6 is the statement if the "A" key is pressed.
Line 8 uses the cpEISetValue function to jump to slide 2 in the presentation.

NOTE: The slide numbering begins with zero. For example: to jump to slide 14 (in the Filmstrip), specify 13 as the value for this variable.

Line 10 is the statement if the "B" key is pressed.
Line 12 uses the cpEISetValue function to jump to slide 3 in the presentation.
Line 14 is the else statement for any other keypress.
Line 16 uses the cpEISetValue function to jump to slide 4 in the presentation.

That's it. To use this "widget", insert the animation on the slide in which you need to capture the keypress and add the javascript to your html file. This widget will work with Captivate 6 and 7. You can get a list of key codes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes.

Get Your Copy

The downloadable version contains the following:

Navigation using the left and right arrow keys
Capturing valid keypress' in an array displayed in Captivate
A message if the user enters any non-alpha key
Fully customizable since the code is in JavaScript!

Fill out the sign-up form by clicking the link below to get the .zip package containing more examples .cptx (CP 7), instructions, and the swf animation file. In addition, you'll receive FREE updates from TLC Media Design!