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

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

{% block content %}

{% block global_scripts  %}

<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) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var originalbox = document.getElementById(data).parentNode.id;
    // IF we are not dragging from first box to second box or to the same box
    if ( parseInt(ev.target.parentNode.id)!=parseFloat(document.getElementById(data).parentNode.id)-1 && ev.target.parentNode.id!=originalbox){
      

      //if drop on second box and first is empty, land on first box
      if (document.getElementById(parseInt(ev.target.id)+1)!=null && document.getElementById(parseInt(ev.target.id)+1).innerText==""){
          document.getElementById(parseInt(ev.target.id)+1).appendChild(document.getElementById(data));
          //alert(1)
      } 
      //if drop on full first box, land in second box
      else if (document.getElementById(parseInt(ev.target.parentNode.id)-1)!=null && document.getElementById(ev.target.id).innerText!="" ){
          //alert(2)
          document.getElementById(parseInt(ev.target.parentNode.id)-1).appendChild(document.getElementById(data));
      } 
      // if drop on empty first box, land on empty first box OR if land on second box and first is full, land on second box
      else {
          ev.target.appendChild(document.getElementById(data));    
          //alert(3)  
      }
      
      
      if (document.getElementById(parseInt(originalbox)-1)!=null && document.getElementById(parseInt(originalbox)-1).innerHTML!="" && document.getElementById(originalbox).innerHTML==""){
          document.getElementById(parseInt(originalbox)).innerHTML=document.getElementById(parseInt(originalbox)-1).innerHTML;
          document.getElementById(parseInt(originalbox)-1).innerHTML="";
      }
      
      
      task3_roll56 = parseFloat(document.getElementById("task3_roll56").parentNode.id);
      document.querySelector('[name=task3_roll56]').value = task3_roll56;
      task3_roll1234 = parseFloat(document.getElementById("task3_roll1234").parentNode.id);
      document.querySelector('[name=task3_roll1234]').value = task3_roll1234;
}}

function dropbank(ev) {
    ev.preventDefault();
    if (ev.target.innerText == "") {
        var data = ev.dataTransfer.getData("text");
        var originalbox = document.getElementById(data).parentNode.id;
        ev.target.appendChild(document.getElementById(data));
            
        if (document.getElementById(parseInt(originalbox)-1)!=null && document.getElementById(parseInt(originalbox)-1).innerHTML!="" && document.getElementById(originalbox).innerHTML==""){
            document.getElementById(parseInt(originalbox)).innerHTML=document.getElementById(parseInt(originalbox)-1).innerHTML;
            document.getElementById(parseInt(originalbox)-1).innerHTML="";
        }      
      }
    task3_roll56 = parseFloat(document.getElementById("task3_roll56").parentNode.id);
    document.querySelector('[name=task3_roll56]').value = task3_roll56;
    task3_roll1234 = parseFloat(document.getElementById("task3_roll1234").parentNode.id);
    document.querySelector('[name=task3_roll1234]').value = task3_roll1234;
 }




</script>
{% endblock %}


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


.stationary{
  width:90%;
  margin: auto;
  padding: 5px;
  border: 1px solid black;
  background-color: #DCDCDC;
  text-align: center;
}

.empty{
  width:90%;
  height: 9px;
  margin: auto;
  border: 1px solid black;
  background-color: #ccffcc;
  text-align: center;
  border-bottom: none;
  border-top: none;
}

.rule{
    cursor:grab;
}

.empty, .rule, #namesbank {
    /*prevent highlighting*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#namesbank{
    width:100%;
}

.hiddenrow{
    visibility:hidden; 
    border-color:blue;
}

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

#rankingtable{
    align:center;
    width:100%;
}

.row {
  margin-left:-5px;
  margin-right:-5px;
}
  
.column {
  float: left;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

#bank1, #bank2{
    height:35px;
}

</style>


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

<div class="row">
  <div class="column" style="width:50%;">
    <table id="namesbank" style="float: left;margin-top:220px;">
        <tr>
            <th colspan="2" style="padding: 5px;">Drag the following payoff rules to the table below:</th>
        </tr>
        <tr>
        <td style="padding: 5px;" id="bank1" ondrop="dropbank(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="task3_roll56" class="rule">
          You are paid $5 if a fair, six-sided dice rolls a 5 or 6.
        </div></td>
        </tr>
        <tr>
        <td style="padding: 5px;" id="bank2" ondrop="dropbank(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="task3_roll1234" class="rule">
          You are paid $5 if a fair, six-sided dice rolls a 1, 2, 3, or 4.
        </div></td>
        </tr>
    </table>
  </div>
  <div class="column" style="width:50%;">
        <table id="rankingtable" > 
            <tr>
                <td class="stationary">You are paid $5 with 100% chance</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">You are paid $5 with 95% chance</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">You are paid $5 with 90% chance</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">You are paid $5 with 85% chance</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">You are paid $5 with 80% chance</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">You are paid $5 with 75% chance</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">You are paid $5 with 70% chance</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">You are paid $5 with 65% chance</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">You are paid $5 with 60% chance</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">You are paid $5 with 55% chance</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">You are paid $5 with 50% chance</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>
    </div>
</div>

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

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

<br> <br>

{% next_button %}
{% endblock %}