l360

<template>
    <v-ons-page>
        <div class="test_body">
            <v-ons-toolbar>
                <div class="center">{{this.$store.state.time.duration}} Minutes Exam</div>
                <div class="left">
                    <v-ons-toolbar-button>
                        <v-ons-icon icon="ion-navicon, material: md-menu"></v-ons-icon>
                    </v-ons-toolbar-button>
                </div>
            </v-ons-toolbar>
        <div v-if="ques_index < questions.length">
            <v-ons-card class="test_card">

                <div class="test_div"  v-for="(ques,index) in  questions">
                    <div v-show="index === ques_index">
                        <div class="title" align="center">

                        <p  align="center" class="test_text"> {{ ques.question_text}}  </p>
                        </div>
                            <div class="content" >
                            <div align="center" id="donate" >

                                <ul align="center" >
                                    <li v-for="(choice) in ques.choices">
                                        <label :for="choice.choice_id" class="yellow">
                                            <input class="button_none" type="radio"  @change="correct" :value="choice.is_right + '_' + choice.choice_id" :name="index" v-model=" userResponses[index] " :id="choice.choice_id" />
                                            <span>
                                                <strong>{{ choice.choice_text }} </strong>
                                     </span>
                                        </label>
                                    </li>
                                </ul>

                            </div>

                        </div>
                        <!--<v-ons-button class="prev_next_button" align ="center" modifier="cta" style="margin: 6px 0; " @click="next()">-->
                        <!--Skip-->
                        <!--</v-ons-button>-->
                    </div>
                </div>
            </v-ons-card>
        </div>

                <div v-if="ques_index === questions.length" >
                <v-ons-card class="score">
                    <div class="score_div">
                    <i  class="fa fa-trophy"></i>
                    <h2 class="score_head">
                        Congratulations!
                    </h2>
                    <h3 class="score_text">You just Completed a Test</h3>
                    SCORE: <p class="score_test" style="display:inline">  {{ score }} </p>  <p class="score_test2" style="display:inline"> /    {{ questions.length }}
                </p>
<!---
                    <v-ons-button v-if="this.c >= parseInt((Math.ceil(questions.length * .4)))"  class="prev_next_button_score" modifier="cta" style="margin: 6px 0" @click="congratz">
                        Next
                    </v-ons-button>
                    <v-ons-button v-else class="prev_next_button_score" style="margin: 6px 0" @click="pageStack.pop()">
                        Test Again
                    </v-ons-button>
                    -->
                    </div>
                </v-ons-card>
                </div>
<footer>
            <div class="footer_test" >
                <div  align="center" class="timer" v-if="!timeStop">
                    <i class="ion-ios-clock"></i>
                    <div class="minutes" v-html="minutes"></div>
                    <div class="seconds" id="seconds" v-html="secondsShown"></div>
                </div>
                <div align="center" class="timer" v-else>
                    <i class="ion-ios-clock"></i>
                    <div class="minutes" v-html="minutes"></div>
                    <div class="seconds" v-html="secondsShown"></div>
                </div>
                <div  v-if="questions.length > ques_index" class="timer_button">
                    <div  class="next_button" @click="next()">
                        Next
                    </div>
                </div>
                <div v-else class="timer_button">
                    <div class="next_button" >
                        Finished
                    </div>
                </div>
            </div>

</footer>
        </div>
    </v-ons-page>
</template>
<script>


    //import 'babel-polyfill';

    export default {
        data() {
            return {
                minutes: this.$store.state.time.duration,
                seconds: 0,
                interval: null,
                started: true,
                ques_index: 0,
                questions: this.$store.state.exam.questions,
                userResponses: Array(this.$store.state.exam.questions.length),
                c: 0,
                count: 0,
                answered: 0,
                question_response:[
                    { isTrue:''}
                    ]


            }
        },
        mounted() {
            this.loaded();
        },
        updated (){
            this.timerOff();
        },
        methods: {

            congratz() {
                var that = this;
                this.$http({
                    method: 'post',
                    url: this.base_url + '/exam/api/' + this.$store.state.user.id + '/',

                    auth: {
                        username: 'l360_mobile_app',
                        password: 'itsd321#'
                    },
                    data: {
                        "exam_id": this.$store.state.exam.exam_id,
                        "started_at": this.$store.state.exam.started_at,
                        "ended_at": this.$store.state.exam.ended_at,
                        "question_answered": this.answered,
                        "ans_right": this.c,
                        "ans_wrong": this.$store.state.exam.questions.length - this.c,
                        "mark_received": this.c
                    }

                }).then(res => {
                    console.log(res);
                    console.log("hello "+ data.question_answered);
                    console.log(this.$store.state.exam.exam_id);
                }).catch(err => {
                    console.log(err.details);
                })
               // this.pageStack.push(congratz)
            },

            next() {
                this.ques_index++;

                var time = new Date()
                if (this.$store.state.exam.questions.length === this.ques_index) {
                    var exam = {
                        ended_at: time.getHours() + 'h:' + time.getMinutes() + 'm:' + time.getSeconds() + 's',
                    }

                    this.$store.commit('questionInfo', exam)
                }

            },
            prev() {
                this.ques_index--;
                this.progress--;
            },


            loaded() {
                var that = this;
                that.interval = setInterval(that.intervalCallback.bind(that), 1000)
            },
            intervalCallback() {
                if (!this.started) return false
                if (this.seconds === 0) {
                    if (this.minutes === 0) {
                        return null
                    }
                    this.seconds = 59
                    this.minutes--
                } else {
                    this.seconds--
                }
            },


            correct: function () {
                var that = this;
                setTimeout(function(){
                    alert(that.userResponses[that.ques_index]);
                    that.question_response.isTrue = that.userResponses[that.ques_index];
                    if (that.userResponses[that.ques_index]) {
                        that.ques_index++;

                        console.log(that.ques_index);
                    }
                    that.answered = that.userResponses.filter(ur => (ur[0] === 't'|| ur[0] === 'f')).length;
                    console.log(that.answered);
                    return this.answered;
                },1000)
                //ls
               //that.question_response.ques_id = this.response.data.question_id;
                console.log(that.question_response);
            },
            timerOff: function (){
                if ( this.minutes === 0 && this.seconds === 0 )
                {

                    this.ques_index = this.questions.length;
                }
            },
            complete_test: function () {
                this.completed=false;
                alert("clicked");
                var info =
                    { questions: this.questions,
                        ques_index: this.ques_index,
                        minutes: this.minutes

                    }

                localStorage.setItem('ke', JSON.stringify(info));
                const val= JSON.parse(localStorage.getItem('ke'));

                console.log((val) + "hh");
                this.page = this.pageStack.length;
                for (this.i = 1; this.i < this.page; this.i++) {
                    this.pageStack.pop()
                }


            }


        },
        computed: {
            secondsShown: function () {
                if (this.seconds < 10) {
                    return "0" + parseInt(this.seconds, 10)
                }

                return this.seconds
            },
            timeStop: function () {
                if (this.ques_index === this.questions.length) {
                    this.started = false;
                    return this.seconds;
                }
            },
            score: function () {


                this.c = this.userResponses.filter(val => (val[0]==='t')).length;

                return this.c;
            },



        },
        props: ['pageStack']
    }
</script>