<style>
#myProgress {
    width:100%;
    background-color:#ddd;
}

#myBar {
    width:100%;
    height:30px;
    background-color:#4CAF50;
}
header{
    text-align: center;
}
div{
    width: 100%;
    height:70%;
}
div.left{
    width:50%;
    float:left;
    box-sizing: border-box;


}
div.right{
    align-items: end;
    width:50%;
    float:right;
    box-sizing: border-box;

}
</style>

        <header><h1>이것은 무엇일까요?</h1><br>
            <h2>
            <script>
            var roundnum = {{ quiz.id }};
            document.write(roundnum);
            </script>
            / 5
            </h2>
        <br>

        </header>


        <nav id="myProgress">
        <nav id="myBar"></nav>
        </nav>

        <nav id="digit"></nav>
        <h5>정답 : {{ quiz.quiz_answer }}</h5>
        <hr>
        <div>
        <div class = "left">
            <aside>
                <button id="btn1" onclick="btn_clk(1)"  >{{ quiz.quiz_Alist1 }}</button><br><br><br><br><br><br>
                <button id="btn2" onclick="btn_clk(2)"  >{{ quiz.quiz_Alist2 }}</button><br><br><br><br><br><br>
                <button id="btn3" onclick="btn_clk(3)"  >{{ quiz.quiz_Alist3 }}</button><br><br><br><br><br><br>
                <button id="btn4" onclick="btn_clk(4)"  >{{ quiz.quiz_Alist4 }}</button><br><br><br><br><br><br>
            </aside>
        </div>
            <div class = "right">
                <img src='{{ quiz.opencv_image.url }}' height="100%" width="100%">
            </div>
        </div>

<script>
    var ans = 0;
    function btn_clk(num){
        ans += num;
    }
</script>


{#타이머 기능#}
<script>
    var i = 110;
    function start() {
        if (i == 110)
        {
            i = 110;
            var digit = document.getElementById("digit");
            var elem = document.getElementById("myBar");
            var width = 110;
            var id = setInterval(frame, {{ limit_time.room_round_limit_time }} * 100);
            function frame() {
                if (width <= 0) {
                    clearInterval(id);
                    i=14;
                    digit.innerHTML = width + "초";

                    if(ans == 1){
                        document.getElementById('ans-1').submit();
                    }else if (ans == 2){
                        document.getElementById('ans-2').submit();
                    }else if (ans == 3){
                        document.getElementById('ans-3').submit();
                    }else if (ans == 4){
                        document.getElementById('ans-4').submit();
                    }else{
                        document.getElementById('time-out').submit();
                    }


                } else {
                    {#digit.innerHTML = parseInt(timer/10-1) + "초";#}
                    {#timer-={{ limit_time.room_round_limit_time }};#}

                    width-=10;
                    elem.style.width = width + "%";

                }
            }
        }
    }
    start()
</script>




{#답을 1로 골랐을 때 값#}
<form id="ans-1" method="POST" action="{% url 'success' %}">
    {% csrf_token %}
    <input type="hidden" name="round" value="{{ quiz.id }}">
    <input type="hidden" name="U_ans" value="1">
</form>

{#답을 2로 골랐을 때  값#}
<form id="ans-2" method="POST" action="{% url 'success' %}">
    {% csrf_token %}
    <input type="hidden" name="round" value="{{ quiz.id }}">
    <input type="hidden" name="U_ans" value="2">
</form>

{#답을 3로 골랐을 때 값#}
<form id="ans-3" method="POST" action="{% url 'success' %}">
    {% csrf_token %}
    <input type="hidden" name="round" value="{{ quiz.id }}">
    <input type="hidden" name="U_ans" value="3">
</form>

{#답을 4로 골랐을 때  값#}
<form id="ans-4" method="POST" action="{% url 'success' %}">
    {% csrf_token %}
    <input type="hidden" name="round" value="{{ quiz.id }}">
    <input type="hidden" name="U_ans" value="4">
</form>

{#타임 아웃 시 보내는 값#}
<form id="time-out" method="POST" action="{% url 'success' %}">
    {% csrf_token %}
    <input type="hidden" name="round" value="{{ quiz.id }}">
    <input type="hidden" name="U_ans" value="0">
</form>



