{{ block title }}
    測驗階段
{{ endblock }}


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

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

<p>
    為了確保您了解規則，請您完成以下測驗。<br>
    <span style="color: red;font-weight:bold; font-size: 24px"> 你必須通過此測驗才能參與本部分的正式回合。 </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">遊戲規則</span></a>

<div class="block" id="fullContent" style="display:none;">
    <div id="voting" style="width:100%;height:170px; float:left; border:3px double; padding: 5px; margin-bottom: 20px;">
    <p>
        每個回合，你會看見一個「目標數字」。
        你和一個總是選擇最佳行動的電腦輪流從 0 開始在當前數字上加 1 或 2。
        在正式回合中，你可能在某些回合中是先手，在另外某些回合中是後手。
        每一回合勝利條件皆相同: 先加到目標數字的人 <span style="color: red;">贏</span>。
    </p>
    <p>
        每個回合，如果你贏了，你可以獲得 10 法幣。
    </p>
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            題1:
        </p>
        <img src="{{ static 'race_game_q1_r4.png' }}" width="500" class="center"/>
        <p style="margin-top: 10px">
            請參照上圖，現在輪到你做決策，<br>
            請問以下敘述何者正確?
        </p>
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_one" value="1" id="1">
            <label style="font-size: 18px;">A. 你可以選擇加 1 以贏得遊戲。</label></div>
        <div><input type="radio" name="quiz_one" value="2" id="2">
            <label style="font-size: 18px;">B. 你可以選擇加 2 以贏得遊戲。</label></div>
        <div><input type="radio" name="quiz_one" value="3" id="3">
            <label style="font-size: 18px;">C. 你可以選擇跳過你的輪次以避免輸掉遊戲。</label></div>
        <div><input type="radio" name="quiz_one" value="4" id="4">
            <label style="font-size: 18px;">D. 前一個輪次是輪到電腦決策，電腦選擇加 1。</label></div>
        {{ formfield_errors 'quiz_one' }}
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            題2:
        </p>
        <img src="{{ static 'race_game_q2_r4.png' }}" width="500" class="center"/>
        <p style="margin-top: 10px">
            請參照上圖，現在輪到電腦做決策，<br>
            請問以下敘述何者正確?
        </p>
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_two" value="1" id="1">
            <label style="font-size: 18px;">A. 前一個輪次是輪到你做決策，你選擇加 1。</label></div>
        <div><input type="radio" name="quiz_two" value="2" id="2">
            <label style="font-size: 18px;">B. 電腦將會選擇加 1 並贏得遊戲。</label></div>
        <div><input type="radio" name="quiz_two" value="3" id="3">
            <label style="font-size: 18px;">C. 電腦可以選擇加 3 贏得遊戲。</label></div>
        <div><input type="radio" name="quiz_two" value="4" id="4">
            <label style="font-size: 18px;">D. 本回合目標數字為20。 </label></div>
        {{ formfield_errors 'quiz_two' }}
    </div>
</div>

    {{ next_button }}

<script type="text/javascript">

    window.onbeforeunload = function(e){
        document.getElementById("demo").innerHTML = "注意，如果你在實驗期間刷新或關閉瀏覽器，你將失去所有報酬。";
        return 'Are you sure you want to leave?';
        };

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


{{ endblock }}