{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% load i18n %}
{% block title %}
问题测试
{% endblock %}

{{ block content }}

<!--<div id="timer" style="display:none">倒计时</div>-->

<div class="wrapper">
<p>为确保你对实验说明的理解无误，请先完成以下测试，完成测试后进入实验决策。</p>
<p>
    测试问题：
</p>


<div align="center">
    <img height="70%" src="{{ static 'intro4.jpg' }}" width="70%"/>
</div>

<br>


<br><p>在以上决策表中，如果某参与者的选择如图所示，最终其被抽中该表第5行的概率和被抽中该表第15行的概率：
    <br>
    <label for="id_q31_0"><input type="radio" name="q31" value="1"
                                 id="id_q31_0"
                                 required
    />&nbsp&nbsp两行被抽中的概率一样大</label>
    <br>
    <label for="id_q31_1"><input type="radio" name="q31" value="0"
                                 id="id_q31_1"
                                 required
    />&nbsp&nbsp第5行被抽中的概率更大</label>
    <br>
    <label for="id_q31_2"><input type="radio" name="q31" value="0"
                                 id="id_q31_2"
                                 required
    />&nbsp&nbsp第15行被抽中的概率更大</label>
    <br>
    <label for="id_q31_3"><input type="radio" name="q31" value="0"
                                 id="id_q31_3"
                                 required
    />&nbsp&nbsp两行都不会被抽中</label>
</p>

<p>如果最终该参与者被抽中该表第18行，其有
    <br>
    <label for="id_q32_0"><input type="radio" name="q32" value="0"
                                 id="id_q32_0"
                                 required
    />&nbsp&nbsp1/3的机会获得60个实验币，2/3的机会获得100个实验币</label>
    <br>
    <label for="id_q32_1"><input type="radio" name="q32" value="1"
                                 id="id_q32_1"
                                 required
    />&nbsp&nbsp1/3的机会获得50个实验币，2/3的机会获得117个实验币</label>

</p>




<script>

    function feedback_flash() {
        document.getElementById('feedback').style.backgroundColor = "LAVENDER";
        setTimeout(function () {
            document.getElementById('feedback').style.backgroundColor = "white"
        }, 200);
    }

    function check() {


        var ans31 = (document.getElementById('id_q31_0').checked);
        var ans32 = (document.getElementById('id_q32_1').checked);
        var error_message = "";


        if (
            ans31 == true &
            ans32 == true) {
            right_message = "选择正确，请点击下一页进入决策";
            document.getElementById("feedback").innerHTML = right_message;
            feedback_flash();

            document.getElementById("id_check_btn").style.visibility = "hidden";
            document.getElementById("id_fake_next").style.display = "none";
            document.getElementById("id_next").style.display = "block";
        } else {
            error_message = "选择错误，请再次选择";
            document.getElementById("feedback").innerHTML = error_message;
            feedback_flash();
        }

    }

</script>

<H2 >&nbsp<input type="button"  id="id_check_btn" class="btn btn-primary btn-large" value="确定" onClick="check()"></H2>

<H2 id="feedback">&nbsp</H2>


{#  {% next_button %}#}

<br>
<br>

<button class="btn btn-primary form-control" id="id_next" style="display: none">下一页</button>
<button class="btn btn-secondary form-control" id="id_fake_next" style="display: block" type="button"> 下一页</button>
</div>

<!--<script>-->
<!--    counter = {{session.vars.intro_wait_sec }} ;-->
<!--    document.getElementById("timer").innerText = counter;-->

<!--    function real_next(is_real) {-->
<!--        if (is_real) {-->
<!--            let btn_fake_next = document.getElementById("id_fake_next");-->
<!--            btn_fake_next.style.display = "none";-->

<!--            let btn_next = document.getElementById("id_next");-->
<!--            btn_next.style.display = "block";-->
<!--        } else {-->
<!--            let btn_next = document.getElementById("id_next");-->
<!--            btn_next.style.display = "none";-->

<!--            let btn_fake_next = document.getElementById("id_fake_next");-->
<!--            btn_fake_next.style.display = "block";-->
<!--        }-->
<!--    }-->

<!--    function tick() {-->
<!--        counter&#45;&#45;;-->
<!--        document.getElementById("timer").innerText = counter;-->
<!--        if (counter <= 0) {-->
<!--            clearInterval(xid);-->
<!--            real_next(true);-->
<!--        }-->
<!--    }-->

<!--    let xid;-->
<!--    if (counter >= 1) {-->
<!--        xid = setInterval("tick()", 1000);-->
<!--    } else {-->
<!--        real_next(true);-->
<!--    }-->

<!--</script>-->

{{ endblock }}