Forum Discussion
Drop-Down Menus to Simulate Filling Out a Form
I searched for something like this when I first started working with Storyline. I saw many suggestions on how to make a drop-down menu using layers, which would not work for the forms I needed to duplicate. Here Is what I have been using ever since. My dream would be to have an automated version of this in Storyline someday. If someone knows a simpler way, I would love to know how you make them.
Example of a traditional drop-down menu.Create individual rectangles with your menu choices.
- Name the rectangles as "Menu- description."
- Set them to the hidden state
- Make sure that each one has a hover state
- Arrange them down the screen in the order you want them to appear
Create individual rectangles with your answer choices.
- Name the rectangles as "Ans- description."
- Set them to the hidden state
- Don't use a hover state on these
- Arrange them one on top of the other so you have a single pile of all of them
Decide what you want the original button to say, such as Select, and stack this on the top of the answer choice pile and set it to the normal state. Name it "Ans- Select."
Add a Hotspot on top of the stack of answer choices..
Set up the triggers. I will give the instructions for a 3-menu question.
- You click on the hotspot and all the menu items appears below
- Use "Change the state of Menu- option 1 to normal, when the user clicks on Hotspot Question 1." Create this trigger for each menu item you created (Menu- Option 2 and 3).
- You click on a menu item and the menu items become hidden, the correct answer is changed to a normal state and shows under the hotspot, and the incorrect answers change to the hidden state.
- Use "Change the state of Menu- option 1 to hidden, when the user clicks on Menu- option 1. You will need to do this for every menu option you have (Menu- option 2 and 3).
- Use "Change the state of Ans- option 1 to normal when the user clicks on Menu- option 1."
- Use "Change the state of Ans- option 2 to hidden when the user clicks on Menu- option 1." Create this for Ans- Option 3.
- If you want to pinpoint incorrect answers when the person clicks on a Submit button, I like to place a rectangle with a see-through yellow color to highlight the answers that need to be corrected.
- Name it "Highlight Q1" [Q1 = question 1]
- Set the highlight rectangle to the state of Hidden.
- Create a trigger "Change the state of Highlight Q1 to normal when the user clicks the submit button if the state of Ans- option 1 is hidden." [option 1 is the correct answer]
- Create a trigger "Change the state of Highlight Q1 to hidden when the user clicks the submit button if the state of Ans- option 1 is not hidden." [Don't use "normal" instead of "not hidden." It works most of the time but if it's not working this is the fix. Thank you to the late Walt who said we all have different definitions of what is normal!]
If you have to make multiple drop-down menus on the same page, make sure the questions at the bottom of the screen are in the timeline under the ones above them.
Here is an example:
https://360.articulate.com/review/content/d0f1ac8f-7354-4b99-992e-d704972a0d86/review