Unlocking a custom 'Next' button after user visits each layer

Mar 12, 2024

Craig Brown
By Craig Brown

Hi, everyone. 

I am currently building a SCORM activity with Articulate Storyline 360. 

The activity involves an image on the base layer, in which the user can move their mouse around to highlight specific points of interest (POI) across the image of the base layer. Each time a user clicks on a POI, it opens a new layer. There are six POIs in total, so six additional layers.  

What I want to do, is have it so once the user has visited each POI (each separate layer), it will then make the custom Next button appear on the base layer, allowing the user to continue with this SCORM package. 

My custom button is set with a trigger to be 'Hidden' when the timeline starts on this slide (the base layer), that works fine. 

But I can't seem to figure out how to make the trigger work (or what trigger(s) I should be using) to make the custom button on the base layer become 'Normal' after the user has visited all six POIs? 

I have attached the working file to this thread for anyone's curiosity and reference. Please note, there are some incorrect triggers still in place which I tried yesterday afternoon, but have not yet deleted. 

Thanks, everyone. 

-Craig

3 Replies
Judy Nollet
2 months ago03/12/24 at 11:19 pm (UTC)

I'm not on my PC, so I can't look at your file right now. However, I'll offer these suggestions/tips.

  • If your POI buttons each have a Visited state, a trigger can change the state of the custom NEXT button to Normal when the state of all the POI buttons = Visited. 
  • You don't need a trigger to hide the custom NEXT button when the timeline starts. Just set its Initial State to Hidden.

Tom Kuhlmann
2 months ago03/12/24 at 11:46 pm (UTC)

What Judy said. :)

Nice looking interaction. 

I'd simplify your triggers:

  • Get rid of the change states to hide object triggers. Instead set the initial state of those objects to hidden. 
  • You don't need a trigger to change a state to visited when a user clicks an object since that will automatically happen (that's on the layers). You're using those visited states for conditions. But you don't need to.
  • Most of the objects are images and have visited states. There are a few grouped objects that can't have visited states since they're in a group.
  • I'd select on of the objects in the group and add a visited state so you can change it to visited like the non-grouped objects.
  • Then use a trigger to change the state of the continue button when the states of all the objects are visited.
Tom Kuhlmann
2 months ago03/13/24 at 12:03 am (UTC)

The state change doesn't work now that I look at your slide because if the object is visited and they hover over it again it is changed to normal.

You should use a T/F variable that tracks when a layer is visited. And then when all of the variables are true you can change the state of the continue button.

However, you don't know which layer they're on so you need to add a trigger to account for each variable change, for example, change the state of the continue button to normal when Var B = True on condition that Variables A, C, D, and E are True.

I'd create a simple check-off system to indicate they visited everything and use that.

Sign In to Reply