Disabled Button - Rollover Text

Aug 29, 2017


I have a course that when the learner lands on the page the Next button is Disabled. However, the button becomes active once the learner clicks all the content on the page.

The next button has 3-states: Normal, Hover, and Disable. When the learner hovers over the active Next button, text appears. Is there any way to create a trigger or something so that when the learner attempts to click or hover over the  disabled button a message will appear?


7 Replies
Michael Shannon

My first recommendation is to not use hover states to trigger anything you consider important. The reason is mobile devices have no hover state. If you know your audience is never going to access your course using a mobile device then carry on. 

That said you can use variables and triggers to accomplish this. I'm going to skip using hover to trigger anything based on the above comment but there is a "mouse hovered over" state in the triggers if you decide that is what you need. But you'll need to duplicate the instructions below for both hover and click states. 

If you're using states to trigger your next button to normal once learner clicks all of the content you can leverage that same logic to show some text. Here's one simple solution:

  1. Create a slide layer and put the text you want your users to see if they click the disabled next button. Make sure you also put a close button with a hide layer button on it too. 
  2. Create a trigger that "shows layer" (the layer you created in step 1), "when user clicks" your next button, "on condition" shapes (pick one of your shapes of content they have to click to complete page) "is not equal to" the state you have determined as not visited. 
  3. Continue adding the rest of the shapes to the conditions but make sure you select "OR" not "AND" so that any of your shapes that isn't selected can trigger the slide layer. 
Jeannie Jurado

Thanks, Leslie.

Please let me know if I should submit a new post. It is regarding the same situation Michael Shannon assisted me in. – His tip it works perfectly!

I am in need of assistance to make the same disabled image or "fake disabled button" to stay hidden upon a revisit of a slide.

Currently when the learner lands on the slide the custom nav Next button is disabled until they click all the content (then it changes to active, including upon revisit). In addition, I have the fake disabled button on top of the course custom Nav Next button that triggers a layer and displays a message (with the help of Michael Shannon - thank you again!). Once the content is viewed, the layer will hide including the "fake disabled button." However, if the content is viewed and there is a lesson that was not viewed because the learner skipped around using the menu, the custom nav Next button will remain disabled and cannot complete the course.

Therefore, the learner will have to click on the slide out menu to see and click the lesson that was not completed. When they complete the lesson, they are able to go to the last lesson/slide in the course and click on the custom nav Next button to complete the course. - This is where I need that fake next button to stay hidden upon revisit, so that the learners do not have to click on the content again for that button to hide.

Any help is appreciated! I am unable to attach the .story because of proprietary and copyright information, but I have attached a screenshot of the triggers.



Michael Shannon

Hey Jeannie. That's a mouthful and a little hard to follow but I'll try. 

If I'm understanding this, it sounds like you're using two buttons: a next button with some states, and a second fake button on top of it that you use to show the slide layer when they haven't completed the task on the page. Is that right? If so, I would recommend that you just use different states for one button. That will make managing your course so much easier in the future. But if you're there then we'll start with where we are now. 

It sounds like the only problem you're trying to solve is the revisit issue. You want the fake button to stay hidden upon revisits. If you used a custom state for your shapes (the items you want your users to click on), something like "completed" and NOT "visited" then if you select "resume saved state" for the slide properties it will do as you expected. Remember, visited is not a state you want to rely on if the user is revisiting the slide. 

I hope that's what you're looking for.

This discussion is closed. You can start a new discussion or contact Articulate Support.