UNI-APP小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)

原博：uni-app小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)_uniapp答题模板-CSDN博客

标签： 小程序  uni-app 

 

模板链接:答题模板

html部分
这里没啥好说的,就是根据不同的状态显示不同的内容

<template><view><view id="top-box" class="cu-bar bg-white bottoms solid-bottom"><view class="action text-black exam-types"><text v-if="currentType===1">判断题</text><text v-else-if="currentType===2">单选题</text><text v-else-if="currentType===3">多选题</text><text v-else-if="currentType===4">填空题</text><text v-else-if="currentType===5">问答题</text></view><!-- 题目进度 --><view class="progress"><text>{{pageIndex}}</text><text>/{{subjectList.length}}</text></view><view class="action exam-card"><button class="cu-btn bg-green shadow" @tap="showCardModal" data-target="modalCard">答题卡</button></view></view><view class="cu-modal" :class="modalCard=='modalCard'?'show':''" @tap="hideCardModal"><view class="cu-dialog" @tap.stop><scroll-view class="page padding" :scroll-y=true :style="{'height':swiperHeight}"><view class="cu-bar solid-bottom"><view class="action"><text class="cuIcon-title text-red"></text>答题卡</view></view><!-- 选择题目 --><view class="grid col-5 "><view class="margin-tb-sm text-center" v-for="(subject,index) in subjectList" :key="index"><button class="cu-btn round" :class="[subject.userAnswer.length===0?'line-grey':'bg-red']" @click="assignSubject(index)">{{index+1}}</button></view></view></scroll-view></view></view><!-- 提交试题纠错部分 --><view class="cu-modal padding " :class="modalError=='modalError'?'show':''" @tap="hideErrorModal"><view class="cu-dialog bg-white" @tap.stop><view class="cu-bar solid-bottom "><view class="action"><text class="cuIcon-title text-red"></text>试题纠错</view></view><radio-group class="block"><view class="cu-list menu text-left"><view class="cu-item cu-item-error" v-for="error in errorList" :key="index"><radio :value="error"></radio><view class="title text-black margin-left">{{error}}</view></view></view></radio-group><view class="padding flex flex-direction "><button class="cu-btn bg-red margin-tb-sm lg" @click="SubmitError">提 交</button></view></view></view><form><swiper :current="subjectIndex" class="swiper-box" @change="SwiperChange" :style="{'height':swiperHeight}"><swiper-item v-for="(subject,index) in subjectList" :key="index"><view v-if="index-subjectIndex>=-1&&index-subjectIndex<=1"><scroll-view scroll-y="true"><view id="desc">这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释这里是对一些题目的解释</view></scroll-view><!-- 题目类型 --><view class="cu-bar bg-white solid-bottom"><view class="action text-black"><text class="cuIcon-title text-red"></text>{{subject.title}}</view></view><view><!-- 单选题部分 --><radio-group class="block" @change="RadioboxChange" v-if="subject.type===1||subject.type===2"><view class="cu-form-group" v-for="(option,index) in subject.optionList" :key="index"><radio :value="option.id" :checked="subject.userAnswer.indexOf(option.id) > -1?true:false"></radio><view class="title text-black">{{option.id}}.{{option.content}}</view></view></radio-group><!-- 多选题部分 --><checkbox-group class="block" @change="CheckboxChange" v-else-if="subject.type===3"><view class="cu-form-group" v-for="(option,index) in subject.optionList" :key="index"><checkbox :value="option.id" :class="subject.userAnswer.indexOf(option.id) > -1?'checked':''" :checked="subject.userAnswer.indexOf(option.id) > -1?true:false"></checkbox><view class="title  text-black">{{option.id}}.{{option.content}}</view></view></checkbox-group><!-- 填空题部分 --><view v-else-if="subject.type===4"><view class="cu-form-group solid-bottom"><view class="title  text-black">答：</view><input placeholder="文本输入框" name="input" v-model="subject.userAnswer" @blur="textInput"></input></view></view><!-- 问答题部分,多行文本输入框 --><view v-else-if="subject.type===5"><view class="cu-bar cu-bar-title bg-white margin-top"><view class="action  text-black">答：</view></view><view class="cu-form-group solid margin"><textarea maxlength="-1" @blur="textInput" v-model="subject.userAnswer" placeholder="多行文本输入框"></textarea></view></view></view><!-- 是否显示正确答案 --><view v-show="subject.showAnswer" class="margin-top solid-top"><view class="cu-bar"><view class="action  text-grey"><text>正确答案：</text><text class="solid-bottom  padding-left text-green">{{subject.answer}}</text></view></view><view class="cu-bar cu-bar-title"><view class="action  text-grey"><text>解析：</text></view></view><view class="text-content padding  text-grey">{{subject.explain}}</view></view><view class="submit-exam" v-if="pageIndex == subjectList.length">交卷</view></view></swiper-item></swiper></form><!-- 底部 --><view id="foot-box" class="cu-bar tabbar bg-white shadow foot"><view class="action" @click="MoveSubject(-1)"><view class="cuIcon-cu-image"><text class="lg cuIcon-back text-gray"></text></view><view class="text-gray">上一题</view></view><view class="action" @click="MoveSubject(1)"><view class="cuIcon-cu-image"><text class="lg text-gray cuIcon-right"></text></view><view class="text-gray">下一题</view></view><view class="action" @click="FavorSubject"><view class="cuIcon-cu-image"><text class="lg cuIcon-favor" :class="[userFavor?'text-red':'text-gray']"></text></view><view :class="[userFavor?'text-red':'text-gray']">收藏</view></view><view class="action" @click="ShowAnswerChange"><view class="cuIcon-cu-image"><text class="lg text-gray cuIcon-question"></text></view><view class="text-gray">{{str}}</view></view><view class="action" @tap="showErrorModal" data-target="modalError"><view class="cuIcon-cu-image"><text class="lg text-gray cuIcon-warn"></text></view><view class="text-gray">纠错</view></view></view></view>
</template>

 js

