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"></i><i v-show="isRight && item.result == 1" class="iconfont icon-right"></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:
|
<<: MYSQL local installation and problem solving
>>: Tomcat multi-port domain name access and configuration to enable gzip compression method
Table of contents 1. Uninstall the original drive...
Update: Recently, it was discovered that the serv...
After the official release of Activiti7, it has f...
Related system calls for file operations create i...
1. Command Introduction bzip2 is used to compress...
The pitfalls of MySQL read-write separation The m...
1. IE8's getElementById only supports id, not ...
Table of contents 1. Event Flow 1. Concept 2. DOM...
Detailed example of database operation object mod...
This is my first blog. It’s about when I started ...
This article example shares the specific code of ...
Preface Adding drag and drop functionality is a g...
Introduction to vi/vim They are both multi-mode e...
Using Dockerfile allows users to create custom im...
I encountered a problem when modifying the defaul...