{{ 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:220px; float:left; border:3px double; padding: 5px; margin-bottom: 20px;">
    <p>
        在這個遊戲中，你需要在 0 到 10 之間選擇一個整數。
        同時，電腦會從一個數據庫中抽出一個整數，這個數據庫是由以前的實驗參與者的選擇組成的。
        目標數值是你選的數和電腦抽出的數的平均值乘以 0.9。
        選擇最接近目標數值的人贏得遊戲。
        如果你贏得遊戲，你將獲得 10 法幣。
    </p>
    <p>
        另外，在每一回合結束後，如果你在之前的回合還沒有鎖定任何整數，你可以選擇對你剛剛選擇的整數進行鎖定。
        鎖定一個數字後，在接下來的幾回合的遊戲中，你不能再選擇任何其他整數。
        而作為回報，你將在鎖定後的所有回合中獲得額外的 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. 電腦從 0 到 10 隨機抽出一個整數。</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>
            此遊戲中， 如果你選擇  <span style="color: blue;font-weight:bold;font-size: 18px"> X </span>  且電腦抽出的數為 <span style="color: green;font-weight:bold;font-size: 18px"> Y </span>，目標數值應當如何計算?
        </p>

    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_two" value="1" id="1">
            <label style="font-size: 18px;">A. X+Y </label></div>
        <div><input type="radio" name="quiz_two" value="2" id="2">
            <label style="font-size: 18px;">B. (X+Y)/3 </label></div>
        <div><input type="radio" name="quiz_two" value="3" id="3">
            <label style="font-size: 18px;">C. X/Y </label></div>
        <div><input type="radio" name="quiz_two" value="4" id="4">
            <label style="font-size: 18px;">D. 0.9 * (X+Y)/2 </label></div>
        {{ formfield_errors 'quiz_two' }}
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-header">
        <p>
            題 3:<br>
            正式回合共有10個回合，如果你其中的 9 個回合都採取鎖定，並且這 10 回合當中你贏得5個回合，其它 5 個回合則由電腦取勝，沒有平手的狀況發生，請問你在這 10 個回合的總報酬應為下列哪個選項?
        </p>

    </div>
    <div class="card-body">
        <div><input type="radio" name="quiz_three" value="1" id="1">
            <label style="font-size: 18px;">A. 59 </label></div>
        <div><input type="radio" name="quiz_three" value="2" id="2">
            <label style="font-size: 18px;">B. 50 </label></div>
        <div><input type="radio" name="quiz_three" value="3" id="3">
            <label style="font-size: 18px;">C. 25 </label></div>
        <div><input type="radio" name="quiz_three" value="4" id="4">
            <label style="font-size: 18px;">D. 11 </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 }}