{{ block title }}
Instructions phase one: Where has this image been taken?
{{ endblock }}
{{ block content }}

<div id="alles" onmousemove="actualposition()" style="width: 100%; height:100%">

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

  <style>


  .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: 1180px;
    left: calc((100vw - 1100px)/2);
  }



  .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>In the following experiment you will be grouped in a team with four players. Your team members will be the four players who participated in the experiment just before you. </p>

 <p>In the first stage of each round, you will see an image and five possible geolocations (name of city and associated country) of which <b>one</b> is the correct answer. You are asked to
 rate the cities in terms of how likely you think the image shown was taken at this location. Your answers will help your teammates to find the correct solution and count for the team decision! </p>
 <p> If you are sure that a geolocation is incorrect, you should drag the corresponding element to the grey field labeled "Incorrect geolocations (0)". If you think a geolocation might be correct, you should drag the draggable element
 to one of the fields labeled "Correct geolocations". This field is separated into 5 different areas, which are consecutively numbered. If you are rather uncertain that a city on a draggable text box is the correct location, you should drag it to a field
 with a low number. If you are completely sure that a location is the correct one, drag it to the field with the highest number. This way you can inform your teammates that you are highly certain to have found the correct location at which the image was taken. </p>
 <p>The city you rate the highest counts as your vote for the team decision.</p>
  <p>You will need to drag all geolocation draggables to a corresponding dropzone and you will need to drag at least one geolocation to the "Correct geolocations" dropzone to get to the next phase.</p>
  <p> You can now play around with the user interface to get familiar with the task. When you have finished the rating, you can click on the <i>Next</i> button.</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>
<br>
<br>
<br>







    <script type="module">
    import interact from
    'https://cdn.interactjs.io/v1.10.11/interactjs/index.js'
    </script>

    <script>

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


      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) {
    console.log(array_cities_infield_js)
    console.log(array_resultfield_js)
    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="positionX_array" id="positionX_array" />
<input type="hidden" name="positionY_array" id="positionY_array" />
<input type="hidden" name="time_stamps" id="time_stamps" />

<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" />



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

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

{{ 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_timestamps = [];


function actualposition(positionVar) {
  positionVar = event.clientX+':'+event.clientY;
  array_positionX.push(event.clientX);
  array_positionY.push(event.clientY);
  array_timestamps.push(Date.now());
  document.getElementById("positionX_array").value = array_positionX;
  document.getElementById("positionY_array").value = array_positionY;
  document.getElementById("time_stamps").value = array_timestamps;

}
</script>



  <script>
    setTimeout(
        function () {
            document.getElementsByClassName('otree-btn-next')[0].style.display= 'inline';
        },
        2*1000 // 60 seconds
    );
</script>

{{ next_button }}


{{ endblock }}