{% block title %}
        Now you enter part 2 of Decision {{ chosen_decision }} of the study.
{% endblock %}

{% block content %}

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

    <p>
        In part 2 of this decision the computer faces {{ C.NUMBER_OF_TASKS_PART2 }} {{ label_sep }} tasks.
        This is the same computer as in part 1 of this decision, 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>Add {{ part2_per_task_bonus }} 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 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 %}