The other day someone posted a question on Articulate’s eLearning Heroes community:
“Let’s say I have multiple items I want the user to select from. I can use the Pick Many built-in feature. But, what if I want to limit the user to 6 out of the 12 items. Any 6 six items! So, in other words, I want each item to be selectable, but when the number of selections reaches the maximum, I want the interaction to disable any other items.”
What’s this interaction good for? For example, you have a set of items you need to choose from for a trip. You have space for six items. Any six items. Later, you choice will determine what you can do. Or, let’s say this is a first-aid kit, and you’re going on a hike. What are the essentials to take with you?
Additionally, we must be able to recall which items were selected later on in the course.
For the prototype, let’s assume we have 6 items (rectangles). You are limited to carry two items.
Everything starts in the mind! Tools and tech should support your design but they should not drive it. So, you can use napkins, post-it notes, Twine, paper and pencil, whatever floats your creative boat. Here’s an initial sketch I had in mind:
Here’s where my mind went:
After thinking through the problem, I started building out the interaction in Storyline 360.
Originally, my triggers were based on Selected and Normal states. Adding when state is Selected, and subtracting when state is Normal. However, that logic didn’t work. You can try it on your own. I ended up using Selected and not equal to Selected. (Relying on states sometimes may cause you problems. For example, while you hover over an image, its state may be Hover and not Normal. Even if once you move your mouse, it goes back to Normal. But, if it’s Disabled, it will stay Disabled. Therefore, best to use the not equal to comparing to whatever state you’re checking against.)
5. Duplicate the Green rectangle.
6. Duplicate the Green rectangle, and change the color to Blue. This is going to be the first incorrect item. Remove the Correct triggers. We’re still counting the picks but selecting an incorrect answer will not change your correct selection.
7. Duplicate the new prototype, so you have 4 blue ones and two greens.
8. In the Form View, add all rectangles to the interaction, and set the two green ones as correct.
SAVE!!! I completely forgot to tell you!! SAVE!!
9. Hide the built-in Submit button: click the cog on the lower-right corner for the slide settings, and remove the Submit button.
10. Add a new button and name it SUBMIT. Set the initial state to Disabled. Create a state for Disabled, make it grayed out something for now.
11. Add a trigger to the SUBMIT button to submit the Pick Many interaction.
12. Add two triggers that control the SUBMIT button:
When variable Picked changes: set SUBMIT state to normal if Picked >= 2, set it to Disabled if Picked <2
The rest of the implementation depends on what you want to do with the result.
I haven’t tried painting with a twist yet.