Image-map problem for collecting multiple values

Question

Hello everyone,

I'm creating a form for capturing birds nesting activities and I was planning on using the image-map appearance to collect banding(tags) information. The birds are tagged on the legs on 4 areas: upper left (UL), lower left(LL), upper right(UR) and lower right (LR); and using the combination of multiple colors (see attached image). I created a svg file that work great to select the areas but I'm not sure how I could add colors to the selection. An example will be a bird with UL-Red, LL-Blue, LL-Red and UR-Green. Does anyone know if this even possible? I though of adding a color pallet that the user can select after selecting the area but the path id on the svg had to be unique for each section. Thanks for any suggestions!

JoseBarrios1 · Answer

Thank you Barbara. Great suggestion!  Yes, I did though about adding the leg section to each color and let the user select the color an no the bird leg area. The problem is that we have about 7 colors that I will need to display (assign) to each section. I'm not sure if using the image-map s is the best approach. Thanks once again for your help!

JB

BarbaraWebster1 · Answer

Hi @JoseBarrios1,

If you want to store both the area and color within one choice value, you could allow the user to select a part of the image that captures both. For example in the image you included the user could select the green circle next to the "LL" to store a choice of "LL-Green". You may have to increase the size of the circles a little to make them easier to tap or click.

Alternatively, if you wanted to store the area and color in separate questions, you could select the area from the SVG and use a relevant so a separate question will appear asking about the color of the band that was selected.

Thanks,
-Barbara