Map Questions

Sometimes you will need your respondents to click on images to select areas such as what state do you live in. In this example we are going to take an image of Australia and turn it into a click-able image that we can use in our survey. We will also show you how you can store the information selected in your survey. The image we are going to use is the following.

Australia

Next we have to stat to develop the HTML code to turn this image into a click-able one. To do this we need to use the following HTML code and create some areas.

 WA

In the above example the x1,y1,x2,y2 are x/y coordinates for the area we are creating. If you image we are drawing a line around Western Australia these coordinates represent that line. The easiest way to do this is to use a tool like Mapedit but you can achieve the same results if you use a paint package and just write down the x/y coordinates and put them into the html. In the above example we have a href being used. This href will be the html page that the user gets sent to when they click the are. When you have created all the areas you will end up with the following

Map and Question
Map and Question

Western Australia

Northern Territory

South Australia

Victoria

ACT

New South Wales

Queensland

Tasmania

As you can see from what we have done so far, every time you click on an state a new window pops up. What we will do next is to change this so that we enter some text into a text box. To achieve this we need to add some JavaScript to our page, firstly we need to setup the survey question so create a mdd document with the following syntax in it.

	' Metadata section
	State "Please select your State"
	categorical [1..1]
	{
		ACT,
		NSW "New South Wales",
		NT "Northern Territory",
		Queensland,
		SA "South Australia",
		Tasmania,
		Victoria,
	    	WA "Western Australia"
	};

	' Routing Section
	State.LayoutTemplate = "MapTemplate.htm"
	State.ask()

Next you need to create your template. Place the map code in the correct place as shown and test to make sure your html is xml compliant.

        
	
		<mrPageTitle/>
	
	    
		
			
			
!! Map Code Goes Here !!
NavBars

Once you have put all this together you should end up with the map and the question in your survey, the next thing we need to do is to join the map to the question. To do this we need to remove the _target=”_blank’ and the href code from each area statement and add onclick functionality we should end up with a statement similar to this one.

      WA

Obviously you need to change the document.mrForm._Q0_C7. to meet your needs to find out what you need to put in your script do a view source and see the naming for your question. Once you have done all this you should end up with the following. One thing to note , to get dimensions to give everything an id you must make sure that you have the following in your html

Once you have added this tag, you will be able to click on the area in the map and the radio buttons should refleft that click.

6 thoughts on “Map Questions”

  1. Hi Vishal,

    Most paint packages will give you the x,y cords. For example in windows paint, load your image up , and move your cursor around the picture. Whilst doing this look at the botom right hand corner of paint and you will see the cords change as you move the mouse.

  2. Hi Craig,

    To hide your question you can add the following div statement to your template.

    <div style=”visibility:hidden”>MR DATA TAG GOES HERE</div>

    and to display the image we used

    <mrRef RefType=”img” src=”map.gif” border=”1″ usemap=”#Map” width=”320″ height=”370″></mrRef>

    If you have any other problems then please feel free to send us your MDD file.

  3. I have created a small solution with CSS instead of the MAP tag in HTML.
    In this case you have more control on the look and feel of clicking on the images.
    I am happy to share this, if there is an email address were I can send it to just let me know.

Leave a Comment

%d bloggers like this: