Select multiple points on an image

More
1 year 6 months ago #169006 by tixeon
I want to present respondents with an image and get them to click on multiple points within that image.
I have worked out how to create a question where the respondent can chose a single point on an image, but was wondering if anyone had worked out a way that a respondent can add multiple points to a single image?

I am looking for a solution that works with version 3.7.2

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
1 year 6 months ago #169057 by Joffm
Hi, tixeon,

we'd highly appreciate if you'd share your solution, so we can work on it to find a solution for more than one point.

Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in or Create an account to join the conversation.

More
1 year 6 months ago - 1 year 6 months ago #169060 by tixeon
No problem,

I have attached the survey file. This works in Version 2.6.7-lts Build 171212 (but I will need the multi-point click one to work on v3.7.2 as I am migrating to the limesurvey professional hosting solution).

It uses the following script (that I go from a post on this forum https://www.limesurvey.org/forum/design-issues/110069-clickable-image-as-answer ):
<div class="image-wrapper" style="border:2px solid #999; width: 600px;">
	<img src="http://asdfresearch.com.au/images/GRID.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>
Attachments:
Last edit: 1 year 6 months ago by tixeon.

Please Log in or Create an account to join the conversation.

More
1 year 6 months ago #169089 by tpartner
Here's a solution for LS 3.x. It will allow clicking one or several positions on an image.

1) Extend a core template.


2) Place this in custom.js:

$(document).on('ready pjax:scriptcomplete',function(){
	$('.image-click-position').imageClickPosition({
		hideInputs: false // To hide inputs, set to true
	});
});
 
//@name			| imageClickPosition
//@author		| Tony Partner - http:partnersurveys.com
//@updated_at	| 23/06/2018 08:00:00
//@description	| A plugin to record click positions on an image
 
(function( $ ){
 
	$.fn.imageClickPosition = function(options) {
 
		var opts = $.extend( {
			hideInputs: true
		}, options);
 
		return this.each(function() {
			var thisQuestion = $(this);
 
			// Hide the text input
			if(opts.hideInputs == true) {
				$('.subquestion-list', thisQuestion).hide();
			}
 
			// Click event on the image
			$('.image-wrapper', thisQuestion).on('click', function(event) {
 
				event.stopPropagation();
 
				if($('.click-marker', thisQuestion).length == $('input[type="text"]', thisQuestion).length) {
					$('.click-marker:last', thisQuestion).remove();
				}
 
				var thisWidth = $(this).width();
				var thisHeight = $(this).height();
				var posX = $(this).offset().left;
				var posY = $(this).offset().top;
				var xCoord = event.pageX - posX;
				var yCoord = event.pageY - posY;
				var xCoordPercent = (xCoord/thisWidth)*100;
				var yCoordPercent = (yCoord/thisHeight)*100;
 
				// Insert a marker
				$('.image-wrapper', thisQuestion).append('<div class="click-marker" style="left:'+xCoordPercent.toFixed(2)+'%; top:'+yCoordPercent.toFixed(2)+'%;" data-left="'+xCoordPercent.toFixed(2)+'" data-top="'+yCoordPercent.toFixed(2)+'" />');
 
				loadInputs();
			});
 
			// Click event on a click-marker
			$('.image-wrapper', thisQuestion).on('click', '.click-marker', function(event) {
				event.stopPropagation();
				$(this).remove();
 
				loadInputs();
			});
 
			function loadInputs() {
 
				$('input[type="text"]', thisQuestion).val('');
 
				$('.click-marker', thisQuestion).each(function(i) {
					$('input[type="text"]:eq('+i+')', thisQuestion).val($(this).attr('data-left')+','+$(this).attr('data-top'));
				});
 
				$('input[type="text"]', thisQuestion).trigger('keyup');
			}
 
			// Initial states
			$('input[type="text"]', thisQuestion).each(function(i) {
 
				if($.trim($(this).val()) != '') {
					var leftVal = $.trim($(this).val()).split(',')[0];
					var topVal = $.trim($(this).val()).split(',')[1]; 
 
					$('.image-wrapper', thisQuestion).append('<div class="click-marker" style="left:'+leftVal+'%; top:'+topVal+'%;" data-left="'+leftVal+'" data-top="'+topVal+'" />');
				}
			});
 
		});
	};
})( jQuery );


