{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
Câu hỏi kiểm tra độ hiểu trò chơi
{% endblock %}

{% block content %}
{% verbatim %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@next"></script>
<div id="app" class="container mt-5">

    <form @submit.prevent="checkAnswers">
        <div class="mb-3 d-flex flex-wrap">
            <span class="mx-3">Ở mỗi lớp</span>
            <select style="max-width:200px" class="form-select" v-model="answers[0]"
                :class="{ 'is-invalid': isInvalid[0] }" required>
                <option disabled value="">chọn một</option>
                <option v-for="option in questions[0].options" :value="option">{{ option }}</option>
            </select>
            <span class="mx-3"> sẽ trả </span>
            <select style="max-width:200px" class="form-select" v-model="answers[1]"
                :class="{ 'is-invalid': isInvalid[1] }" required>
                <option disabled value="">chọn một </option>
                <option v-for="option in questions[1].options" :value="option">{{ option }}</option>
            </select>
            <span class="mx-3"> vòng. </span>
        </div>


        <div class="mb-3" v-for="(question, index) in questions" :key="index">
            <div v-if="index >=2">

                <p class="form-label">{{ question.question }}</p>
                <div v-if="[true, false].includes(question.answer)"
                    :class="{ 'border border-danger p-3': isInvalid[index] }">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" :name="'answer'+index" :id="'true'+index"
                            :value="true" v-model="answers[index]" required>
                        <label class="form-check-label" :for="'true'+index">Đúng</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" :name="'answer'+index" :id="'false'+index"
                            :value="false" v-model="answers[index]" required>
                        <label class="form-check-label" :for="'false'+index">Sai</label>
                    </div>
                </div>
                <div v-else>
                    <input type="number" class="form-control" :id="'answer'+index" v-model="answers[index]"
                        :class="{ 'is-invalid': isInvalid[index] }" required>
                </div>
                <div class="invalid-feedback" v-if="isInvalid[index]">
                    Incorrect answer.
                </div>

            </div>
        </div>
        <button type="button" @click="checkAnswers" class="btn btn-primary">nộp</button>
    </form>
</div>

<script>
    const app = Vue.createApp({
        data() {
            const endowment = js_vars.endowment;
            const negative_questions = js_vars.negative ? [{ question: "Nếu bạn mua nhiều vé hơn, bạn sẽ giữ lượng phần thưởng lớn hơn, nếu được chọn", answer: true },
            { question: "Nếu bạn mua ít vé, bạn sẽ giữ lượng phần thưởng lớn hơn, nếu được chọn",  answer : false },] : []
            const positive_questions = js_vars.negative ? [] : [{ question: "Nếu bạn mua nhiều vé hơn, bạn sẽ giữ lượng phần thưởng lớn hơn, nếu được chọn", answer: false },
            { question: "Nếu bạn mua ít vé, bạn sẽ giữ lượng phần thưởng lớn hơn, nếu được chọn", answer: false },]
            const endowments = Array(5).fill(endowment).map((element, index) => endowment * (index + 1))
            const questions = [
                { question: "Ở mỗi lớp _________ Học sinh sẽ được nhận __________ mỗi vòng.", answer: "Một học sinh", options: ["Một học sinh", "Hai học sinh", 'Ba học sinhs', 'Bốn học sinh', 'Năm học sinh'] },
                { question: "Ở mỗi lớp _________ Học sinh sẽ được nhận __________ mỗi vòng.", answer: "1", options: ["1", "2", "3", "4", '5'] },
                { question: "Tổng số tiền bạn có đầu mỗi vòng là?", answer: endowment, options: [endowments] },
                { question: "Có bao nhiêu vòng chơi tổng cộng?", answer: js_vars.num_rounds },
                { question: "Vé (vé số hoặc bảo hiểm) là miễn phí (bạn sẽ không mất tiền để mua chúng).", answer: false },
                { question: "Giá hiển thị của vé (vé số hoặc bảo hiểm) là khác nhau, và chỉ MỘT trong số chúng sẽ được chọn ngẫu nhiên.", answer: true },
                ...positive_questions,
                ...negative_questions,
            ]

            return {

                questions,

                answers: Array(10).fill(''),  // Assuming there are nine questions
                isInvalid: Array(10).fill(false),
            }
        },
        computed: {
            allAnswersCorrect() {
                return this.isInvalid.every(v => v === false);
            },
        },
        methods: {
            checkAnswers() {

                for (let i = 0; i < this.questions.length; i++) {

                    if (typeof this.answers[i] == "number") {
                        if (this.answers[i] !== parseInt(this.questions[i].answer)) {
                            this.isInvalid[i] = true;
                        } else {
                            this.isInvalid[i] = false;
                        }

                    }
                    else {
                        const user_answer = String(this.questions[i].answer).toUpperCase()
                        const to_check = String(this.answers[i]).toUpperCase()

                        if (user_answer !== to_check) {
                            this.isInvalid[i] = true;
                        } else {
                            this.isInvalid[i] = false;
                        }
                    }
                }
                if (this.allAnswersCorrect) {
                    $('#form').submit()
                }
            }
        }
    });

    app.mount('#app');
</script>



{% endverbatim %}


{% endblock %}