Welcome to the LimeSurvey Community Forum

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

Recording multiple click co-ordinates as a "on demand" question

TomPH01
Topic Author
Offline
New Member

More

3 years 7 months ago - 3 years 7 months ago #240583 by TomPH01

Recording multiple click co-ordinates as a "on demand" question was created by TomPH01

Please help us help you and fill where relevant:
Your LimeSurvey version: Community Edition, Version 5.4.5+221010
Own server or LimeSurvey hosting: Own Server
==================
Hi all,

I'm looking to build upon a previously answered question here
I want to record a user's clicks on an image as a series of co-ordinates to build a heatmap from the output.
The script provided from the forum post linked allows you to capture the co-ordinates of a single click and pass those as a percentage to a short text answer. I've copied the script below this question text for quick reference.

I'm wondering if it's possible to take this a step further and essentially create an "on demand" question that will record multiple clicks up to a maximum that, I'm guessing, could be set in the question's settings.

Is this even doable? Is there a better way?

Warning: Spoiler!

Code:

[code]Question 1:<br /><br /> <div class="image-wrapper" style="border:2px solid #999; width: 100%; max-width: 600px; position:relative"> <img src="https://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>

[/code]

Last edit: 3 years 7 months ago by TomPH01. Reason: Tidied up copied code in the spoiler

Please Log in to join the conversation.

TomPH01
Topic Author
Offline
New Member

More

3 years 7 months ago #240584 by TomPH01

Replied by TomPH01 on topic Recording multiple click co-ordinates as a "on demand" question

Apologies for the code in the spoiler. I tried to tidy it up, but the forum thinks I'm trying to spam! A much neater version exists in the linked forum post.

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

3 years 7 months ago #240588 by Joffm

Replied by Joffm on topic Recording multiple click co-ordinates as a "on demand" question

Hi,
you can think of adapting the "Interest Points" question theme to your needs,

And to insert code, you may use the button

And you can add the type by adding
code type=javascript
code type=css

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

Please Log in to join the conversation.

TomPH01
Topic Author
Offline
New Member

More

3 years 7 months ago #240592 by TomPH01

Replied by TomPH01 on topic Recording multiple click co-ordinates as a "on demand" question

Hi,

Sorry, I'm not sure I understand. Are you advising me on how to clean up the forum post? What do you mean by adapting the "interest points" theme?

I have tried adding type = ... to the code tag and that has not changed the formatting, unfortunately.

Please Log in to join the conversation.