{{ block title }}
Where has this image been taken?
{{ endblock }}
{{ block content }}



<div id="alles" onmousemove="actualposition()" style="width: 100%; height:100%">
  <a href="/static/help_image_phase1.jpeg" target="popup" class="help-btn"> <img alt="help" src="/static/help_button_image.png" width="30px" height="30px"> </a>


  <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

  <style>

    .box_all {
      position:absolute;
      top:0px;
      right:0px;
      bottom:0px;
      left:0px;
    }

  .dropzone {
    border: dashed 2px transparent;
    border-radius: 4px;
    padding: 10px;
    transition: background-color 0.3s;
    height: 100px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    position: relative;
    font-size: small;


  }

  #drop_zero {
    width: 450px;
    height: 150px;
    background-color: #d5d2d2;
  }


#drop_one {
    background-color: #FDE725;
    grid-column: 1;
    grid-row: 2;
}

#drop_two {
  background-color: #9FDA3A;
  grid-column: 2;
  grid-row: 2;
}


#drop_three {
  background-color: #4AC16D;
  grid-column: 3;
  grid-row: 2;
}


#drop_four {
  background-color: #28A187;
  grid-column: 4;
  grid-row: 2;
}


#drop_five {
  background-color: #277F8E;
  grid-column: 5;
  grid-row: 2;
}


  body {
font-family: Arial, sans-serif;
}

  .drop-active {
    border-color: #373737;
  }

  .drop-target {
    background-color: #bcbcbc;
    border-color: #373737;
    border-style: solid;
  }

  .drag-drop {
    font-size: x-small;
    display: inline-block;
    vertical-align:top;
    border-radius: 4px;
    border:2px solid #373737;
    margin: 10px auto 30px;
    padding: 5px;
    height: 100px;
    width: 70px;
    color: #373737;
    background-color: white;

    touch-action: none;
    transform: translate(0px, 0px);

    transition: background-color 0.3s;
    font-family: Arial, sans-serif;

  }

  .inline-flex-parent {
    position: relative;
    z-index: -1;
    top:0;
    left:0;
    width: 450px;
    height: 150px;
    border-radius: 4px;
    border:1px solid #373737;
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: 13% 69% 13%;

  }

  .inline-flex-parent > div {
margin: 6px;
}

.container_dragelements{
  position: relative;
  top:0;
  left:0;
  display:flex;
  align-items: center;
  width: 450px;
  height: 150px;
  padding: 29px;

}

.container_dragelements > div {
margin: 4px;
}



.text_container{
  grid-column: 1;
  grid-row: 3;
  font-family: Arial, sans-serif;
  font-size: small;
  text-align:center;
}

.text_container2{
  grid-column: 5;
  grid-row: 3;
  font-family: Arial, sans-serif;
  font-size: small;
  text-align:center;
}

.text_containerheader{
  grid-column: 1 / 6;
  grid-row: 1;
  font-family: Arial, sans-serif;
  font-size: small;
  text-align:center;
}

.inline-flex-parent_labels{
  position: relative;
  top:0;
  left:0;
  display:flex;

}

.inline-flex-parent_zero{
  position: relative;
  width: 450px;
  top:0;
  left:0;
  display:flex;
  border-radius: 4px;
  border:1px solid #373737;

}

  .drag-drop.can-drop {
    color: #373737;
    background-color: #d9ead3;
    border-color: #373737;


  }

  .otree-btn-next{
    position: absolute;
    float:right;
    display: none;
    top: 850px;
    left: calc((100vw - 1100px)/2);
  }

  .help-btn{
    position: absolute;
    float:right;
    top: 855px;
    left: calc((100vw - 1100px)/2 + 80px);
  }


  .otree-body {
         min-width:1100px;
         max-width:1100px;

     }
  .answer_field{
    position: relative;
    top:0;
    left:3%;
    display:inline;
    height: 100%;
    width: 50%;
    float:right;

  }

  .canvas-container_underimage{
    width: 50%;
    float:left;
    align-items: center;
    text-align: center;
    display: block;
}

 </style>


 <p>Please drag all geolocation draggables to a corresponding dropzone. Your answers will help your teammates to find the correct solution and will count towards the team decision! </p>
  <p>To see the detailed instructions again, click on the button with a question mark on it. The instructions will be opened in a new tab.</p>

