- Posts: 1
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Body scheme with grid to indicate tattoo locations
- MilenaLyon
- Topic Author
- Offline
- New Member
Less
More
9 months 2 weeks ago #245459
by MilenaLyon
Body scheme with grid to indicate tattoo locations was created by MilenaLyon
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 3.22.12+200406
Own server or LimeSurvey hosting: own (as far as I know)
Survey theme/template: NAKO LimeSurvey
==================
Hi,
I am currently programming a questionnaire for a large-scale epidemiological survey to assess tattoo exposure. One of the questions I would like to include is a body scheme, overlaid with a grid to indicate the tattoo locations by crossing/marking the respective boxes of the grid. Attached is how the question approx looks like in a paper version of the questionnaire. Persons are asked to indicate their tattoos by marking the respective boxes with a black pencil and the coding of the boxes for data entry is done like in the board game battleships. a1, a2, a3... zzN
I guess this is rather challenging but any help would be welcome.
Best wishes,
Milena
Your LimeSurvey version: Version 3.22.12+200406
Own server or LimeSurvey hosting: own (as far as I know)
Survey theme/template: NAKO LimeSurvey
==================
Hi,
I am currently programming a questionnaire for a large-scale epidemiological survey to assess tattoo exposure. One of the questions I would like to include is a body scheme, overlaid with a grid to indicate the tattoo locations by crossing/marking the respective boxes of the grid. Attached is how the question approx looks like in a paper version of the questionnaire. Persons are asked to indicate their tattoos by marking the respective boxes with a black pencil and the coding of the boxes for data entry is done like in the board game battleships. a1, a2, a3... zzN
I guess this is rather challenging but any help would be welcome.
Best wishes,
Milena
Attachments:
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13052
- Thank you received: 4018
9 months 2 weeks ago - 9 months 2 weeks ago #245460
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Body scheme with grid to indicate tattoo locations
Hi, there are e few solutions provided here.
1.
As you see, the coordinates are stored in the data. In a real survey you will hide this of course.
@tpartner's javascript
Up to now you can only enter one point.
You may adapt the script to be able to enter more
2.
@tpartner's plugin "interestPoints"
[url] github.com/tpartner/LimeSurvey-Image-Interest-Points-3x [/url]
This you may adapt to have only one kind of markers, not the (+) and (-)
If I remember correctly there also was a question how to enter several markers some time ago.
I think it was about places in the Netherlands.
[url] forums.limesurvey.org/index.php/forum/de...res-all-mouse-clicks [/url]
Joffm
P.S.
I hope the survey will help to develop a therapy against this skin disease.
1.
As you see, the coordinates are stored in the data. In a real survey you will hide this of course.
@tpartner's javascript
Code:
<div class="image-wrapper img-responsive center-block" style="border:2px solid #999; width: 100%;max-width: 500px; position:relative "> <img src="upload/surveys/{SID}/image/muskeln.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(); // $('.ls-answers', 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>
Up to now you can only enter one point.
You may adapt the script to be able to enter more
2.
@tpartner's plugin "interestPoints"
[url] github.com/tpartner/LimeSurvey-Image-Interest-Points-3x [/url]
This you may adapt to have only one kind of markers, not the (+) and (-)
If I remember correctly there also was a question how to enter several markers some time ago.
I think it was about places in the Netherlands.
[url] forums.limesurvey.org/index.php/forum/de...res-all-mouse-clicks [/url]
Joffm
P.S.
I hope the survey will help to develop a therapy against this skin disease.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 9 months 2 weeks ago by Joffm.
The following user(s) said Thank You: MilenaLyon
Please Log in to join the conversation.