{{ 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:310px; float:left; border:3px double; padding: 5px; margin-bottom: 20px;">
    <p>
        在這個遊戲中，你可以選擇 {{ Constants.num_doors }} 扇門.
        有一扇門後面是一輛車，其他兩扇門後面是山羊。
        你挑選一扇門作為第一階段的選擇，然後點擊「揭露一扇有山羊的門」。
        接下來，電腦會打開一扇門，這扇門
    </p>
    <p>
        1. <span style="color: red;">不是</span> 你第一階段選擇的門，並且<br>
        2. 打開後門後必定是一隻山羊。
    </p>
    <p>
       之後，你可以決定維持你第一階段選擇的門（不換門），還是換到另一個門（換門）。
        如果你找選中了有車的門，你會獲得 10 法幣。
    </p>
    <p>
        此外，自<span style="color: red;"> 第三回合 </span> 開始，你可以選擇鎖定你所使用的策略（換門或不換門）。
        鎖定後，你必須在接下來的回合中遵循你所鎖定的策略。
        作為回報，你將在鎖定後的所有回合獲得額外的 1 法幣。
    </p>
    </div>
</div>


<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            題1:<br>
            當你點擊「揭露一扇有山羊的門」時，電腦將
        </p>
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_one" value="1" id="1">
            <label style="font-size: 18px;">A. 打開一扇並非你第一階段的選擇，且那扇門背後必定是一隻山羊。</label></div>
        <div><input type="radio" name="quiz_one" value="2" id="2">
            <label style="font-size: 18px;">B. 隨機挑選一扇門打開，不論後面是車或羊。</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. 一定是打開你選擇的那扇門。</label></div>
        {{ formfield_errors 'quiz_one' }}
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            題2:<br>
            在每一回合結束時，你將被問及是否要鎖定某種策略。<br>
            你可以選擇鎖定「不換門」，如果
        </p>
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_two" value="1" id="1">
            <label style="font-size: 18px;">A. 你在該回合沒有選中有車的門。</label></div>
        <div><input type="radio" name="quiz_two" value="2" id="2">
            <label style="font-size: 18px;">B. 你在該回合選中有車的門。</label></div>
        <div><input type="radio" name="quiz_two" value="3" id="3">
            <label style="font-size: 18px;">C. 該回合你第一階段的選擇和最終選擇一致。</label></div>
        <div><input type="radio" name="quiz_two" value="4" id="4">
            <label style="font-size: 18px;">D. 該回合中你第一階段選擇和最終選擇不一致。</label></div>
        {{ formfield_errors 'quiz_two' }}
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            題3:<br>
            若您選擇鎖定「換門」，下列敘述何者正確?
        </p>
    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_three" value="1" id="1">
            <label style="font-size: 18px;">A. 你在下一個回合可以鎖定「不換門」。</label></div>
        <div><input type="radio" name="quiz_three" value="2" id="2">
            <label style="font-size: 18px;">B. 你將於後面的每個回合無外得到1法幣的報酬。</label></div>
        <div><input type="radio" name="quiz_three" value="3" id="3">
            <label style="font-size: 18px;">C. 你接下來的回合可以不換門。</label></div>
        <div><input type="radio" name="quiz_three" value="4" id="4">
            <label style="font-size: 18px;">D. 你只會在你輸的回合獲得額外1法幣報酬。</label></div>
        {{ formfield_errors 'quiz_three' }}
    </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 }}