{{ block title }}
    Quiz
{{ endblock }}


{{ block content }}
<p> <span style="color: red;" id="demo"></span></p>

<link rel="stylesheet" href="{{ static 'CSS/Quizstyle.css' }}">

<p>
    We need to ask you some questions to ensure you understand the rule.<br>
    <span style="color: red;font-weight:bold; font-size: 24px"> You need to answer them correctly to proceed. </span>
</p>

<a href="javascript:" class="rule" onclick="document.all.fullContent.style.display=(document.all.fullContent.style.display=='none')?'':'none';document.all.smallContent.style.display=(document.all.smallContent.style.display=='none')?'':'none'">
    <span style="font-size: 18px">The rule</span></a>

<div class="block" id="fullContent" style="display:none;">
    <div id="voting" style="width:100%;height:150px; float:left; border:3px double; padding: 5px; margin-bottom: 20px;">
    <p>
        In this game, there will be rows of balls on the game board. 
        You and a cumputer that always acts optimally take turns removing balls from the board.
        In each turn, the turn player picks a row and takes at least one ball from the row.
        The one who takes the last ball on the board wins the game.
    </p>
    <p>
        If you win, you get 10 game points.
    </p>
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            Question 1:
        </p>
        <img src="{{ static 'nim_q1.png' }}" width="500" class="center"/>
        <p style="margin-top: 10px">
            Suppose above is the game board and this is now your turn. You can
        </p>
        
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_one" value="1" id="1">
            <label style="font-size: 18px;">A. take one ball from Row 3 and two balls from Row 4 at the same time.</label></div>
        <div><input type="radio" name="quiz_one" value="2" id="2">
            <label style="font-size: 18px;">B. skip this turn and take no balls.</label></div>
        <div><input type="radio" name="quiz_one" value="3" id="3">
            <label style="font-size: 18px;">C. take two balls from Row 2.</label></div>
        <div><input type="radio" name="quiz_one" value="4" id="4">
            <label style="font-size: 18px;">D. take three balls from Row 2.</label></div>
        {{ formfield_errors 'quiz_one' }}
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            Question 2:
        </p>
        <img src="{{ static 'nim_q2.png' }}" width="500" class="center"/>
        <p style="margin-top: 10px">
            Suppose above is the game board and this is now your turn.<br>
            Which of the following move will let you win the game?
        </p>
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_two" value="1" id="1">
            <label style="font-size: 18px;">A. Take one ball from Row 2.</label></div>
        <div><input type="radio" name="quiz_two" value="2" id="2">
            <label style="font-size: 18px;">B. Take two balls from Row 2.</label></div>
        <div><input type="radio" name="quiz_two" value="3" id="3">
            <label style="font-size: 18px;">C. Take three balls from Row 2.</label></div>
        <div><input type="radio" name="quiz_two" value="4" id="4">
            <label style="font-size: 18px;">D. You have no chance to win.</label></div>
        {{ formfield_errors 'quiz_two' }}
    </div>
</div>

    {{ next_button }}

<script type="text/javascript">

    window.onbeforeunload = function(e){
        document.getElementById("demo").innerHTML = "You will lose your payment if you close or unload the browser during experiment.";
        return 'Are you sure you want to leave?';
        };

        $('form').submit(function () {
        window.onbeforeunload = null;
        });
</script>


{{ endblock }}