{% block title %}
  {{ if participant.det }}One Decision Selected{{ else }}Five Decisions, One Selected{{ endif }}
{% endblock %}

{% block content %}

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

    <p>
        {{ if participant.det }}
            This and the next stage consist of five decisions each.
        {{ else }}
            This stage consists of five decisions.
        {{ endif }}
        In each decision, there are two parts.
        Only one of these decisions may count towards your bonus.
     </p>
    <p>
        <strong>First, you will go through part 1 for all five decisions in Stage 1{{ if participant.det }} and all five
        decisions in Stage 2{{ endif }}.
        Then, we will randomly select one of them and ask you to complete part 2 for that decision.</strong>
        When going through part 1 for each decision, remember that it may be randomly selected to determine your payoff.
     </p>
    <br>
        {{ if participant.det }}
            <img class="center" src="{{ static 'intro/chart_det.png' }}"/>
        {{ else }}
            <img class="center" src="{{ static 'intro/chart.png' }}"/>
        {{ endif }}
    <br>
    <p>
        When you are ready, continue to begin stage 1.
    </p>
    <button style="float: right" class="btn btn-primary btn-large">Begin Stage 1</button>


{% endblock %}



{% block styles %}
<style>
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
</style>
{% endblock %}

{% block scripts %}
<script>
$("#DecisionButton").click(function () {
    $("#DecisionButton").css("display", "none");
    $("#clickD").css("display", "none");
});
$("#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 %}