<script>export default {data() {return {h: 0, //定义时，分，秒，毫秒并初始化为0；m: 0,ms: 0,s: 0,time: 0,str: '',pageIndex: 1,mytime: '',userFavor: false, //是否已收藏currentType: 0, //当前题型subjectIndex: 0, //跳转索引autoShowAnswer: false, //答错是否显答案autoRadioNext: true, //判断题、单项题，自动移下一题swiperHeight: '800px', //title: '2019山东高考原题',subjectList: [{"title": "水是液体？","type": 1,"optionList": [{"id": "A","content": "对"}, {"id": "B","content": "错"}],"answer": "A","userAnswer": "","userFavor": false,"explain": "难到是固体不成？"},{"title": "电流分有？","type": 2,"optionList": [{"id": "A","content": "直流"}, {"id": "B","content": "交流"}, {"id": "C","content": "直流和交流"}],"answer": "C","userAnswer": "","userFavor": false,"explain": "科技学依据"},{"title": "酸菜鱼的味道？","type": 3,"optionList": [{"id": "A","content": "咸味"}, {"id": "B","content": "辣味"}, {"id": "C","content": "甜味"}, {"id": "D","content": "酸味"}],"answer": "A,B,D","userAnswer": "","userFavor": false,"explain": "你怎么想都行，要的就是这个味，答案只能选A,B,D"},{"title": "床前（____）光，疑是地上霜。","type": 4,"optionList": [{"id": "","content": ""}],"answer": "明月","userAnswer": "","userFavor": false,"explain": "问答题没有选项，无法做答，且不参与计分"},{"title": "什么美国要限制华为？","type": 5,"optionList": [{"id": "","content": ""}],"answer": "","userAnswer": "","userFavor": false,"explain": "问答题没有选项，无法做答，且不参与计分"}],modalCard: null, //显示答题卡modalError: null, //纠错卡errorList: ['题目不完整', '答案不正确', '含有错别字', '图片不存在', '解析不完整', '其他错误']}},onReady() {var tempHeight = 800;var _me = this;uni.getSystemInfo({//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高                success: function(res) {// console.log(res);                    tempHeight = res.windowHeight;// console.log("屏幕可用高度 " + tempHeight);uni.createSelectorQuery().select("#top-box").fields({size: true,scrollOffset: true}, (data) => {tempHeight -= data.height;// console.log("减掉顶部后的高度 " + tempHeight);uni.createSelectorQuery().select("#foot-box").fields({size: true,scrollOffset: true}, (data) => {tempHeight -= data.height;// console.log("减掉底部后的高度 " + tempHeight);_me.swiperHeight = tempHeight + 'px';// console.log("滑屏最后高度 " + _me.swiperHeight);}).exec();}).exec();}});},onLoad() {// 获取题目类型,默认显示数据的第一种题目的类型this.currentType = this.subjectList[0].type;//设置头部标题uni.setNavigationBarTitle({title: this.title});//添加用户显示答案字段for (var i = 0; i < this.subjectList.length; i++) {this.$set(this.subjectList[i], "showAnswer", false);}this.getTime()},methods: {//倒计时方法getTime() {this.time = setInterval(this.timer, 50)},timer() { //定义计时函数this.ms = this.ms + 50; //毫秒if (this.ms >= 1000) {this.ms = 0;this.s = this.s + 1; //秒}if (this.s >= 60) {this.s = 0;this.m = this.m + 1; //分钟}if (this.m >= 60) {this.m = 0;this.h = this.h + 1; //小时}this.str = this.toDub(this.h) + ":" + this.toDub(this.m) + ":" + this.toDub(this.s) + "" /*+this.toDubms(this.ms)+"毫秒"*/ ;// document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";},toDub(n) { //补0操作if (n < 10) {return "0" + n;} else {return "" + n;}},//答题板和错题的显示隐藏showCardModal: function(e) {this.modalCard = e.currentTarget.dataset.target},hideCardModal: function(e) {this.modalCard = null},showErrorModal: function(e) {this.modalError = e.currentTarget.dataset.target},hideErrorModal: function(e) {this.modalError = null},//左右滑动事件SwiperChange: function(e) {//获取当前滑动的索引,默认为0,所以要+1console.log(e);let index = e.target.current;this.pageIndex = index + 1if(this.pageIndex == this.subjectList.length){uni.showModal({cancelText:'取消',confirmText:'确定',title:'已经是最后一题了',success: (res) => {if(res.confirm){uni.showToast({icon:'none',title:'赶快交卷吧'})}}})}if (index != undefined) {//对当前题型和题目类型重新赋值this.subjectIndex = index;this.currentType = this.subjectList[index].type;this.userFavor = this.subjectList[index].userFavor;console.log(this.subjectIndex);}},//单选选中RadioboxChange: function(e) {//获取对应题目所有的选项var items = this.subjectList[this.subjectIndex].optionList;//获取对应valuevar values = e.detail.value;this.subjectList[this.subjectIndex].userAnswer = values;if (this.autoRadioNext && this.subjectIndex < this.subjectList.length - 1) {this.subjectIndex += 1;};console.log(items,values);},//复选选中CheckboxChange: function(e) {var items = this.subjectList[this.subjectIndex].optionList;var values = e.detail.value;this.subjectList[this.subjectIndex].userAnswer = "";//先循环全部的题目选项for (var i = 0, lenI = items.length; i < lenI; ++i) {//在循环点击的选项for (var j = 0, lenJ = values.length; j < lenJ; ++j) {if (items[i].id == values[j]) {this.subjectList[this.subjectIndex].userAnswer += items[i].id;// console.log(this.subjectList[this.subjectIndex].userAnswer);break}}}},//填空题textInput: function(e) {this.subjectList[this.subjectIndex].userAnswer = e.detail.value;},//点击显示答案ShowAnswerChange: function(e) {if (this.subjectList[this.subjectIndex].showAnswer) {this.subjectList[this.subjectIndex].showAnswer = false;} else {this.subjectList[this.subjectIndex].showAnswer = true;}},//点击收藏题FavorSubject: function(e) {if (this.userFavor) {this.userFavor = false;this.subjectList[this.subjectIndex].userFavor = false;} else {this.userFavor = true;this.subjectList[this.subjectIndex].userFavor = true;}},//上一题、下一题MoveSubject: function(e) {if (e === -1 && this.subjectIndex != 0) {this.subjectIndex -= 1;}if (e === 1 && this.subjectIndex < this.subjectList.length - 1) {this.subjectIndex += 1;}},//题卡指定,跳转到指定题assignSubject: function(e) {this.modalCard = null;this.subjectIndex = e;},//提交纠错SubmitError: function(e) {this.modalError = null;}}}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/473469.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot多环境配置的实现

SpringBoot多环境配置的实现

前言 开发过程中必然使用到的多环境案例&#xff0c;通过简单的案例分析多环境配置的实现过程。 一、案例 1.1主配置文件 spring:profiles:active: prod server:port: 80801.2多环境配置文件 开发环境 blog:domain: http://localhost:8080测试环境 blog:domain: https:/…
阅读更多...
另外一种缓冲式图片组件的用法

另外一种缓冲式图片组件的用法

文章目录 1. 概念介绍2. 使用方法2.1 基本用法2.2 缓冲原理3. 示例代码4. 内容总结我们在上一章回中介绍了"FadeInImage组件"相关的内容，本章回中将介绍CachedNetworkImage组件.闲话休提，让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的CachedNetwo…
阅读更多...
Linux下多线程

Linux下多线程

在Linux下的底层里并没有多线程这个概念&#xff0c;取而代之的是轻量级进程的概念。应为在Llinu下内核下并没有TCB,而只有PCB。 线程是什么 在⼀个程序⾥的⼀个执⾏路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“⼀个进程内部 的控制序…
阅读更多...
Win10/11 安装使用 Neo4j Community Edition

Win10/11 安装使用 Neo4j Community Edition

如果你下载的是 Neo4j Community Edition 的压缩包&#xff0c;意味着你需要手动解压并配置 Neo4j。以下是详细的使用步骤&#xff1a; 0. 下载压缩包 访问Neo4j官网&#xff0c;找到 Community Edition 版本并选择 4.x 或者 5.x 下载&#xff1a;https://neo4j.com/deployme…
阅读更多...
PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB生产ERP系统的智能拼版技术&#xff0c;是基于PCB前端报价系统获取到的用户或市场人员已录入系统的板子尺寸及set参数等&#xff0c;按照最优原则或利用率最大化原则自动进行计算并输出拼版样式图和板材利用率&#xff0c;提高工程人员效率&#xff0c;减少板材的浪费。覆铜…
阅读更多...
Excel根据条件动态索引单元格范围

Excel根据条件动态索引单元格范围

假如我是一个老板&#xff0c;下面有数不胜数的员工&#xff0c;我要检查他们每周的工作产出&#xff0c;列一个排行榜&#xff0c;提高员工积极性&#xff0c;毕竟多劳多得嘛。 每天去手动统计&#xff0c;未免显得不太聪明&#xff0c;我们可以利用公式来解决这个问题。 我们…
阅读更多...
SpringBoot配置相关的内容

SpringBoot配置相关的内容

依赖Starter和Parent 查依赖坐标网站&#xff1a;Maven Repository: Search/Browse/Explorehttps://mvnrepository.com/ 设置配置文件 配置文件相关的配置 yml多个数据的书写 配置文件的读取
阅读更多...
机器学习-37-对ML的思考之机器学习发展的三个阶段和驱动AI发展三驾马车的由来

机器学习-37-对ML的思考之机器学习发展的三个阶段和驱动AI发展三驾马车的由来

文章目录 1 引言2 机器学习发展的三个阶段2.1 萌芽期(20世纪50年代)2.1.1 达特茅斯会议(人工智能诞生)2.1.2 机器学习名称的由来2.2 知识期(20世纪80年代)2.2.1 知识瓶颈问题2.2.2 机器学习顶级会议ICML2.2.3 Machine Learning创刊2.2.4 神经网络规则抽取2.3 算法期(20世纪90年…
阅读更多...
使用win32com将ppt(x)文件转换为pdf文件

使用win32com将ppt(x)文件转换为pdf文件

本文来记录下如何使用win32com将ppt(x)文件转换为pdf文件 文章目录 win32com概述win32com优缺点代码实例本文小结 win32com概述 Pywin32 是一个用于与 Microsoft Windows 操作系统交互的 Python 扩展模块&#xff0c;它提供了对多个 Windows API 的访问&#xff0c;包括对 Mic…
阅读更多...
鸿蒙实战：页面跳转

鸿蒙实战：页面跳转

文章目录 1. 实战概述2. 实现步骤2.1 创建项目2.2 准备图片素材2.3 编写首页代码2.4 创建第二个页面 3. 测试效果4. 实战总结 1. 实战概述 实战概述&#xff1a;本实战通过ArkUI框架&#xff0c;在鸿蒙系统上开发了一个简单的两页面应用。首页显示问候语和“下一页”按钮&…
阅读更多...
uniapp微信小程序接入airkiss插件进行WIFI配网

uniapp微信小程序接入airkiss插件进行WIFI配网

本文可参考uniapp小程序插件 一.申请插件 微信公众平台设置页链接&#xff1a;微信公众平台 登录您的小程序微信公众平台&#xff0c;进入设置页&#xff0c;在第三方设置->插件管理->添加插件中申请AiThinkerAirkissforWXMini插件&#xff0c;申请的插件appId为【wx6…
阅读更多...
django解决跨域问题

django解决跨域问题

django解决跨域问题 第一步 查看自己的 django 依赖里面有没有 django-cors-headers 包 直接 cmd pin list第二步如果没有 在自己的 pycharm 里面安装 django-cors-headers 包 pip install django-cors-headers第三步检查是否安装成功 查看自己的 django-cors-headers 安…
阅读更多...
【51单片机】LCD1602液晶显示屏

【51单片机】LCD1602液晶显示屏

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 LCD1602存储结构时序结构 编码 —— 显示字符、数字 LCD1602 LCD1602&#xff08;Liquid Crystal Display&#xff09;液晶显示屏是…
阅读更多...
【C++派生类新增对象的初始化顺序】单继承下派生类新增成员对象的初始化顺序

【C++派生类新增对象的初始化顺序】单继承下派生类新增成员对象的初始化顺序

单继承下派生类新增成员对象的初始化顺序 &#xff08;1&#xff09;【意识】派生类新增成员对象也要初始化&#xff0c;千万别忘&#xff01; &#xff08;2&#xff09;派生类构造函数执行顺序 ①调用基类构造函数 ②对派生类的新增成员对象初始化[调用顺序为类中声明顺序] ③…
阅读更多...
红外遥控信号解码

红外遥控信号解码

红外遥控信号解码 之前就已经做过红外遥控的解码了&#xff0c;但是一直没有做记录&#xff0c;最近的项目又使用到了红外遥控&#xff0c;索性就把他捡起来记录一下&#xff0c;对于信号的解码&#xff0c;我一般的习惯都是先用逻辑分析仪抓取一下信号波形&#xff0c;然后对…
阅读更多...
基于Python深度学习的【垃圾识别系统】实现~TensorFlow+人工智能+算法网络

基于Python深度学习的【垃圾识别系统】实现~TensorFlow+人工智能+算法网络

一、介绍 垃圾识别分类系统。本系统采用Python作为主要编程语言&#xff0c;通过收集了5种常见的垃圾数据集&#xff08;‘塑料’, ‘玻璃’, ‘纸张’, ‘纸板’, ‘金属’&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神经网络算法模型&#xff0c;通过对图像数据集进…
阅读更多...
stdin文件流指针

stdin文件流指针

stdin文件流指针&#xff08;FILE *&#xff09;&#xff0c;用于表示标准输入流。它通常与键盘进行交互&#xff0c;也可以通过重定向将其他输入源作为标准输入。
阅读更多...
GPU分布式通信技术-PCle、NVLink、NVSwitch深度解析

GPU分布式通信技术-PCle、NVLink、NVSwitch深度解析

GPU分布式通信技术-PCle、NVLink、NVSwitch 大模型时代已到来&#xff0c;成为AI核心驱动力。然而&#xff0c;训练大模型却面临巨大挑战&#xff1a;庞大的GPU资源需求和漫长的学习过程。 要实现跨多个 GPU 的模型训练&#xff0c;需要使用分布式通信和 NVLink。此外&#xf…
阅读更多...
调用门提权

调用门提权

在我写的2.保护模式&#xff0b;段探测这篇文章中&#xff0c;我们提到了S位对于段描述符的控制&#xff0c;之前我们已经介绍了代码段和数据段&#xff0c;现在我们来把目光转到系统段 在这么多中结构里面&#xff0c;我们今天要介绍的就是编号为12的&#xff0c;32位调用门 结…
阅读更多...
文心一言编写小球反弹程序并优化

文心一言编写小球反弹程序并优化

使用文心一言尝试编写一个小游戏&#xff0c;先完成 1.python中用pygame模块设计出一个显示区域720x540的屏幕&#xff0c;并绘制一个小球&#xff0c;可以完成小球在显示区域内自动随机直线移动&#xff0c;碰到显示区域的便捷并反弹 import pygame import random import sy…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023