{{ block title }}
    Task I Concluded. Onto Task II.
{{ endblock }}

{{ block styles}}
<style>
    {
        box-sizing: border-box;
    }
    /* Set additional styling options for the columns*/
    .column {
    float: left;
    width: 50%;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
    }

    table, th, td {
  padding: 5px;}
    </style>
{{endblock}}

{{ block content }}
      <p> You just completed Task I of Part I. <br>
      You will be notified about the results of the group quiz and your earnings at the end of today's session.<br>
      The Chat Box will be disabled for the rest of the experiment.<br>
      <br>
      Next, we will begin Task II.
  </p>

    <h5><b> Task II: </b></h5>

    <p> Task II is a ranking task. All members of your group will be asked to nominate two other group members (except themselves).<br>
        <span style="color: blue; background-color: white;"> The two group members who receive the most nominations will be awarded a bonus. </span>
        These nominations are private and will not be shared with any other participant. Ties, if any, will be broken randomly.
    </p>

    <b> Earnings/Bonus </b>
    <p> The Top 2 members who receive the most nominations will receive a bonus of 4 ECUs.<br>
        Others will make no earnings in this Task.
    </p>

    <button class="otree-btn-next btn btn-primary">Begin Task II</button>


<! –– Chat Box Section -->
    <hr>
    <div>
            <p>
            <b>Chat Box:</b><br>

            <div class="row">
            <div class="column" >
                <p>
                    The chat is disabled.
                </p>
            </div>
            <div class="column">
                {{ chat nickname=participant.participant_name channel=participant.group_name }}
                <style>
                 .otree-chat__input{
                 display: none;
                 }
                 .otree-chat__btn-send{
                 display: none;
                 }
                </style>
            </div>
        </div>
        </p>
    </div>


{{ endblock }}