- Posts: 78
- Thank you received: 2
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Select multiple points on an image
- tixeon
- Topic Author
- Offline
- Senior Member
Less
More
5 years 10 months ago #169006
by tixeon
Select multiple points on an image was created 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
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
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12797
- Thank you received: 3942
5 years 10 months ago #169057
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Select multiple points on an image
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
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
The topic has been locked.
- tixeon
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 78
- Thank you received: 2
5 years 10 months ago - 5 years 10 months ago #169060
by tixeon
Replied by tixeon on topic Select multiple points on an image
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 www.limesurvey.org/forum/design-issues/1...able-image-as-answer ):
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 www.limesurvey.org/forum/design-issues/1...able-image-as-answer ):
Code:
<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: 5 years 10 months ago by tixeon.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10637
- Thank you received: 3700
5 years 10 months ago #169089
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Select multiple points on an image
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:
4) Add something like this to custom.css:
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".
1) Extend a core template.
2) Place this in custom.js:
Code:
$(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:
Code:
.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.
Attachments:
The topic has been locked.
- tixeon
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 78
- Thank you received: 2
5 years 10 months ago #169131
by tixeon
Replied by tixeon on topic Select multiple points on an image
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?
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10637
- Thank you received: 3700
5 years 10 months ago #169169
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Select multiple points on an image
Here is a test survey that has everything required (including JavaScript and CSS) in the source of the question.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
- tixeon
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 78
- Thank you received: 2
5 years 4 months ago #176191
by tixeon
Replied by tixeon on topic Select multiple points on an image
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?
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10637
- Thank you received: 3700
5 years 4 months ago #176197
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Select multiple points on an image
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11758
- Thank you received: 2753
5 years 4 months ago #176206
by holch
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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Select multiple points on an image
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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10637
- Thank you received: 3700
5 years 4 months ago #176209
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Select multiple points on an image
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.
The following user(s) said Thank You: holch
The topic has been locked.
- holch
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 11758
- Thank you received: 2753
5 years 4 months ago #176215
by holch
So in your example from the screenshot, Position 1 reads as 6.69% from the top, 17.81% from the left.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
Replied by holch on topic Select multiple points on an image
Great. That solves the problem of images not being the same size! Thank you for clarifying.The coordinates are in percentages of width/height and based on the center of the dots, so image size is irrelevant.
So in your example from the screenshot, Position 1 reads as 6.69% from the top, 17.81% from the left.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10637
- Thank you received: 3700
5 years 4 months ago #176219
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Select multiple points on an image
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.
The topic has been locked.