Image map - Revision history

Nguyennhuhong at 08:18, 11 June 2018

2018-06-11T08:18:48Z

← Older revision		Revision as of 08:18, 11 June 2018
Line 1:		Line 1:
	This solution will help you setting up an image map question.		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:		First create a single question, then add the below script to Javascript tab and add HTML code in question text:<br/>
	[[File:2018-06-11 14-58-35.png\|600x400px]]		[[File:2018-06-11 14-58-35.png\|600x400px]]<br/>
	[[File:2018-06-11 14-58-59.png\|600x400px]]		[[File:2018-06-11 14-58-59.png\|600x400px]]
	<source lang="javascript">		<source lang="javascript">

2018-06-11T08:18:24Z

← Older revision		Revision as of 08:18, 11 June 2018
Line 2:		Line 2:

	First create a single question, then add the below script to Javascript tab and add HTML code in question text:		First create a single question, then add the below script to Javascript tab and add HTML code in question text:
	[[File:2018-06-11 14-58-35.png]]		[[File:2018-06-11 14-58-35.png\|600x400px]]
	[[File:2018-06-11 14-58-59.png]]		[[File:2018-06-11 14-58-59.png\|600x400px]]
	<source lang="javascript">		<source lang="javascript">
	HTML Code		HTML Code

2018-06-11T08:17:57Z

2018-06-11T08:17:28Z

2018-06-11T08:14:45Z

2018-06-11T08:14:23Z

2018-06-11T08:13:43Z

2018-06-11T08:13:23Z

2018-06-11T08:09:59Z

← Older revision		Revision as of 08:09, 11 June 2018
Line 11:		Line 11:
	<area id="2" shape="rect" coords="522,298,479,217" alt="Rear wheel" href="javascript: setAnswerOption(2);" />		<area id="2" shape="rect" coords="522,298,479,217" alt="Rear wheel" href="javascript: setAnswerOption(2);" />
	</map>		</map>

	Javascript code:		Javascript code:
	Question.bind('afterValidateQuestion', function(ev, question, state) {		Question.bind('afterValidateQuestion', function(ev, question, state) {
Line 26:		Line 27:
	});		});
	});		});

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

2018-06-11T08:08:16Z

← Older revision		Revision as of 08:08, 11 June 2018
Line 4:		Line 4:
	[[File:2018-06-11 14-58-35.png]]		[[File:2018-06-11 14-58-35.png]]
	[[File:2018-06-11 14-58-59.png]]		[[File:2018-06-11 14-58-59.png]]
			<source lang="javascript">
			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();
			});
			});
			</source>