{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Task {{round}} of {{num_q}} <br>
<h5>Decision Screen (2/2)</h5>
<hr>
{% endblock %}

{% block content %}
  <div id="lottery_div" style="text-align: center; width: 100%;">
 <table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
<tr>

 {% if type == 'list' %}

 <td style="vertical-align: middle; text-align: center" >
   <div style="display: inline-block; text-align:left">
{% for prob, sum, abssum in player.current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  > 0 %}
                     <b>Get</b>
                   {% elif sum < 0 %}
                     <b>Lose</b>
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>Get</b>
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>Lose</b>
                    {% endif %}
                  <b>$ {{ abssum }}</b> <br>
		  {% endfor %}
		  </div>
    </td>

{%  elif type == 'rocl' %}
    <td style="vertical-align: middle; text-align: left" >
        <p>We randomly <b>draw an integer number between {{ roclrangestart }} and {{ roclrangeend }}</b>, with each number being equally likely to be drawn. Call this number X.</p>
 {% for prob, sum, abssum in player.current_lottery %}
                   With probability <b>{{ prob }}% : </b>
                    {% if sum  > 0 %}
                     <b style="color: green">Get</b>
                   {% elif sum < 0 %}
                     <b style="color: red;">Lose</b>
                  {% elif sum == 0 and player.lottery_amount > 0 %}
                     <b>Get</b>
                  {% elif sum == 0 and player.lottery_amount < 0 %}
                     <b>Lose</b>

                    {% endif %}
                  <b>$ {{ abssum }}</b> <br><br>
    {% endfor %}

         </td>




     {%  elif type == 'ellsberg' %}

        <td  style="vertical-align: middle; text-align: left">
<p>Imagine that the computer simulates an <b>urn that contains 90 balls</b>. Out of these 90 balls:
    <ul><li>30 balls are <b style="color: red">red</b></li>
        <li>60 balls are <b style="color: darkgoldenrod">yellow</b> or <b style="color: blue">blue</b>, but you <i>don't know how many</i> are yellow and how many are blue</li>
    </ul>

<p>
    The computer will <b>randomly select one</b> of these 90 balls, with equal probability. <br>
</p>
     <p>
       {% for sum, o1, o2 in player.current_lottery %}
                <b style="color: green">Get</b>&nbsp;$10 if the drawn ball is <b>{{ o1 }}</b><br>
           Get $0 if the drawn ball is <b>{{ o2 }}</b>

       {% endfor %}</p>
        </td>
{%  endif %}

</tr></table>
  </div>
  
<p style="text-align:center">Your decision on the previous screen indicates that you value this lottery

<!--  somewhere
   
      between
            {%  if val_low < 0 or val_low == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %}${{  absval_low }}
        and ${{ absval_up }}.
  -->
  as much as {% if player.lottery_amount > 0 %} getting {% else %} losing {% endif %} ${{switching_point}} with certainty.
    </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 you actually value this lottery somewhere between


<!--    
            {%  if val_low < 0 or val_low == 0 and player.lottery_amount < 0 %} losing {%  else  %} getting {% endif %} ${{  absval_low  }}
        and  ${{ absval_up  }}?

  -->
{% if player.lottery_amount > 0 %} getting {% else %} <b style = "color:red">losing </b>{% endif %} ${{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>
<br>
<br>

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

<br>

{% 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 %}