Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement