Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Imagemaps in Limesurvey.

Imagemaps in Limesurvey. 1 Jahr 9 Monate her #88808

  • TSouza
  • TSouzas Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 6
  • Karma: 0
Hi all,

I wonder if anyone can help.

I would like to know if it is possible to do the following:

I intend to have a question in my survey which shows a map and asks for the following: 'please, choose up to 3 areas that you find dangerous and click on the map below'.

I have seen an example using Googlemaps on Limesurvey, but as far I as know, one can drop only one pin and I need three.

I have created an imagemap I would like to use. It has around 100 clickable rectangles (I have been using GIMP and I have just created a map from using the grid tool).

I was wondering if it is possible to do it through either googlemaps or by using an imagemap and, if so, I wonder if anyone could point me to some examples if they know of any.

Many thanks in advance.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemaps in Limesurvey. 1 Jahr 9 Monate her #88833

  • DenisChenu
  • DenisChenus Avatar
  • ONLINE
  • Moderator Lime
  • Beiträge: 6256
  • Dank erhalten: 799
  • Karma: 239
Hello,

You want something like this :
WHen a user click on image map, a question is filled by an information depending on click.

If yes : something like this:
Question type : single radio, answer code A1,A2,A3 ...
<map name="mymap" id="mymap">
  <area shape="rect" coords="......" href="#" alt="A1" />
  <area shape="rect" coords="......" href="#" alt="A2" />
  <area shape="rect" coords="......" href="#" alt="A3" />
  <area shape="rect" coords="......" href="#" alt="A4" />
</map>
<script type="text/javascript">
$(document).ready(function() {
  $('#question{QID} .answers ').hide(); // Adapt for your template (replace answers by answer wrapper class
  $('#mymap area').click(function(){
    $("#question{QID} input.radio").filter("value='"+$(this).attr('alt')+"'").attr("checked",true);
    return false;
  });
});
</script>
I don't look at the code, maybe some error. But the principle is here.

Denis
Letzte Änderung: 1 Jahr 9 Monate her von DenisChenu.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: TSouza

Re: Imagemaps in Limesurvey. 1 Jahr 9 Monate her #88837

  • mdekker
  • mdekkers Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 341
  • Dank erhalten: 68
  • Karma: 38
---
Menno Dekker
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: DenisChenu, TSouza

Re: Imagemaps in Limesurvey. 1 Jahr 9 Monate her #88841

  • DenisChenu
  • DenisChenus Avatar
  • ONLINE
  • Moderator Lime
  • Beiträge: 6256
  • Dank erhalten: 799
  • Karma: 239
mdekker schrieb: Oh yes, near the same ;)

This one is great too : demonstration.sondages.pro/index.php?sid...64&newtest=Y&lang=en
(code included in source) using svg shape mmmmmh \o/
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: TSouza

Re: Imagemaps in Limesurvey. 1 Jahr 8 Monate her #88907

  • TSouza
  • TSouzas Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 6
  • Karma: 0
Hi Denis,

Thank you very much for your response.

I just have a quick question: does it need to be single radio? I thought it allows for only one answer.

I have to say that I have tried to use the imagemap with no success... do you recommend my reading something related to Java or JQuery? I am a research student in humanities and it is the first time I use Limesurvey.

Kind regards,
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemaps in Limesurvey. 1 Jahr 8 Monate her #88909

  • DenisChenu
  • DenisChenus Avatar
  • ONLINE
  • Moderator Lime
  • Beiträge: 6256
  • Dank erhalten: 799
  • Karma: 239
You're right radio or text questioin type => Only one answer .

Arg don't have time for a multi choice questio type today. And it'sq more difficult: because you have to :
If a user click on the mao : check the checkbox, and show part is 'checked' (change some color.) If user reclick on it , then uncheck the checkbox and leave color ..

It's a complete jquery work !

Denis
PS www.outsharked.com/imagemapster/default....?demos.html#skeleton
Letzte Änderung: 1 Jahr 8 Monate her von DenisChenu.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemaps in Limesurvey. 1 Jahr 8 Monate her #88925

  • TSouza
  • TSouzas Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 6
  • Karma: 0
