{{ block content }}

<h4>Part I - Quiz - Questions 1 & 2 </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.
            Two games have already been played.
        </p>
        <p>
            The history of the set as shown is read from left to right.
            The first game outcome was <span style="font-family: 'Courier New'; font-size: 18px; color: blue; font-weight: 700">A</span><span style="font-family: 'Courier New'; font-size: 18px; color: red; font-weight: 700">A</span>,
            and the second game outcome was <span style="font-family: 'Courier New'; font-size: 18px; color: blue; font-weight: 700">A</span><span style="font-family: 'Courier New'; font-size: 18px; color: red; font-weight: 700">B</span>.
        </p>

        <p>
            Referring to the game payoff table on the points received for each game outcome, please answer the following:
        </p>

        <p>  </p> <p>  </p>
        <div style="height: 160px">
            <span style="font-weight: 550">Question 1: How many points did you receive from the outcome of game 1?</span>
            <p>  </p> <p>  </p>

            <div id="Question_1_input">
                <input type="number" id="answerQ1">
                <button type="button" onclick="question1()" id="btn-offer">Submit answer</button>
            </div>

            <div id="Question1_show", style="display: none">
                <span id="correctQ1" style="display: none; color: green; font-weight: 550">Correct</span>
                <span id="wrongQ1" style="display: none; color: red; font-weight: 550">Incorrect - the outcome of the first game was <span style="font-family: 'Courier New'; font-size: 18px; color: blue; font-weight: 700">A</span><span style="font-family: 'Courier New'; font-size: 18px; color: red; font-weight: 700">A</span>. Please refer the example for the points received if a game outcome was <span style="font-family: 'Courier New'; font-size: 18px; color: blue; font-weight: 700">A</span><span style="font-family: 'Courier New'; font-size: 18px; color: red; font-weight: 700">A</span> and try again.</span>
            </div>
        </div>

        <br>
        <div style="height: 160px">
            <span style="font-weight: 550">Question 2: How many points did you receive from the outcome of game 2?</span>
            <p>  </p> <p>  </p>

            <div id="Question_2_input">
                <input type="number" id="answerQ2">
                <button type="button" onclick="question2()" id="btn-offer">Submit answer</button>
            </div>

            <div id="Question2_show", style="display: none">
                <span id="correctQ2" style="display: none; color: green; font-weight: 550">Correct</span>
                <span id="wrongQ2" style="display: none; color: red; font-weight: 550">Incorrect - the outcome of the second game was <span style="font-family: 'Courier New'; font-size: 18px; color: blue; font-weight: 700">A</span><span style="font-family: 'Courier New'; font-size: 18px; color: red; font-weight: 700">B</span>. Please refer the example for the points received if a game outcome was <span style="font-family: 'Courier New'; font-size: 18px; color: blue; font-weight: 700">A</span><span style="font-family: 'Courier New'; font-size: 18px; color: red; font-weight: 700">B</span> and try again.</span>
            </div>
        </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>
                    This is the interface you will see during the experiment for a set.
                    The number of games that have been played is 2.
                </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 id="history_player", style="font-family:'Courier New'; font-size:18px; color:blue; letter-spacing: 5px"> <b>AA</b>  </td>
                </tr>
                <tr>
                    <td>Counterpart</td>
                    <td id="history_opponent", style="font-family:'Courier New'; font-size:18px; color:red; letter-spacing: 5px"> <b>AB</b> </td>
                </tr>
            </table>
        </div>



        {## DIV SECTION 4 - space for error messages #}
        <div id="errorFalse", style="display: block; height:60px">
        </div>

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

<script>

    function question1() {
        liveSend({'question': 'question1', 'answer': answerQ1.value})
        answerQ1.value = '';
    }

    function question2() {
        liveSend({'question': 'question2', 'answer': answerQ2.value})
        answerQ2.value = '';
    }

    function liveRecv(data){
        if (data.answerQ1) {
            correctQ1.style.display = 'block'
            wrongQ1.style.display = 'none'
            Question_1_input.style.display = 'none'
        } else {
            wrongQ1.style.display = 'block'
            correctQ1.style.display = 'none'
        }

        if (data.answerQ2) {
            correctQ2.style.display = 'block'
            wrongQ2.style.display = 'none'
            Question_2_input.style.display = 'none'
        } else {
            wrongQ2.style.display = 'block'
            correctQ2.style.display = 'none'
        }

        if (data.showQ1) {
            Question1_show.style.display = 'block'
        }

        if (data.showQ2) {
            Question2_show.style.display = 'block'
        }

        if (data.gameEnd) {
            gameEnd.style.display = 'block'
        }

    }

</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 }}