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

{% block title %}
    Task 4
{% endblock %}

{% block content %}

<script src="{% static 'DragDropTouch.js' %}" ></script>
<script>

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

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

function drop(ev) {
    if (ev.target.innerText == "") {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
      task4_roll1234 = parseFloat(document.getElementById("task4_roll1234").parentNode.id);
      document.querySelector('[name=task4_roll1234]').value = task4_roll1234;
      task4_roll56 = parseFloat(document.getElementById("task4_roll56").parentNode.id);
      document.querySelector('[name=task4_roll56]').value = task4_roll56;
     }
}



</script>



<style>
.stationary{
  width: 45%;
  margin: auto;
  padding: 5px;
  border: 1px solid black;
  background-color: Gainsboro;
  text-align: center;
}

.empty{
  width: 45%;
  height: 30px;
  margin: auto;
  padding: 3px;
  border: 1px solid black;
  background-color: #ccffcc;
  text-align: center;
}

table, th, td{
        border: 1px solid black;
        text-align: center;
}

table{
    margin-left:auto;
    margin-right:auto;
}



</style>


Please rank the payoff rules according to the following payoffs by dragging it to a green box. <br> <br> 



<table id="namesbank">
    <tr>
        <th colspan="2" style="padding: 5px;">Drag the following payoff rules to the table below:</th>
    </tr>
    <tr>
    <td><b>Rule 1</b></td>
    <td style="padding: 5px;"><div draggable="true" ondragstart="drag(event)" id="task4_roll1234">
      $10 if a random dice roll is 1, 2, 3, or 4
    </div></td>
    </tr>
    <tr>
    <td><b>Rule 2</b></td>
    <td style="padding: 5px;"><div draggable="true" ondragstart="drag(event)" id="task4_roll56">
      $10 if a random dice roll is 5 or 6
    </div></td>
    </tr>
    
</table>

<br>

<table style="align:center;"> 
    <tr>
        <td class="stationary">100% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="99" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="empty" id="98" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">95% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="94" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="93" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">90% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="89" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="88" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">85% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="84" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="83" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">80% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="79" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="78" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">75% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="74" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="73" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">70% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="69" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="68" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">65% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="64" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="63" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">60% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="59" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="58" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">55% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="54" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="53" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
    <tr>
        <td class="stationary">50% chance of winning $10</td>
    </tr>
    <tr>
        <td class="empty" id="49" ondrop="drop(event)" ondragover="allowDrop(event)" value="82"></td>
    </tr>
    <tr>
        <td class="empty" id="48" ondrop="drop(event)" ondragover="allowDrop(event)"></td>
    </tr>
</table>


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

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

<br> <br>

{% next_button %}
{% endblock %}