{% extends "global/Page.html" %}
{% load otree static %}
    <style>
    .mystyle{
    color: green; font-size: 16px; letter-spacing: 2px;
        word-spacing: 2px; font-style: normal; font-variant: normal; text-transform: none;
    }
    </style>
{% block title %}
    Part 3 - Round {{ subsession.round_number }}
{% endblock %}

{% block content %}
    {% if subsession.round_number == 1 %} <p> <strong> You have finished Part 2, and now proceed to Part 3. Please read the updated instructions.{% endif %}
</strong> </p>
    {% if player.round_number == 1 %}
    <p class ="mystyle">
   Every round of Part 3, your group of {{ Constants.players_per_group }} players collectively chooses between 2 lotteries : A and B.
    <br>The collective decision is determined by simple majority vote. The experiment software plays the chosen lottery, and shows the result on the next screen.
    <br>For instance, if your group opts for lottery B in this round, and the virtual die rolls “1”, your outcome from this round will be 40 Experimental Dollars (ED).
        <br>The table below shows how both lotteries' outcomes depend on the die roll.
        <br>At the end of Part 3, one of the 9 rounds is randomly chosen - by another virtual die - which will realize into the payoff of each group member.
        <br>Thus, every collective decision in Part 3 has 1-to-9 chance (11.1%) to affect the experiment payoff of EACH PLAYER IN YOUR GROUP.
         <br>To cast your vote, click on the drop-down menu.
        <br>Let me remind you, 10 Experimental Dollars = 1 USD.
    </p>
    {% else %}
        <p>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            See/Hide the instructions
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <p class ="mystyle">   Every round of Part 3, your group of {{ Constants.players_per_group }} players collectively chooses between 2 lotteries : A and B.
    <br>The collective decision is determined by simple majority vote. The experiment software plays the chosen lottery, and shows the result on the next screen.
    <br>For instance, if your group opts for lottery B in this round, and the virtual die rolls “1”, your outcome from this round will be 40 Experimental Dollars (ED).
        <br>The table below shows how both lotteries' outcomes depend on the die roll.
        <br>At the end of Part 3, one of the 9 rounds is randomly chosen - by another virtual die - which will realize into the payoff of each group member.
        <br>Thus, every collective decision in Part 3 has 1-to-9 chance (11.1%) to affect the experiment payoff of EACH PLAYER IN YOUR GROUP.
         <br>To cast your vote, click on the drop-down menu.
        <br>Let me remind you, 10 Experimental Dollars = 1 USD.
    </p>
          </div>
        </div>

    {% endif %}
    {% formfields %}



        <div class="card-header mb-3 text-center" style="background: #DEF0FC; color: green">
            <b>Lottery Payoff Table (Experimental Dollars)</b>
        </div>

    <p>
        <div class="row justify-content-center">
             <table style="border-collapse: collapse; width: 90%; height: 61px;" border="1">

                <tr>
                    <th style="width: 10%;">Dice Roll:</th>
                    <th style="width: 9%;">1</th>
                    <th style="width: 9%;">2</th>
                    <th style="width: 9%;">3</th>
                    <th style="width: 9%;">4</th>
                    <th style="width: 9%;">5</th>
                    <th style="width: 9%;">6</th>
                    <th style="width: 9%;">7</th>
                    <th style="width: 9%;">8</th>
                    <th style="width: 9%;">9</th>
                    <th style="width: 9%;">10</th>
                </tr>

                    {% if player.round_number <= Constants.t3 %}
                        <tbody>
                            <tr>
                                <td style="width: 10%;">Lottery A</td>
                                <td style="width: 9%;">{{ Constants.Alo }}</td>
                                <td style="width: 9%;">{% if player.round_number > 8%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 7%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 6%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 5%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 4%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 3%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 2%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 1%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                                <td style="width: 9%;">{{ Constants.Ahi }}</td>
                            </tr>
                            <tr>
                                <td style="width: 10%;">Lottery B</td>
                                <td style="width: 9%;">40</td>
                                <td style="width: 9%;">{% if player.round_number > 8%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 7%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 6%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 5%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 4%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 3%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 2%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">{% if player.round_number > 1%}50{% else %}40{% endif %}</td>
                                <td style="width: 9%;">50</td>
                            </tr>
                        </tbody>
                    {% elif player.round_number > Constants.t3 %}
                        <tbody>
                        <tr>
                            <td style="width: 10%;">Lottery A</td>
                            <td style="width: 9%;">{{ Constants.Alo }}</td>
                            <td style="width: 9%;">{% if player.round_number > 17%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 16%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 15%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 14%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 13%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 12%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 11%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 10%}{{ Constants.Ahi }}{% else %}{{ Constants.Alo }}{% endif %}</td>
                            <td style="width: 9%;">{{ Constants.Ahi }}</td>
                        </tr>
                        <tr>
                            <td style="width: 10%;">Lottery B</td>
                            <td style="width: 9%;">40</td>
                            <td style="width: 9%;">{% if player.round_number > 17%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 16%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 15%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 14%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 13%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 12%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 11%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">{% if player.round_number > 10%}50{% else %}40{% endif %}</td>
                            <td style="width: 9%;">50</td>
                        </tr>
                        </tbody>
                    {% else %}
                    {% endif %}

             </table>

        </div>
    </p>
    <br>
    <button type="otree-btn-next" class="btn btn-primary">Submit</button>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
{% endblock %}