Problem using button states - visited and selected

Jul 01, 2013

Hi there

I want the buttons on a screen to show a selected state when selected and a visited state when another button is selected afterwards. I also need to have conditions to ensure that the learner accesses all buttons/layers before proceeding to the next screen.

Problem 1: I initially had a problem with my first tab showing a combination of both the selected and visited states (grey text and red glow).

Problem 2: As the first button wasn't acting the same as the other buttons, I tried setting a number of conditions. However, I now have a weird problem whereby if someone chooses to re-visit the first tab, they won't be able to proceed to the next screen as they'll need to click all of the tabs all over again.

I have tried looking at other information on the forum, but at this stage it is just confusing me more. It is highly possible that I have made this problem much more complex than it needs to be!

I could just remove the visited state altogether, but as the information on this screen is kind of same-ish, I'd like to help the learner out by letting them know where they're up to.

File attached. I hope you can help!

4 Replies
Christine Hendrickson

Hi there Jacinta!

Thanks for sharing the file :D

Quick question - do you absolutely need the state to change when another button is selected by the user? A much faster and much easier approach may be to have that state change when the control of the object loses focus. However, using this method would pretty much bypass the "Selected" state, but it would eliminate the need for many triggers, possibly variables, etc. 

Or, you can continue with using the triggered states, but with some changes. For example, to change "A", you'd want to trigger that button to change to "Visited" when B, C, D, E & F are clicked if A is equal to "Selected". This is assuming that you don't want them to view them in a specific order. 

I've done this for you for buttons A & B in the project. This seems to be working quite well :) You'll need to carry over the same type of triggers for the C, D, E and F buttons.

Take a look and let me know if you have any questions. 

Thanks!

Lil Monk

Hi Christine

Sorry! No, I don't need the state to change when another button is clicked. I should have expressed myself in terms of what I'm really trying to achieve.

  • I need to ensure that the learner doesn't proceed to the next screen without clicking on all of the tabs.
  • I would like the learner to be able to clearly see which tab they are currently viewing. (Hence the decision to use a 'selected' state.)
  • I would also like the learner to be able to see which tabs they've visited, regardless of what order they choose to view things. This is less important as they won't be able to progress until they've viewed everything anyway, but it may help their learning to know where they've been.

Thank you for the revised interaction, but I am not really sure how to continue what you've done as the triggers for A and B are different. Wouldn't this then cause the same problem if the learner clicks another tab after everything has been visited? That is, wouldn't it end up leaving one tab as 'selected' and not 'visited'?

Could you explain the "control loses focus" strategy instead? I have not tried to use this as yet and there don't seem to be any tutorials about how to use it.

Lil Monk

Christine,

I've worked out a very simple workaround. Not sure why I didn't think of it before, but I guess I assumed that the selected state would not be such a problem when trying to track visited states. I think this is the first time I'd tried to use a selected state. Anyway, all I've done is this:

  • I copied the appearance of the state and overlaid an inactive button with this appearance on each layer. Now when the learner selects the button they see the same state but as that button will only choose the same layer it doesn't matter that it's just for show.
  • I removed the selected state from each button in the state library (not sure what you call it).
  • I then removed all of the complicated triggers and just added the visited states required to access the 'next' button.

Easy!

Anyway, if you can still let me know how "control loses focus" works, that would be great! Are there tutorials on this that I just haven't been able to find?

Christine Hendrickson

Hi there Jacinta!

So sorry for the delay, I've been out of the office for the holiday.

Awesome solution! I like it :)

And no, the "control loses focus" method I mentioned isn't covered in a tutorial, as far as I know. Basically, that trigger action would fire when the object is no longer the main object on the slide - this usually happens when another object becomes the focus of the slide. So, say someone clicks on a button and then clicks on an empty place on the slide. That empty space will be the focus and the button is no longer the focus. The same would happen if the user clicked back onto the button, the button would have the focus for the slide. 

I hope this makes sense! :D

Have a great day!

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