{% 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, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}
th, td {
    padding: 7px;
}

td {
    font-size: 20px;
}
</style> 

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

<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%">
    <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-size: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-size: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-size: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
            
bag B has
        </b>
         been selected:
    </p>

Oink !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>
    <br>

                   
Probability of <b>bag B</b>:
            

    {% 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 %}
<br>
 <div style="text-align: right;">
       <button type="submit" class="btn btn-primary" id="submit_posterior" disabled >Submit your guess</button>
   </div>



{% 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);

        }
        });

    //         $('input[type=radio]').click(function(){
    // $('#submit_difficulty').prop('disabled', false);
    // });

    });
</script>



{% endblock %}