Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <v-ons-page>
- <div class="test_body">
- <v-ons-card class="test_card">
- <div class="timer" v-if="!timeStop">
- <div class="minutes" v-text="this.data.minutes"></div>
- <div class="seconds" id="seconds" v-text="secondsShown"></div>
- </div>
- <div class="timer" v-else>
- <div class="minutes" v-text="this.data.minutes"></div>
- <div class="seconds" v-text="secondsShown"></div>
- </div>
- <div v-for="(ques,index) in questions">
- <div v-show="index===ques_index">
- <p class="test_text">{{ ques.question_text }} </p>
- <ol align="left">
- <li class="test_list" v-for="choice in ques.choices">
- <input type="radio" v-bind:value="choice.is_right" v-bind:name="index"
- v-model=" userResponses[index] "> {{ choice.choice_text }}
- </li>
- </ol>
- <p class="test_number" align="right">{{index+1}} /{{questions.length}} </p>
- <v-ons-button class="prev_next_button" modifier="cta" style="margin: 6px 0"
- v-if="ques_index > 0" @click="prev">
- Prev
- </v-ons-button>
- <v-ons-button class="prev_next_button" modifier="cta" style="margin: 6px 0" @click="next">
- Next
- </v-ons-button>
- </div>
- </div>
- <div v-show="ques_index === questions.length">
- <h2>
- Quiz finished
- </h2>
- <p>
- Total score: {{ score() }} / {{ questions.length }}
- </p>
- <v-ons-button class="prev_next_button" modifier="cta" style="margin: 6px 0" @click="congratz">
- Congratulation
- </v-ons-button>
- </div>
- </v-ons-card>
- </div>
- </v-ons-page>
- </template>
- <script>
- import swal from 'sweetalert';
- import congratz from './congratulation';
- export default {
- data() {
- return {
- minute: 0,
- seconds: 0,
- interval: null,
- started: true,
- questions: {},
- ques_index: 0,
- userResponses: [],
- }
- },
- beforeMount() {
- this.question();
- },
- mounted() {
- this.loaded()
- },
- methods: {
- congratz() {
- swal({
- text: "Congratulation on Your First Exam!",
- });
- this.pageStack.push(congratz)
- },
- question() {
- this.$http({
- method: 'post',
- url: this.base_url + '/exam/api/',
- auth: {
- username: 'l360_mobile_app',
- password: 'itsd321#'
- },
- data: {
- "id": this.$store.state.user.id,
- "duration": this.data.minutes
- }
- }).then((response) => {
- //alert(response.data.questions[0].question_text);
- //var questions = [];
- this.questions = response.data.questions;
- })
- .catch((error) => {
- // alert(error);
- });
- },
- next: function () {
- this.ques_index++;
- },
- prev: function () {
- this.ques_index--;
- },
- score() {
- var c = 0;
- for (var i = 0; i < this.userResponses.length; i++)
- if (this.userResponses[i])
- c++;
- return c;
- },
- loaded: function () {
- this.interval = setInterval(this.intervalCallback, 1000)
- },
- intervalCallback: function () {
- if (!this.started) return false
- if (this.seconds == 0) {
- if (this.data.minutes == 0) {
- return null
- }
- this.seconds = 59
- this.data.minutes--
- } else {
- this.seconds--
- }
- },
- },
- 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;
- }
- }
- },
- props: ['pageStack']
- }
- </script>
- <style>
- </style>
Add Comment
Please, Sign In to add comment