Forum Discussion
Multiple hot spots find them all question
What I wanted to achieve, was they review the picture, and click on a hazard (hotspot), then it would populate a dialogue box explaining the hazards from a safety perspective.
There is 3-5 identifiable hazards per picture and I do not need them to be gradeable.
Thanks
[cid:6a35d89e-63b1-40be-9a31-bf57544eb31e]
David Paul, CD, CHSC (He/him/his)
CEO, Principal Consultant at DPSC
Phone 236-255-1530
Website: www.dpsafetyconsulting.ca
Email dave@dpsafetyconsulting.ca
3309 Tyler Place, Campbell River, BC, V9H 0A1
[Title: LinkedIn - Description: image of LinkedIn icon] [cid:2d13c780-6585-46dd-978b-faf0a8fbebeb]
Thanks for the clarification. You can use the show-layers method I described above.
Another option would be to give your "dialogue box" multiple states. Then the triggers on the shapes would change the box to the state with the corresponding info when the shape is clicked.
I also recommend giving the shapes a Selected state, so there's visible evidence of which area was clicked. If you put all the shapes into a button set, the program will automatically control them so only one can be Selected at a time.
- Here's more info about button sets: https://community.articulate.com/series/articulate-storyline-360/articles/articulate-storyline-360-user-guide-how-to-work-with-button-sets
So what I am not seeing is how to make a picture in to a button set. or select certain areas in a picture to create a button set.
Should be much easier than it is.
Dave
[cid:2389ceaa-ab29-4906-9f90-e85699ccfd9a]
David Paul, CD, CHSC (He/him/his)
CEO, Principal Consultant at DPSC
Phone 236-255-1530
Website: www.dpsafetyconsulting.ca
Email dave@dpsafetyconsulting.ca
3309 Tyler Place, Campbell River, BC, V9H 0A1[Title: LinkedIn - Description: image of LinkedIn icon] [cid:802342f7-f2b0-41ba-b1d7-9ecde30b64ed]
The picture is not part of the button set. The picture is in the background of the slide.
To make different parts of the picture clickable, do this:
- Insert a shape over each hazard. Depending on the content, the shapes could be simple rectangles or ovals. Or you could use draw shapes that more exactly match the outline of the items in the picture.
- Format the shapes so they are invisible to the user. To do that, remove the border from the shapes, and give them a solid fill that is 99% transparent.
- Give each shape a Selected state that will indicate the area that was clicked. For example, you could just add a border and/or a glow effect to Selected state of the shape.
- Put those shapes into a button set.
- For each shape, add a trigger that shows the appropriate layer when the user clicks the shape. (Or, as noted above, the trigger could also change the state of your "dialog box.")
The User Guide has lots of basic info working with states, triggers, etc.: https://community.articulate.com/series/articulate-storyline-360
- Many of the articles link to even more info. So if you don't see the exact topic you want to learn about, pick a related topic.
By the way, this post has a demo if you want to learn how to require the user to click each hazard before they can continue: https://community.articulate.com/discussions/articulate-storyline/tip-controlling-the-next-button-101