4) Add something like this to custom.css:

.image-click-position .image-wrapper {
	position: relative;
	border: 1px solid #999999;
	width: 600px;
	max-width: 100%;
	cursor: pointer;
}
 
.image-click-position .click-marker {
	display: block;
	position: absolute;
	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;
}


5) Create a multiple-short-text question with as many sub-questions as click positions allowed.


6) Give this new question a CSS class "image-click-position".



Cheers,
Tony Partner

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

Please Log in or Create an account to join the conversation.

More
1 year 6 months ago #169131 by tixeon
Thank you. I have followed your instructions but it is not working for me. Are you happy to share the .lss or .lsg file so that I can see exactly how you set up the question?

Please Log in or Create an account to join the conversation.

More
1 year 6 months ago #169169 by tpartner
Here is a test survey that has everything required (including JavaScript and CSS) in the source of the question.

File Attachment:

File Name: limesurvey...5-25.lss
File Size:21 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
Attachments:

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176191 by tixeon
This is a great script. I am wondering if there is a way to make it so that the image resizes when in mobile mode?

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176197 by tpartner
The attached sample survey IS responsive to screen width.




Cheers,
Tony Partner

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

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176206 by holch

The attached sample survey IS responsive to screen width.


What I am wondering is, how do you analyze such a survey, where you register positions on an image via coordinates, but the image can have different sizes, depending on the resolution / view port.

I am not very good a reading JS code. Does the script record this?

In any case, you would need to analyze the results on a case by case basis, because the images might be totally different for any of the responses.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176209 by tpartner
The coordinates are in percentages of width/height and based on the center of the dots, so image size is irrelevant. I suppose you could also put in media queries to reduce the size of the dots on smaller screens but I don't see the point.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The following user(s) said Thank You: holch

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176215 by holch

The coordinates are in percentages of width/height and based on the center of the dots, so image size is irrelevant.

Great. That solves the problem of images not being the same size! Thank you for clarifying.

So in your example from the screenshot, Position 1 reads as 6.69% from the top, 17.81% from the left.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176219 by tpartner
Yep, the coordinates are relative to the top-left corner of the image.

Cheers,
Tony Partner

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

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176470 by Joffm
Hi,
the provided solution works like a charm.

BUT: In a new survey the client would like to see markers in two different colors (e.g. green, red) to be able to mark positive points and negative points.
Something like: left click: green, right click: red.

And furthermore there should be a comment field for each marker. where the respondent explains why he selected this part (positive resp. negative)

Well, because Tony provided this solution this post is more or less addressed to him.


I attach a screenshot of a solution of IFAD CIS.
https://www.ifad.de/software/befragungssoftware-cis/?lang=en https://www.ifad.de/software/befragungssoftware-cis/?lang=en [/url]

In my case the comment field can be below., but the important thing is that the respondent can see the connection between marker and field.

Best regards
Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Attachments:

Please Log in or Create an account to join the conversation.

More
1 year 1 month ago #176504 by tpartner
Hmm...that'll take some time to develop.

It's interesting that the linked example doesn't work on smartphones. Do you need it to be mobile-compatible? If so (and maybe regardless of that), I would suggest dragging into position instead of clicking - the right-click (tap and hold) on phones is not intuitive to many.

Regarding the comments, can you get away with a single-line input (<input type="text">)?

Cheers,
Tony Partner

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

Please Log in or Create an account to join the conversation.

More
1 year 4 weeks ago #176580 by Joffm
Hi,

some feedback:

Yes, you are right about smartphones: The developers of the example say "It doesn't make sense on smartphones".

So, if you have any ideas you are absolutely free in design.

The need (the wishes) are:
  • two different markers (positive vs. negative)
  • comments related to each marker
  • if I remove a marker the comment is removed as well
  • Single line for comments is fine.
  • Doesn't matter where the comment is displayed. Can be below the picture.
  • smartphone not absolutely required.

The "nice to have" are:
  • Multiline comment
  • smartphone enabled


Thank you in advance

Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!