<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>MT Request: draw over the image</title> <style media="screen"> #sample, svg{ position:absolute; top: 0; left: 0; bottom: 0; right:0; width:100%; height:100%; font-family: sans-serif; z-index:2; } img{ position:absolute; top:0; bottom:0; right:0; left:0; width:100%; height:100%; z-index:1; } path { fill: none; stroke: red; stroke-width: 3mm; } body.submitted path{ stroke:darkgray; } body.submitted .buttons{ display:none; } /*#wrapper { height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%); width: calc({DRAW_WIDTH}/{WIDTH} * 100%); position: absolute; left: calc(({WIDTH} - {DRAW_WIDTH})/2/{WIDTH} * 100%); top: calc(({HEIGHT} - {DRAW_HEIGHT})/2/{HEIGHT} * 100%); background:none; cursor: url(cursor.png) 6 6, auto; }*/ #wrapper { position:absolute; top:0; right:0; bottom:0; left:0; background:none; cursor: url(cursor.png) 6 6, auto; } .gray{ position:absolute; background:rgba(255,255,255,0.7); } #gray_top{ left:0; right:0; top:0; height:calc({TOP_PADDING}/{HEIGHT} * 100%); } #gray_bottom{ left:0; right:0; bottom:0; height:calc(({HEIGHT} - {DRAW_HEIGHT} - {TOP_PADDING})/{HEIGHT} * 100%); } #gray_left{ left:0; top:calc({TOP_PADDING}/{HEIGHT} * 100%); height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%); width: calc({LEFT_PADDING}/{WIDTH} * 100%); } #gray_right{ right:0; top:calc({TOP_PADDING}/{HEIGHT} * 100%); height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%); width: calc(({WIDTH} - {DRAW_WIDTH} - {LEFT_PADDING})/{WIDTH} * 100%); } html, body{ height: 100%; width: 100%; margin:0; background:gray; } #interface{ background:black; height: 0; overflow: hidden; padding-top: calc({HEIGHT}/{WIDTH} * 100%); position: relative; margin: 0 auto; background-size: 100% 100%; } #innerface{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: {WIDTH}/{HEIGHT}) { #interface { height: 100vh; width: calc({WIDTH}/{HEIGHT} * 100vh); padding-top:0; } } #info{ position: absolute; bottom: 15px; width: 600px; left: calc(50% - 250px); z-index: 999; } .buttons{ text-align: center; } #submit{ background: lightblue; border: solid 1px blue; border-radius: 5px; font-size: 110%; padding: 5px 10px; } </style> </head> <body> <div id='interface'> <div id='innerface'> <div id='wrapper'> <!-- <img src="{IMAGE_URL}" id='sample'>--> <svg id="canvas" viewBox="0 0 {WIDTH}0 {HEIGHT}0" width="{WIDTH}mm" height="{HEIGHT}mm" preserveAspectRatio="none"> <path d="" id="stroke" /> </svg> <img src='{IMAGE_URL}'> </div> <div id='info'> <ul> <li>Drag the mouse to trace the lines above.</li> <li>Try to be as precise as possible: there's only one image per HIT.</li> <li>Press submit when you're done.</li> <li><strong>Please watch the clock!</strong> timing is strict because the tracing is live streamed to us. Unfortunately, due to high abandonment rates we have to keep the timer strict.</li> </ul> <div class='buttons'> <button id='submit'>Submit</button> <!-- <button id='reset'>Reset</button>--> <form method='post' action='' id='finishedForm'> <input type='hidden' name='surveycode' id='surveycode'> <input type='hidden' name='assignmentId' value='{ASSIGNMENT}'> </form> </div> <div id='message'></div> </div> <div class='gray' id='gray_top'></div> <div class='gray' id='gray_bottom'></div> <div class='gray' id='gray_left'></div> <div class='gray' id='gray_right'></div> </div> </div> <script type='text/javascript'> var svgWidth = {WIDTH}; var svgHeight = {HEIGHT}; var drawWidth = {DRAW_WIDTH}; var drawHeight = {DRAW_HEIGHT}; var xPadding = {LEFT_PADDING} / svgWidth; var yPadding = {TOP_PADDING} / svgHeight; var drawWidthFactor = drawWidth / svgWidth; var drawHeightFactor = drawHeight / svgHeight; </script> {SCRIPT} </body> </html>