<div class="canvas-container_underimage">
<center><img src="{{ static chosen_image_link }}"  id="stimuli_image" style="max-width:100%;"/></center>
</div>


<div class='answer_field'>
<div class='inline-flex-parent_zero'>
<div id="drop_zero" class="dropzone" number = 0>Incorrect geolocations (0)</div>
</div>

<br>
<br>

<div class='container_dragelements'>
<div id= "{{ city1 }}" class="drag-drop" first_move = 0 number = 1> {{ city1 }} </div>
<div id="{{ city2 }}" class="drag-drop" first_move = 0 number = 2> {{ city2 }} </div>
<div id="{{ city3 }}" class="drag-drop" first_move =0 number = 3> {{ city3 }}  </div>
<div id="{{ city4 }}" class="drag-drop" first_move = 0 number = 4> {{ city4 }}  </div>
<div id="{{ city5 }}" class="drag-drop" first_move = 0 number = 5> {{ city5 }}  </div>
</div>
<br>
<br>

<div class='inline-flex-parent'>
  <div id="text_containerheader" class="text_containerheader">Correct geolocations</div>
<div id="drop_one" class="dropzone" number = 1>(1)</div>
<div id="drop_two" class="dropzone" number = 2>(2)</div>
<div id="drop_three" class="dropzone" number =3>(3)</div>
<div id="drop_four" class="dropzone" number = 4>(4)</div>
<div id="drop_five" class="dropzone" number = 5>(5)</div>
<div id="text_container" class="text_container">low certainty</div>
<div id="text_container" class="text_container2">high certainty</div>

</div>

</div>


 <br>
 <br>
 <br>



    <script type="module">
    import interact from
    'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'
    window.onload = function() {meta_data_static();};

    </script>

    <script>

      addEventListener('load', (event) => {

        var timestamp_page_loaded = Date.now();
        document.getElementById("time_stamp_page_ready").value = timestamp_page_loaded;
        var date = new Date();
        var offset = date.getTimezoneOffset();
        document.getElementById("offset_timezone").value = offset;

        position_drop0 = getBoundingClientRect(document.getElementById("drop_zero"))
        position_drop1 = getBoundingClientRect(document.getElementById("drop_one"))
        position_drop2 = getBoundingClientRect(document.getElementById("drop_two"))
        position_drop3 = getBoundingClientRect(document.getElementById("drop_three"))
        position_drop4 = getBoundingClientRect(document.getElementById("drop_four"))
        position_drop5 = getBoundingClientRect(document.getElementById("drop_five"))
        document.getElementById("position_drop0_otree").value = position_drop0;
        document.getElementById("position_drop1_otree").value = position_drop1;
        document.getElementById("position_drop2_otree").value = position_drop2;
        document.getElementById("position_drop3_otree").value = position_drop3;
        document.getElementById("position_drop4_otree").value = position_drop4;
        document.getElementById("position_drop5_otree").value = position_drop5;

        position_drag1 = getBoundingClientRect(document.getElementById("{{ city1 }}"))
        position_drag2 = getBoundingClientRect(document.getElementById("{{ city2 }}"))
        position_drag3 = getBoundingClientRect(document.getElementById("{{ city3 }}"))
        position_drag4 = getBoundingClientRect(document.getElementById("{{ city4 }}"))
        position_drag5 = getBoundingClientRect(document.getElementById("{{ city5 }}"))
        document.getElementById("position_drag1_otree").value = position_drag1;
        document.getElementById("position_drag2_otree").value = position_drag2;
        document.getElementById("position_drag3_otree").value = position_drag3;
        document.getElementById("position_drag4_otree").value = position_drag4;
        document.getElementById("position_drag5_otree").value = position_drag5;

        position_help = getBoundingClientRect(document.getElementsByClassName('help-btn')[0])
        document.getElementById("position_help_otree").value = position_help;

      });

      // https://stackoverflow.com/questions/39417566/how-best-to-convert-a-clientrect-domrect-into-a-plain-object
      function getBoundingClientRect(element) {
        var rect = element.getBoundingClientRect();
        return String(rect.top) +" " + String(rect.right) +" " + String(rect.bottom) +" " + String(rect.left) +" " + String(rect.width) +" " + String(rect.height) +" "  + window.scrollX + " "+ window.scrollY

      }

    var img = document.getElementById('stimuli_image');
  //or however you get a handle to the IMG


      function dragMoveListener (event) {
        var target = event.target
        if(target.getAttribute('first_move') == 0){

        var startposition = interact.getElementRect(target)
        target.setAttribute('startposition_left', startposition.left)
        target.setAttribute('startposition_top', startposition.top)
        target.setAttribute('first_move', 1)
        }
        i = 1;
        // keep the dragged position in the data-x/data-y attributes
        var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
        var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
        // translate the element
        target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'

        // update the posiion attributes
        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)

      }

      // this function is used later in the resizing and gesture demos
      window.dragMoveListener = dragMoveListener


      /* The dragging code for '.draggable' from the demo above
 * applies to this demo as well so it doesn't have to be repeated. */
