2019-09-11 18:16:33 +02:00
<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< title > MT Request: draw over the image< / title >
< style media = "screen" >
2019-09-11 21:00:06 +02:00
#sample, svg{
position:absolute;
top: 0;
left: 0;
bottom: 0;
right:0;
width:100%;
height:100%;
2019-10-31 13:55:22 +01:00
font-family: sans-serif;
2019-11-02 20:45:57 +01:00
z-index:2;
}
img{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
z-index:1;
2019-09-11 18:16:33 +02:00
}
path {
fill: none;
stroke: red;
2019-11-02 22:31:16 +01:00
stroke-width: 3mm;
2019-09-11 18:16:33 +02:00
}
2019-09-11 21:00:06 +02:00
body.submitted path{
stroke:darkgray;
}
body.submitted .buttons{
display:none;
}
2019-10-31 13:55:22 +01:00
/*#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;
}*/
2019-09-11 21:00:06 +02:00
#wrapper {
2019-10-31 13:55:22 +01:00
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:none;
2019-10-23 22:33:37 +02:00
cursor: url(cursor.png) 6 6, auto;
2019-09-11 21:00:06 +02:00
}
2019-10-31 13:55:22 +01:00
.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%);
}
2019-10-15 12:42:59 +02:00
html, body{
height: 100%;
width: 100%;
2019-10-31 13:55:22 +01:00
margin:0;
background:gray;
}
#interface{
2019-11-02 20:45:57 +01:00
background:black;
2019-10-31 13:55:22 +01:00
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%;
2019-10-15 12:42:59 +02:00
}
2019-10-31 13:55:22 +01:00
@media (min-aspect-ratio: {WIDTH}/{HEIGHT}) {
#interface {
height: 100vh;
width: calc({WIDTH}/{HEIGHT} * 100vh);
padding-top:0;
}
}
#info{
position: absolute;
2019-11-02 22:31:16 +01:00
bottom: 15px;
2019-10-31 13:55:22 +01:00
width: 600px;
left: calc(50% - 250px);
z-index: 999;
}
.buttons{
text-align: center;
}
2019-11-02 22:31:16 +01:00
#submit{
background: lightblue;
border: solid 1px blue;
border-radius: 5px;
font-size: 110%;
padding: 5px 10px;
}
2019-09-11 18:16:33 +02:00
< / style >
< / head >
< body >
2019-12-18 18:49:07 +01:00
< div id = 'interface' >
2019-10-31 13:55:22 +01:00
< 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 >
2019-11-02 20:45:57 +01:00
< img src = '{IMAGE_URL}' >
2019-10-31 13:55:22 +01:00
< / div >
< div id = 'info' >
< ul >
2019-11-02 20:45:57 +01:00
< li > Drag the mouse to trace the lines drawing above< / li >
2019-12-18 18:49:07 +01:00
< li > Follow the lines as precise as possible, it is only this image to complete the HIT.< / li >
2019-10-31 13:55:22 +01:00
< li > Press submit when you're done.< / li >
2019-12-18 18:49:07 +01:00
< 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 >
2019-10-31 13:55:22 +01:00
< / ul >
< div class = 'buttons' >
2019-12-18 18:49:07 +01:00
2019-10-31 13:55:22 +01:00
< button id = 'submit' > Submit< / button >
<!-- <button id='reset'>Reset</button> -->
2019-12-18 18:49:07 +01:00
< form method = 'post' action = '' id = 'finishedForm' >
< input type = 'hidden' name = 'surveycode' id = 'surveycode' >
< input type = 'hidden' name = 'assignmentId' value = '{ASSIGNMENT}' >
< / form >
2019-10-31 13:55:22 +01:00
< / 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 >
2019-09-11 18:16:33 +02:00
< / div >
2019-12-18 18:49:07 +01:00
< script type = 'text/javascript' >
var svgWidth = {WIDTH};
var svgHeight = {HEIGHT};
var drawWidth = {DRAW_WIDTH};
var drawHeight = {DRAW_HEIGHT};
2019-09-11 18:16:33 +02:00
2019-12-18 18:49:07 +01:00
var xPadding = {LEFT_PADDING} / svgWidth;
var yPadding = {TOP_PADDING} / svgHeight;
var drawWidthFactor = drawWidth / svgWidth;
var drawHeightFactor = drawHeight / svgHeight;
2019-09-11 18:16:33 +02:00
< / script >
2019-12-18 18:49:07 +01:00
{SCRIPT}
2019-09-11 18:16:33 +02:00
< / body >
< / html >
