{{ block content }}

<h4>Part I - Quiz - Question {{ player.quiz_counter }} </h4>
    <p>  </p> <p>  </p>

    <div style="width: 50%; height:600px; float: left; border-width:1.5px;border-style:solid;margin-top:20px;font-size:15px;padding:15px;border-radius:5px;background-color: aliceblue">
        <h6>Instructions</h6>
        <p>
            A set is shown on the right.
            This question is based on Section 3 in the Instructions on understanding a plan-of-action.
        </p>

        <p>
            <span style="font-weight: 550">Question {{ player.quiz_counter }}:</span> Using the plan-of-action provided below, choose the correct action for the {{ if player.quiz_counter == 3 }}first{{ endif }} {{ if player.quiz_counter == 5 }}first{{ endif }} {{ if player.quiz_counter == 4 }}next{{ endif }} {{ if player.quiz_counter == 6 }}next{{ endif }} game (ignore the chance of random error in this question). You can either click the buttons provided, or use the keys <span style="font-family: 'Courier New'; letter-spacing: 3px; font-size:16px; font-weight: bold">A</span> and <span style="font-family: 'Courier New'; letter-spacing: 3px; font-size:16px; font-weight: bold">B</span> to make your choice.
            <p>  </p> <p>  </p>
        </p>

        <p>
        <span style="font-weight: 550">Plan-of-action:</span> {{ description }}
        </p>

        <span style="font-weight: 550">Instruction diagram:</span>
        <p> </p> <p> </p>
        <div>
            <img src="{{ static image }}" width="423" height="235"/>
        </div>
    </div>

    <div style="width: 50%; height:600px; float: right; margin-top:60px;font-size:15px;padding:15px;border-radius:15px;">
        {## DIV SECTION 1 - Initial "choose" instruction#}
        <div style="height: 60px">
            <div id="initialChoice", style="display: block; height:60px">
                <p>
                    {{ if player.quiz_counter == 3 }} This is the start of the set. Please choose your first action. {{ endif }}
                    {{ if player.quiz_counter == 4 }} The number of games that have been played is 1. Please choose your next action. {{ endif }}
                    {{ if player.quiz_counter == 5 }} This is the start of the set. Please choose your first action. {{ endif }}
                    {{ if player.quiz_counter == 6 }} The number of games that have been played is 1. Please choose your next action. {{ endif }}
                </p>
            </div>
        </div>

        {## DIV SECTION 2 - Histories #}
        <div style="height:150px">
            <table class = "table">
                <tr>
                    <th style="width: 95px">Player</th>
                    <th>History</th>
                </tr>
                <tr>
                    <td>Me</td>
                    <td>
                        <i><span id="default_player">
                            {{ if player.quiz_counter == 3 }}No action has been chosen yet{{ endif }}
                            {{ if player.quiz_counter == 4 }}{{ endif }}
                            {{ if player.quiz_counter == 5 }}No action has been chosen yet{{ endif }}
                            {{ if player.quiz_counter == 6 }}{{ endif }}
                        </span></i>
                        <span id="history_player" style="font-family: 'Courier New'; letter-spacing: 3px; font-size:18px; color: blue; font-weight: bold">
                            {{ if player.quiz_counter == 3 }}{{ endif }}
                            {{ if player.quiz_counter == 4 }}A{{ endif }}
                            {{ if player.quiz_counter == 5 }}{{ endif }}
                            {{ if player.quiz_counter == 6 }}A{{ endif }}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>Counterpart</td>
                    <td><i><span id="default_opponent">
                        {{ if player.quiz_counter == 3 }}No action has been chosen yet{{ endif }}
                        {{ if player.quiz_counter == 4 }}{{ endif }}
                        {{ if player.quiz_counter == 5 }}No action has been chosen yet{{ endif }}
                        {{ if player.quiz_counter == 6 }}{{ endif }}
                    </span></i>
                        <span id="history_opponent" style="font-family: 'Courier New'; letter-spacing: 3px; font-size:18px; color: red; font-weight: bold">
                            {{ if player.quiz_counter == 3 }}{{ endif }}
                            {{ if player.quiz_counter == 4 }}B{{ endif }}
                            {{ if player.quiz_counter == 5 }}{{ endif }}
                            {{ if player.quiz_counter == 6 }}A{{ endif }}
                        </span></td>
                </tr>
            </table>
        </div>

        <div id = "pleaseChoose", style="display: block; height: 50px">
            <label>Please decide:
                <button type="button" onclick="cooperate()">
                    A
                </button>
                <button type="button" onclick="defect()">
                    B
                </button>
            </label>
        </div>


        {## DIV SECTION 4 - space for error messages #}
        <div style="height: 60px">
            <b><span id="correctQ1" style="display: none; color: green">Correct</span></b>
            <b><span id="wrongQ1" style="display: none; color: lightcoral"></span></b>
        </div>

        <div id = "gameEnd", style="display: none; height: 80px">
            <h6>Please click 'Next' when you are ready to proceed. </h6>
            <p> </p>
            {{ next_button }}
        </div>
    </div>

<script>

    function cooperate() {
        liveSend({'coop': true});
    }

    function defect() {
        liveSend({'coop': false});
    }

    addEventListener("keydown", function (event) {
        if (event.key === "a") {
            cooperate();
        }
    });

    addEventListener("keydown", function (event) {
        if (event.key === "b") {
            defect();
        }
    });

    function liveRecv(data){
        if (data.answer) {
            default_player.style.display = 'none'
            default_opponent.style.display = 'none'
            history_player.innerText = data.history_player
            history_opponent.innerText = data.history_opponent
            gameEnd.style.display = 'block'
            pleaseChoose.style.display = 'none'
            correctQ1.style.display = 'block'
            wrongQ1.style.display = 'none'
        } else {
            wrongQ1.style.display = 'block'
            wrongQ1.innerText = data.error_message
            correctQ1.style.display = 'none'
        }

    }

</script>

<div style="height: 650px"> </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 }}