{% block title %}
    Computer solves Math Tasks
{% endblock %}

{% block content %}

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

           {{ include C.COMPUTER_TYPES }}

    <p>In explaining the study, we use this badge to show the two instances in which you will have to make a decision:
   <span class="badge bg-secondary">Decision</span></p>
    <p id="clickP">
        Click the button below to learn about Part 1 of this study.
    </p>
            <div class="text-center">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
          aria-expanded="false" aria-controls="collapseExample" id="Part1Button">
    Part 1
  </button>
            </div>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
          <h5 class="card-title">Part 1</h5>
      <div class="card-text">
          {{ include C.PART1_TEMPLATE }}
      </div>
  </div>
    <br>
    <p id="clickP2">
        Click the button below to learn about Part 2 of this study.
    </p>
    <div class="text-center">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePart2"
          aria-expanded="false" aria-controls="collapsePart2" id="Part2Button">
    Part 2
  </button>
    </div>
    <div class="collapse" id="collapsePart2">
        <div class="card card-body">
            <h5 class="card-title">Part 2</h5>
            <p class="card-text">
                {{ include C.PART2_TEMPLATE }}
            </p>
        </div>
        <br>
        <p id="clickBonus">
        Click the button below to learn about your bonus payment.
    </p>
        <div class="text-center">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBonus"
                    aria-expanded="false" aria-controls="collapseBonus" id="BonusButton">
                Your Bonus Payment
            </button>
        </div>
        <div class="collapse" id="collapseBonus">
            <div class="card card-body">
                <h5 class="card-title">Your Bonus</h5>
                <div class="card-text">
                    {{ include C.BONUS_TEMPLATE }}
                </div>
            </div>
            <br>
            <p>
                When you are ready, click the "Next" button to answer some understanding questions.
            </p>
            <button style="float: right" class="btn btn-primary btn-large">Next</button>
        </div>
    </div>
</div>


{% endblock %}



{% block styles %}

{% endblock %}

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