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
1. Introduction to Data Integrity 1. Introduction...
This article example shares the specific code of ...
Table of contents MySQL Common Functions 1. Numer...
This article uses an example to describe how to r...
Table of contents 1. What is Set 2. Set Construct...
Rendering principle In the form element, there is...
1 Introduction After "Maven deploys Springbo...
System version [root@ ~]# cat /etc/redhat-release...
1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...
I solved a problem tonight that has been botherin...
mysql 5.7.21 winx64 installation and configuratio...
environment Hostname ip address Serve Jenkins 192...
This article shares the installation and activati...
Before reading this article, I hope you have a pr...
ERROR 1290 (HY000) : The MySQL server is running ...