Change state of custom next button from disabled to normal after interacting with all hotspots?

Hi everyone,

I'm a new Storyline 2 user on a tight deadline, and for the life of me I cannot figure out how to do the above. 

I want my custom Continue button to be greyed out (disabled) until the user has hovered over all the items on the screen (thus reading their contents), at which point the button will change to state normal, and jump to the next slide upon click.

I've tried the methods outlined in this article: https://www.articulate.com/support/storyline/how-to-disable-the-next-button-until-users-have-interacted-with-all-hotspots except that I  find a disabled Next button to be confusing for the user, hence the custom button. However, my use of TRUE/FALSE variables in the above article doesn't seem to work the way I want it to; it works if the user hovers over the hotspots in numerical order, but if they don't, the Continue button does not change state.

I've also tried a numerical variable, wherein I add +1 to the variable each time the user hovers over a hotspot (there are 6), then a trigger saying change the state of Continue button to normal when the value of the variable=6, however if a user happens to hover over the same variable a few times, the total will reach 6 before the user has read all the content. 

HELP?

 

 

4 Replies
Jiayu Dudderidge

Have you tried to add two variables to each hotspot, the" first one" is true or fales( to see if you have visited the hotspot already)" second one" is +1 , and add the trigger of "adjust variables" "second one" with the condition of only if "first one is true". Then add the trigger to appear next button with condition of variables=6. In this case, you can't gain more than one point on each hotspots. I tried this in the past and worked for me. 

Nicole Legault

Hi Yvonne!

Thanks for sharing your question here in the forums! I understand exactly what you're trying to accomplish - and good work trying to sort it out so far, and for tackling variables! However - you might be pleased to learn, you don't even need to use variables to achieve this, it can all be done simply using states, layers, and a few triggers. 

I created a .story file where I tested this out which I've attached to this thread if you want to open the file and look at it a bit more closely. But basically, I inserted 3 circle shapes and a continue button. When the learner hovers over each circle, an associated layer is displayed with text information.  The Continue button to go from "disabled" to "normal" state when the learner has hovered over all 3 circles. 

Here's a very simple method you can follow to achieve the result: 

  • Insert your continue button with an initial state of Disabled
  • Inserted the 3 circle shapes
  • Added a "visited" state to each of the 3 circles
  • Created a layer for each of the 3 circles, which has the text on it
  • Added triggers to the base layer to display the appropriate layer when the mouse is hovered over the shape 
  • On each layer, added a trigger to change the state of the circle to "Visited" when the timeline starts on the layer
  • Add a layer trigger that says change the Continue button to "Normal" state, when the state of all the  circles are set to visited. 

Check out the attached file to take a closer look! Note that in my story file I made the visited states for the circles a different color (orange), just so I could visibly see when i was testing if the state change was occurring. Of course you could always leave the Visited state to the same color of blue if you prefer. 

Hope this all makes sense.  Let me know if you have any additional questions or feedback about this.... 

Good luck :)

Terence Wong

Thank you for your reply, Nicole, however I must use Hotspots as this is an image. When I tried to make a trigger stating that the Continue button should change to normal when all hotspots were visited, there wasn't a way for me to do that. 

In the end I worked around it my inserting small unseen triangles behind the image and hotspots that changed their state to visited when the hovers were moused over, and set my Continue button's conditions to change when ALL of those changed to visited.

It's a workaround, but I didn't know what else to do with the hotspots.