const array_resultfield_js = [];
const array_resultfield_js_all = [];

const array_cities_infield_js = [];
const array_cities_infield_js_all = [];

var count_0 = 0;

check_if_set_1 = [];
check_if_set_2 = [];
check_if_set_3 = [];
check_if_set_4 = [];
check_if_set_5 = [];

const array_fields_occupied= [];
var dropzone_colors = {1: '#f8b63f' ,2: '#dbb53a', 3: '#bdb337', 4: '#a2b235', 5: '#67b02d'}
var dropzone_colors = {1: '#ddcc77' ,2: '#88ccee', 3: '#50aa9a', 4: '#3b7834', 5: '#342688'}
var dropzone_colors = {1: '#e8f1f8' ,2: '#a3c9e4', 3: '#5ea0d0', 4: '#1977bc', 5: '#176ba9'}
var dropzone_colors = {1: '#edf8f2' ,2: '#b7e4c9', 3: '#82cfa1', 4: '#4cbb79', 5: '#3d9661'}
var dropzone_colors = {0: '#d5d2d2', 1: '#FDE725' ,2: '#9FDA3A', 3: '#4AC16D', 4: '#28A187', 5: '#277F8E'}


var draggable_colors = {1: '#f8b63f' ,2: '#dbb53a', 3: '#bdb337', 4: '#a2b235', 5: '#67b02d'}
var draggable_colors = {1: '#ddcc77' ,2: '#88ccee', 3: '#50aa9a', 4: '#7bb774', 5: '#9584fd'}
var draggable_colors = {0: '#d5d2d2',1: '#FDE725' ,2: '#9FDA3A', 3: '#4AC16D', 4: '#28A187', 5: '#277F8E'}


//var draggable_colors = {1: '#f8e43f' ,2: '#d9db3a', 3: '#a6bd37', 4: '#83b235', 5: '#46b02d'}

//var bg_colors = {0: '#f8b63f', 1: '#dbb53a', 2: '#bdb337', 3: '#a2b235', 4: '#83b230', 5: '#67b02d'}



