Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Select multiple points on an image

  • tixeon
  • tixeon's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
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
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 10 months ago #169057 by Joffm
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

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • tixeon
  • tixeon's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
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 ):
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>
Last edit: 5 years 10 months ago by tixeon.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 10 months ago #169089 by tpartner
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:

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.
The topic has been locked.
  • tixeon
  • tixeon's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 10 months ago #169169 by tpartner
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.

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.
The topic has been locked.
  • tixeon
  • tixeon's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176197 by tpartner
Replied by tpartner on topic Select multiple points on an image
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.
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176206 by holch
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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176209 by tpartner
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
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176215 by holch
Replied by holch 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.

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 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 4 months ago #176219 by tpartner
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.

Lime-years ahead

Online-surveys for every purse and purpose