A handy tool for batch resizing images in bmp, gif, and jpg picture formats. You can make pictures or any kind of images smaller or bigger – whichever you need in your survey.
For your online surveys it is useful not only to resize your image in width and height but also to reduce byte size. Your image will be loaded much quicker on the respondent’s screen.
Click on defined areas in the image to answer the question.
This solution can also be done in Limesurvey (see here the howto).
Inspiration from: http://frankmanno.com/ideas/css-imagemap-redux/
mrInterview help from: http://www.smarterdimensions.com/blog/
For all help howto work with Javascript inside mrInterview check their website!! A great resource for Dimensions!!
download the example (zip file) – right click on this link and save the file
In the template file we have the image and the css file that are also necessary.
In the css file we have defined the clickable areas. If you want to read how you can define areas with GIMP – read this article.
Add the following in mrStudio:
Metadata Section
Q1 “Please select your favorite hotspot in this picture”
categorical [1..1]
{
Answer01 “Beautiful Homes”,
Answer02 “Baywatch”,
Answer03 “Ocean”
};
Routing Section
Q1.LayoutTemplate = “MapTemplateCSS.htm“
Q1.ask()
You see we are using a seperate template for our Q1 Question, called MapTemplateCSS.htm:
<html>
<head>
<title>TEST SURVEY</title>
<mrRef RefType=”link” rel=”stylesheet” type=”text/css” href=”imagemap.css“></mrRef>
</head>
<mrPage IncludeElementIDs=”true”></mrPage>
<body>
<mrBannerText>mrBannerText</mrBannerText>
<table>
<tr>
<td>
<mrRef RefType=”img” src=”la.jpg” height=”266″ width=”400″ class=”image” alt=”Manhattan Beach” border=”1″></mrRef>
<dl id=”lalaLandMap”>
<dt class=”title”>Manhattan Beach, California</dt>
<dt id=”homes”>1. Beautiful Homes</dt>
<dd id=”homesDef”><a href=”#” onClick=”document.mrForm._Q0_C0.checked=true;”><span>Ocean-front property in LA!</span></a></dd>
<dt id=”baywatch”>2. Baywatch!</dt>
<dd id=”baywatchDef”><a href=”#” onClick=”document.mrForm._Q0_C1.checked=true;”><span>Is that Hasselhoff?</span></a></dd>
<dt id=”ocean”>3. Ocean</dt>
<dd id=”oceanDef”><a href=”#” onClick=”document.mrForm._Q0_C2.checked=true;”><span>This is the life…</span></a></dd>
</dl>
</td>
<td><mrData/>
</td>
</tr>
</table>
<br />
<mrNavButton Name=”Prev”>Previous</mrNavButton>
<mrNavButton Name=”Next”>Next</mrNavButton>
<mrNavButton Name=”Goto”>GoTo</mrNavButton>
</body>
</html>
In this template we are reffering to the css file imagemap.css.
In there we have the all stylesheets for the image (including the areas where the click on).
Make sure to have <mrPage IncludeElementIDs=”true”></mrPage> in your template, with this Dimensions give everything an id.
When you now run (start) your script in mrStudio and you check the source code you will see that answer 1 has the id _Q0_C1
If you now click on onClick=”document.mrForm._Q0_C0.checked=true;” you will see that answer 1 is checked.
Donwload the demo to see the css file, imagemap.css.
There is however one thing to NOTE in here.
dl#lalaLandMap{
margin: 0;
padding: 0;
background: transparent url(la.jpg) top left no-repeat;
/* background: transparent url(https://yourdomain.org/SPSSMR/ImageCache/ImageCache.aspx?Project=TEST&File=nl-NL/la.jpg) top left no-repeat; */
height: 266px;
width: 400px;
position: relative;
}
When you just test it locally the image can be reffered like this: la.jpg
When your survey is uploaded to your server make sure to have the full path, for example: https://yourdomain.org/SPSSMR/ImageCache/ImageCache.aspx?Project=TEST&File=nl-NL/la.jpg
Looking for icons like arrows and buttons and don’t have time to design it yourself?
Just check http://www.iconfinder.net
Search for example on “right arrow” and select your background “transparancy”
Select a correct license so that you are allowed to use it for commerical use as well.
And save / download the image.
