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



{% block content %}
    {% if player.default_condition == 'two' %}
<div style="display: inline-block; float: right; width: 40%">
    <img src="{% static "beliefs_main_exp/pictogram.png" %}" style="width: 60%; float: right">
</div>
    {% else %}
    <div style="display: inline-block; float: right; width: 60%">
    <img src="{% static "beliefs_main_exp/pictogram_laplace.png" %}" style="width: 100%; float: right">
</div>
    {% endif %}


    <p style="font-size: larger;">In this {% if round > 1 %} <b>new</b> {%endif %} task:</p>

<div style="width: 60%">
<!--<p>Imagine there are two bookbags, bag A and bag B, both filled with balls.</p>-->
<p>    Number of <b>"bag A"</b> cards: <b>{{specification.a_chips}}</b><br>
    {% if player.default_condition == "two" %}
   Number of  <b>"bag B"</b> cards: <b>{{specification.b_chips}}</b></p>
{% else %}
   Number of  <b>"bag B"</b> cards: <b>{{other_cards.0 }}</b><br>
   Number of  <b>"bag C"</b> cards: <b>{{other_cards.0 }}</b><br>
   Number of  <b>"bag D"</b> cards: <b>{{other_cards.0 }}</b><br>
    Number of  <b>"bag E"</b> cards: <b>{{other_cards.0 }}</b><br>
   Number of  <b>"bag F"</b> cards: <b>{{other_cards.0 }}</b><br>
   Number of  <b>"bag G"</b> cards: <b>{{other_cards.0 }}</b><br>
   Number of  <b>"bag H"</b> cards: <b>{{other_cards.0 }}</b><br>
   Number of  <b>"bag I"</b> cards: <b>{{other_cards.0 }}</b><br>
  Number of  <b>"bag J"</b> cards: <b>{{other_cards.1 }}</b>
    </p>
{%  endif %}

{%  if player.task_type == "baseline" %}
<p><b>Bag A</b>  contains <text style="color: red;"><b>{{specification.red_chips_a}} red</b> </text> balls and <b><text style="color: blue;">{{specification.blue_chips_a}} blue </text></b>
    {% if specification.blue_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
{%  elif player.task_type == "rocl" %}
        <p>We randomly <b>drew an integer number between {{ compound_low_bound }} and {{ compound_high_bound }},</b> with each number being equally likely to be drawn. Call this number X.</p>
    <p><b>Bag A</b>  contains <text style="color: red;"><b>X red</b> </text> balls and <b><text style="color: blue;">100-X blue</text></b> balls.<br>
{% endif %}
     {% if player.default_condition == "two" %}

 {%  if player.task_type == "baseline" %}
    <b>Bag B</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.</p>
     {%  elif player.task_type == "rocl" %}
<b>Bag B</b>   contains  <text style="color: red;"><b>100-X red</b> </text>balls and <b><text style="color: blue;">X blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.</p>
{% endif %}
    {% else %}
  <b>Bag B</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
    <b>Bag C</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
 <b>Bag D</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
 <b>Bag E</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
 <b>Bag F</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
          <b>Bag G</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
          <b>Bag H</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
          <b>Bag I</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
       <b>Bag J</b>   contains  <text style="color: red;"><b>{{specification.blue_chips_a}} red</b> </text>balls and <b><text style="color: blue;">{{specification.red_chips_a}} blue</text></b>
        {% if specification.red_chips_a == 1 %} ball{%else%}balls{%endif%}.<br>
         </p>
{%  endif %}
{%  if player.default_condition == 'ten' %}
   </div>
<div style="display: inline-block">
{% endif %}
    <br><b>Next:</b>
<ol>
<li><p>The computer <b>randomly selected one bag</b> by drawing a card from the deck.</p></li>


<li> {% if specification.n_sample > 1 %}
<p>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>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>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>{% 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</h2><hr>

{#  Two screens earlier you stated that you think it is <b style="color: darkgoldenrod">{{ red_bag_prob }}% likely that bag A has been selected</b> and {{ blue_bag_prob }}% likely that bag B has been selected in this task.#}
{#  <br><br>#}

    <!--<p>The <b>guessing machine produces the optimal guess</b> given this information about which bag was actually drawn. </p>-->
    <p> By replacing your guess with the optimal guess you may <b>increase your chances of winning {{ prize }}</b>. You have a budget of {{ endowment | c }} to purchase the optimal guess in this task.</p>
    <p>How much of your {{ endowment | c }} budget are you <b>willing to pay</b> to <b>replace your guess</b> with the <b>optimal guess <u>in this task</u>?</b></p>

    <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <col width="100%">

        </colgroup>


   <td style="text-align: center;">
    <output id="text_wtp">Use the slider:</output><br>
            <br>
          <!--<td style="text-align: right  "><text style="text-align: right"> 0% von Option A <br> 100% von Option B</text> </td> </tr>-->
 <input type="range" class="myclassRed" name="wtp" id="wtp" style="width: 100%" min="0" value="0" max="{{endowment}}" step="0.01"
        oninput="text_wtp.value = 'Your willingness to pay for the optimal guess: ' + wtp.value.toString() + '$';" />
    <div class="sliderticks">
      <p> $0</p>
        <p> $1.00</p>
        <p>$2.00</p>
                <p>$3.00&nbsp;&nbsp;&nbsp;&nbsp;</p>

  </div>

      <p style="float:left; text-align: left"><br><b>Do not replace, <br> own guess counts </b></p> <p style="float:right; text-align: right"><br><b>Most likely <br>to replace own guess</b></p>
   </td>
       </tr>

    </table>


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



        {{form.errors}}

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

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0px 0px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: black ;
  height: 12px;
  line-height: 45px;
  margin: 0 0 0 0;
}

</style>

{% endblock %}



{% block scripts %}

<script>

    $(document).ready(function () {

        $('#wtp').on('input change', function () {
            $('#wtp').addClass('myclass');
            $('#submit_wtp').prop('disabled', false);
            });
      });

</script>



{% endblock %}