{{ block title }}
Instructions phase two: Team and final decision
{{ endblock }}

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

<style>
  .chartBox{
    width: 600px;
  }

  .canvas-container {
    display: flex;
    width: 100%;
  }

  .cv {
    width: 100%;
    height: 100%;
  }

    .dropzone {
      top:70%;
      left:45%;
      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;
      font-family: Arial, sans-serif;
    }


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

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

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

    .drag-drop {
      position: absolute;
      top:70%;
      left:45%;
      font-size: x-small;
      display: inline-block;
      vertical-align:top;
      border-radius: 50%;
      border:2px solid #373737;
      margin: 10px auto 30px;
      padding: 5px;
      height: 50px;
      width: 50px;
      color: #373737;
      background-color: #373737;
      touch-action: none;
      transform: translate(0px, 0px);
      transition: background-color 0.3s;
      z-index: 2;

    }

    .transparent {
      position: absolute;
      top:70%;
      left:45%;
      opacity: 0;
      z-index: -2;

    }

    .wrong_color {
      background-color: #88ccee;
    }

    .correct_color {
      background-color: #ddcc77;
    }

    .noncolor {
      background-color: white;
    }

    .inline-flex-parent {
      display: inline-flex;
      position: absolute;
      top:2%;
      left:22%;
    }

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

    .occupied{
      background-color: #2572B1;
    }


    .rectangle{
      position: relative;
      top:90%;
      left:15%;
      height: 480px;
      width: 700px;
      border: solid 1px #485a5e;

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

       }





