Vue implements the question answering function

Vue implements the question answering function

1. Request answer interface

2. Determine whether the user's answer is correct. If the answer is correct, jump to the next question. If the answer is wrong, a pop-up window will be displayed to inform the user that there is a wrong answer and ask the user to answer the question again.

<div class="active_title">
      <span>{{ orderTitle }}</span>
</div>
<p v-show="toanswer" ref="question">{{ title }}</p>
<div class="answer-btns" @click="answerClick($event)">
    <span class="answer-btn" :class="`${isRight && item.result == 1?'right':''}`" v-for="item in answer" :data-result='item.result'>{{ item.name }} <i class="iconfont icon-wrong">&#xe677;</i><i v-show="isRight && item.result == 1" class="iconfont icon-right">&#xe678;</i>
    </span>
</div>
getAllData() {
   this.$axios.get(answer interface).then((res)=>{
     if(parseInt(res.data.errCode)>=0){
       this.allData=res.data.data
       if(this.allData.question.length > 0) {
          this.toanswer = true
       }            
         this.title = this.allData.question[0].title // Which question this.answer = this.allData.question[0].answer // Which question }else{
       this.toast = this.$createToast({
          txt: res.data.message,
          type: 'txt'
        })
       this.toast.show()
    }
   }).catch((err)=>{
      console.log(err)
    })
},

answerClick(e) {
  const tar = e.target,
  className = e.target.className
  if(className == "answer-btn") {
    this.mask = true
    const result = tar.dataset.result
    if(result == 1){
      // console.log('Select the right one',result);
      this.isRight = true
      $(tar).addClass('right')
    } else {
       // console.log('wrong choice',result);
       this.isRight = true
       this.isWrong = true
       $(tar).addClass('wrong')
       setTimeout(() => {
       this.maskTips = true
     }, 1200);
   }
   setTimeout( () => {
    this.clickNum++
    if(this.clickNum > 2) {
      this.clickNum = 2
         if(this.isWrong) {
           console.log('wrong answer');
           this.mask = false
           this.maskTips = true
           return false
         } else {
           console.log('Correct answer');
          }
         }
          $('.answer-btn').removeClass('wrong')
          this.orderTitle = this.orderTitles[this.clickNum]
          this.isRight = this.mask = false
          this.title = this.allData.question[this.clickNum].title
          this.answer = this.allData.question[this.clickNum].answer
        },1200)
     }
  },

The above is the detailed content of Vue’s answering function. For more information about Vue’s answering function, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Vue implements custom multiple-choice and single-choice answer functions

<<:  MYSQL local installation and problem solving

>>:  Tomcat multi-port domain name access and configuration to enable gzip compression method

Recommend

JavaScript realizes the effect of mobile modal box

This article example shares the specific code of ...

MySQL detailed summary of commonly used functions

Table of contents MySQL Common Functions 1. Numer...

Detailed explanation of JavaScript's Set data structure

Table of contents 1. What is Set 2. Set Construct...

CSS form validation function implementation code

Rendering principle In the form element, there is...

Detailed tutorial on deploying Springboot or Nginx using Kubernetes

1 Introduction After "Maven deploys Springbo...

Linux system dual network card binding configuration implementation

System version [root@ ~]# cat /etc/redhat-release...

Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0

1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...

Hide div in HTML Hide table TABLE or DIV content css style

I solved a problem tonight that has been botherin...

The process of deploying a project to another host using Jenkins

environment Hostname ip address Serve Jenkins 192...

VMware Workstation 14 Pro installation and activation graphic tutorial

This article shares the installation and activati...

Detailed explanation of Bind mounts for Docker data storage

Before reading this article, I hope you have a pr...

Solution to secure-file-priv problem when exporting MySQL data

ERROR 1290 (HY000) : The MySQL server is running ...