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

{% block title %}
    Part 1 of this Study: Instructions(1/4)
    <hr>
{% endblock %}

{% block content %}
    <!--<text style="font-size:large">-->
    <p>Please read these instructions carefully. There will be bonus qualification questions based on the instructions. If you do not answer all bonus qualification questions correctly, you will not earn an additional bonus for this study.</p>
    <p>
        In this study, you will be asked to complete <b>{{ num_questions }} guessing tasks</b>. In each guessing task, {% if player.bags_first == 2 %} there are two bags, "Bag A" and "Bag B". {% else %} there are ten bags, "Bag A", "Bag B", etc. up to "Bag J".  {% endif %}

        A bag contains exactly 100 balls, each of which is either red or blue.
        However, the two bags contain <b>different numbers of red vs. blue balls:</b> one bag contains more red balls, the other contains more blue balls.<br><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 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>

    <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.bags_first == 2 %} "Bag A" or "Bag B" {% else %} "Bag A" or "Bag B" etc. up to "Bag J" {% endif %}
            written on it. You will be informed about <b>how many</b> of these 100 cards have
            {% if player.bags_first == 2 %} "Bag A" or "Bag B" {% else %} "Bag A" or "Bag B" etc. up to "Bag J" {% endif %}
            written on them.

        </li>
        <li>

            {% if player.bags_first == 2 %} There are two bags, "Bag A" and "Bag B". {% else %} There are ten bags, "Bag A", "Bag B" etc. up to "Bag J". {% endif %}
            Each bag contains 100 balls.
            {% if player.bags_first == 2 %} One of the bags contains more red balls, and the other bag contains more blue balls. {% else %} Some of the bags contain more red balls, and the others contain more blue balls. {% endif %}
            You will be informed about exactly <b>how many red and blue balls</b> each bag contains.
        </li>
    </ul>


    {% if player.bags_first == 2 %}
        <img src="{% static "beliefs_main_exp/pictogram.png" %}" style="display: block; width: 30%; margin: auto;">
    {% else %}
        <img src="{% static "beliefs_main_exp/pictogram_laplace.png" %}" style="display: block; width: 100%; margin: auto;">
    {% endif %}
    <br>
    <br>


    <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.bags_first == 10 %} <br> ... <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.
            The computer will <b>inform you about the color</b> of the randomly drawn balls.
        </li>
    </ol>

    <br>
    <br>


    <div style="float:right; padding-top:50px; padding-bottom:50px">
        {% next_button %}
    </div>




{% endblock %}