Dropdown Interaction - tips


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.


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.


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 :)

20 responses
i try the reset button only, but it didn't function. may i know the value of variable v_drop.
v_drop is associated with the interaction itself, gets the value chosen from the dropdown list. Reset works with SWF-output, not always with HTML5 output.
My firm purchased Captivate 7 and trained us less than a year ago. I see from the user manual not much has changed up to Captivate 9. Maybe you can only use the variable approach which you've shown or the manual describes. My question is I have created a drop-down with a title and (3) choices. I would like the d/d to allow me to advance up to two particular slides in the current presentation. I see that Flash may be an option but my skill there is very limited. Regards Calvin
This is a very weird comment, because a lot has changed between 7 and 9, as was the case between 4 and 5. UI has changed, shared actions and responsive projects have been added, Multistates, SVG import, Quiz enhancements, Knowledge checks, Effects had a great upgrade, HTML5 output has improved tremendously, etc.. This article was written for CP8. It is a blog with free tutorials, but if you want more specific answers you'll have to post on the Captivate forums or hire a consultant. I would never go with Flash at this moment anymore. What you ask is perfectly possible with the dropdown learning interaction and advanced actions.
What I mean was I didn't see any difference in the dropdown in Cap 7 and Cap 8. Thank you for your guidance.
As I explained: in CP8 you can control what is displayed, you couldn't do this in CP7.
Thanks as always for your insight! So as a newbie I thought there was an easy way to create question slides with multiple choice answers presented in a drop down form. Potentially even more than one question on 1 slide. This is not possible without heavy customization as I understand now. Is that correct?
Advanced actions and variables are not really for a newbie. I wouldn't call it 'heavy customisation' but you'll need an understanding of the the design of the interaction and of the use of actions/variables.
Hi Lieve, Thank you so much for your generous contribution to the community! I have been trying to reproduce the drop down interaction and have run into an issue with the ResetAct. I have five variables the user needs to choose from. If all conditions are met, the user gets "positive" feedback and the "Next" button shows to take him to the next slide. If at least one of the conditions are not met (at least one wrong answer), the user gets negative feedback and is allowed to try again until he gets it right. The "try again" button triggers the ResetAct. So far, the feedback works ok if the user gets the answer from the first attempt. However, if the first time the user gets an error, the TryAgain button does everything it's supposed to be doing except resetting the variables. And, even if during the second attempt the user gets the correct answer, the feedback is still negative. Any ideas where could be the bug? thanks a lot!
Have you ever exerienced a situation when a variable assigned to the drop down interaction didn't show its value when playing the movie? Of course it was created in variables tab and it is even working for a Radio Button Widget.
Hi, thank you for your contribution! I enjoy reading your posts. I do have a question. Without having to add a Submit button that you could trigger an advanced action, can they modify the widget to allow advanced actions for each selection on the drop-down menu? I have a project that will require 2 widgets and the items on the second widget would change based on the item selected from the first widget. For example, the first widget may contain Red, Green, and Blue. If the user selected Red on the first widget, the second widget may contain the selections Light Red, Medium Red, or Dark Red, and so on for each color selected on the first widget. Is this capable of being done through this widget?
The other question I wanted to ask is that based on the item selected, can it perform an advanced action without having to add another button which triggers the advanced action? The reason being is for situations where a user is completing a form, which in real-life does not require a Submit button, but for purposes of the learning interaction we're required to put one in. Any workarounds? For example, the correct answer is Green when there are three options available, Red, Green, and Blue. Without having a Submit button, is there a way that we can say go to next slide if Red, display this message if Blue, and display another message if the correct answer Green is selected? Again, thanks for your assistance.
I am on the road. Can you look at my blog for a post 'More is in a hyperlink, Drop-down menu'. Would be a better start than the drop-down widget.
Is it possible to get the files for this anywhere?
Blog posts are free. I don't provide example files for free.
what would you charge for this file? in a time crunch and would save me some effort and most of all time. no worries if you don't do this...thnx
Hello, Thank you for your helpful tips. However I am facing an issue with the Dropdown preview in Captivate 9. An icon like a picture icon appears in the HTML5 preview in the dropdown before clicking on it. Do you know how to resolve this. Thank you in advance
Hello, Thank you for your helpful tips. However I am facing an issue with the Dropdown preview in Captivate 9. An icon like a picture icon appears in the HTML5 preview in the dropdown before clicking on it. Do you know how to resolve this. Thank you in advance
You posted the same question in a forum, where I have answered. Are you talking about this dropdown interaction because that was not clear? If yes, you can easily resize this interaction to create space for all the included items.
1 visitor upvoted this post.