More is in a... hyperlink - Dropdown Menu

HTML Update

A blog post about Hyperlinks in HTML output is published recently. Please check it out:

Hyperlink tips (HTML)

Intro 

In my last blog post I demonstrated how a hyperlink can overcome the limitation of states in Captivate, not allowing to add interactive objects to states.
In older versions of Captivate the widget 'Go to Slide' was available: a dropdown menu with slide names, useful to jump to those slides. That widget has disappeared, is not replaced by a Learning interaction (compatible with HTML5). 
Although this widget can be reproduced, using the Dropdown interaction, that solution has several drawbacks. The formatting of the interaction is limited (maximum font size is 14pt), and you would need a variable and a conditional advanced action with as many decisions as you have slides in the dropdown list.
A much easier solution can be found in this article, using hyperlink events. For a consistent behavior of the dropdown effect,  I also used Micronavigation. 

Hyperlink commands

The list with commands, opening the dropdown list in the Hyperlink dialog box is much shorter than the list with simple actions under the Actions tab. 

Of course the Web page is the first command, since that is what you expect to happen with a hyperlink. 
These commands are not available for a hyperlink event:
  • Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
  • Return to Quiz: is meant for remediation, normally to be triggered by a Next button
  • Play Audio/Stop Triggered Audio: can always be done using an advanced action
  • Execute Shared Action: which is really a pity :(
  • Pause: can always be done using an advanced action
  • Exit: can always be done using an advanced action
  • Toggle: can always be done using an advanced action
  • Show/Hide TOC: can always be done using an advanced action
  • Show/Hide Playbar: can always be done using an advanced action
  • Lock/Unlock TOC: can always be done using an advanced action
  • State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.

For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:


Example

Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.


Setup, variables and actions

Objects on Dropdown menu slide

The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

User variable v_start

The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplished. To mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

Events and Actions

1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

The back button on the content slides send the user to this DropDown slide, and the On Enter event of the slide is used to reset everything as it appeared first time: hiding the shape SS_DropDown, the arrow shape ArrowDropdown, and showing ArrowGoTo. Moreover the number of the first frame of this slide is stored in the variable v_start. This is the script:


2. Success event of the shape button SB_Menu: standard advanced action DropAct

This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.


3. Hyperlink events

Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

Dropdown Interaction - tips

Intro

Recently I published some tips about learning interactions, including an explanatory table. The use case in that post showed how to use checkbox and radiobutton interactions. Last week, a user asked a question about the dropdown interaction, which he used for a custom question slide: How can I check if the user has chosen an item? That is not difficult for checkbox and radiobutton, because their associated variable will be empty, but the situation is different for the dropdown interaction, hence this tutorial.
The most common failure that I detect on debugging advanced/shared actions with multiple decisions are due to a wrong understanding of the validation of those actions:
  • all decisions will be checked from left to right
  • there is no way of jumping out of the action when a correct condition is met.
In the use case from the example movie, that sequence behavior is very important!

Dropdown interaction

The properties dialog box is pretty limited:

In this example you see that:
  • entries are separated by commas
  • formatting allows to choose a font, font style and attribute (faux style), but font size is limited to 14pt maximum
  • the color dialog box doesn't show theme colors
  • the update button allows to see a preview of the look after formatting
  • if you want to validate the choice in the list, you need an associated variable (here v_drop); beware: you have to create the variable in the Variables dialog box
  • the first sentence mentions 'combobox' but as I understand the word combobox this is not correct: in a combobox you can not only choose from a list but you can type in a word (there was an older combobox widget), this learning interaction doesn't allow that.
Maybe you are bit puzzled by the first entry 'Choose a language'? Contrary to the radiobutton/checkbox interactions, the variable associated with a dropdown is never empty! By default it has a value equal to the first item in the list. In the example movie, you will see before choosing, and after resetting that v_drop is equal to 'Choose a language'.

Resetting: it is indeed possible since this latest version of Captivate not only to change the value of a variable by an action, but also to have this change reflected in the Display of the interaction. This new feature is used for the Clear button in the example movie.

Beware: for some reason, the first time you use the interaction you will have to click twice, first click to put focus on the interaction, second click to select item. Strange :)

Example Movie

This movie has only 4 slides. After the 'Intro'-slide you can choose a language on slide 'Drop'. Watch the variable v_drop that is visible in a text caption next to the learning interaction. You get 3 attempts to guess the correct language, reason for the variable v_attempts. The 'Drop' slide has two interactive objects: Submit and Clear. Try out Clear to see how the interaction is reset to its initial state. You can click Submit without choosing a language, you can choose a wrong language or the correct one. The third slide you'll only see when your answer is correct. If you exhaust the three attempts without correct result, you will end up at the 4th slide 'Retry', where you are able to get back to the 'Drop' slide and start guessing again.

Variables

Here is a screenshot of the user variables

As explained before v_attempts tracks the number of attempts and starts with value=3, v_drop is the associated variable for the dropdown interaction.

I used v_dummy, a variable containing the text  'Choose a language' out of laziness, to avoid having to type that text over and over again. Be careful: it has to be exactly the text in the first item, it is not possible to use a variable in the item list.

The variable v_groet is used on the third slide, to customize the text based on the current time of the user (cpInfoCurrentHour). The variable v_wrong is a Boolean (value=0) that will be set to 1 when the attempts are exhausted without finding the correct language.

Events and Actions

EnterDrop, triggered On Enter for slide Drop

This standard action resets everything on the second slide 'Drop': the group Gr_Feedback with empty, wrong and correct feedback messages (empty, wrong, correct) is hidden, group Gr_Bt with the two interactive objects made visible, variables v_drop and v_wrong are reset to the default values.

ResetAct, triggered by the Success event of the Clear interactive object

A standard action that restores v_drop to its default value and hides the group Gr_Feedback.

CheckSubmit, triggered by the Success event of the Clear interactive object

This conditional action has 5 decisions, one for each possible situation:
  1. EmptyDone if the user clicked on Submit without making a choice and it was the last attempt
  2. Empty if the user clicked on Submit without making a choice and there are still attempts left
  3. Correct
  4. WrongDone if the user choose a wrong language and it was the last attempt
  5. Wrong if the user choose a wrong language and there are still attempts left

The Sequence is important: if you put Empty before EmptyDone, it goes awry if it is the second attempt, because Empty would have decremented v_attempts and that means that EmptyDone would result also in a True condition, and user will lose an attempt. Same for WrongDone and Wrong, they cannot be switched. 

ExitDrop, triggered by On Exit event of slide Drop

Exceptionally I use the On Exit event, because in this case it will function perfectly. 

A simple conditional action, based on the value of v_wrong.

More...

There is a simple Jump to slide 'Drop' on the last slide. Resetting will happen with EnterDrop action.

The third slide has an On Enter action, to show the right caption based on the system variable cpInfoCurrentHour. 
Do you accept the challenge to figure out that (conditional) action? No need to use my tongue :)