{% block title %}
    You are done with Part 1
{% endblock %}

{% block content %}

    {{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
    {{ endif }}

    <p>
        Now you enter part 2 of this study.
    </p>
    <p>
        In part 2 of this study the computer faces {{ C.NUMBER_OF_TASKS_PART2 }} hard tasks.
        This is the same computer as in part 1, and it is of the same type.
    </p>
    <p>
        In this part you can <i>choose</i> to have your bonus determined in one of two ways:
    </p>
     <ul>
         <li>Similar as in part 1: add {{ C.BONUS_PER_CORRECT_TASK_PART2 }} to your bonus for each task the computer
             solves correctly.</li>
         <li>Add fixed amount of {{ C.OUTSIDE_OPTION }} to your bonus, independently of how many tasks the computer
             solves.</li>
     </ul>
    <p id="clickBonus">
        <strong>
            When you are ready, click the button below to choose how to your bonus for part 2 is determined.
        </strong>
    </p>

        <div class="text-center">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBonusChoice"
          aria-expanded="false" aria-controls="collapseBonusChoice" id="BonusChoiceButton">
    Choose how we determine your bonus
  </button>
    </div>
    <div class="collapse" id="collapseBonusChoice">
        <div class="card card-body">
            <p class="card-text">
                {{ formfields }}
            </p>
        </div>
        <br>

        <button style="float: right" class="btn btn-primary btn-large">Submit</button>
    </div>



{% endblock %}



{% block styles %}

{% endblock %}

{% block scripts %}
    <script>
        $("#BonusChoiceButton").click(function () {
            $("#BonusChoiceButton").css("display", "none");
            $("#clickBonus").css("display", "none");
        });
    </script>
{% endblock %}