Pick many with one picture

Mar 07, 2013

I am teaching a system and want to quiz with a single screenshot. I would like people to choose the fields that meet a certain condition and then submit. My problem is that the pick many only seems to work with objects and not hot spots. When I tried to use the hot spot quiz it only allows for one correct answer. In my example there are several.

The only thing I can think of is to copy and past the screen shot for each field and crop each image so that it's just the field. As I'm typing this I'm thinking that's the best way. Let me know if there's a better way! Thanks for the help!

5 Replies
Kevin Thorn

As I wrote that last comment, a couple more ideas were popping into my head.

  1. Add a counter on screen so when users click the transparent shapes a visual indicator will show them either correct/incorrect or count (provided you tell them how many spots they need to find).
  2. Use a simple oval shaped button and reduce it's size so it's a small round button. Change the 'selected' state color for correct buttons and a different color for incorrect colors. Not really a hot spot but gives users a visual cue of all the possible selection locations. 
  3. I built one of these multiple hot spot plus multiple feedback interactions awhile ago. I built a few custom animated SWF buttons that had a transparent top layer. When the user hovered over an area a similar pulsing animation occurred. If the user selected a correct spot, an outline of that spot highlighted. If the user selected an incorrect spot an outline of a different color highlighted.

My suggestion is draw it out on paper how you want it to behave. The think of behaviors - when this, then that. Once you get the overall design figured out, build a small test. Keep fudging with that test and exhaust all your ideas and what you can do with states, layers, triggers, and variables.

It'll take some work but it's doable. Kinda wishing it was my project

Good luck! 

Jesse Cabaniss

Kevin Thorn said:

Hey Jesse,

One approach is to use transparent shapes. Depending on how complex and detailed your screenshot is you can either use default shapes or draw your own with the freeform tool.

Then apply the appropriate triggers and/or variables to evaluate if the correct spots were selected.


I did try this one, but the transparent shape does not glow when it's selected. 

Kevin Thorn

Jesse, try this:

  1. Create a shape
  2. Format properties to 100% transparent
  3. States tab > Edit States
  4. Add new State > Selected
  5. Select the new 'Selected' state shape.
  6. Format tab (top toolbar) > Shape Effects > Glow > choose color and size
  7. Click 'Done Editing'

You can do the same with a Hover state by following the above steps. Or you can have a Glow effect on the Hover state and another effect on the Selected state.

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