{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}


{% block title %}
Task {{round}} of {{num_questions}}
<h5>Decision Screen (1/2)</h5>
<hr>
{% endblock %}

{% block content %}


 <style>
   
    
table {
    margin-left: auto;
    margin-right: auto;
}

.container {
  position: relative;
  font-family: Arial;
}

span.nobr {
    white-space: nowrap;
}

{% if player.is_complex %}

.text-block_B {
  position: absolute;
  bottom: 30px;
  right: 80px;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.text-block_A {
  position: absolute;
  bottom: 30px;
  left: 60px;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.text-block_D {
  position: absolute;
  top: 23%;
  left: 7%;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 95%;
}

{% elif player.is_load %}
.text-block_B {
  position: absolute;
  bottom: 23px;
  right: 145px;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.text-block_A {
  position: absolute;
  bottom: 23px;
  left: 150px;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.text-block_D {
  position: absolute;
  top: 23%;
  left: 11%;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

{% else %}

.text-block_B {
  position: absolute;
  bottom: 30px;
  right: 180px;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.text-block_A {
  position: absolute;
  bottom: 30px;
  left: 170px;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

.text-block_D {
  position: absolute;
  top: 23%;
  left: 15%;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

{% endif %}


</style> 

<!-- <p style="text-align:center; font-size:125%; background-color:powderblue;"> <b><span id="time-left"></span></b></p> -->

{% if player.is_load %}
<table style="border:none;width: 100%;">
    <colgroup>
        <col width="3%">
        <col width="94%">
        <col width="3%">
    </colgroup>
    <tr>
      <td style="text-align: left;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
      <td rowspan = "15">
	{% endif %}

 <div class="container">
   <div class="text-block_D" style="font-size: 22px;">
     <text style="color: black;"><b>{{a_chips}} Bag A Cards </b> </text>
     {% if player.is_complex %}&emsp;and&emsp;&emsp;{% else %}
     &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;and&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{% endif %}
	<b><text style="color: black;">{{b_chips}} Bag B Cards </text></b>
  </div>
  <img src="{% static "beliefs_treatment/Presentation2.png"%}" class="center">
  <div class="text-block_B" style="font-size: 22px;">
    <text style="color: red;"><b>{{blue_chips_a}} red balls</b></text> <br>
	<b><text style="color: blue;">{{red_chips_a}} blue balls</text></b>
  </div>

  <div class="text-block_A" style="font-size: 22px;">
    <text style="color: red;"><b>{{red_chips_a}} red balls</b> </text> <br>
	<b><text style="color: blue;">{{blue_chips_a}} blue balls </text></b>
  </div>
</div>
   
 <br>
 <p style="font-size:24px; text-align:center">The computer randomly selected a card from the deck and then randomly drew the following ball(s) from the selected bag:</p>
 <table>
   <tr>
   {% for color in draw %}
   {% if color == 1 %}
   <td style="height:100px;width:100px"><img src="{% static "beliefs_main_exp/RedBall.png" %}" style="width:100%"></td>
   {% else %}
   <td style="height:100px;width:100px"><img src="{% static "beliefs_main_exp/BlueBall.png" %}" style="width:100%"></td>
   {% endif %}
   {% endfor %}
   </tr>
   </table>
<br><br>


    <h2>Decision 1: Your guess</h2><hr>


    <p id="qn_post">
             Given that these balls were drawn, <b>how likely</b> do you think it is that Bag A (as opposed to Bag B) <span class="nobr">has been selected (in %)?</span>
   </p>


    
    {% if player.is_load %}
<td style="text-align: right;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
</tr>

{% for x in rows %}
<tr>
<td style="text-align: left;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
<td style="text-align: right;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
</tr>
{% endfor %}
<tr>
<td style="text-align: left;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
    <td>
      {% endif %}
 <p>            
    I believe it is  <b><input type="number" min="0" step="0.01" max="100" name="answer" id="answer" required style="font-weight: bold; border-radius: 4px; width: 40px; border-width: 1px; margin-left:7px"> %</b> likely that Bag A was selected.
    <p>
    {% if player.is_load %}
</td>
<td style="text-align: right;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
</tr>
</table>
{% endif %}
<br>
 <div style="display: inline-block; text-align: right">
        <b><output id="text_post"></output></b>
 </div>

 <input type="hidden" name="timed_out" id="timed_out">
 <input type="hidden" name="time_on_p" id="time_on_p">
 <input type="hidden" name="time_before_next_p" id="time_before_next_p">
 <input type="hidden" name="closed_p" id="closed_p">
 <input type="hidden" name="load_sum" id="load_sum">

<br>
 <div style="text-align: right;">
       <button type="submit" class="btn btn-primary" id="submit_posterior" >Submit your guess</button>
   </div>



{% endblock %}




{% block scripts %}

 <script>

   {% if player.is_load %}
   var x = document.getElementsByName("load_num");
   var i;
   var sum = 0;


   function showNumber(num) {
    for (i = 0; i < x.length; i++) {
        x[i].value = num;
    };
       sum = sum + num;
       $('#load_sum').val(sum)
   };  

   function hideNumber(num) {
    for (i = 0; i < x.length; i++) {
        x[i].value = " ";
    }
};

   upcap = 4000;
   lowcap = 3000;
   length = 2000;
   min = 5;
   max = 8;

   var tmp_num = Math.floor(Math.random() * (max - min + 1) ) + min;
setTimeout(showNumber, 1000, tmp_num);
setTimeout(hideNumber, 1000 + length, tmp_num);

(function loop() {
    var rand = Math.round(Math.random() * (upcap - lowcap)) + lowcap;
    setTimeout(function() {
            var new_num = Math.floor(Math.random() * (max - min + 1) ) + min;
            setTimeout(showNumber, 0, new_num);
            setTimeout(hideNumber, length, new_num);
            loop();
    }, rand);
}());

   {% endif %}

 function Timer1() {
      var round1 = "{{round}}"+"_"+"{{id}}_timer1"
      
      var counter = localStorage.getItem(round1) ? localStorage.getItem(round1) : 20;
      document.getElementById("time-left").innerHTML = "You have " + counter + " seconds left. {% if player.is_load %} Remember you get $2 if you correctly sum up the flashed numbers.{% endif %}";
      var time_spent = 20 - counter
      $('#time_on_p').val(time_spent)
      var myTimer = setInterval(function() {
	  counter--;
	  time_spent++;
	  $('#time_on_p').val(time_spent)
	  document.getElementById("time-left").innerHTML = "You have " + counter + " seconds left.{% if player.is_load %} Remember you get $2 if you correctly sum up the flashed numbers.{% endif %}";
	  if (counter < 10) {
	      document.getElementById("time-left").style.color = "red"; 
	  }

	  
	  if (counter <= 0) {
	      clearInterval(myTimer);
	      document.getElementById("time-left").innerHTML = "Time is up. Please make your decision NOW.";
	      $('#timed_out').val(true)
              counter = 0
	  }

	  localStorage.setItem(round1, counter);
	  
      }, 1000);

 }

  function Timer2() {
      var round2 = "{{round}}"+"_"+"{{id}}_timer2"
      var counter2 = localStorage.getItem(round2) ? localStorage.getItem(round2) : Date.now();
      var time_spent2 = Math.floor((Date.now() - counter2)/1000)
      $('#time_before_next_p').val(time_spent2)
      var myTimer = setInterval(function() {
	  time_spent2++;
	  $('#time_before_next_p').val(time_spent2)
	  /*
	  document.getElementById("time-left").innerHTML = "You have " + counter + " seconds left.";
	  if (counter < 10) {
	      document.getElementById("time-left").style.color = "red";
	  }

	  
	  if (counter <= 0) {
	      clearInterval(myTimer);
	      document.getElementById("time-left").innerHTML = "Time is up. Please make your decision NOW.";
	      $('#timed_out').val(true)
              counter = 0
	  }
	  */

	  localStorage.setItem(round2, counter2);
	  
      }, 1000);

  }

  function ClosedWindow(){
      var round3 = "{{round}}"+"_"+"{{id}}_close_p"
      localStorage.setItem(round3, 1)
      /* Add other stuff if you'd like as well */
  }

  function OpenWindow(){
      var round3 = "{{round}}"+"_"+"{{id}}_close_p"
       if (localStorage.getItem(round3) == 1){
	  $('#closed_p').val(1)
       }
      else {
	  $('#closed_p').val(0)
      }
   }
       

  
  Timer1();
  Timer2();
  window.onbeforeunload = ClosedWindow
   window.onload = OpenWindow
/*
   $(document).ready(function () {


$('#answer').on('keyup mouseup', function () {
   var x = parseFloat(document.getElementById("answer").value);
   var y = parseFloat(document.getElementById("answer_b").value);
    if (x+y == 100 || isNaN(x) || isNaN(y)) {
                
            $('#submit_posterior').prop('disabled', false);
	    document.getElementById('text_post').value = '';
        }
        else {
        document.getElementById('text_post').value = 'Prob. A and Prob. B must sum to 100';
                          document.getElementById('text_post').style.fontSize = "120%";
  document.getElementById('text_post').style.color = "darkgoldenrod";
          $('#submit_posterior').prop('disabled', true);

        }
});

    $('#answer_b').on('keyup mouseup', function () {
   var x = parseFloat(document.getElementById("answer").value);
   var y = parseFloat(document.getElementById("answer_b").value);
        if (x+y == 100 || isNaN(x) || isNaN(y)) {
                
            $('#submit_posterior').prop('disabled', false);
	    document.getElementById('text_post').value = '';
        }
        else {
        document.getElementById('text_post').value = 'Prob. A and Prob. B must sum to 100';
                          document.getElementById('text_post').style.fontSize = "120%";
  document.getElementById('text_post').style.color = "darkgoldenrod";
          $('#submit_posterior').prop('disabled', true);

        }
        });


    });
*/

    </script>



{% endblock %}