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

{% block content %}
    {% if subsession.round_number == 10 %} <p> <strong> You have finished Part 1, and now start Part 2.</strong></p> {% endif %}
    {% if player.round_number == 1 %}
    <p class ="mystyle">    Every round, you are facing a choice between 2 lotteries : A and B. <br>To make the choice, click on the drop-down menu and select your preferred lottery.
    <br>Then, the experiment software plays your chosen lottery, using a virtual 10-sided die (see Die Roll in table below), and shows the result on the next screen.
    <br>For instance, if you choose lottery A in this round, and the virtual die rolls “1”, your outcome from this round will be 20 Experimental Dollars (ED). The table below shows how lottery outcomes depend on the die roll.
        <br>After each 9 rounds have been played, another virtual die randomly chooses one of the 9 rounds to realize into your experiment payoff.
        <br>Thus, every round of this Part has 1-to-9 chance (11.1%) to affect your experiment payoff.
        <br> 10 Experimental Dollars = 1 USD.<br>
    </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, you are facing a choice between 2 lotteries : A and B. <br>To make the choice, click on the drop-down menu and select your preferred lottery.
    <br>Then, the experiment software plays your chosen lottery, using a virtual 10-sided die (see Die Roll in table below), and shows the result on the next screen.
    <br>For instance, if you choose lottery A in this round, and the virtual die rolls “1”, your outcome from this round will be 20 Experimental Dollars (ED). The table below shows how lottery outcomes depend on the die roll.
        <br>After each 9 rounds have been played, another virtual die randomly chooses one of the 9 rounds to realize into your experiment payoff.
        <br>Thus, every round of this Part has 1-to-9 chance (11.1%) to affect your experiment payoff.<br> 10 Experimental Dollars = 1 USD.<br>
    </p>
          </div>
        </div>
    {% endif %}



    {% if player.round_number > 9 %} <p>It is up to you whether consider this information or not:</p>

        <div class="card-header mb-3 text-center" style="background: #DEF0FC; color: blue">
            <b>PUBLIC INFORMATION from Part 1 on this decision</b>  </div>
        <p>
            <div class="row justify-content-center">
                 <table style="border-collapse: collapse; width: 40%; height: 61px;" border="1">

                    <tr>

                        <th style="width: 9%;">Votes A</th>
                        <th style="width: 9%;">Votes B</th>

                    </tr>

                    <tr>

                        <th style="width: 9%;">{{ a }}%</th>
                        <th style="width: 9%;">{{ b }}%</th>

                    </tr>
                 </table>
        </p>

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


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

                <tr>
                    <th style="width: 10%;">Die 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.t1 %}
                        <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.t1 %}
                        <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>

</div>
{% formfields %}
    <br>






<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>

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

{% endblock %}