Best way to hide info on a graphic and not allow advancement until all info has been read.
Apr 09, 2020
Hi everyone! Ok so I've read a ton of posts here and I still can't seem to figure out how (or the best/easiest way) to use a graphic (one graphic) to hide information for the learner to read and them have them click on parts of it to reveal the information all the while making sure the next button is hidden or disabled until they click on all of the parts of the graphic (in no particular order). For example, I have a graphic with four leaves...I tell the learner, "click on each leaf to read the info." I want the info (obviously) hidden at first then when they click on it, for it to appear. When they have clicked all four leaves, they can then advance to the next slide. I have tried hotspots, transparent rectangles but I still can't seem to figure out how to get what I want. I ended up cutting up a another graphic so I could have individual shapes as layers but isn't there a way to do this so I don't have to do that to all my graphics? Help! Also, I am by no means super experienced with Articulate so detailed steps would be appreciated.
1 Reply
Beautiful graphic, but I don't think that is your problem. It's tempting to say that your biggest problem is that you have fallen in love with your rough draft (first idea). We know that if you do that, you are never willing to kill it and look for more creative ideas. Actually, I think the best help I can give you is to impress on you the realization that your project doesn't work if and when it is in your hands. It is only a success if it works in the learner's hands. What that means is that we have to stop thinking about us the developers, and look at it from the learner's perspective. Note that I'm not advocating spending thousands of hours creating a ten second interaction. On the other hand, lazy designers make for poor instructional design, or even worse: violation of learning principles. Translated to practical terms, that means if the way you envision it is not practical to produce, be willing to try another method. If what you envision is absolutely the best method of presenting the material, then you need to be willing to make it work.
And that brings me to the second best help I can give you. Realize that this is a visual medium. That means that nothing has to do what you want it to; it only has to look like it is doing it. In practical terms, for example, you don't have to make an object appear; it can always be there, and the object that hides it can disappear. Both methods look the same to the viewer.
With the important issues out of the way, there are a number of ways to do what you want. I think the easiest is to put a shape on top of every leaf. Give it a color fill, no outline, and a transparency of 99 or 100%. It must have a fill to receive a click, and it must be transparent so it doesn't interfere with the graphic. Create for it a Visited or Selected state, but not both. These states come with built-in triggers that make them function, so don't create your own. The difference is that if you use Selected, it will change back to invisible if the learner clicks on it again, while Visited won't. In the Visited or Selected state, create a text box with the information. Be sure that it doesn't overlap other information boxes. When the invisible shape is clicked, the info shows. Then create a trigger for each shape that says "Change state of Next button to Normal when user clicks this shape IF (on condition) that the state of (select the other three shapes) is Visited (or Selected)."
This is one way to do it, but may not work for your specific conditions.If you could attach your.story file, and I could see what you want, I could give you an idea designed specifically for your needs.
Check the attached sample.
This discussion is closed. You can start a new discussion or contact Articulate Support.