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

{% block title %}
Instructions (2/4) <hr>


{% endblock %}

{% block content %}


<p>Here's an example of what a decision screen will look like. At the top of the screen, you see the information you need to solve the guessing task. At the bottom, you enter your guess.</p>
<hr>

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

<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: 170px;
  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>75 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;">25 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>90 red balls</b></text> <br>
	<b><text style="color: blue;">10 blue balls</text></b>
  </div>

  <div class="text-block_A" style="font-size: 22px;">
    <text style="color: red;"><b>10 red balls</b> </text> <br>
	<b><text style="color: blue;">90 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>
   <td style="height:100px;width:100px"><img src="{% static "beliefs_main_exp/RedBall.png" %}" style="width:100%"></td>
   </tr>
   </table>


    <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>

    <!--<br>

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

        }
        });

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

    });
*/
</script>



{% endblock %}