Thanks a lot, Denis! I do understand it.

Thanks for the link to the skeleton.

Kind regards,

Tatiana
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemaps in Limesurvey. 1 Jahr 8 Monate her #88939

  • Mazi
  • Mazis Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 5324
  • Dank erhalten: 293
  • Karma: 248
TSouza schrieb:
Thanks a lot, Denis! I do understand it.

Thanks for the link to the skeleton.
You're welcome :-)

If our hints have been helpful and you enjoy limesurvey please consider a donation to give Limesurvey a future .
We do all this in our free time and you don't have to pay a penny for this software.

Without your help we can't keep this project alive.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Imagemaps in Limesurvey. 1 Jahr 8 Monate her #89097

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4119
  • Dank erhalten: 760
  • Karma: 346
I have followed DenisChenu's suggestion above and developed a little jQuery plugin that leverages the ImageMapster plugin to do the following with image maps in list(radio) or multiple choice questions:
- Highlight the map area when hovered or clicked
- Hide the LS radio and checkbox buttons
- Click the corresponding radio or checkbox buttons when an area is clicked

Some requirements for the plugin:
- The ImageMapster plugin must be included (see below).
- If using more than one image map/page, all maps must have unique IDs.
- Image map areas MUST have IDs matching the corresponding answer codes.

To add the plugin to your template:
- Download the ImageMapster plugin and upload jquery.imagemapster.min.js to your template directory
- Add an inclusion for that file to the <head> element in startpage.pstpl:
<script type="text/javascript" src="{TEMPLATEURL}jquery.imagemapster.min.js"></script>
- Add the following to the end of your template.js file:
// A jQuery plugin to handle image maps in LimeSurvey
// Requires ImageMapster - http://www.outsharked.com/imagemapster/
(function( $ ){
 
	$.fn.handleImageMap = function(options) {  
 
		// The defaults, extended and modified with any passed in the function call
		var opts = $.extend( {
			optHideAnswers: false,		// Show or hide the LimeSurvey answers
			optListKey: 'id',			// The attribute of the map area that holds the answer code
			optHighlightFill: true,		// Use foreground fill when hovered
			optHighlightFillColor: 'D2F2D3',	// Foreground colour when hovered
			optHighlightStroke: true,		// Use border when hovered
			optHighlightStrokeColor: '328639',	// Border colour when hovered
			optHighlightStrokeWidth: 1,	// Border width when hovered
			optHighlightFillOpacity: 0.2,	// Foreground opacity when hovered
			optSelectFill: true,		// Use foreground fill when active (checked)
			optSelectFillColor: 'D2F2D3',	// Foreground colour when active (checked)
			optSelectStroke: true,		// Use border when active
			optSelectStrokeColor: '328639',	// Border colour when active
			optSelectStrokeWidth: 3,		// Border width when active
			optSelectFillOpacity: 0.5		// Foreground opacity when active
		}, options);
 
		return this.each(function() { 
 
			if(($(this).hasClass('list-radio') || $(this).hasClass('multiple-opt')) && $('map', this).length > 0) { // Only for plain radio or checkbox questions with maps
 
				var $thisQuestion = $(this);
				var qID = $thisQuestion.attr('id').split('question')[1];
 
				if(opts.optHideAnswers == true) {
					$('#question'+qID+' li[id^="javatbd"]').parent().hide();
				}
 
				// Find the survey and group IDs
				if($('input#fieldnames').length != 0) {
					var fieldNames = $( 'input#fieldnames' ).attr('value');
					var tmp = fieldNames.split('X');
					var sID = tmp[0];
					var gID = tmp[1];
				}
 
				// Only single choice for radios (obviously)
				var limeSingleSelect;
				if($(this).hasClass('multiple-opt')) {
					limeSingleSelect = false;
				}
				else {
					limeSingleSelect = true;
				}
 
				// Add an attribute to the image map areas that correspond to the input IDs
				$('#question'+qID+' area').each(function(i){
					$(this).attr('data-state', 'answer'+sID+'X'+gID+'X'+qID+$(this).attr('id'));
				});	
 
				// Click event on the image map areas
				function limeHandleMapClick(data) {
					//	data: jQuery eventObject
					//	data.listTarget: $(item) from boundList
					//	data.key: mapKey for this area
					//	data.selected: true | false
					if($('#question'+qID).hasClass('list-radio')) {
						// Prevent unclicking of radios
						// (this seems reversed but the event occurs AFTER the map area has been toggled)
						if(data.selected == false) { 
							return false;
						}
					}
 
					// Fire conditions (need a small delay for the checkboxes)
					setTimeout(function() { 
						checkconditions($(data.listTarget).attr('value'), $(data.listTarget).attr('name'), $(data.listTarget).attr('type'));
					}, 100);
 
				}
 
				// Initialize the ImageMapster plugin
				$('#question'+qID+' img').mapster( { 
					render_highlight: {
						fill: opts.optHighlightFill,
						fillColor: opts.optHighlightFillColor,
						stroke: opts.optHighlightStroke,
						strokeColor: opts.optHighlightStrokeColor,
						strokeWidth: opts.optHighlightStrokeWidth,
						fillOpacity:opts.optHighlightFillOpacity
					},
					render_select: {
						fill: opts.optSelectFill,
						fillColor: opts.optSelectFillColor,
						stroke: opts.optSelectStroke,
						strokeColor: opts.optSelectStrokeColor,
						strokeWidth: opts.optSelectStrokeWidth,
						fillOpacity: opts.optSelectFillOpacity
					}, 
					isSelectable: true,
					singleSelect: limeSingleSelect,
					listSelectedAttribute: 'checked',
					boundList: $('#question'+qID+' input[type="checkbox"], #question'+qID+' input[type="radio"]'),
					mapKey: 'data-state',
					listKey: opts.optListKey,
					onClick: limeHandleMapClick
				});
 
				// Initial imag map area state(s)
				$('#question'+qID+' input.checkbox:checked, #question'+qID+' input.radio:checked').each(function(i){
					$('#question'+qID+' area[data-state="'+$(this).attr('id')+'"]').mapster('select');
				});
 
				// Click events for the LS inputs (if not hidden);
				$('#question'+qID+' input.radio').click(function(event){
					$('area[data-state="'+$(this).attr('id')+'"]').mapster('select');
				});
				$('#question'+qID+' input.checkbox').click(function(){
					var selected = $(this).is(':checked');
					$('#question'+qID+' img').mapster('set', selected, $(this).attr('id'));
				});
			}
		});
	};
})( jQuery );

