Toggle menu
876
3.8K
30.2K
279.1K
Catglobe Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Image map

From Catglobe Wiki
Revision as of 08:18, 11 June 2018 by Nguyennhuhong (talk | contribs)

This solution will help you setting up an image map question.

First create a single question, then add the below script to Javascript tab and add HTML code in question text:

HTML Code
<img alt="" usemap="#townmap" src="https://voxmeter.catglobe.com/Images/GetImage.aspx?rid=ee9471e8-88f6-4c6f-848b-d17fa99a229e" />
<map name="townmap">
	<area id="1" shape="rect" coords="312,233,387,323" alt="Front wheel" href="javascript: setAnswerOption(1);" />
	<area id="2" shape="rect" coords="522,298,479,217" alt="Rear wheel" href="javascript: setAnswerOption(2);" />
</map>

Javascript code:
Question.bind('afterValidateQuestion', function(ev, question, state) {
	window.setAnswerOption = function(v) {
		Question.setAnswer(v);
		$('select').prop('selectedIndex', v);
	};
Question.bind('afterShowQuestion', function(ev, question) {
	$.when(
		$.getScript("http://cdn.catglobe.com/jquery.rwdImageMaps.js"),
		$.getScript("http://cdn.catglobe.com/jquery.rwdImageMaps.min.js"),
		$.getScript("http://cdn.catglobe.com/ios-orientationchange-fix.min.js")
	).done(function(){
		$('img[usemap]').rwdImageMaps();
	});
});

CSS Code:
img[usemap] {
   border: none;
   height: auto;
   max-width: 100%;
   width: auto;
}

Example: