{% extends 'base.html' %}
{% load static %}
{% block tittle %}随机题目{% endblock tittle %}
{% block body %}
<section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen"style="background-image: url('{% static 'images/backgrounds/img-1.jpg' %}')">
    <span class="mask bg-primary alpha-7"></span>
    <div class="spotlight-holder py-lg pt-lg-xl" style="height: auto;">
        <div class="container">
            <div class="col">
                <div class="row cols-xs-space text-center text-md-left justify-content-center">
                    <div class="col-lg-10">
                        <div class="text-left mt-1">
                            <img src="{% static 'images/brand/icon.png' %}" style="width: 60px;" class="img-fluid animated" data-animation-in="jackInTheBox" data-animation-delay="1000">
                            <h2 class="heading display-5 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                                答题
                            </h2>
                            {% if question %}
                                <h4 class="heading display-6 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                                    题目：
                                </h4>
                                <div class="card">
                                    <div class="card-header">你的得分：{{ user.score }}</div>
                                    <div class="card-body">
                                        <p>{{ question.question_text }}</p>
                                        {% if question.image %}
                                            <img style="width: 400px" src="{{ question.image.url }}">
                                        {% endif %}
                                        <form id="questionForm" onsubmit="event.preventDefault(); submitForm();">
                                            {% csrf_token %}
                                            <input type="hidden" name="questionID" value="{{ question.uid }}">
                                            <div class="custom-control custom-radio mb-4">
                                                <input type="radio" name="answer" class="custom-control-input" id="A" value="A" checked>
                                                <label class="custom-control-label" for="A">A:{{ question.choice_a }}</label>
                                            </div>
                                            <div class="custom-control custom-radio mb-4">
                                                <input type="radio" name="answer" class="custom-control-input" id="B" value="B">
                                                <label class="custom-control-label" for="B">B:{{ question.choice_b }}</label>
                                            </div>
                                            <div class="custom-control custom-radio mb-4">
                                                <input type="radio" name="answer" class="custom-control-input" id="C" value="C">
                                                <label class="custom-control-label" for="C">C:{{ question.choice_c }}</label>
                                            </div>
                                            <div class="custom-control custom-radio mb-4">
                                                <input type="radio" name="answer" class="custom-control-input" id="D" value="D">
                                                <label class="custom-control-label" for="D">D:{{ question.choice_d }}</label>
                                            </div>
                                            <div class="input-group mb-4">
                                                <button type="submit" class="btn btn-block btn-primary">提交答案</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            {% else %}
                                 <p style="color: white">没有提穆啦</p>
                                <h3>你的分数是：{{ user.score }}</h3>
                                <ul class="nav nav-pills nav-fill mb-3" id="tabs_2" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link" id="home-tab" data-toggle="tab" href="{% url 'exam:history' %}" role="tab" aria-controls="home" aria-selected="true">
                                            <span class="nav-link-icon d-block"><svg class="svg-inline--fa fa-w-18 fa-2x" aria-hidden="true" data-prefix="fab" data-icon="connectdevelop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M550.5 241l-50.089-86.786c1.071-2.142 1.875-4.553 1.875-7.232 0-8.036-6.696-14.733-14.732-15.001l-55.447-95.893c.536-1.607 1.071-3.214 1.071-4.821 0-8.571-6.964-15.268-15.268-15.268-4.821 0-8.839 2.143-11.786 5.625H299.518C296.839 18.143 292.821 16 288 16s-8.839 2.143-11.518 5.625H170.411C167.464 18.143 163.447 16 158.625 16c-8.303 0-15.268 6.696-15.268 15.268 0 1.607.536 3.482 1.072 4.821l-55.983 97.233c-5.356 2.41-9.107 7.5-9.107 13.661 0 .535.268 1.071.268 1.607l-53.304 92.143c-7.232 1.339-12.59 7.5-12.59 15 0 7.232 5.089 13.393 12.054 15l55.179 95.358c-.536 1.607-.804 2.946-.804 4.821 0 7.232 5.089 13.393 12.054 14.732l51.697 89.732c-.536 1.607-1.071 3.482-1.071 5.357 0 8.571 6.964 15.268 15.268 15.268 4.821 0 8.839-2.143 11.518-5.357h106.875C279.161 493.857 283.447 496 288 496s8.839-2.143 11.518-5.357h107.143c2.678 2.946 6.696 4.821 10.982 4.821 8.571 0 15.268-6.964 15.268-15.268 0-1.607-.267-2.946-.803-4.285l51.697-90.268c6.964-1.339 12.054-7.5 12.054-14.732 0-1.607-.268-3.214-.804-4.821l54.911-95.358c6.964-1.339 12.322-7.5 12.322-15-.002-7.232-5.092-13.393-11.788-14.732zM153.535 450.732l-43.66-75.803h43.66v75.803zm0-83.839h-43.66c-.268-1.071-.804-2.142-1.339-3.214l44.999-47.41v50.624zm0-62.411l-50.357 53.304c-1.339-.536-2.679-1.34-4.018-1.607L43.447 259.75c.535-1.339.535-2.679.535-4.018s0-2.41-.268-3.482l51.965-90c2.679-.268 5.357-1.072 7.768-2.679l50.089 51.965v92.946zm0-102.322l-45.803-47.41c1.339-2.143 2.143-4.821 2.143-7.767 0-.268-.268-.804-.268-1.072l43.928-15.804v72.053zm0-80.625l-43.66 15.804 43.66-75.536v59.732zm326.519 39.108l.804 1.339L445.5 329.125l-63.75-67.232 98.036-101.518.268.268zM291.75 355.107l11.518 11.786H280.5l11.25-11.786zm-.268-11.25l-83.303-85.446 79.553-84.375 83.036 87.589-79.286 82.232zm5.357 5.893l79.286-82.232 67.5 71.25-5.892 28.125H313.714l-16.875-17.143zM410.411 44.393c1.071.536 2.142 1.072 3.482 1.34l57.857 100.714v.536c0 2.946.803 5.624 2.143 7.767L376.393 256l-83.035-87.589L410.411 44.393zm-9.107-2.143L287.732 162.518l-57.054-60.268 166.339-60h4.287zm-123.483 0c2.678 2.678 6.16 4.285 10.179 4.285s7.5-1.607 10.179-4.285h75L224.786 95.821 173.893 42.25h103.928zm-116.249 5.625l1.071-2.142a33.834 33.834 0 0 0 2.679-.804l51.161 53.84-54.911 19.821V47.875zm0 79.286l60.803-21.964 59.732 63.214-79.553 84.107-40.982-42.053v-83.304zm0 92.678L198 257.607l-36.428 38.304v-76.072zm0 87.858l42.053-44.464 82.768 85.982-17.143 17.678H161.572v-59.196zm6.964 162.053c-1.607-1.607-3.482-2.678-5.893-3.482l-1.071-1.607v-89.732h99.91l-91.607 94.821h-1.339zm129.911 0c-2.679-2.41-6.428-4.285-10.447-4.285s-7.767 1.875-10.447 4.285h-96.429l91.607-94.821h38.304l91.607 94.821H298.447zm120-11.786l-4.286 7.5c-1.339.268-2.41.803-3.482 1.339l-89.196-91.875h114.376l-17.412 83.036zm12.856-22.232l12.858-60.803h21.964l-34.822 60.803zm34.822-68.839h-20.357l4.553-21.16 17.143 18.214c-.535.803-1.071 1.874-1.339 2.946zm66.161-107.411l-55.447 96.697c-1.339.535-2.679 1.071-4.018 1.874l-20.625-21.964 34.554-163.928 45.803 79.286c-.267 1.339-.803 2.678-.803 4.285 0 1.339.268 2.411.536 3.75z"></path></svg><!-- <i class="fab fa-connectdevelop fa-2x"></i> --></span>
                                            <span class="d-none d-sm-block mt-3">历史记录</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="{% url 'exam:create' %}" role="tab" aria-controls="profile" aria-selected="false">
                                            <span class="nav-link-icon d-block"><svg class="svg-inline--fa fa-code fa-w-20 fa-2x" aria-hidden="true" data-prefix="fas" data-icon="code" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"></path></svg><!-- <i class="fas fa-code fa-2x"></i> --></span>
                                            <span class="d-none d-sm-block mt-3">贡献题目</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="https://www.bilibili.com/" role="tab" aria-controls="contact" aria-selected="false">
                                            <span class="nav-link-icon d-block"><svg class="svg-inline--fa fa-node-js fa-w-14 fa-2x" data-prefix="fab" data-icon="node-js" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path d="M3.73252 2.67094C3.33229 2.28484 3.33229 1.64373 3.73252 1.25764C4.11291 0.890684 4.71552 0.890684 5.09591 1.25764L7.21723 3.30403C7.27749 3.36218 7.32869 3.4261 7.37081 3.49407H10.5789C10.6211 3.4261 10.6723 3.36218 10.7325 3.30403L12.8538 1.25764C13.2342 0.890684 13.8368 0.890684 14.2172 1.25764C14.6175 1.64373 14.6175 2.28484 14.2172 2.67094L13.364 3.49407H14C16.2091 3.49407 18 5.28493 18 7.49407V12.9996C18 15.2087 16.2091 16.9996 14 16.9996H4C1.79086 16.9996 0 15.2087 0 12.9996V7.49406C0 5.28492 1.79086 3.49407 4 3.49407H4.58579L3.73252 2.67094ZM4 5.42343C2.89543 5.42343 2 6.31886 2 7.42343V13.0702C2 14.1748 2.89543 15.0702 4 15.0702H14C15.1046 15.0702 16 14.1748 16 13.0702V7.42343C16 6.31886 15.1046 5.42343 14 5.42343H4ZM5 9.31747C5 8.76519 5.44772 8.31747 6 8.31747C6.55228 8.31747 7 8.76519 7 9.31747V10.2115C7 10.7638 6.55228 11.2115 6 11.2115C5.44772 11.2115 5 10.7638 5 10.2115V9.31747ZM12 8.31747C11.4477 8.31747 11 8.76519 11 9.31747V10.2115C11 10.7638 11.4477 11.2115 12 11.2115C12.5523 11.2115 13 10.7638 13 10.2115V9.31747C13 8.76519 12.5523 8.31747 12 8.31747Z" fill="currentColor"></path></svg><!-- <i class="fab fa-node-js fa-2x"></i> --></span>
                                            <span class="d-none d-sm-block mt-3">前往学习</span>
                                        </a>
                                    </li>
                                </ul>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock body %}

{% block script %}
        <script>
        function submitForm() {
            var formData = new FormData($('#questionForm')[0]);
            $.ajax({
                url: "{% url 'exam:answer' %}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.code === 200) {
                        console.log(response.message);
                        console.log(response.data["correction"]);
                        console.log(response.data["answer"]);
                        var element = document.getElementById(response.data['answer']);
                        if(response.data["correction"]){
                            element.classList.add('is-valid');
                        }else{
                            element.classList.add('is-invalid');
                        }
                        setTimeout(() => {
                            window.location.reload();
                        }, 2500);
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert("表单错误！");
                }
            });
        }

        function displayErrors(errors) {
            $('#errorMessage').html('');
            for (let key in errors) {
                if (errors.hasOwnProperty(key)) {
                    let message = errors[key];
                    $('#errorMessage').append('<p>' + message + '</p>');
                }
            }
            $('#errorMessage').show();
        }
    </script>
{% endblock script %}