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