Dynamically enable/disable interactive objects

Scenario: Imagine that you have certain interactive objects in your course content that you need to enable and disable based on the values of user variables (or possibly even system variables).

For example, you may want to limit interactivity based on the user’s current quiz score. This might be necessary because you need certain content to become ‘unlocked’ and navigable only after the user has achieved a given score.

How can you use Adobe Captivate variables and advanced actions to control the enabled/disabled state of interactive objects?

Techniques required to achieve this interaction

In another tutorial on this website we showed how to use standard actions to disable interactive objects after a single use. However, in this scenario we use some custom user variables and conditional actions because the number of uses allowed for the interactive object will be changing dynamically and could be anywhere between 0 (disabled) to infinity (no limit on use whatsoever).

In this tutorial we’ll be using variables to count the number of times the button is allowed to be clicked, and the number of times it actually has been clicked. We’ll create a conditional action to check whether the click count is less than the click limit to determine whether or not to execute an action. And we’ll also concatenate text strings to build dynamic feedback to keep the user informed.


Step-by-step

Set up the variables

  1. Open the Variables dialog (Project > Variables) and add two new user variables named as follows:
    - ButtonClickCounter – This variable tracks the number of times the button has been clicked. Set the initial value of this variable to 0.
    - ButtonClickLimit – This variable holds the number of times the button is allowed to be clicked. You could manually set this to a given number, but in this tutorial we’ll be using a Text-Entry Box to set and change the value at will.

    Set up the basic slide objects
  2. Insert a button on a slide in your project and give it a suitable Name in the Properties tab so that you can find it more easily in the drop-down lists when creating your conditional action.
  3. Insert a Text-Entry Box object and configure it as follows:
    - In the Properties tab > Name field, call it TB_ClickLimit (or similar).
    - In the Properties tab > General accordion, set Default Text to 1. (This will mean your button is allowed 1 click by default.)
    - Deselect Validate User Input.
    - Make sure the On Focus Lost event is set to No Action.
    - Open the Variable drop-down list and select the ButtonClickLimit variable you created earlier as the associated variable to store any value typed into this TEB.
    - In the Options accordion below, deselect Show Button.
    - To make it clear this TEB is setting the click limit, I’ve added a text caption label as well.
  4. Let’s add a couple more text captions and insert the user variables we created earlier. These will show how the variable values are changing as we use the TEB and the button. Your slide should now look something like that shown below…

    NOTE: After debugging your interaction, when ready for final publishing, hide these extra captions at run-time by deselecting their Visible in Output setting in the Properties tab.

    Create the basic conditional action
  5. Open the Advanced Actions dialog (Shift + F9) and create a new conditional action named LimitButtonClicks or similar.
  6. In the first decision block set the condition to check IF ButtonClickCounter is less than ButtonClickLimit.
  7. In the Actions section add an Expression to increment the ButtonClickCounter variable by 1.
    Your conditional action should now look something like that shown below.
  8. If you were using this technique in a real project, you would now add any other actions the button click was supposed to achieve. For example, if this was a navigation button then you might be adding a jump to a different slide.
  9. When you have completed your conditional action, click the Save As Action button and then Close button to exit the dialog.
  10. Save changes to your project file and then publish to test the result.

How this works

When you first open the slide, the Button Click Limit is set to 1 by default and the Button Click Count is on 0 (because you haven’t as yet clicked the button. If you now click the button, the click count is incremented by 1, which will then mean the click limit is reached and the button will become unresponsive unless you type a higher number into the TEB. For example, in the screenshot below, clicking the button once has increased the click count to 1 and reached the previous click limit. So, I’ve typed the number 3 into the TEB field to give myself two more allowed clicks.

In this case, using a conditional action means we don’t need to use the Disable action to stop the button from working. If the condition does not evaluate to TRUE, the action is simply not performed. This also saves us the trouble of re-enabling the button next time the conditional action is executed.

How can we improve the usability of this interaction?

So far, this tutorial has just illustrated a couple of basic concepts involved in dynamically enabling or disabling a button according to the number of times it is used. But there are some obvious problems that we would normally want to address in a real-world project:

  • The button still looks as if it is active even when it is effectively disabled. Ideally its appearance should change to clearly indicate its enabled or disabled state. In another tutorial exercise I demonstrate how to provide visual feedback that an object is disabled by showing a faded highlight box or a doctored image over the top of the interactive object. The conditional action we’ve created in this exercise could be tweaked to do this.
  • Another improvement would be to show feedback text to indicate how many more clicks are allowed, and when the click limit has been reached. That’s what I'll show how to do in the next section below.

Show feedback to indicate number of clicks remaining

  1. Open the Variables dialog and create the following new variables:
    - ButtonRemainingClicks – Stores the difference between the value of the ButtonClickCounter variable and the ButtonClickLimit variable.
    - MessageText – Holds any feedback messages displayed to the user.
    - NonBreakingSpace – A variable that holds a non-breaking space character to use when concatenating strings to create a dynamic feedback message.
  2. Add a text caption to the slide and insert the MessageText variable. Format this caption to be bold and colourful so that it will attract the user’s attention when a message is displayed.
  3. Open the LimitButtonClicks conditional action created earlier, move to the second decision block and configure it as follows:

    - Name the decision block as Feedback or similar.
    - Set the condition as IF ButtonClickCounter is greater or equal to ButtonClickLimit.
    -Set the first action line to Assign the MessageText variable with the text string: “Sorry! You have reached your click limit.”
    - Set the second action line to Show the text caption that displays the MessageText.
  4. In the same decision block, set the ELSE actions in the exact order shown below:
    - The first Expression subtracts the ButtonClickCounter variable value from the ButtonClickLimit variable and assigns the result as the value of the ButtonRemainingClicks variable.
    - The next four Expression actions concatenate text strings with the NonBreakingSpace variable and the ButtonClicksRemaining variable to create a dynamic feedback.
    -The final action line Shows the text caption that displays the message (just in case it hasn’t been shown already by a previous execution of this conditional action).
  5. Click the Update Action button at the bottom of the dialog and then click Close to exit.
  6. Save changes to your project file, and then publish to test the interaction.

How does this interaction work now?

As you can see below, each time you click the button, the click count is incremented by 1.

The red message text shows the number of clicks you have remaining (as the current value of the ButtonClicksRemaining variable). But as soon as the click count variable is equal to the Click Limit value, then the feedback message changes to inform you that you’ve reach your click limit. The button will then cease to work unless you type a new value into the text-entry box to increase the Click Limit again and allow further interaction.

As you become more familiar with the concepts demonstrated in this exercise you should be able to think up lots of creative ways to make your course interactions more dynamic and responsive to user input. For example, many of these concepts are widely used in serious games.
 


If you liked this topic, you'll also like these...

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!