<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>

<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>