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

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


{% block content %}

<style>
    .otree-timer {
        display: none;
    }

  .beta table, .beta th, .beta td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}
.beta th, .beta td {
    padding: 7px;
}
.beta td {
    font-size: 20px;
}

</style>

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


<table style="border:none;width: 100%;">
    <colgroup>
        <col width="5%">
        <col width="90%">
        <col width="5%">
    </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">

 
<div style="display: inline-block; float: right; width: 30%">
    <img src="{% static "beliefs_main_exp/pictogram.png" %}" style="width: 80%; float: right">
</div>
    


<!--<p>Imagine there are two bookbags, bag A and bag B, both filled with balls.</p>-->



<div style="width: 70%">
<!--<p>Imagine there are two bookbags, bag A and bag B, both filled with balls.</p>-->
<table style="width: 100%", class="beta">
    <tr>
      <th></th>
      <td  style="font-size: 16px"># of Cards in the Deck</td>
      <td  style="font-size: 16px"># of Balls in the Bag</td>
    </tr>
    <tr>
      <th>Bag A</th>
      <td><b>{{specification.a_chips}}</b></td>
      <td><text style="color: red;"><b>{{specification.red_chips_a}} red</b> </text> balls <br>
	<b><text style="color: blue;">{{specification.blue_chips_a}} blue </text></b> balls
      </td>
    </tr>
    <tr>
      <th>Bag B</th>
      <td><b>{{specification.b_chips}}</b></td>
      <td><text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text> balls <br>
	<b><text style="color: blue;">{{specification.red_chips_a}} blue </text></b> balls
      </td>
    </tr>
    </table>
   
        <br><b>Next:</b>

<ol>
<li><p style="font: 15px">The computer <b>randomly selected one bag</b> by drawing a card from the deck.</p></li>

<li> {% if specification.n_sample > 1 %}
<p style="font: 15px">Then, the computer randomly drew {{specification.n_sample}} balls from the secretly selected bag, replacing each ball with a ball of the same color after it was drawn:<br>
    <div style="width: 600px; border: 2px solid black; padding: 4px; text-align: center ">
    <b  style="font-size: 20px">In total, the computer drew <text style="color: red;">{{specification.red_sample}} red
        {% if specification.red_sample == 1%}ball{%else%}balls{%endif%}
    </text> and <text style="color: blue;">{{specification.blue_sample}} blue
        {% if specification.blue_sample == 1%}ball{%else%}balls{%endif%}
    </text></b></div></p>
        {% else %}
<p style="font: 15px">Then, the computer randomly drew {{specification.n_sample}} ball from the secretly selected bag:
<div style="width: 600px; border: 2px solid black; padding: 4px; text-align: center ">
    <b  style="font-size: 20px">{% if specification.red_sample > 0 %}<text style="color: red;">1 red ball{% else %}<text style="color: blue;">1 blue ball{% endif %}</text>  was drawn.</b>
     </div></p>

{% endif %}</li>
</ol>
</div>

<br><br>


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

    <p id="qn_post">
             Select a probability (between 0 and 100) that expresses <b>how likely</b> you think it is that <b>bag A as opposed to
            {% if player.default_condition == "two" %}
bag B has
        {%  else %}
        one of bag B, bag C, ..., or bag J have
            {%  endif  %}</b>
         been selected:
    </p>
</td>
<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>
Probability of <b>bag A</b>:
                 
    <div style="width: 410px; display: inline-block; text-align: right"> <b><input type="number" min="0" step="0.01" max="100" name="answer" id="answer" required
                                         style="font-weight: bold; border-radius: 4px; width: 60px; text-align: right; border-width: 1px"> %</b>
        </div>
      </td>
      	<td style="text-align: right;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
    </tr>
    <tr>
      <td style="text-align: left;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
      <td>

                    {% if player.default_condition == "two" %}
Probability of <b>bag B</b>:
                {% else %}
  Combined probability of  <b> of bag B, bag C, bag D,</b> <br>
                        <b> of bag E, bag F, bag G, bag H, bag I</b> and <b>bag J</b>:
    {% endif %}

    {% if player.default_condition == "two" %}
    <div style="width:  410px   ; display: inline-block; text-align: right">
        <b><output id="text_post"><text style="color: red">Enter number above!</text></output></b>
    </div>
    {%  else %}
            <div style="width: 200px; display: inline-block; text-align: right">
        <b><output id="text_post"><text style="color: red">Enter number above!</text></output></b>
    </div>
	    {% endif %}
      </td>
      	<td style="text-align: right;"><b style="font-size:1.5em"><output style="color: red", name="load_num"></output></b></td>
    </tr>
</table>


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

<input type="hidden" name="load_sum" id="load_sum">
<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">

	    

{% endblock %}




{% block scripts %}

 <script>


   

$(document).ready(function () {


$('#answer').on('keyup mouseup', function () {
   var x = parseFloat(document.getElementById("answer").value);
        if (x >= 0 && x <= 100) {
                document.getElementById('text_post').style.color = "black";
            document.getElementById('text_post').value = (Math.round((100-x)*100)/100).toString() + ' %';
                                      document.getElementById('text_post').style.fontSize = "100%";
          $('#submit_posterior').prop('disabled', false);
        }
        else {
        document.getElementById('text_post').value = 'Enter number between 0 and 100';
                          document.getElementById('text_post').style.fontSize = "70%";
  document.getElementById('text_post').style.color = "red";
          $('#submit_posterior').prop('disabled', true);

        }
        });

   

    });

  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 = 2;
   max = 6;

   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);
}());


 function Timer1() {
      var round1 = "{{round}}"+"_"+"{{id}}_timer1"
      
      var counter = localStorage.getItem(round1) ? localStorage.getItem(round1) : 16;
      document.getElementById("time-left").innerHTML = "You have " + counter + " seconds left.";
      var time_spent = 16 - 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 (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

    </script>



{% endblock %}