Use a queston of type "multiple short text" with two subquestions (to store the coords and the time elepsed)
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Time at start
var starttime = Date.now();
// Hide the text input - un-comment below
$('.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)
// Store the coordinates in the first subquestion
$('input[type=text]:eq(0)', thisQuestion).val(xCoordPercent.toFixed(2)+','+yCoordPercent.toFixed(2));
// Store the elapsed time in the second subquestion
// Time is stored in milliseconds
$('input[type=text]:eq(1)', thisQuestion).val(Date.now() - starttime);
// 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>
