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

{{ block styles}}
{{ endblock }}

{{ block title }}
    Instructions
{{ endblock }}

{{ block content }}
<input name="time_spent_instructions2" type="hidden" id="time_spent_instructions2">
    {{ include "MainTask/InstructionsBase.html" }}

<div id="main_container" v-cloak>
    <div id="questions_container">
        <h3>Questions</h3>
        <p>
            You must answer the following questions correctly before you can proceed.
        </p>

        <ol>
            <question v-for="(question, question_index) in questions" :question="question" :question_index="question_index" v-on:update_response="question.r=$event">
            </question>
        </ol>
        <div id="check_answers">
            <button type="button" class="btn btn-primary" @click="check_answers">Check Answers</button>
            <br>
            <p v-if="incorrect_answer_numbers != null && incorrect_answer_numbers.length > 0">
                <!-- The following answers are incorrect: <span v-for="q in incorrect_answer_numbers.slice(0, -1)">${q}, </span><span>${incorrect_answer_numbers[incorrect_answer_numbers.length-1]}.</span>
                <br>  -->
                Some of the questions are unanswered or incorrect. 
                You must answer all questions correctly before you can proceed. 
                <br>
                Update your answers and try again.
            </p>
            <p v-if="incorrect_answer_numbers != null && incorrect_answer_numbers.length == 0">
                All answers are correct! Click 'Next' to proceed.
            </p>
            <button type="button" @click="instructions_time" v-if="incorrect_answer_numbers != null && incorrect_answer_numbers.length == 0"  class="btn btn-primary">Next</button>
        </div>
    </div>
    <input type="hidden" v-model="incorrect_answers_string" name="incorrect_instruction_answers">
    <input type="hidden" v-model="errors_quiz_count" name="errors_quiz">
    <input type="hidden" id="time_spent_instructions" name="time_spent_instructions">

</div>
{{ endblock }}



{{ block scripts }}
<script>
    let startTime,submitTime
    window.addEventListener('load', function() {
        startTime=Date.now()
    })
</script>

<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script> -->

<!--Loads vue.js-->
<script src="{{ static 'js/vue.js' }}"></script>

<!--Defines what a question looks like-->
<script type="text/x-template" id="question-template">
    <li>
        <br>
        <label class="question_text"><span v-html="question.q"></span></label><br>
        <template v-for="answer in question.a">
            <input type="radio" :value="answer" v-model="response" @change="$emit('update_response', $event.target.value)">
            <label v-html="answer" class="question_text" :for="answer"></label>
            <br>
        </template>
        <br>
    </li>
</script>

<script>
    Vue.component('question', {
        props: ['question','question_index'],
        template: '#question-template',
        name: 'question',
        delimiters: ['${', '}'],
        data: function () {
            return {
                response: null
            }
        },
        methods: {
            update_response: function() {
                console.log(this.question_index,this.response)
            },
        }
    });
    var vm = new Vue({
      el: '#main_container',
      delimiters: ['${', '}'],
      data: {
        incorrect_answers: [], errors_quiz: 0,
        questions: [
            {
                'q': 'True or False? Sum 1 always has a larger value than Sum 2.',
                'a': [
                    'True.',
                    'False.',
                    ],
                'c': 'False.',
                'r': null
            },
            {
                'q': 'True or False? Both sums can have the same value.',
                'a': [
                    'True.',
                    'False.',
                    ],
                'c': 'False.',
                'r': null
            },
            {
                'q': 'True or False? You will only earn a bonus if you choose the option indicating the sum with the largest value.',
                'a': [
                    'True.',
                    'False.'
                    ],
                'c': 'False.',
                'r': null
            },
            {
                'q': 'True or False? The sure amount for each option is the same across rounds.',
                'a': [
                    'True.',
                    'False.'
                    ],
                'c': 'False.',
                'r': null
            },
        ]
      },
      computed: {
          incorrect_answer_numbers: function() {
              ia = this.incorrect_answers
              if (ia.length === 0) {return null}
              else {return ia[ia.length-1].map((a) => a[0])}
          },
          incorrect_answers_string: function() {
              return JSON.stringify(this.incorrect_answers)
          },
          errors_quiz_count: function(){
              return this.errors_quiz-1
          },
          questions: function() {
              questions = this.common_questions
          }
      },
      methods: {
          check_answers: function() {
                incorrect_answers = [];
                this.questions.forEach((q,i) => {if (q.c !== q.r) {incorrect_answers.push([i+1,q.r])}})
                this.incorrect_answers.push(incorrect_answers)
                this.errors_quiz = this.errors_quiz + 1
          },
          instructions_time: function(){
              submitTime = Date.now()
              if (document.getElementById("time_spent_instructions2").value) {
                  document.getElementById("time_spent_instructions2").value
              }
              else {
                  document.getElementById("time_spent_instructions2").value = submitTime - startTime;
              }
              document.getElementById("form").submit();
          }
        }
    });
</script>

{{ endblock }}