{% load otree %}

<div class="card bg-light m-3">
    <div class="card-body">
    <h3>
        Instructions - Block 4
    </h3>

    <p>
        This is Block #4 of five blocks of ten rounds each--a total of 50 rounds.
    </p>
    <p>
        In this study, you will be in a randomly formed group of {{ Constants.players_per_group }} participants. 
        Each participant in the group may choose one of three colors: green, purple, or yellow. Your
        payoff at the end of each round depends on the color you choose and the colors chosen by the 
        other participants.
    </p>
    <p>
        For this block of ten rounds, the maximum payoff you can earn per round is $28.
    </p>

    <p>
        The diagram below portrays the information flow between
        the {{ Constants.players_per_group }} participants. You 
        {% if player.id_in_group == 1 %}
            (Player Q)
        {% elif player.id_in_group == 2 %}
            (Player R)
        {% elif player.id_in_group == 3 %}
            (Player T)
        {% elif player.id_in_group == 4 %}
            (Player S)
        {% else %}
            ERROR
        {% endif %}
        will only see the colors chosen by the participants who are 
        connected to you by a line in the displayed diagram.
        You will know only your own payoff, not the payoffs of any other participants.
    </p>

        
        {% if player.id_in_group == 1 %}
            <img align="middle" src="https://i.imgur.com/dg5vI74.png" width="300px" />
        {% elif player.id_in_group == 2 %}
            <img align="middle" src="https://i.imgur.com/OMEA2WX.png" width="300px" />
        {% elif player.id_in_group == 3 %}
            <img align="middle" src="https://i.imgur.com/r6XuoYr.png" width="300px" />
        {% elif player.id_in_group == 4 %}
            <img align="middle" src="https://i.imgur.com/K2hTFS9.png" width="300px" />
        {% else %}
            ERROR
        {% endif %}


    </div>
</div>