How to use the ImageMap
This question allow people to be able to select parts of the image as answer options.
Step 1 - Prepare your image
Define the areas which should be selectable.
You can do this in different ways but the most easiest one is to use the online image-map tool.
Step 1a - Upload your image and define first area
1. Upload the image you want to use for your question
2. Click on the image and then select your area
3. The settings for the area you are defining, you can change the shape of the area
For Link you must have the the number of the code that should be selected when the area is clicked. E.g. if you type a "1" option with code "1" is selected in your question. If you type "9" the option with code "9" is selected. Typically codes are just 1,2,3,4 corresponding to the row in your survey, but you can also have "free" codes. In any case the "Link" value must correspond with the option to be selected.
The "Title" will be the hover over text displayed.
The "Target" can be ignored, but you can create
Step 1b - Add another area
1. Click on the red button "+ Add New Area" and create another area that will be another possible answer option.
2. In this example we choose the circle shap, just click on the image again and the circle area can be edit
Step 1c - Save the code
When you are satisfied with the defined areas, click on
1. "Show Me The Code!"
2. Copy the code
3. Paste the code in a text editor. Remove the <img> tag, in the example below just remove the first two lines. And save it as an HTML file locally on your PC.
Step 2 - Create the iQuest
Step 2a - Add Javascript file to your template
Make sure you have the reference to the jQuery Image Mapster file in your template.
1. Click on Settings
2. Paste the link: https://rawgit.com/jamietre/ImageMapster/master/dist/jquery.imagemapster.min.js
Step 2b - Add a question
Add a "normal" multi response question to your survey.
Add the same number of rows if you have defined areas (each area corresponds to one answer option)
Step 2c - Select the iQuest
1. Click on "Specify" to select the Interactive question
2. From the top dropdown - select "Image map selector"
Please note - if you can't select this Image map selector in the dropdown, probably this is not added to your account.
You can copy and paste the Interactive style from a demo to your question.
In that case just select this and do a Ctrl+C and Ctrl+V to your survey
Step 2d - Select your image
1. At "Url of Image" click on the ... (3 dots at the end of the row) to select the image you want to use.
Upload your image in a folder of your choice.
2. Select the image and click on "Select"
Step 2d - Select your HTML map (from 1c)
1. At "Url of Image map file" click on the ... (3 dots at the end of the row) to select the html map file (this is the file we created in step 1c) you want to use.
Upload you html file in a folder of your choice.
2. Select the html file and click on "Select"
Step 2d - Other Settings
You can change the colour settings of the areas, when disabled, selected and hover over.
Step 3 - Test
In the Advanced option you have the "Debug mode".
That's a good way to see if everything is working as expected.
Make sure to deselect this option again when you are done with testing.
The result can be seen when you do an instant view.
