当前位置:编程学习 > > 正文

vue考试链接重置(Vue实现答题功能)

时间:2021-10-23 10:56:24类别:编程学习

vue考试链接重置

Vue实现答题功能

1、请求答题接口

2、判断用户是否答对,答对的话跳到下一题,答错的话弹窗告诉用户有错题,请重新答题

vue考试链接重置(Vue实现答题功能)

  • <li class="active_title">
          <span>{{ orderTitle }}</span>
    </li>
    <p v-show="toanswer" ref="question">{{ title }}</p>
    <li 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>
    </li>
    
  • getAllData() {
       this.$axios.get(答题接口).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//第几题
             this.answer = this.allData.question[0].answner//第几题问题
        }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('选对',result);
          this.isRight = true
          $(tar).addClass('right')
        } else {
           // console.log('选错',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('答错');
               this.mask = false
               this.maskTips = true
               return false
             } else {
               console.log('答对了');
              }
             }
              $('.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].answner
            },1200)
         }
      },
    
  • 以上就是Vue实现答题功能的详细内容,更多关于Vue答题的资料请关注开心学习网其它相关文章!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