Click to reveal and state change
Sep 15, 2022
Hello,
I have an interaction that I'm am trying to create. So I have a main slide that has some circles. I want the user to click each circle to reveal some additional information and then for the circle to change to a grey color to show that it has been visited. So I thought I could do it with layers but the circles (that need to be clicked to reveal more info) move to the left on the slides with additional information. So I don't think I can use layers.
So then I decided to maybe have a slide for each shape with the additional information but since I need each slide to show the state change on the circles, I'm not sure I can do that either.
Any ideas? I might be making this harder than it needs to be. I think my main problem is that the circles move from the center of the page to the left but I still need them to all be connected in some way to show the state change.
I've attached a sample of what I am trying to do to make it a little easier to understand.
Thank you in advance for any help you can give.
Mona
5 Replies
It depends on how much additional information there is. If there is not enough to cover other information, and they can stay expanded, the Visited state will do everything you want, without triggers.
Create the circle, and edit its states. Duplicate the Normal state, calling it visited. Change the color of the circle (in Visited state), move it to the left, and insert the text.
If you want them to revert to the original condition, you still can use the Visited state, turning it gray. When clicked, have it show a layer with the info, but it will need something to click to indicate the learner is finished with it. Hide the layer, and the circle will be gray. You can create the layer to hide anything from the base that you want.
If that doesn’t help, try attaching your file again.
Thanks Walt! So what you are saying is create a visited state on the base layer so when the learner clicks the circle it turns grey but then create another visited state on the layer so that when they get out of it, the circle on that layer changes to a visited state?
My problem is that I'll have about 8 layers (1 for each colored circle) so for example, I need the red circle to turn grey on all the layers when the red layer is visited. Does that make sense? And, sense the circles are in a different position on the base layer as on the other layers, that is what is causing my problem. I can't just change the base layers to visited and have the base layer showing on all of the other layers.
I wrote some additional notes on the .story file that I uploaded.
Here is a sample that will give you some ideas. I made one scene using different slides like your sample, and one using layers, like your first request.
Then I made a third scene, using the easy method. I know you may have design considerations that make moving the circles attractive (like other information on the base), but I think it is worth quite a bit of effort to find a design that can re-use the circles. If you have information on the base that needs to be read between circles, then each layer needs a button to Hide it. In that case, you might want to make the layers show by hovering the cursor. But that is problematic if you need to be compliant, or anticipate it being viewed on phones or tablets.
If you have information on the base that needs to be read between circles, and you are using slides, then each slide needs a button to Jump to first slide.
Hi Walt,
Ahhhh....thank you so so much. This is exactly what I needed. I'm going to really dig into it and see how you accomplished this. So much for me to learn in Storyline :) Again, thank you so much for your time!!!