{{ block title }}
Team and final decision
{{ endblock }}

{{ block content }}
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<a href="/static/help_image_phase2.png" target="popup" class="help-btn"> <img alt="help" src="/static/help_button_image.png" width="30px" height="30px"> </a>
<a href="/static/Instruction_page_charts.png" target="popup" class="help-btn2"> Reading example chart </a>

<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:78%;
      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:7%;
    }

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

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

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

    .help-btn2{
      position: absolute;
      float:right;
      top: 1103px;
      left: calc((100vw - 1100px)/2 + 125px);
      background-color: #e7e7e7; /* grey */
      background-color: #e7e7e7; /* Green */
      border: none;
      color: black;
      padding: 7px 7px;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
    }




    .rectangle{
      position: relative;
      top:90%;
      left:25%;
      height: 380px;
      width: 600px;
      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 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.
  The team decision is based on plurality voting, which means that
  the best-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 their answer.</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>

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



    </script>


    <p style="margin-left:2.5em"></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="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">


     <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="positionY_screen_after" id="positionY_screen_after" />
     <input type="hidden" name="positionX_screen_after" id="positionX_screen_after" />
     <input type="hidden" name="positionX_page_after" id="positionX_page_after" />
     <input type="hidden" name="positionY_page_after" id="positionY_page_after" />
     <input type="hidden" name="positionX_array_click_after" id="positionX_array_click_after" />
     <input type="hidden" name="positionY_array_click_after" id="positionY_array_click_after" />
     <input type="hidden" name="positionX_array_click_mousedown_after" id="positionX_array_click_mousedown_after" />
     <input type="hidden" name="positionY_array_click_mousedown_after" id="positionY_array_click_mousedown_after" />

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

     <input type="hidden" name="position_drop1_otree_after" id="position_drop1_otree_after" />
     <input type="hidden" name="position_drop2_otree_after" id="position_drop2_otree_after" />
     <input type="hidden" name="position_drop3_otree_after" id="position_drop3_otree_after" />
     <input type="hidden" name="position_drop4_otree_after" id="position_drop4_otree_after" />
     <input type="hidden" name="position_drop5_otree_after" id="position_drop5_otree_after" />
     <input type="hidden" name="position_position_draggable_otree_after" id="position_position_draggable_otree_after" />

     <input type="hidden" name="position_next_otree_after" id="position_next_otree_after" />
     <input type="hidden" name="position_help1_otree_after" id="position_help1_otree_after" />
     <input type="hidden" name="position_help2_otree_after" id="position_help2_otree_after" />

     <input type="hidden" name="time_stamps_after" id="time_stamps_after" />
     <input type="hidden" name="time_stamps_click_after" id="time_stamps_click_after" />
     <input type="hidden" name="time_stamps_click_mousedown_after" id="time_stamps_click_mousedown_after" />

     <input type="hidden" name="hidden_array_after" id="hidden_array_after" />
     <input type="hidden" name="scrollX_array_after" id="scrollX_array_after" />
     <input type="hidden" name="scrollY_array_after" id="scrollY_array_after" />


     <input type="hidden" name="browser_after" id="browser_after" />
     <input type="hidden" name="user_data_after" id="user_data_after" />
     <input type="hidden" name="screen_width_after" id="screen_width_after" />
     <input type="hidden" name="screen_height_after" id="screen_height_after" />
     <input type="hidden" name="availWidth_after" id="availWidth_after" />
     <input type="hidden" name="availHeight_after" id="availHeight_after" />
     <input type="hidden" name="colorDepth_after" id="colorDepth_after" />
     <input type="hidden" name="pixelDepth_after" id="pixelDepth_after" />

     <input type="hidden" name="positionX_array_click_mousedown_page_after" id="positionX_array_click_mousedown_page_after" />
     <input type="hidden" name="positionY_array_click_mousedown_page_after" id="positionY_array_click_mousedown_page_after" />
     <input type="hidden" name="positionX_array_click_page_after" id="positionX_array_click_page_after" />
     <input type="hidden" name="positionY_array_click_page_after" id="positionY_array_click_page_after" />



     {{ formfield_errors 'positionX_array_click_mousedown_page_after' }}
     {{ formfield_errors 'positionY_array_click_mousedown_page_after' }}
     {{ formfield_errors 'positionX_array_click_page_after' }}
     {{ formfield_errors 'positionY_array_click_page_after' }}



  {{ formfield_errors 'time_stamp_page_ready_after' }}
  {{ 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 'positionX_screen_after' }}
   {{ formfield_errors 'positionY_screen_after' }}
   {{ formfield_errors 'positionX_page_after' }}
   {{ formfield_errors 'positionY_page_after' }}
   {{ formfield_errors 'time_stamps_after' }}

   {{ formfield_errors "browser_after" }}

   {{ formfield_errors 'position_drop1_otree_after' }}
   {{ formfield_errors 'position_drop2_otree_after' }}
   {{ formfield_errors 'position_drop3_otree_after' }}
   {{ formfield_errors 'position_drop4_otree_after' }}
   {{ formfield_errors 'position_drop5_otree_after' }}
   {{ formfield_errors 'position_position_draggable_otree_after' }}
   {{ formfield_errors 'position_next_otree_after' }}
   {{ formfield_errors 'position_help1_otree_after' }}
   {{ formfield_errors 'position_help2_otree_after' }}

   {{ formfield_errors 'scrollX_array_after' }}
   {{ formfield_errors 'scrollY_array_after' }}

    <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_after").value = timestamp_page_loaded;

        position_drop1 = getBoundingClientRect(document.getElementById("{{ city1 }}"))
        position_drop2 = getBoundingClientRect(document.getElementById("{{ city2 }}"))
        position_drop3 = getBoundingClientRect(document.getElementById("{{ city3 }}"))
        position_drop4 = getBoundingClientRect(document.getElementById("{{ city4 }}"))
        position_drop5 = getBoundingClientRect(document.getElementById("{{ city5 }}"))
        position_draggable = getBoundingClientRect(document.getElementById("1"))

        document.getElementById("position_drop1_otree_after").value = position_drop1;
        document.getElementById("position_drop2_otree_after").value = position_drop2;
        document.getElementById("position_drop3_otree_after").value = position_drop3;
        document.getElementById("position_drop4_otree_after").value = position_drop4;
        document.getElementById("position_drop5_otree_after").value = position_drop5;
        document.getElementById("position_position_draggable_otree_after").value = position_draggable;

        position_next = getBoundingClientRect(document.getElementsByClassName('otree-btn-next')[0])
        position_help1 = getBoundingClientRect(document.getElementsByClassName('help-btn')[0])
        position_help2 = getBoundingClientRect(document.getElementsByClassName('help-btn2')[0])

        document.getElementById("position_next_otree_after").value = position_next;
        document.getElementById("position_help1_otree_after").value = position_help1;
        document.getElementById("position_help2_otree_after").value = position_help2;


      });

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

      }


  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: {{ for_team_chart_player1 }},
              backgroundColor: 'rgba(87, 180, 232,0.5)',
              borderColor: '#57B4E8',
              borderWidth: 1
          },
          {
              label: 'Player2',
              data: {{ for_team_chart_player2 }},
              backgroundColor: 'rgba(78, 159, 116,0.5)',
              borderColor: '#4E9F74',
              borderWidth: 1
          },
          {
              label: 'Player3',
              data: {{ for_team_chart_player3 }},
              backgroundColor: 'rgba(240, 227, 66,0.5)',
              borderColor: '#F0E342',
              borderWidth: 1
          },
          {
              label: 'Player4',
              data: {{ for_team_chart_player4 }},
              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: {{ parsed_array_resultfield1 }},
              backgroundColor: 'rgba(87, 180, 232,0.5)',
              borderColor: '#57B4E8',
              borderWidth: 1
          },
          {
              label: 'Player2',
              data: {{ parsed_array_resultfield2 }},
              backgroundColor: 'rgba(78, 159, 116,0.5)',
              borderColor: '#4E9F74',
              borderWidth: 1
          },
          {
              label: 'Player3',
              data: {{ parsed_array_resultfield3 }},
              backgroundColor: 'rgba(240, 227, 66,0.5)',
              borderColor: '#F0E342',
              borderWidth: 1
          },
          {
              label: 'Player4',
              data: {{ parsed_array_resultfield4 }},
              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;



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


}

})

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


    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>



    <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_timestamps_clicks_mousedown = [];
    const array_positionX_clicks_mousedown = [];
    const array_positionY_clicks_mousedown = [];
    const array_scrollX = [];
    const array_scrollY = [];
    const array_positionX_clicks_page = [];
    const array_positionY_clicks_page = [];
    const array_positionX_clicks_mousedown_page = [];
    const array_positionY_clicks_mousedown_page = [];

    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_after").value = array_positionX;
      document.getElementById("positionY_array_after").value = array_positionY;
      document.getElementById("positionX_screen_after").value = array_positionX_screen;
      document.getElementById("positionY_screen_after").value = array_positionY_screen;
      document.getElementById("positionX_page_after").value = array_positionX_page;
      document.getElementById("positionY_page_after").value = array_positionY_page;
      document.getElementById("time_stamps_after").value = array_timestamps;
      document.getElementById("hidden_array_after").value = array_hidden;
      document.getElementById("scrollX_array_after").value = array_scrollX;
      document.getElementById("scrollY_array_after").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_after").value = array_timestamps_clicks;
      document.getElementById("positionX_array_click_after").value = array_positionX_clicks;
      document.getElementById("positionY_array_click_after").value = array_positionY_clicks;
      document.getElementById("positionX_array_click_page_after").value = array_positionX_clicks_page;
      document.getElementById("positionY_array_click_page_after").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_after").value = array_timestamps_clicks_mousedown;
      document.getElementById("positionX_array_click_mousedown_after").value = array_positionX_clicks_mousedown;
      document.getElementById("positionY_array_click_mousedown_after").value = array_positionY_clicks_mousedown;
      document.getElementById("positionX_array_click_mousedown_page_after").value = array_positionX_clicks_mousedown_page;
      document.getElementById("positionY_array_click_mousedown_page_after").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_after").value = output;
      document.getElementById("user_data_after").value = navigator.userAgent;
      document.getElementById("screen_width_after").value = screen.width;
      document.getElementById("screen_height_after").value = screen.height;;
      document.getElementById("availWidth_after").value = screen.availWidth;;
      document.getElementById("availHeight_after").value = screen.availHeight;;
      document.getElementById("colorDepth_after").value = screen.colorDepth;;
      document.getElementById("pixelDepth_after").value = screen.pixelDepth;;

    }
    </script>

    {{ next_button }}
{{ endblock }}