// enable draggables to be dropped into this
interact('.dropzone').dropzone({

  checker: function (
  dragEvent,         // related dragmove or dragend
  event,             // Touch, Pointer or Mouse Event
  dropped,           // bool default checker result
  dropzone,          // dropzone Interactable
  dropzoneElement,   // dropzone element
  draggable,         // draggable Interactable
  draggableElement   // draggable element
) {

  // only allow drops into empty dropzone elements
  //return dropped && dropzoneElement.getAttribute('free')== 0;
  return dropped;
},
  // only accept elements matching this CSS selector
  accept:'.drag-drop',

  // Require a 75% element overlap for a drop to be possible
  overlap: 0.75,

  // listen for drop related events:

  ondropactivate: function (event) {
    // add active dropzone feedback
    if (!array_fields_occupied.includes(event.target))
    {
      event.target.classList.add('drop-active')
    }

  },

  ondragenter: function (event) {
    var draggableElement = event.relatedTarget
    var dropzoneElement = event.target
    // feedback the possibility of a drop
    if (!array_fields_occupied.includes(event.target))
    {
      dropzoneElement.classList.add('drop-target')

    draggableElement.classList.add('can-drop')
    document.getElementById(draggableElement.id).style.backgroundColor=draggable_colors[dropzoneElement.getAttribute('number')];

    var dropRect = interact.getElementRect(event.target)
    var draggable_position_now = interact.getElementRect(event.relatedTarget)

    var startposition_left = draggableElement.getAttribute('startposition_left')
    var startposition_top = draggableElement.getAttribute('startposition_top')

    var diifference_height = document.getElementById(dropzoneElement.id).offsetHeight- document.getElementById(draggableElement.id).offsetHeight
    var diifference_width = document.getElementById(dropzoneElement.id).offsetWidth- document.getElementById(draggableElement.id).offsetWidth


    dropCenter = {
        x: dropRect.left + dropRect.width  / 2,
        y: dropRect.top  + dropRect.height / 2,
        left_diff: dropRect.left - startposition_left + (diifference_width/2),
        top_diff:  dropRect.top - startposition_top + (diifference_height/2),
        x:draggableElement.getAttribute('data-x'),
        y: draggableElement.getAttribute('data-y'),
        diifference_width: diifference_width,
        diifference_height: diifference_height};

    if (event.target.getAttribute('number')!=0){

    draggableElement.setAttribute('data-x', dropCenter.left_diff)
    draggableElement.setAttribute('data-y', dropCenter.top_diff)
    }

  }
  },
  ondragleave: function (event) {
    event.relatedTarget.style.backgroundColor = null;
    event.relatedTarget.classList.remove('can-drop')

    if(event.target.getAttribute('number') == array_resultfield_js[array_cities_infield_js.indexOf(event.relatedTarget.id)]){
    //if(event.relatedTarget.id ==  array_cities_infield_js[array_resultfield_js.indexOf(event.target.getAttribute('number'))]){
    event.target.classList.remove('drop-target')

    if (event.target.getAttribute('number')!=0)
    {
      var element_index = array_fields_occupied.indexOf(event.target);
      array_fields_occupied.splice(element_index, 1);
    }
    else{
      count_0 = count_0 - 1;
    }
    if (count_0==3 & event.target.getAttribute('number')==0)
    {
      var element_index = array_fields_occupied.indexOf(event.target);
      array_fields_occupied.splice(element_index, 1);
    }

    //var element_index = array_resultfield_js.indexOf(event.target.getAttribute('number'));

    var element_index = array_cities_infield_js.indexOf(event.relatedTarget.id);
    array_cities_infield_js.splice(element_index, 1);
    array_resultfield_js.splice(element_index, 1);

    document.getElementById('array_resultfield').value = array_resultfield_js;
    document.getElementById('array_cities_infield').value = array_cities_infield_js;

    document.getElementById('array_resultfield_all').value = array_resultfield_js_all;
    document.getElementById('array_cities_infield_all').value = array_cities_infield_js_all;

    event.target.style.backgroundColor = null;

    if(event.relatedTarget.getAttribute('number') == 1){
      check_if_set_1.pop("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 2){
      check_if_set_2.pop("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 3){
      check_if_set_3.pop("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 4){
      check_if_set_4.pop("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 5){
      check_if_set_5.pop("is_rated")
    }

    document.getElementById('firstelement_check').value = check_if_set_1;
    document.getElementById('secondelement_check').value = check_if_set_2;
    document.getElementById('thirdelement_check').value = check_if_set_3;
    document.getElementById('fourthelement_check').value = check_if_set_4;
    document.getElementById('fifthelement_check').value = check_if_set_5;
    //array_resultfield.reverse()
    //  array_cities_infield.reverse()



    }
  },

  ondropdeactivate: function (event) {
    // remove active dropzone feedback
    event.target.classList.remove('drop-active')
    event.target.classList.remove('drop-target')

  },

  ondrop: function (event) {
    if (!array_fields_occupied.includes(event.target) & !array_cities_infield_js.includes(event.relatedTarget.id))
    {
    array_resultfield_js.push(event.target.getAttribute('number'))
    array_cities_infield_js.push(event.relatedTarget.id)
    array_resultfield_js_all.push(event.target.getAttribute('number'))
    array_cities_infield_js_all.push(event.relatedTarget.id)
    if (event.target.getAttribute('number')!=0)
    {
      array_fields_occupied.push(event.target)
    }
    else{
      count_0 = count_0 + 1;
    }
    if (count_0==4 & event.target.getAttribute('number')==0)
    {
      array_fields_occupied.push(event.target)
    }
    document.getElementById(event.target.id).style.backgroundColor=dropzone_colors[event.target.getAttribute('number')];
    event.target.classList.remove('drop-active')
    event.target.classList.remove('drop-target')
    document.getElementById('array_resultfield').value = array_resultfield_js;
    document.getElementById('array_cities_infield').value = array_cities_infield_js;
    document.getElementById('array_resultfield_all').value = array_resultfield_js_all;
    document.getElementById('array_cities_infield_all').value = array_cities_infield_js_all;
    if(event.relatedTarget.getAttribute('number') == 1){
      check_if_set_1.push("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 2){
      check_if_set_2.push("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 3){
      check_if_set_3.push("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 4){
      check_if_set_4.push("is_rated")
    }
    if(event.relatedTarget.getAttribute('number') == 5){
      check_if_set_5.push("is_rated")
    }

    document.getElementById('firstelement_check').value = check_if_set_1;
    document.getElementById('secondelement_check').value = check_if_set_2;
    document.getElementById('thirdelement_check').value = check_if_set_3;
    document.getElementById('fourthelement_check').value = check_if_set_4;
    document.getElementById('fifthelement_check').value = check_if_set_5;

  }

}
})

interact('.drag-drop')
  .draggable({
    inertia: true,
    modifiers: [
      // interact.modifiers.snap({
      //  targets: [
      //    { x: 0, y: 0 }
      //    ]
      //  }),
      interact.modifiers.restrictRect({
        //restriction: 'parent',
        endOnly: true
      })
    ],
    autoScroll: true,
    // dragMoveListener from the dragging demo above
    listeners: { move: dragMoveListener }
  })


    </script>



<input type="hidden" name="array_resultfield" id="array_resultfield">
<input type="hidden" name="array_cities_infield" id="array_cities_infield">
<input type="hidden" name="array_resultfield_all" id="array_resultfield_all">
<input type="hidden" name="array_cities_infield_all" id="array_cities_infield_all">

<input type="hidden" name="firstelement_check" id="firstelement_check" />
<input type="hidden" name="secondelement_check" id="secondelement_check" />
<input type="hidden" name="thirdelement_check" id="thirdelement_check" />
<input type="hidden" name="fourthelement_check" id="fourthelement_check" />
<input type="hidden" name="fifthelement_check" id="fifthelement_check" />


<input type="hidden" name="positionX_array" id="positionX_array" />
<input type="hidden" name="positionY_array" id="positionY_array" />
<input type="hidden" name="positionY_screen" id="positionY_screen" />
<input type="hidden" name="positionX_screen" id="positionX_screen" />
<input type="hidden" name="positionX_page" id="positionX_page" />
<input type="hidden" name="positionY_page" id="positionY_page" />
<input type="hidden" name="positionX_array_click" id="positionX_array_click" />
<input type="hidden" name="positionY_array_click" id="positionY_array_click" />
<input type="hidden" name="positionX_array_click_mousedown" id="positionX_array_click_mousedown" />
<input type="hidden" name="positionY_array_click_mousedown" id="positionY_array_click_mousedown" />
<input type="hidden" name="positionX_array_click_page" id="positionX_array_click_page" />
<input type="hidden" name="positionY_array_click_page" id="positionY_array_click_page" />
<input type="hidden" name="positionX_array_click_mousedown_page" id="positionX_array_click_mousedown_page" />
<input type="hidden" name="positionY_array_click_mousedown_page" id="positionY_array_click_mousedown_page" />

<input type="hidden" name="position_drop0_otree" id="position_drop0_otree" />
<input type="hidden" name="position_drop1_otree" id="position_drop1_otree" />
<input type="hidden" name="position_drop2_otree" id="position_drop2_otree" />
<input type="hidden" name="position_drop3_otree" id="position_drop3_otree" />
<input type="hidden" name="position_drop4_otree" id="position_drop4_otree" />
<input type="hidden" name="position_drop5_otree" id="position_drop5_otree" />

<input type="hidden" name="position_drag1_otree" id="position_drag1_otree" />
<input type="hidden" name="position_drag2_otree" id="position_drag2_otree" />
<input type="hidden" name="position_drag3_otree" id="position_drag3_otree" />
<input type="hidden" name="position_drag4_otree" id="position_drag4_otree" />
<input type="hidden" name="position_drag5_otree" id="position_drag5_otree" />

<input type="hidden" name="position_next_otree" id="position_next_otree" />
<input type="hidden" name="position_help_otree" id="position_help_otree" />

<input type="hidden" name="scrollX_array" id="scrollX_array" />
<input type="hidden" name="scrollY_array" id="scrollY_array" />



<input type="hidden" name="time_stamps" id="time_stamps" />
<input type="hidden" name="time_stamps_click" id="time_stamps_click" />
<input type="hidden" name="time_stamps_click_mousedown" id="time_stamps_click_mousedown" />
<input type="hidden" name="time_stamp_page_ready" id="time_stamp_page_ready" />
<input type="hidden" name="offset_timezone" id="offset_timezone" />



<input type="hidden" name="hidden_array" id="hidden_array" />


<input type="hidden" name="browser" id="browser" />
<input type="hidden" name="user_data" id="user_data" />
<input type="hidden" name="screen_width" id="screen_width" />
<input type="hidden" name="screen_height" id="screen_height" />
<input type="hidden" name="availWidth" id="availWidth" />
<input type="hidden" name="availHeight" id="availHeight" />
<input type="hidden" name="colorDepth" id="colorDepth" />
<input type="hidden" name="pixelDepth" id="pixelDepth" />

{{ formfield_errors 'time_stamp_page_ready' }}

{{ formfield_errors 'scrollX_array' }}
{{ formfield_errors 'scrollY_array' }}

{{ formfield_errors 'browser' }}
{{ formfield_errors 'user_data' }}
{{ formfield_errors 'screen_width' }}
{{ formfield_errors 'screen_height' }}
{{ formfield_errors 'availWidth' }}
{{ formfield_errors 'availHeight' }}
{{ formfield_errors 'colorDepth' }}
{{ formfield_errors 'pixelDepth' }}
{{ formfield_errors 'offset_timezone' }}



{{ formfield_errors 'array_resultfield' }}
{{ formfield_errors 'array_cities_infield' }}

{{ formfield_errors 'positionX_array' }}
{{ formfield_errors 'positionY_array' }}

{{ formfield_errors 'positionX_screen' }}
{{ formfield_errors 'positionY_screen' }}

{{ formfield_errors 'positionX_page' }}
{{ formfield_errors 'positionY_page' }}

{{ formfield_errors 'positionX_array_click' }}
{{ formfield_errors 'positionY_array_click' }}

{{ formfield_errors 'time_stamps' }}

{{ formfield_errors 'hidden_array' }}

{{ formfield_errors 'position_drop0_otree' }}
{{ formfield_errors 'position_drop1_otree' }}
{{ formfield_errors 'position_drop2_otree' }}
{{ formfield_errors 'position_drop3_otree' }}
{{ formfield_errors 'position_drop4_otree' }}
{{ formfield_errors 'position_drop5_otree' }}

{{ formfield_errors 'position_drag1_otree' }}
{{ formfield_errors 'position_drag2_otree' }}
{{ formfield_errors 'position_drag3_otree' }}
{{ formfield_errors 'position_drag4_otree' }}
{{ formfield_errors 'position_drag5_otree' }}

{{ formfield_errors 'position_next_otree' }}
{{ formfield_errors 'position_help_otree' }}

{{ formfield_errors 'array_cities_infield_all' }}
{{ formfield_errors 'array_resultfield_all' }}

{{ formfield_errors 'firstelement_check' }}
{{ formfield_errors 'secondelement_check' }}
{{ formfield_errors 'thirdelement_check' }}
{{ formfield_errors 'fourthelement_check' }}
{{ formfield_errors 'fifthelement_check' }}


<script>
var positionVar = 0;
const array_positionX = [];
const array_positionY = [];
const array_positionX_screen = [];
const array_positionY_screen = [];
const array_positionX_page= [];
const array_positionY_page= [];
const array_timestamps = [];
const array_hidden = [];
const array_timestamps_clicks = [];
const array_positionX_clicks = [];
const array_positionY_clicks = [];
const array_positionX_clicks_page = [];
const array_positionY_clicks_page = [];
const array_timestamps_clicks_mousedown = [];
const array_positionX_clicks_mousedown = [];
const array_positionY_clicks_mousedown = [];
const array_positionX_clicks_mousedown_page = [];
const array_positionY_clicks_mousedown_page = [];
const array_scrollX = [];
const array_scrollY = [];

function actualposition(positionVar) {
  positionVar = event.clientX+':'+event.clientY;
  positionVarScreen = event.screenX+':'+event.screenY;
  hidden = document.hidden
  array_positionX.push(event.clientX);
  array_positionY.push(event.clientY);
  array_positionX_screen.push(event.screenX);
  array_positionY_screen.push(event.screenY);
  array_positionX_page.push(event.pageX);
  array_positionY_page.push(event.pageY);
  array_scrollX.push(window.scrollX)
  array_scrollY.push(window.scrollY)

  array_hidden.push(hidden);
  array_timestamps.push(Date.now());
  document.getElementById("positionX_array").value = array_positionX;
  document.getElementById("positionY_array").value = array_positionY;
  document.getElementById("positionX_screen").value = array_positionX_screen;
  document.getElementById("positionY_screen").value = array_positionY_screen;
  document.getElementById("positionX_page").value = array_positionX_page;
  document.getElementById("positionY_page").value = array_positionY_page;
  document.getElementById("time_stamps").value = array_timestamps;
  document.getElementById("hidden_array").value = array_hidden;
  document.getElementById("scrollX_array").value = array_scrollX;
  document.getElementById("scrollY_array").value = array_scrollY;


}

document.addEventListener("click", function(e) {
  array_timestamps_clicks.push(Date.now());
  array_positionX_clicks.push(event.clientX);
  array_positionY_clicks.push(event.clientY);
  array_positionX_clicks_page.push(event.pageX);
  array_positionY_clicks_page.push(event.pageY);
  document.getElementById("time_stamps_click").value = array_timestamps_clicks;
  document.getElementById("positionX_array_click").value = array_positionX_clicks;
  document.getElementById("positionY_array_click").value = array_positionY_clicks;
  document.getElementById("positionX_array_click_page").value = array_positionX_clicks_page;
  document.getElementById("positionY_array_click_page").value = array_positionY_clicks_page;
});

document.addEventListener("mousedown", function(e) {
  array_timestamps_clicks_mousedown.push(Date.now());
  array_positionX_clicks_mousedown.push(event.clientX);
  array_positionY_clicks_mousedown.push(event.clientY);
  array_positionX_clicks_mousedown_page.push(event.pageX);
  array_positionY_clicks_mousedown_page.push(event.pageY);
  document.getElementById("time_stamps_click_mousedown").value = array_timestamps_clicks_mousedown;
  document.getElementById("positionX_array_click_mousedown").value = array_positionX_clicks_mousedown;
  document.getElementById("positionY_array_click_mousedown").value = array_positionY_clicks_mousedown;
  document.getElementById("positionX_array_click_mousedown_page").value = array_positionX_clicks_mousedown_page;
  document.getElementById("positionY_array_click_mousedown_page").value = array_positionY_clicks_mousedown_page;



});


function meta_data_static(){
  // Opera 8.0+
  var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

  // Firefox 1.0+
  var isFirefox = typeof InstallTrigger !== 'undefined';

  // Safari 3.0+ "[object HTMLElementConstructor]"
  var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

  // Internet Explorer 6-11
  var isIE = /*@cc_on!@*/false || !!document.documentMode;

  // Edge 20+
  var isEdge = !isIE && !!window.StyleMedia;

  // Chrome 1 - 79
  var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

  // Edge (based on chromium) detection
  var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

  // Blink engine detection
  var isBlink = (isChrome || isOpera) && !!window.CSS;


  var output = 'Detecting browsers by ducktyping:<hr>';
  output += 'isFirefox: ' + isFirefox + '<br>';
  output += 'isChrome: ' + isChrome + '<br>';
  output += 'isSafari: ' + isSafari + '<br>';
  output += 'isOpera: ' + isOpera + '<br>';
  output += 'isIE: ' + isIE + '<br>';
  output += 'isEdge: ' + isEdge + '<br>';
  output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
  output += 'isBlink: ' + isBlink + '<br>';
  //document.body.innerHTML = output;

  //navigator.userAgent

  document.getElementById("browser").value = output;
  document.getElementById("user_data").value = navigator.userAgent;
  document.getElementById("screen_width").value = screen.width;
  document.getElementById("screen_height").value = screen.height;;
  document.getElementById("availWidth").value = screen.availWidth;;
  document.getElementById("availHeight").value = screen.availHeight;;
  document.getElementById("colorDepth").value = screen.colorDepth;;
  document.getElementById("pixelDepth").value = screen.pixelDepth;;

}
</script>



  <script>
    setTimeout(
        function () {
            document.getElementsByClassName('otree-btn-next')[0].style.display= 'inline';
            position_next = getBoundingClientRect(document.getElementsByClassName('otree-btn-next')[0])
            document.getElementById("position_next_otree").value = position_next;

        },
        2*1000 // 60 seconds
    );
</script>

{{ next_button }}


{{ endblock }}