The plugin can either be applied globally to all questions in a survey that contain image maps or to individual questions.

To apply the plugin globally to all questions, add the following to the end of your template.js file:
$(document).ready(function(){
	$('map area').parents('.list-radio').handleImageMap(); // Apply the plugin to all list(radio) questions
	$('map area').parents('.multiple-opt').handleImageMap(); // Apply the plugin to all multiple choice questions
});

To apply the plugin to individual questions, add the following to the question source:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){                
        $('#question{QID}').handleImageMap(); // Apply the plugin to this question
    });
</script>

You can see the default options in the plugin code above. These can be over-ridden when calling the plugin. So, you may want to use something like this:
$(document).ready(function(){
 
	$('map area').parents('.multiple-opt').handleImageMap( {
		optHighlightFillColor: 'FF0000',
		optHighlightStrokeColor: 'FF0000',
		optHighlightStrokeWidth: 2,
		optHighlightFillOpacity: 0.2,
		optSelectFillColor: 'D2F2D3',
		optSelectStrokeColor: 'FF0000',
		optSelectStrokeWidth: 3,
		optSelectFillOpacity: 0.5
	});
});

To show the LS answers (for debugging) use:
$('map area').parents('.multiple-opt').handleImageMap({ optHideAnswers: false });
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Letzte Änderung: 1 Jahr 8 Monate her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: Calidonia
Moderatoren: ITEd
Ladezeit der Seite: 0.222 Sekunden
Donation Image