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