I could really use some help with an interaction I'm working on. I'm comfortable working with variables, but can't figure out the best way to approach this activity.
Slide 1 will present the learner with a series of eight or more choices. The learner can only select three choices and those choices will be presented on the following slide.
1) how can I prevent the learner from selecting more than three choices? 2) what's the best way to carry over the selected choices to the new slide?
Do I need a variable for each choice? Or, could I use three text variables and have those populate dynamically?
I really can't figure out how to approach this interaction:-/
Thanks for any ideas or suggestions you can share!!!
Thanks for popping into the community with your question. I LOVE challenges like this ... figuring out how to get an interaction to work #variablesnerd
There is not one right or wrong way to do this. In fact, there's probably a whole bunch of ways this can be accomplished. I created a little example file here where you can see I have included 6 choices, and the learner needs to select 3. On the following slide, they are presented with their 3 choices and can then learn more about each one.
I've also attached the Storyline 360 .story file here to the discussion if you want to take a closer look.
Here's a high level explanation of what I did:
Created slide 1 with a radio checkbox for each choice.
Created a number variable called "Choice_Counter" with a default value of 0
Added a trigger to each choice to "Add a value of 1 to the Choice_Counter variable" when they select it
Created a pop layer with a Submit and Reset Choices button on it
Added a trigger to automatically display the pop up layer when the "Choice_Counter" number variable is equal to 3.
Created a true/false variable for each choice with a default value of False (I named them Choice1, Choice2, Choice3, etc...)
Add a trigger to the Submit button to "adjust the Choice variable to true IF the object is selected" for each of the variables (this is how I will control which choices are displayed on the next time - the 3 choices that are selected will now have a variable with a value of "True" instead of "false")
On the reset button, add some triggers to reset each choice to "normal state" and reset the Choice_Counter variable to 0, in case they want to change their choices.
On slide 2, add all of your choices and for each one create a disabled state. Set the Initial state for your choices to "Disabled"
Add triggers to change the state of the object to Normal if the associated choice variable is equal to true.
That is honestly as simple and straightforward as I could do it.. but that's not to say there's not an even better and simpler way to do it that somebody else in the community might jump in with! The key is using
- a number variable to count the number of choices being selected and to cap it at 3
- a true/false variable for each choice
Hope this helps :) Taking a look at the attached file may help as well. Let me know if you have any additional questions!
I would do most of the work on the submit or next button this way you do not need to have a trigger to add or subtract.
Have a number variable called counter.
On the submit/next button have these triggers when user clicks
Reset counter to 0
Set Choice 1,2,3 to (blank)
add one to counter if radio1 === selected
Repeat for the number of options
Then have text three variables
Choice1, 2, 3
On submit next button have trigger to set value of
Choice1 to text value for radio1 (your value you want to display on next slide) if radio1 is selected and choice1 === (blank)
Repeat for all radio buttons and all choices (1,2,3) you will need to set more conditions for choice 2 also needs if Choice 1and 2 === blank and choice3 if choice 1,2, and 3 blank)
It is a reasonable amount of triggers but builds a pseudo array (should be quicker in javascript).
Then you can just set references on your next slide.
You could set a trigger to show a layer if counter > than 3 or less than 3 and jump to next slide based on a condition that counter is === 3.
This may use more triggers but does use less variable.
Have a look at the attached and see if that's what you want. The Next button on slide 1 is enabled only when exactly three choices are selected. The user can change their selection as often as they want. As Phil mentioned, creating an ordered list of the choices for slide 2 requires quite a few triggers (or Javascript) but it can be done.
The above solutions and examples are great but can the selections/checkboxs be displayed like what is shown on Slide2 (screenshot is above) and if so how do you achieve that? I understand that we can hide selections and change the colors, etc. but can we have a slide that just focuses on the choices and nothing else? Can this be done in Storyline?
Sorry, I'm not sure I understand the question. The screenshot of slide 2 does show the selected choices. Do you want to show selected checkboxed on slide 2, or do you want to replicate what's shown on slide 1?
In her example on slide 1, the learner has chosen 2, 4, and 8. On the slide 2 it shows Choice02, Choice04, Choice08, left aligned without spaces. I guess I am wondering if what she has displayed in slide 2 can be accomplished exactly in Storyline360? Thank you for the response.
Sorry Michael. I missed it. That being said I looked at your file and that is quite a bit of programming for 8 choices. I have roughly 69 choices and the user is not limited to three. Thank you for sharing. I will dissect your file for further inspiration. Much appreciated.
Layton: My circumstances are more like yours - I have a great number of selections available (it's a skills inventory) so using something like javascript might be easier. Wondering what solution you came up with?
15 Replies
Hey Maya!
Thanks for popping into the community with your question. I LOVE challenges like this ... figuring out how to get an interaction to work #variablesnerd
There is not one right or wrong way to do this. In fact, there's probably a whole bunch of ways this can be accomplished. I created a little example file here where you can see I have included 6 choices, and the learner needs to select 3. On the following slide, they are presented with their 3 choices and can then learn more about each one.
You can view my completed example here.
I've also attached the Storyline 360 .story file here to the discussion if you want to take a closer look.
Here's a high level explanation of what I did:
That is honestly as simple and straightforward as I could do it.. but that's not to say there's not an even better and simpler way to do it that somebody else in the community might jump in with! The key is using
- a number variable to count the number of choices being selected and to cap it at 3
- a true/false variable for each choice
Hope this helps :) Taking a look at the attached file may help as well. Let me know if you have any additional questions!
I would do most of the work on the submit or next button this way you do not need to have a trigger to add or subtract.
Have a number variable called counter.
On the submit/next button have these triggers when user clicks
Reset counter to 0
Set Choice 1,2,3 to (blank)
add one to counter if radio1 === selected
Repeat for the number of options
Then have text three variables
Choice1, 2, 3
On submit next button have trigger to set value of
Choice1 to text value for radio1 (your value you want to display on next slide) if radio1 is selected and choice1 === (blank)
Repeat for all radio buttons and all choices (1,2,3) you will need to set more conditions for choice 2 also needs if Choice 1and 2 === blank and choice3 if choice 1,2, and 3 blank)
It is a reasonable amount of triggers but builds a pseudo array (should be quicker in javascript).
Then you can just set references on your next slide.
You could set a trigger to show a layer if counter > than 3 or less than 3 and jump to next slide based on a condition that counter is === 3.
This may use more triggers but does use less variable.
Have a look at the attached and see if that's what you want. The Next button on slide 1 is enabled only when exactly three choices are selected. The user can change their selection as often as they want. As Phil mentioned, creating an ordered list of the choices for slide 2 requires quite a few triggers (or Javascript) but it can be done.
Here is another take using a project I built way back in SL1. I've updated the source file to SL360.
I explained how I built it here: Limiting and Persisting Choices in Storyline
The above solutions and examples are great but can the selections/checkboxs be displayed like what is shown on Slide2 (screenshot is above) and if so how do you achieve that? I understand that we can hide selections and change the colors, etc. but can we have a slide that just focuses on the choices and nothing else? Can this be done in Storyline?
Sorry, I'm not sure I understand the question. The screenshot of slide 2 does show the selected choices. Do you want to show selected checkboxed on slide 2, or do you want to replicate what's shown on slide 1?
Hello Michael,
In her example on slide 1, the learner has chosen 2, 4, and 8. On the slide 2 it shows Choice02, Choice04, Choice08, left aligned without spaces. I guess I am wondering if what she has displayed in slide 2 can be accomplished exactly in Storyline360? Thank you for the response.
Yes, the .story file I had attached on my earlier comment does exactly that. Here is the published version of the slightly extended example.
Sorry Michael. I missed it. That being said I looked at your file and that is quite a bit of programming for 8 choices. I have roughly 69 choices and the user is not limited to three. Thank you for sharing. I will dissect your file for further inspiration. Much appreciated.
This post was removed by the author
@Michael Hinze--I'm working on something similar. I like the example that shared with the dial interaction. Can you share the source file?
Michael--I'm working on something similar. I like the example that shared with the dial interaction. Can you share the source file?
See attached.
I like your solution Michael, but what if we're not limiting the number of selections to 3?
Then you change the variable NoOfRequiredSelections to whatever you want it to be.
Layton: My circumstances are more like yours - I have a great number of selections available (it's a skills inventory) so using something like javascript might be easier. Wondering what solution you came up with?
This discussion is closed. You can start a new discussion or contact Articulate Support.