iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue实现答题功能
  • 164
分享到

Vue实现答题功能

2024-04-02 19:04:59 164人浏览 安东尼
摘要

1、请求答题接口 2、判断用户是否答对,答对的话跳到下一题,答错的话弹窗告诉用户有错题,请重新答题 <div class="active_title">

1、请求答题接口

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


<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(答题接口).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答题的资料请关注编程网其它相关文章!

--结束END--

本文标题: Vue实现答题功能

本文链接: https://www.lsjlt.com/news/128906.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue实现答题功能
    1、请求答题接口 2、判断用户是否答对,答对的话跳到下一题,答错的话弹窗告诉用户有错题,请重新答题 <div class="active_title"> ...
    99+
    2024-04-02
  • 微信小程序实现答题功能
    本文实例为大家分享了微信小程序实现答题功能的具体代码,供大家参考,具体内容如下 view <view class="topnav">   <image src="...
    99+
    2024-04-02
  • JavaScript如何实现答题评分功能
    这篇“JavaScript如何实现答题评分功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript如何实现答题...
    99+
    2023-07-06
  • 微信小程序怎么实现答题功能
    本篇内容主要讲解“微信小程序怎么实现答题功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序怎么实现答题功能”吧!效果:view<view class="top...
    99+
    2023-07-02
  • CSS+jQuery如何实现的在线答题功能
    小编给大家分享一下CSS+jQuery如何实现的在线答题功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果图:HTML首先载...
    99+
    2024-04-02
  • Python如何实现考试自动答题功能
    这篇文章主要介绍“Python如何实现考试自动答题功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python如何实现考试自动答题功能”文章能帮助大家解决问题。一、准备环境1)运行环境 ...
    99+
    2023-07-05
  • 如何实现在线答题中的答题过程实时记录和评估功能
    随着互联网技术的不断发展,教育领域也逐渐朝着在线学习的方向发展。在线答题是一种常见的在线学习方式,同时也是一种常见的教育评估方法。在传统的在线答题中,教师只能通过答案最后提交的时间来判断学生的答题情况,无法得知学生在答题过程中的具体表现。因...
    99+
    2023-10-21
    记录器 分数 实时记录:记录 实时记录 评估功能:评估
  • 如何实现在线答题中的倒计时功能
    随着互联网的快速发展和智能设备的普及,越来越多的教育活动也开始向线上迁移,其中包括在线答题。在线答题作为一种新型的教育形式,可以提供更加便捷和灵活的学习方式,受到了越来越多的使用者的青睐。其中一个重要的功能就是倒计时,在规定的时间内完成答题...
    99+
    2023-10-21
    实现 倒计时 在线答题
  • 如何使用CSS+jQuery实现的在线答题功能
    小编给大家分享一下如何使用CSS+jQuery实现的在线答题功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!HTML首先载入j...
    99+
    2024-04-02
  • vue怎么实现更换主题功能
    这篇文章主要讲解了“vue怎么实现更换主题功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现更换主题功能”吧!方式一:class切换方式实现:在每个需要更换的页面定义多个cla...
    99+
    2023-07-04
  • vue+element-ui实现主题切换功能
    element-ui提供了自定义主题 自定义主题 一、安装 npm i element-theme -gnpm i element-theme-chalk -Dnpm i https...
    99+
    2024-04-02
  • 怎么用CSS+jQuery+PHP+MySQL实现的在线答题功能
    这篇“怎么用CSS+jQuery+PHP+MySQL实现的在线答题功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获...
    99+
    2024-04-02
  • 如何使用OpenCV-Python实现识别答题卡判卷功能
    这篇文章主要为大家展示了“如何使用OpenCV-Python实现识别答题卡判卷功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用OpenCV-Python实现识别答题卡判卷功能”这篇文章...
    99+
    2023-06-22
  • vue实现全选功能
    本文实例为大家分享了vue实现全选功能的具体代码,供大家参考,具体内容如下 全选思路 1、准备标签,样式,js,准备数据 2、将数据循环展示在页面上, 在li 里v-for 3、在全...
    99+
    2024-04-02
  • vue实现登陆功能
    本文实例为大家分享了vue实现登陆功能的具体代码,供大家参考,具体内容如下 最近在学习vue,发现了vue的好多坑,比如怎么更好的获取input框输入的值而减少获取dom节点的消耗 ...
    99+
    2024-04-02
  • vue实现分页功能
    本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下 使用组件分页 自己写分页 一、组件分页 <el-paginatio...
    99+
    2024-04-02
  • vue实现打卡功能
    本文实例为大家分享了vue实现打卡功能的具体代码,供大家参考,具体内容如下 记录使用vue实现移动端日历打卡样式 templatecompareToNow:与当前时间比较-1:小于...
    99+
    2024-04-02
  • vue Nprogress进度条功能实现常见问题
    NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https://github.com/...
    99+
    2024-04-02
  • Vue登录功能实现
    目录写在前面登录概述登录业务流程登录业务的相关技术点登录—token原理分析登录功能实现登录表单的布局登录表单的数据绑定登录表单的验证规则登录表单的重置登录预验证登录组件配置弹窗提示...
    99+
    2024-04-02
  • vue实现换肤功能
    公司项目要实现vue项目换肤功能,要求,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一、实现思路 切换选中的皮肤状态(light...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作