{{ block content }}

<h4>Part I - Quiz - Results </h4>
    <p>  </p> <p>  </p>

    <div style="height: 600px">
        <h6>Results</h6>
        <p>That is the end of the quiz.
            From 6 questions, you made
            <u style="font-weight: 550">
            {{ if player.count_mistakes == 1 }} {{ player.count_mistakes }} mistake.{{ endif }}
            {{ if not player.count_mistakes == 1 }} {{ player.count_mistakes }} mistakes.{{ endif }}
            </u> This means

            <u style="font-weight: 550">
            {{ if player.count_mistakes == 0 }}$5{{ endif }}
            {{ if player.count_mistakes == 1 }}$5{{ endif }}
            {{ if player.count_mistakes == 2 }}$4{{ endif }}
            {{ if player.count_mistakes == 3 }}$3{{ endif }}
            {{ if player.count_mistakes == 4 }}$2{{ endif }}
            {{ if player.count_mistakes == 5 }}$1{{ endif }}
            {{ if player.count_mistakes >= 6 }} no additional payment{{ endif }}</u>
            will be added to your total earnings.
        </p>

        <h6>End of Part I</h6>
        <p>
            This is the end of <span style="font-weight: 550">Part I</span>.
            <span style="font-weight: 550">Part II</span> will provide 3 shortened practice rounds of the experiment task. This will be followed by 6 full rounds in <span style="font-weight: 550">Part III</span>.
        </p>

        <p>
            Please wait until each participant has finished the quiz, before we start <span style="font-weight: 550">Part II</span>.
        </p>

        {{ if player.self_directed }}
        <p>
            <i>self-directed version is on</i>
        </p>
        {{ next_button }}
        {{ endif }}
    </div>

    <div>
      {{ include Constants.PAYOFF_TABLE }}
    </div>

    <button type="button" class="collapsible">Instructions Page</button>
    <div class="content">
      {{ include Constants.INSTRUCTIONS_TEMPLATE }}
    </div>

<style>
    .collapsible {
        background-color: lightgray;
        color: black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
        font-weight: 550;
    }

    .active, .collapsible:hover {
      background-color: grey;
    }

    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }
</style>

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
</script>


{{ endblock }}