HeatMap integration

Más
4 años 6 meses antes #122752 por david2013
Did anyone successfully integrate any heatmap tool (ie. heatmap.js, clickheat) into LimeSurvey without using iframe? Heatmap.js looks very cool. I want to display an image and allow people to click on it. Then save the coordiantes into open end question. Once project is done, I can load all the coordiantes into the image to generate the heatmap.

Does anyone done it before? Any help is appreciated

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

LimeSurvey Partners
Más
4 años 6 meses antes #122790 por tpartner
Respuesta de tpartner sobre el tema HeatMap integration
The heatmap isn't something you would do within LimeSurvey but to capture the coordinates of a click on an image (presumably in relative percentages), you could place something like this in the source of a short-text question. When the image is clicked, the script places a marker at that position and loads the coordinates (comma separated) into the text input. The text input can be hidden by uncommenting line 8 of the script.

Question 1:<br /><br />
<div class="image-wrapper" style="border:2px solid #999; width: 600px;">
	<img src="http://www.google.com/logos/doodles/2015/fifa-womens-world-cup-2015-finals-5184884003831808-hp2x.jpg" style="border:0 none; width: 100%; height: auto;" />
</div>
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function() {	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Hide the text input - uncomment below
		//$('input.text', thisQuestion).hide();
 
		// Create the click "marker"
		$('.image-wrapper', thisQuestion).append('<div class="click-marker" />');
		var leftVal = 0;
		var topVal = 0;
		var displayVal = 'none';
		if($.trim($('input.text', thisQuestion).val()) != '') {
			leftVal = $.trim($('input.text', thisQuestion).val()).split(',')[0]+'%';
			topVal = $.trim($('input.text', thisQuestion).val()).split(',')[1]+'%'; 
			displayVal = 'block';
		}
		$('.click-marker', thisQuestion).css({
			'display': displayVal,
			'position': 'absolute',
			'left': leftVal,
			'top': topVal,
			'margin': '-10px 0 0 -10px',
			'width': '18px',
			'height': '18px',
			'-moz-border-radius': '10px',
			'-webkit-border-radius': '10px',
			'border-radius': '10px',
			'background': '#0C0',
			'border': '1px solid #090'
		});
 
		// Insert an overlay to click on
		$('.image-wrapper', thisQuestion).css('position', 'relative').append('<div class="click-overlay" />');
		$('.click-overlay', thisQuestion).css({
			'position': 'absolute',
			'left': 0,
			'top': 0,
			'margin': 0,
			'width': $('.image-wrapper', thisQuestion).width()+'px',
			'height': $('.image-wrapper', thisQuestion).height()+'px'
		});
 
		// Click event on the overlay
		$('.click-overlay', thisQuestion).click(function(e) {
			var thisWidth = $(this).width();
			var thisHeight = $(this).height();
			var posX = $(this).offset().left;
			var posY = $(this).offset().top;
			var xCoord = e.pageX - posX;
			var yCoord = e.pageY - posY;
			var xCoordPercent = (xCoord/thisWidth)*100;
			var yCoordPercent = (yCoord/thisHeight)*100;
 
			// Load the click coordinates (as relative percentages)
			$('input.text', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2));
 
			// Reposition the marker
			$('.click-marker', thisQuestion).css({
				'display': 'block',
				'left': xCoordPercent+'%',
				'top': yCoordPercent+'%'
			});
		});
 
	});
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
El siguiente usuario dijo gracias: david2013

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
4 años 5 meses antes #122904 por david2013
Respuesta de david2013 sobre el tema HeatMap integration
Thank you very much for your help. Just curious, why convert xCoord and yCoord into percentages (xCoordPercent and yCoordPercent)? What's the advantage?

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
4 años 5 meses antes #122906 por tpartner
Respuesta de tpartner sobre el tema HeatMap integration
There's no advantage in the data, I just assumed you would need relative coordinates for the heat map.

They are, however, needed to position the marker in case of resizing.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
1 mes 4 semanas antes #191396 por gremlin
Respuesta de gremlin sobre el tema HeatMap integration
Hi tpartner!

I just tried this on V3.18. While the overlay is working but the text input doesn't seem to show the coordinates. No data is stored. Is an update to the script required for V3.18?

Also, is there a way to make the image and overlay mobile responsive? The image exceeds the width on a mobile device screen.

Thanks!

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Más
1 mes 4 semanas antes #191414 por tpartner
Respuesta de tpartner sobre el tema HeatMap integration
I'm not sure what the thinking behind the overlay was but this will work in 3.x and is responsive. It also handles returning to the page.

Question 1:<br /><br />
<div class="image-wrapper" style="border:2px solid #999; width: 100%; max-width: 600px; position:relative">
	<img src="http://www.google.com/logos/doodles/2015/fifa-womens-world-cup-2015-finals-5184884003831808-hp2x.jpg" style="border:0 none; width: 100%; height: auto;" />
</div>
<script type="text/javascript" charset="utf-8">		
	$(document).ready(function() {	
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Hide the text input - un-comment below
		//$('input.text', thisQuestion).hide();
 
		// Create the click "marker"
		$('.image-wrapper', thisQuestion).append('<div class="click-marker" />');
		var leftVal = 0;
		var topVal = 0;
		var displayVal = 'none';
		if($.trim($('input.text', thisQuestion).val()) != '') {
			leftVal = $.trim($('input.text', thisQuestion).val()).split(',')[0]+'%';
			topVal = $.trim($('input.text', thisQuestion).val()).split(',')[1]+'%'; 
			displayVal = 'block';
		}
		$('.click-marker', thisQuestion).css({
			'display': displayVal,
			'position': 'absolute',
			'left': leftVal,
			'top': topVal,
			'margin': '-10px 0 0 -10px',
			'width': '18px',
			'height': '18px',
			'-moz-border-radius': '10px',
			'-webkit-border-radius': '10px',
			'border-radius': '10px',
			'background': '#0C0',
			'border': '1px solid #090'
		});
 
		// Click event on the image
		$('.image-wrapper, img', thisQuestion).on('click', function(e) {
			var thisWidth = $(this).width();
			var thisHeight = $(this).height();
			var posX = $(this).offset().left;
			var posY = $(this).offset().top;
			var xCoord = e.pageX - posX;
			var yCoord = e.pageY - posY;
			var xCoordPercent = (xCoord/thisWidth)*100;
			var yCoordPercent = (yCoord/thisHeight)*100;
 
			// Load the click coordinates (as relative percentages)
			$('input:text', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2));
 
			// Reposition the marker
			$('.click-marker', thisQuestion).css({
				'display': 'block',
				'left': xCoordPercent+'%',
				'top': yCoordPercent+'%'
			});
		});
 
		// Returning to the page
		if($('input:text', thisQuestion).val() != '') {
			var coords = $.trim($('input:text', thisQuestion).val()).split(',');
			$('.click-marker', thisQuestion).css({
				'display': 'block',
				'left': coords[0]+'%',
				'top': coords[1]+'%'
			});
		}
	});
</script>



Sample survey attached:

Archivo Adjunto:

Nombre del Archivo: limesurvey...1-22.lss
Tamaño del Archivo:18 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Adjuntos:

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

¡Comenzar ahora!

Simplemente cree una cuenta y comience a usar LimeSurvey hoy mismo.

Registrarse ahora
¡Únase a nuestro boletín informativo!

Iniciar sesión