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

{% block title %}
Part 1: The guessing tasks <hr>
{% endblock %}

{% block content %}
<!--<text style="font-size:large">-->
<p><i>Please read these instructions carefully. We will test your understanding of them later.</i></p>
<p>
    In  this study, you will be asked to complete <b>{{num_questions}} guessing tasks</b>.<br>
In each guessing task,
    {% if player.default_condition == 'two' %}
    there are two bags, "bag A" and "bag B".
    {%  else %}
      there are ten bags, "bag A", "bag B", "bag C", "bag D", "bag E", "bag F", "bag G", "bag H", "bag I" and "bag J".
    {% endif %}

    Each bag contains 100 balls, some of which are red and some of which are blue.
{#    The "more Red" bag always contains more red balls than the "more Blue" bag, and vice versa.#}
    <!--The composition of red and blue balls varies between bag A and bag B, and these compositions also vary across the {{num_questions}} guessing problems.<br>-->
    One of the bags is selected at random by the computer as described below. You will not observe which bag was selected.
    Instead, the computer will then randomly draw one or several balls from the secretly selected bag, and will show these balls to you.
    Your task is to <b>guess which bag was selected</b> based on the available information. The exact procedure is described below:

</p>



            {% if player.default_condition == 'ten' %}


                  <h4>Task setup</h4>
    <ul>
        <li>
            There is a deck of cards that consists of 100 cards. Each card in the deck either has
        {% if player.default_condition == 'two' %}
            "bag A" or "bag B"
        {%  else %}
             "bag A", "bag B", "bag C", "bag D", "bag E", "bag F", "bag G", "bag H", "bag I" or "bag J"
        {% endif %}
            written on it.</li>
            <li>    You will be informed about <b>how many</b> of these 100 cards have
             {% if player.default_condition == 'two' %}
            "bag A" or "bag B"
        {%  else %}
             "bag A", "bag B", ..., or "bag J"
        {% endif %} written on them.
        </li>
        <li>
              {% if player.default_condition == 'two' %}
    There are two bags, "bag A" and "bag B".
    {%  else %}
      There are ten bags, "bag A" through "bag J".
    {% endif %} You will be informed about <b>how many red and blue balls</b>  each bag contains.
        </li>
    </ul>

                <div style="display: inline-block; float:left; width: 100%;">


{%  else %}

<div style="display: inline-block; float:left; width: 60%;">
    <h4>Task setup</h4>
    <ul>
        <li>
            There is a deck of cards that consists of 100 cards. Each card in the deck either has
        {% if player.default_condition == 'two' %}
            "bag A" or "bag B"
        {%  else %}
             "bag A", "bag B", "bag C", "bag D", "bag E", "bag F", "bag G", "bag H", "bag I" or "bag J"
        {% endif %}
            written on it.
            You will be informed about <b>how many</b> of these 100 cards have
             {% if player.default_condition == 'two' %}
            "bag A" or "bag B"
        {%  else %}
             "bag A", "bag B", "bag C", "bag D", "bag E", "bag F", "bag G", "bag H", "bag I" or "bag J"
        {% endif %} written on them.
        </li>
        <li>
              {% if player.default_condition == 'two' %}
    There are two bags, "bag A" and "bag B".
    {%  else %}
      There are ten bags, "bag A", "bag B", "bag C", "bag D", "bag E", "bag F", "bag G", "bag H", "bag I" and "bag J".
    {% endif %} You will be informed about <b>how many red and blue balls</b>  each bag contains.
        </li>
    </ul>

{%  endif %}

    <h4>Sequence of events</h4>

    <ol>
        <li>The computer <b>randomly selects one</b> of the 100 cards, with equal probability.<br>
            If a "bag A" card was drawn, bag A is selected. <br>If a "bag B" card was drawn, bag B is selected.
                {% if player.default_condition == 'ten' %}
{#            <br>If a "bag C" card was drawn, bag C is selected.#}
{#            <br>If a "bag D" card was drawn, bag D is selected.#}
{#            <br>If a "bag E" card was drawn, bag E is selected.#}
{#            <br>If a "bag F" card was drawn, bag F is selected.#}
{#                <br>If a "bag G" card was drawn, bag G is selected.#}
{#                <br>If a "bag H" card was drawn, bag H is selected.#}
{#                <br>If a "bag I" card was drawn, bag I is selected.#}
                    <br> ... etc. ...
{#                <br>If a "bag J" card was drawn, bag J is selected.#}
                {%  endif %}
</li>
        <li>
            Next, the computer  <b>randomly draws one or more</b> balls from the secretly selected bag. Each ball is equally likely to get selected.
            Importantly, if more than one ball is drawn, the computer draws these balls <b>with replacement</b>. This means that after a ball has been drawn and taken out of the bag,
            it gets replaced by a ball of the same color. Thus, the probability of a red or blue ball being drawn does not depend on whether previous draws were red or blue.<br>
        The computer will <b>inform you about the color</b> of the randomly drawn balls.
        </li>
    </ol>


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

    <div style="display: inline-block">

        <p>You then make your guess by <b>stating a probability between 0% and 100%</b> that bag A was drawn. The corresponding
    probability that
         {% if player.default_condition == 'two' %}
        bag B
         {%  else %}
one of bag B, C, D, E, F, G, H, I or J    {% endif %}
        was drawn is 100 minus your stated probability that bag A was drawn.</p>

<h4>Please note:</h4>
<ul>
     <li>
    The number of

        {% if player.default_condition == 'two' %}
            "bag A" and "bag B"
        {%  else %}
             "bag A", "bag B", ..., and "bag J"
        {% endif %}cards <b>varies across the guessing tasks</b>.</li>
      <li>
    The number of red and blue balls in each bag <b>varies across the guessing tasks</b>.</li>
    <li>The computer <b>draws a new card in each task</b>, so you should <b>think about which bag was selected in a task independently</b>
        of all other tasks.</li>


</ul>
    <br>
<div style="text-align: right;">
    {% next_button %}
   </div>

    </div>


{% endblock %}