</style>


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

  <p>In the second step of the decision process, you will see all the answers your teammates have given. In this instruction round, you see computer generated results. In the following experiment, those results will be replaced by the
    rating of your teammates.</p>

  <p>In the left chart, you see the rating your teammates gave when confronted with the image. Remember: The number corresponds to the certainty of the player that the location is correct.</p>

  <p>In the right chart you see the current team decision.</p>
  The team decision is based on plurality voting, which means that
  the highest-rated city of every player gets one vote. The city with the most votes counts as the team decision. In case of a tie, for example, if two cities receive two votes each, an algorithm will select one of the options randomly when every teammate has submitted an answer.
  </p>

    <p>This is what your teammates think:</p>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

    <div class="canvas-container">
    <div class="chartBox" style="width: 50%">
    <canvas id="team_chart_all_in_one" ></canvas>
    </div>

    <div class="chartBox" style="width: 50%">
    <canvas id="team_chart_final" ></canvas>
    </div>

    </div>




    <script>
      document.addEventListener('visibilitychange', function(e) {
    console.log(document.hidden);
});



    </script>


    <p style="margin-left:2.5em"></p>

    <p>
    In the last step, you will be asked to make your final decision. Drag the black circle to the city you think is the correct solution after having seen what your
   teammates think. Note that the final team result changes in accordance with the final answer you are giving. After you have placed the circle on the city of your choice,
    click on the <i>Next</i> button to get to the next page. </p>
    <p>What is your final decision? </p>


    <div class="rectangle" id="rectangle">
      <div class='inline-flex-parent '>
      <div id= "{{ city1 }}" class="dropzone" number = 1> {{ city1 }} </div>
      <div id="{{ city2 }}" class="dropzone" number = 2> {{ city2 }} </div>
      <div id="{{ city3 }}" class="dropzone" number =3> {{ city3 }}  </div>
      <div id="{{ city4 }}" class="dropzone" number = 4> {{ city4 }}  </div>
      <div id="{{ city5 }}" class="dropzone" number = 5> {{ city5 }}  </div>
      </div>
      <div id="1" class="drag-drop" first_move= 0> </div>
    </div>

    <br>
    <br>


     <input type="hidden" name="positionX_array_after" id="positionX_array_after" />
     <input type="hidden" name="positionY_array_after" id="positionY_array_after" />
     <input type="hidden" name="time_stamps_after" id="time_stamps_after" />

     <input type="hidden" name="array_resultfield_for_python_2" id="array_resultfield_for_python_2">
     <input type="hidden" name="array_resultfield_for_python_all_2" id="array_resultfield_for_python_all_2">



    {{ formfield_errors 'array_resultfield_for_python_2' }}
   {{ formfield_errors 'array_resultfield_for_python_all_2' }}

   {{ formfield_errors 'positionX_array_after' }}
   {{ formfield_errors 'positionY_array_after' }}
   {{ formfield_errors 'time_stamps_after' }}

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

    <script>

  const ctxteam_final = document.getElementById('team_chart_final').getContext('2d');

  var yLabels = {
  0: '0',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5'}

  const team_chart_final = new Chart(ctxteam_final, {
      type: 'bar',
      data: {
          labels: {{ parsed_array_cities_infield }},
          datasets: [
          {
              label: 'Player1',
              data: [0,0,0,0,1],
              backgroundColor: 'rgba(87, 180, 232,0.5)',
              borderColor: '#57B4E8',
              borderWidth: 1
          },
          {
              label: 'Player2',
              data: [0,0,0,0,1],
              backgroundColor: 'rgba(78, 159, 116,0.5)',
              borderColor: '#4E9F74',
              borderWidth: 1
          },
          {
              label: 'Player3',
              data:[0,0,0,0,1],
              backgroundColor: 'rgba(240, 227, 66,0.5)',
              borderColor: '#F0E342',
              borderWidth: 1
          },
          {
              label: 'Player4',
              data: [0,1,0,0,0],
              backgroundColor: 'rgba(229, 160, 48,0.5)',
              borderColor: '#E5A030',
              borderWidth: 1
          },
          {
              label: 'Your Result',
              data: {{ for_team_chart_player0 }},
              backgroundColor: 'rgba(37, 114, 177,0.5)',
              borderColor: '#2572B1',
              borderWidth: 1
          },]
      },
      options: {
        tooltips: {
         enabled: false
       },
          legend: {
              display: true
          },
          scales: {
            xAxes: [{
              ticks: {
                autoSkip: false,
                maxRotation: 0,
                minRotation: 0,
                stacked: true
                    }
                  }],
            yAxes: [{
                  stacked: true,
                  ticks: {
                      beginAtZero: true,
                      steps: 6,
                      stepValue: 1,
                      max: 5,
                      callback: function(value, index, values) {
                          return yLabels[value];
                      }
                  },
                  gridLines: {
                            color: "rgba(0, 0, 0, 0)",
                          },
                  scaleLabel:{
                          display: true,
                          labelString: 'Number of votes in total',
                      }
              }]
          },
          title: {
              display: true,
              text: 'Current Team Decision'
          }
      }
  });

  const ctxteam_all_in_one = document.getElementById('team_chart_all_in_one').getContext('2d');

  var yLabels = {
  0: '0',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5'}

  const team_chart_all_in_one = new Chart(ctxteam_all_in_one, {
      type: 'bar',
      data: {
          labels: {{ parsed_array_cities_infield }},
          datasets: [
          {
              label: 'Player1',
              data: [0,1,2,0,5],
              backgroundColor: 'rgba(87, 180, 232,0.5)',
              borderColor: '#57B4E8',
              borderWidth: 1
          },
          {
              label: 'Player2',
              data: [0,1,0,0,4],
              backgroundColor: 'rgba(78, 159, 116,0.5)',
              borderColor: '#4E9F74',
              borderWidth: 1
          },
          {
              label: 'Player3',
              data: [0,1,0,0,4],
              backgroundColor: 'rgba(240, 227, 66,0.5)',
              borderColor: '#F0E342',
              borderWidth: 1
          },
          {
              label: 'Player4',
              data: [0,1,0,0,0],
              backgroundColor: 'rgba(229, 160, 48,0.5)',
              borderColor: '#E5A030',
              borderWidth: 1
          },
          {
              label: 'Your Result',
              data: {{ parsed_array_resultfield }},
              backgroundColor: 'rgba(37, 114, 177,0.5)',
              borderColor: '#2572B1',
              borderWidth: 1
          },]
      },
      options: {
          legend: {
              display: true
          },
          scales: {
            xAxes: [{
              ticks: {
                autoSkip: false,
                maxRotation: 0,
                minRotation: 0,
                    }
                  }],
            yAxes: [{
              scaleLabel:{
                      display: true,
                      labelString: 'Certainty-rating by team members',
                  },
              gridLines: {
                color: "rgba(0, 0, 0, 0)",
                          },
                  ticks: {
                      beginAtZero: true,
                      steps: 6,
                      stepValue: 1,
                      max: 5,
                      callback: function(value, index, values) {
                          return yLabels[value];
                      }
                  }
              }]
          },
          title: {
              display: true,
              text: 'Ratings given by your Teammembers'

          }
      }
  });

  function updateBarGraph_team(chart, data) {
  chart.data.datasets.pop();
  chart.data.datasets.push({
      data: data,
      label: 'Your Result',
      backgroundColor: 'rgba(37, 114, 177,0.5)',
      borderColor: 'rgba(37, 114, 177,1)',
      borderWidth: 1
  });
  chart.update();
}



  </script>

    <script>
      function reset_decisions() {
        var target = document.getElementById('1');
        target.style.webkitTransform =
        target.style.transform = 'translate(0px, 0px)';
        target.setAttribute('data-x', 0);
        target.setAttribute('data-y', 0);
      }

      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



    const array_resultfield_for_python = [];
    const array_resultfield_for_python_all = [];
    const array_fields_occupied= [];

//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) {
    // feedback the possibility of a drop
    if (!array_fields_occupied.includes(event.target))
    {
      event.target.classList.add('drop-target')
    }


  },


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

  },

  ondragleave: function (event) {
    // remove the drop feedback style
    event.target.classList.remove('occupied')
    array_resultfield_for_python.pop(event.target.id)
    document.getElementById('array_resultfield_for_python_2').value = array_resultfield_for_python;
    console.log(array_resultfield_for_python)



  },
  ondrop: function (event) {
    event.target.classList.add('occupied')
    array_resultfield_for_python.push(event.target.id)
    array_resultfield_for_python_all.push(event.target.id)
    document.getElementById('array_resultfield_for_python_2').value = array_resultfield_for_python;
    document.getElementById('array_resultfield_for_python_all_2').value = array_resultfield_for_python_all;
    updatedDataSet = decision_to_final_chart(array_resultfield_for_python, {{ parsed_array_cities_infield }})
    updatedDataSet_team = decision_to_final_chart_team(array_resultfield_for_python, {{ parsed_array_cities_infield }})
    updateBarGraph_team(team_chart_final,updatedDataSet_team)
    console.log(array_resultfield_for_python)


}

})

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 }
  })


    var positionVar = 0;
    const array_positionX = [];
    const array_positionY = [];
    const array_timestamps = [];


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

    }

    function decision_to_final_chart(city, order_of_lables){
      updatedDataSet = [0,0,0,0,0];
      var city_lab_name = city[0].split("(");
      corrected_countryname = "("
      corrected_countryname += city_lab_name[1];
      city_lab_name[1] = corrected_countryname
      for (x in order_of_lables){
        if (JSON.stringify(order_of_lables[x])==JSON.stringify(city_lab_name))
        {
          updatedDataSet[x]= 5
        }
      }
      return updatedDataSet


    }

    function decision_to_final_chart_team(city, order_of_lables){
      updatedDataSet_team = [0,0,0,0,0];
      var city_lab_name = city[0].split("(");
      corrected_countryname = "("
      corrected_countryname += city_lab_name[1];
      city_lab_name[1] = corrected_countryname
      for (x in order_of_lables){
        if (JSON.stringify(order_of_lables[x])==JSON.stringify(city_lab_name))
        {
          updatedDataSet_team[x]= 1
        }
      }
      return updatedDataSet_team


    }

    </script>




    {{ next_button }}
{{ endblock }}