Have you ever tried painting with a twist?

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.

Playtest

[thrive_megabutton mt=”PLAYTEST THE SOLUTION” st=”(or skip if you want to build it first)” color=”light” link=”https://www.rabbitoreg.com/js/select/story.html” target=”_blank” align=””]

[thrive_megabutton mt=”Download Source” st=”(SL 360)” color=”light” link=”https://www.rabbitoreg.com/js/select/source.zip” target=”_self” align=””]

Let’s design!

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:

• We’ll have six rectangles (2 green for correct, 4 blue for incorrect testing)
• We’ll use Pick Many interaction, and add all six rectangles
• We need a variable to count how many are selected: pick
• We may or may not want to know how many correct are selected, so let’s create another variable: correct
• (optional) We may or may not want to know how many incorrect are selected, so let’s create another variable: incorrect
• When user clicks on a GREEN:
  • If the GREEN rectangle is not selected yet:
    • Add 1 to pick
    • Add 1 to correct
  •  If the GREEN rectangle is selected already:
    • Subtract 1 from pick
    • Subtract 1 from correct
• When user clicks on a BLUE:
  • If the BLUE rectangle is not selected yet:
    • Add 1 to pick
    • Add 1 to incorrect 
  •  If the GREEN rectangle is selected already:
    • Subtract 1 from pick
    • Subtract 1 from incorrect
• When pick changes
  • Let’s see if we reached our max:
    • if pick >= 2
      • STOP the interaction:
        • Set all rectangles that are currently not selected to disabled
        • Don’t disable selected rectangles, so user can unselect them
          • If user unselects one, pick will change. We’ll need to make sure we turn all back to normal state
        • Show SUBMIT button
          • if SUBMIT is clicked:
            • Handle layer for Correct / Incorrect
              • What happens there depends on your goals. You may or may not want to tell users how many correct choices they had (delayed feedback).
              • To preserve which rectangles are selected (you will lose the states after moving away from the slide), we need to set variables:
                • set all RxOn to false (R1On, R2On, etc. This is easy in JavaScript but you can also add six triggers to set them false)
                • add six more triggers to each one true if the respective rectangle is selected
                • use these variables later on to decide if user can do an action (user wants to make a fire but they don’t have a match, for example)
      • if pick < 2
        • CONTINUE the interaction:
          • Make sure the SUBMIT button is hidden
          • Make sure all rectangles are selectable (lift disabled state)

From mind to action

After thinking through the problem, I started building out the interaction in Storyline 360.

1. Created the variables
2. Added a variable, called Max and set it to 2. This is going to be the max limit of choice. It could just be a number (without a variable) in triggers but if for some reason you need to change that later on, you can just change the variable, rather than going through multiple triggers and changing a static 2. (This also gives you the flexibility of changing it on the fly. Maybe in one interaction, it is 2, in another it’s 3.)
3. Created ONE green rectangle. The reason I didn’t create all six rectangles first, is because I want to add the triggers to one first. Once the triggers are working on a green “prototype,” I can duplicate it. It also duplicates the triggers with it. Not only that but it’s smart enough to change the target of the trigger to the new rectangle. This may save you time in other projects: always create the first working prototype with triggers, then duplicate it.
4. Added the triggers from the logic above.

I SPENT AN HOUR ON THIS, HERE’S WHY:

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

13. PLAYTEST!

The rest of the implementation depends on what you want to do with the result.

I haven’t tried painting with a twist yet.