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

{% block title %}
    Task <span id="tasknum"></span>
{% 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="";
      }
      
      
      folded2_1 = parseFloat(document.getElementById("folded2_1").parentNode.id);
      document.querySelector('[name=folded2_1]').value = folded2_1;
      folded2_23456 = parseFloat(document.getElementById("folded2_23456").parentNode.id);
      document.querySelector('[name=folded2_23456]').value = folded2_23456;
}}

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="";
        }      
      }
    folded2_1 = parseFloat(document.getElementById("folded2_1").parentNode.id);
    document.querySelector('[name=folded2_1]').value = folded2_1;
    folded2_23456 = parseFloat(document.getElementById("folded2_23456").parentNode.id);
    document.querySelector('[name=folded2_23456]').value = folded2_23456;
 }

var pagestart;
var num_pages = {{Constants.num_pages}};
var page = {{current_task}};
var prog_ratio = 100*page/num_pages;
function get_progress() {
    document.getElementById("progress_bar").style.width = Math.round(prog_ratio) + "%";
    document.getElementById("progress_bar").innerText = Math.round(prog_ratio) + "%";
}

function get_task_num(){
    if ({{current_task}} == 6){
        document.getElementById('tasknum').innerText="3"
        document.title = 'Task 3'
    }
    if ({{current_task}} == 7){
        document.getElementById('tasknum').innerText="4"
        document.title = 'Task 4'
    }    
    if ({{current_task}} == 8){
        document.getElementById('tasknum').innerText="5"
        document.title = 'Task 5'
    }    
}



</script>
{% endblock %}


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


.stationary{
  width:90%;
  margin: auto;
  padding: 3px;
  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>

<body onload="get_progress();get_task_num();">


<p>Please rank the payoff rules on the left relative to the fixed rules on the right by dragging each rule 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 on the right:</th>
        </tr>
        <tr>
        <td style="padding: 5px;" id="bank1" ondrop="dropbank(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="folded2_1" class="rule">
          You are paid $5 if a fair, six-sided die rolls a 1.
        </div></td>
        </tr>
        <tr>
        <td style="padding: 5px;" id="bank2" ondrop="dropbank(event)" ondragover="allowDrop(event)"><div draggable="true" ondragstart="drag(event)" id="folded2_23456" class="rule">
          You are paid $5 if a fair, six-sided die rolls a 2, 3, 4, 5, or 6.
        </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.folded2_23456.errors }}
<input type="hidden" name="folded2_23456" />

{{ form.folded2_1.errors }}
<input type="hidden" name="folded2_1" />
<br>
{% next_button %}

<br><br>
    <div class="progress">
  <div class="progress-bar" id="progress_bar" role="progressbar" style="width: {{ Constants.num_pages }}%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</body>

{% endblock %}