I have looked through previous threads and am not able to find a confirmed process that allows me to insert a picture showing mutliple hazards. The goal is to have a participant, identify the hotspots, by clicking in the relative area.
Then the information about the hazard would populate.
It's not clear to me if you want a graded question that tests whether the user can pick out all the hazards or if you just want an interactive slide.
A Freeform pick-many question would work to test whether the user can click/select all the hazards.
If you do this, I suggest you use 99%-transparent shapes (nothotspots). Shapes can have states, so a Selected state could make it obvious if the shape has been clicked.
This type of graded question doesn't provide info about each clicked item when it is clicked. You could put all that info into the feedback layers (though I'm guessing that would get crowded).
If you want to show info about each hazard when the user clicks on the area, then I suggest using the same type of 99%-transparent shapes. Give them triggers that show a layer with the corresponding info. You could have shapes over non-hazards, with the corresponding layer explaining why that's not a hazard.
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.
As to button sets, forget the term button. Any items can be made into a set. Button is just a term of convenience. Select two or more items, right click, and choose Button set. Some things to remember:
Only one of the set can be selected at any time
Once one of the set is selected, you cannot deselect it except by selecting another
Items will not show which is selected if they do not have a Selected state, unless you create another state and triggers to show it.
There is no way to select part of an image, whether you want to click it, or use it as part of a set.
An item can be part of only one set.
They are irreplaceable if you must have what they offer, but can require a lot of resource investment, if they are used just for fun.
There are some ways to easily make part of an image clickable.
The most glamorous (least useful, and most difficult) would be to insert a number of copies of the image. Crop them the smaller rectangles, and put the rectangles together, like a jigsaw puzzle. Each piece would be an independent object, and could be treated independently.
Easier methods are suggested by Tom and Judy: hotspots or shapes above the image. Remember, this is a visual medium, so nothing has to do what you want. It only has to look like it is doing it. If a learner clicks on an invisible item above the image, they think they are clicking on the image.
For what it's worth, I favor Judy's method of shapes. Shapes, without the baggage and limitations of hotspots, give me a lot more flexibility.
The attached sample shows two fairly simple ways to do what you are asking; one using states, and one using layers. Both of them show how they might work if the clickable spots are a set, or if they are not.
Yes, this is a business that requires a lot of painstaking attention to (sometimes) tedious detail, but that's what separates great results from good enough.
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.
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.")
9 Replies
It's not clear to me if you want a graded question that tests whether the user can pick out all the hazards or if you just want an interactive slide.
A Freeform pick-many question would work to test whether the user can click/select all the hazards.
If you want to show info about each hazard when the user clicks on the area, then I suggest using the same type of 99%-transparent shapes. Give them triggers that show a layer with the corresponding info. You could have shapes over non-hazards, with the corresponding layer explaining why that's not a hazard.
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.
THanks but will have to learn how to do all of that somewhere in here. Thanks again.
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 steps are easy:
I created a tutorial to show the basics and a few bonus tips.
https://360.articulate.com/review/content/6d8e76e8-83b1-479d-9545-55a2427b9f6e/review
As to button sets, forget the term button. Any items can be made into a set. Button is just a term of convenience. Select two or more items, right click, and choose Button set. Some things to remember:
They are irreplaceable if you must have what they offer, but can require a lot of resource investment, if they are used just for fun.
There are some ways to easily make part of an image clickable.
The most glamorous (least useful, and most difficult) would be to insert a number of copies of the image. Crop them the smaller rectangles, and put the rectangles together, like a jigsaw puzzle. Each piece would be an independent object, and could be treated independently.
Easier methods are suggested by Tom and Judy: hotspots or shapes above the image. Remember, this is a visual medium, so nothing has to do what you want. It only has to look like it is doing it. If a learner clicks on an invisible item above the image, they think they are clicking on the image.
For what it's worth, I favor Judy's method of shapes. Shapes, without the baggage and limitations of hotspots, give me a lot more flexibility.
The attached sample shows two fairly simple ways to do what you are asking; one using states, and one using layers. Both of them show how they might work if the clickable spots are a set, or if they are not.
Yes, this is a business that requires a lot of painstaking attention to (sometimes) tedious detail, but that's what separates great results from good enough.
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:
The User Guide has lots of basic info working with states, triggers, etc.: https://community.articulate.com/series/articulate-storyline-360
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