{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Task 3
{% endblock %}

{% block content %}

<script src="DragDropTouch.js"></script>
<script>

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  var stat0 = document.getElementById('stationary0').innerHTML;
  var stat1 = document.getElementById('stationary1').innerHTML;
  var stat2 = document.getElementById('stationary2').innerHTML;
  var stat3 = document.getElementById('stationary3').innerHTML;
  var stat4 = document.getElementById('stationary4').innerHTML;
  var stat5 = document.getElementById('stationary5').innerHTML;
  
  var user_choice=999
  if (stat0!="") {
    user_choice = 0
  }  
  if (stat1!="") {
    user_choice = 0.2
  }
  if (stat2!="") {
    user_choice = 0.4
  }
  if (stat3!="") {
    user_choice = 0.6
  }
  if (stat4!="") {
    user_choice = 0.8
  }
  if (stat5!="") {
    user_choice = 1
  }
  document.querySelector('[name=task3]').value = user_choice;

}

</script>



<style>
.stationary{
  width: 30%;
  margin: auto;
  padding: 5px;
  border: 1px solid black;
  background-color: Gainsboro;

}

.empty{
  width: 30%;
  height: 55px;
  margin: auto;
  padding: 5px;
  border: 1px solid black;
  background-color: #ccffcc;
  
}

</style>


Please rank the payoff <b>A random die roll is 6</b> according to the following payoffs by dragging it to a green box. <br> <br> 


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div draggable="true" ondragstart="drag(event)" id="d31">
      <b>A random diee roll is 6</b>
  </div>
</div>

<div>
    <div class="empty" id="stationary0" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="stationary" ondrop="drop(event)" ondragover="allowDrop(event)">100% chance of winning $10</div>
    <div class="empty" id="stationary1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="stationary">95% chance of winning $10</div>
    <div class="empty" id="stationary2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="stationary">90% chance of winning $10</div>
    <div class="empty" id="stationary3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="stationary">85% chance of winning $10</div>
    <div class="empty" id="stationary4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="stationary">80% chance of winning $10</div>
    <div class="empty" id="stationary5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>


{{ form.task3.errors }}
<input type="hidden" name="task3" />


{% next_button %}
{% endblock %}