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


{% block title %}
Task {{round}} of {{num_questions}} <br>
<h5>Decision Screen (2/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 2: Your certainty</h2><hr>

<p>Your decision on the previous screen indicates that you believe there is a {{red_bag_prob}}% chance that Bag A was selected.</p>


      <div style="border: 3px solid red; padding: 4px; text-align: center;  width:90%; margin:auto">
    <b style="color: red;">How certain</b> are you that the optimal guess is somewhere between {{val_low_DE}}% and {{val_up_DE}}%?
    
</div>
				

            


<table style="table-layout: fixed; width: 100%; margin-top: 15px" >
    <tr>
        {% for x, i in radio_amounts %}
        <td style="width: 5%; text-align: center">
            <input type="radio" name="confidence" id="r{{ i }}" onclick="handleClick(this)" value={{ forloop.counter0 }}>
            <br>
            {% if x != 1 %}
            <label style="; font-size: x-small" for="r{{ i }}">
                {{x}}%
            </label>
        </td>
        <td>
            {% else %}
            <label style="; font-size: x-small" for="r{{ i }}">0%
            </label>
        </td>
            {% endif %}
        {% endfor %}
    </tr>
    <tr>
        <td style="padding: 0" colspan="41" >
            <div style="display: inline; float: left" ><b>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
        </td>
    </tr>
</table>

<br>

<div style="text-align: right;">
    <button type="submit" class="btn btn-primary" id="confirm" disabled="disabled">Next</button>
</div>


{% endblock %}

{% block scripts %}

<script>
    function handleClick(checkedRadio) {
        checkedRadio.checked = true;
        var cansumbit = true;
        var conf = parseFloat(checkedRadio.value);
        var up = 100 - 5 * (20 - conf);
        document.getElementById("confirm").disabled = false;
        this.value = up;
}
</script>

{% endblock %}
								



{% block styles %}
<style>
  {#.myclass::-webkit-slider-thumb {#}
  {#      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
  {#      border: 1px solid #000000;#}
  {#      height: 36px !important;#}
  {#      width: 4px !important;#}
  {#      border-radius: 3px !important;#}
  {#      background: #ffffff !important;#}
  {#      cursor: pointer !important !important;#}
  {#      -webkit-appearance: none !important;#}
  {#      margin-top: -14px !important;#}
  {#  }#}
  {##}
  {#  input[type=range] {#}
        {#-webkit-appearance: none;#}
  {#      margin:      0 0;#}
  {#      width: 100%;#}
  {#  }#}
  {##}
  {#  input[type=range]:focus {#}
  {#      outline: none;#}
  {#  }#}

    .myclassBlue::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: white;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
       .myclassRed::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: gray;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

{#    input[type=range]::-webkit-slider-thumb {#}
{#        border: 0px;#}
{#        height: 0px;#}
{#        width: 0px;#}
{#        border-radius: 0px;#}
{#        -webkit-appearance: none;#}
{#    }#}
{##}
{#    .firefox input[type=range]::-moz-range-track {#}
{#  border-radius: 8px;#}
{#  height: 7px;#}
{#  border: 1px solid #bdc3c7;#}
{#  background-color: #fff;#}
{#}#}
{#.firefox input[type=range]::-moz-range-thumb {#}
{#  background: #ecf0f1;#}
{#    background-color: green;#}
{#  border: 1px solid #bdc3c7;#}
{#  width: 20px;#}
{#  height: 20px;#}
{#  border-radius: 10px;#}
{#  cursor: pointer;#}
{#}#}


}

</style>

{% endblock %}