{% 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 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

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

.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: 10%;
  background-color: transparent;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}

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

</style> 



 <div class="container">
   <div class="text-block_D" style="font-size: 22px;">
    <text style="color: black;"><b>{{specification.a_chips}} Bag A Cards</b> </text>   &emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;and&emsp;&emsp;&emsp; &emsp; &emsp; &emsp; &emsp;
	<b><text style="color: black;">{{specification.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>{{specification.blue_chips_a}} red balls</b></text> <br>
	<b><text style="color: blue;">{{specification.red_chips_a}} blue balls</text></b>
  </div>

  <div class="text-block_A" style="font-size: 22px;">
    <text style="color: red;"><b>{{specification.red_chips_a}} red balls</b> </text> <br>
	<b><text style="color: blue;">{{specification.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) has been selected (in %)?
   </p>


<!--Probability of <b>Bag A</b>:-->
    <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>

      <!--
Probability of <b>Bag B</b>:
               

    <div style="width: 410px; display: inline-block; text-align: right; padding: 7px"> <b><input type="number" min="0" step="0.01" max="100" name="answer_b" id="answer_b" required
                                         style="font-weight: bold; border-radius: 4px; width: 60px; text-align: right; border-width: 1px"> %</b>
    </div>
    <br>
    <div style="display: inline-block; text-align: right">
        <b><output id="text_post"></output></b>
    </div> -->
<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>
/*
$(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 %}