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

Ubuntu installation graphics driver and cuda tutorial

Table of contents 1. Uninstall the original drive...

SpringBoot integrates Activiti7 implementation code

After the official release of Activiti7, it has f...

Detailed explanation of Linux file operation knowledge points

Related system calls for file operations create i...

Use of Linux bzip2 command

1. Command Introduction bzip2 is used to compress...

Common solutions for Mysql read-write separation expiration

The pitfalls of MySQL read-write separation The m...

IE8 compatibility notes I encountered

1. IE8's getElementById only supports id, not ...

JavaScript event capture bubbling and capture details

Table of contents 1. Event Flow 1. Concept 2. DOM...

Detailed example of database operation object model in Spring jdbc

Detailed example of database operation object mod...

MySQL 5.7.18 free installation version window configuration method

This is my first blog. It’s about when I started ...

Vue realizes the function of uploading photos on PC

This article example shares the specific code of ...

How to use vue.js to implement drag and drop function

Preface Adding drag and drop functionality is a g...

Explanation of Dockerfile instructions and basic structure

Using Dockerfile allows users to create custom im...

How to set default value for datetime type in MySQL

I encountered a problem when modifying the defaul...