{{ block title }}
Reading example charts
{{ 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 see all the answers your teammates have given. In this instruction page, you see computer generated results. In the experiment, those results will be replaced by the rating of your teammates.</p>

  <b>Left chart:</b><br>
  <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. <br>
  In the chart displayed here, the fact that you can't see any bars at the section of Dublin means, that all players have dragged the draggable box labeled "Dublin" to the grey field labeled "Incorrect geolocations (0)".<br>
  The bars you see at the section of Hong Kong, which do all display a value of 1 mean that all players have dragged the draggable box labeled "Hong Kong" to the field labeled with the value 1 in the "Correct geolocations" dropzone. This
  reflects that all team members think Hong Kong might be the correct geolocation, but the certainty is rather low. <br>
  Towson gets the highest ratings. Players 1, 2, and 3 think this is most likely the correct geolocation.<br>
  Your results are always displayed in dark blue during the complete experiment. In the chart displayed here, the current experiment participant would have rated Dublin, Rome, Shelburne and Towson as incorrect geolocations and Hong Kong as correct with low certainty (value of 1).
</p>

  <b>Right chart:</b><br>
  <p>In the right chart you see the current team decision.<br>
  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 2 votes each, an algorithm will select one of the options randomly when every teammate has submitted an answer.
  In the chart you see here, players 1, 2, and, 3 have given the highest rating to Towson, which is why it gets 3 votes.<br>
  The current experiment participant as well as player 4 have given their highest rating to Hong Kong, which is why it gets 2 votes.<br>
  As Towson gets the majority of all votes, it would count as the team decision in this case.
  </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>



    <br>
    <br>


    <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: [0,1,0,0,0],
              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: [0,1,0,0,0],
              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 }}