考试系统（uniapp）第二节（考试试题）

首先是考试的倒计时

<view class="" style="float: right;margin-right: 5%;">距离考试结束：<u-count-down :timestamp="timestamp"></u-count-down></view>

这里讲一下思路，直接上代码不太好

下面的这里是根据题型的下标分别进行考试和渲染，区分考过的和没考过，考过的用红色区分

下面是代码，这里是已经接过的，仅供参考，希望对你有帮助

<template><view><u-navbar :title="examName" :background="background" title-color="#FFFFFF" back-icon-color="#FFFFFF"><!-- <text style="color: #fff;">{{examName}}</text> --></u-navbar><!-- 答题卡 --><view class="content"><!-- 题目 --><text>{{examNames}}</text><text>{{examRemark}}</text><text>{{singleChoiceSort}}.{{singleChoiceQuestion}}</text><!-- 单选题目 --><view class="" v-if="isDanxuan"><u-radio-group @change="radioGroupChange" v-model='value'><u-radio @change="radioChange(index)" v-for="(item, index) in optionList" :key="index" :name="item.singleChoiceOptionChar">{{item.singleChoiceOptionChar+'.'+item.singleChoiceOptionName}}</u-radio></u-radio-group></view><!-- 多选题目--><view class="duoxuan" v-if="isDuoxuan" v-for="(item, index) in optionList" :key="index" @click="checkbox(index)"><checkbox v-for="(ites,indes) in multipleChoiceOptionChar" :key='indes' :checked="true" :value="item.multipleChoiceOptionChar"v-model="multipleChoiceOptionChar" v-if="item.multipleChoiceOptionChar==ites" @click="checkBox(index)">{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}</checkbox><checkbox v-for="(ites,indes) in multipleChoiceOptionChar" :key='indes' v-if="item.multipleChoiceOptionChar!=ites && multipleChoiceOptionChar!=nulll"@change="checkboxGroupChange" @click="checkBox(index)">{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}</checkbox><!-- <checkbox v-if="multipleChoiceOptionChar.length<1">{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}</checkbox> --><!-- v-for="(item, index) in optionList" :key="index" @click="checkbox(index)" --></view><view class="uni-form-item uni-column" v-if="multipleChoiceOptionChar.length<1&&isDuoxuan"><checkbox-group v-model="multipleChoiceOptionChar" name="ai" @change="chk" v-for="(item, index) in optionList" :key="index"><checkbox :value="item.multipleChoiceOptionChar" class="chebox" />{{item.multipleChoiceOptionChar+'.'+item.multipleChoiceOptionName}}</checkbox-group></view><!-- 判断题目 --><view class="" v-if="isjudgment"><!-- <u-radio-group  @change="radioGroupChangeJudgment"><u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">{{item.text}}</u-radio></u-radio-group> --><u-radio-group v-model="isjudgmentVlues" @change="radioGroupChangeJudgment"><u-radio @change="radioChange1" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">{{item.text}}</u-radio></u-radio-group></view><!-- 简答题 --><view v-if="issimptop"><u-input v-model="textareaText" :type="type" :border="border" :height="height" :auto-height="autoHeight" @input='textareclick' /></view></view><!-- 考试倒计时 --><view class="" style="float: right;margin-right: 5%;">距离考试结束：<u-count-down :timestamp="timestamp"></u-count-down></view><!-- 选择 --><!-- 上题下题 --><view class="boxTixing"><!--    <u-button type="success" style="background-color: #FFF;border: 1px solid #E2E2E2; color: #000000;">上一题</u-button><u-button type="success" style="background-color: #FFF;border: 1px solid #E2E2E2; color: #000000;">下一题</u-button> --><u-button type="success" @click="complete">完成</u-button></view><!-- 选项 --><view class="contents"><ul class='contentUl' v-if='isanswer'><li v-for="(item,index) in singleChoiceList" :key='index' @click='choice(item.singleChoice,item.optionList,index)':class="answerJson.bigSubjectList[0].smallSubjectList[index].single.finish==true?'addColor':'addColorwhith'">{{index+1}}</li><li v-for="(item,index) in selectTypelist[1].multipleChoiceList" :key='index' @click="checkboxClick(item.multipleChoice,index,item.optionList)":class="answerJson.bigSubjectList[1].smallSubjectList[index].multiple.answerCharList.length>0?'addColor':'addColorwhith'">{{singleChoiceList.length+index+1}}</li><li v-for="(item,index) in selectTypelist[2].judgmentList" :key='index' @click="judgeClick(index)" :class="answerJson.bigSubjectList[2].smallSubjectList[index].judgment.finish==true?'addColor':'addColorwhith'">{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+index+1}}</li><li v-for="(item,index) in selectTypelist[3].simpleTopicList" :key='index' @click="simpleTop(index)" :class="answerJson.bigSubjectList[3].smallSubjectList[index].simpleTopic.finish==true?'addColor':'addColorwhith'">{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+selectTypelist[3].simpleTopicList.length+index+1+singleChoiceList.length}}</li></ul><!-- 没有做过 --><ul class='contentUl' v-if='isanswer==false'><li v-for="(item,index) in singleChoiceList" :key='index' @click='choice(item.singleChoice,item.optionList,index)'>{{index+1}}</li><li v-for="(item,index) in selectTypelist[1].multipleChoiceList" :key='index' @click="checkboxClick(item.multipleChoice,index,item.optionList)">{{singleChoiceList.length+index+1}}</li><li v-for="(item,index) in selectTypelist[2].judgmentList" :key='index' @click="judgeClick(index)">{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+index+1}}</li><li v-for="(item,index) in selectTypelist[3].simpleTopicList" :key='index' @click="simpleTop(index)">{{singleChoiceList.length+selectTypelist[1].multipleChoiceList.length+selectTypelist[3].simpleTopicList.length+index+1+singleChoiceList.length}}</li></ul></view><!-- <u-empty text="暂无考试内容,请等待~" mode="list" v-if="isanswer"></u-empty> --><u-toast ref="uToast" /></view>
</template><script>import helper from '../../../../common/helper.js'import jquery from '../../../../common/jquery-1.8.3.min.js'export default {data() {return {background: {backgroundColor: '#FF0036',},examName: '考试',selectTypelist: [], //所有题目singleChoiceList: [], //单选examNames: '单选题', //题目类型examRemark: '',singleChoiceSort: 1, //题目数singleChoiceQuestion: 0, //考试题目optionList: [], //单选选择singleChoiceOptionChar: '',// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中value: '',index: 0, //单选下标getAnswerSheet: [], //答题卡// bigSubjectList:[],//答题数据bigSubjectListType: ['A', 'B', 'C', 'D'],answerJson: null,isDanxuan: true,isDuoxuan: false,isjudgment: false,issimptop: false,multipleChoiceOptionChar: [],//多选显示checked: true,ischecked: false,checkboxClickIndex: 0, //多选下标checkBoxlist: ['A', 'B', 'C', 'D', 'E'], //复选框选项indexlist: [],list: [{name: 1,text: '正确',disabled: false,},{name: 0,text: '错误',disabled: false},],isjudgmentVlues: '',isjudgmentIndex: 0,type: 'textarea',border: true,height: 200,autoHeight: true,textareaText: '',issimpleTopIndex: 0,timestamp: 86400,cls: [],clslist: [],userId: '',pattern: 0, //是否为正式考试isanswer: false, //考试内容是否存在}},onLoad(option) {this.pattern = option.patternuni.getStorage({key: 'id_key',success: (res) => {this.userId = res.data}})},created() {this.skilis()this.skilisType()this.countDown()// this.radioChange()},methods: {// 考试skilis() {// alert(this.customerId)let that = thisuni.request({url: helper.kileApi + 'app/examAnswerSheet/getAnswerSheet',method: 'POST',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8'},data: {examId: 9,userId: that.userId,},success: (res) => {this.getAnswerSheet = res.data.dataif (this.getAnswerSheet != null) {this.answerJson = JSON.parse(this.getAnswerSheet.answerJson)}console.log(res.data.data)if (this.answerJson != null) {this.isanswer = truethis.value = this.answerJson.bigSubjectList[0].smallSubjectList[0].single.answerCharthis.examName = res.data.data.examName} else {}console.log(this.answerJson)}})},// 题型skilisType() {// alert(this.customerId)let that = thisuni.request({url: helper.kileApi + 'app/examAnswerSheet/getSelfExamSelect',method: 'POST',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8'},data: {examId: 9,userId: that.userId,},success: (res) => {that.selectTypelist = res.data.dataconsole.log(that.selectTypelist[0].select.examRemark)that.singleChoiceList = that.selectTypelist[0].singleChoiceListthat.examNames = that.selectTypelist[0].select.examNamethat.examRemark = that.selectTypelist[0].select.examRemarkuni.setStorage({key: 'selectTypelist',data: that.singleChoiceList,success() {console.log('成功了')},fail() {console.log('缓存失败了')}});console.log(that.examRemark)that.optionList = that.selectTypelist[0].singleChoiceList[0].optionListthat.singleChoiceQuestion = that.selectTypelist[0].singleChoiceList[0].singleChoice.singleChoiceQuestion}})uni.getStorage({key: 'singleChoiceList',success: (res) => {// console.log("获取id")console.log(res.data);that.singleChoiceList = res.datathat.singleChoiceList = that.selectTypelist[0].singleChoiceListthat.examNames = that.selectTypelist[0].select.examNamethat.examRemark = that.selectTypelist[0].select.examRemark   that.optionList = that.selectTypelist[0].singleChoiceList[0].optionListthat.singleChoiceQuestion = that.selectTypelist[0].singleChoiceList[0].singleChoice.singleChoiceQuestion}});console.log(that.examRemark)},// 单选choice(singleChoice, optionList, index) {this.index = indexthis.singleChoiceSort = this.index + 1this.singleChoiceQuestion = singleChoice.singleChoiceQuestionthis.examNames = this.selectTypelist[0].select.examNamethis.examRemark = this.selectTypelist[0].select.examRemark// 选择的选项this.value = this.answerJson.bigSubjectList[0].smallSubjectList[index].single.answerCharthis.optionList = optionListthis.singleChoiceOptionChar = optionList.singleChoiceOptionChar// console.log(this.value)this.isDanxuan = truethis.isDuoxuan = falsethis.isjudgment = falsethis.issimptop = false},// 选中某个单选框时，由radio时触发radioChange(e) {// alert("1")// this.skilis()console.log(e);// console.log(JSON.toString(this.getAnswerSheet.answerJson))// console.log(this.selectTypelist[0].singleChoiceList[this.index].singleChoice.singleChoiceAnswer)// console.log(this.getAnswerSheet.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.answerChar)// 添加对象answer// this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.answer = this.bigSubjectListType[e]this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.finish = trueconsole.log(this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single)this.answerJson.bigSubjectList[0].smallSubjectList[this.index].single.answerChar = this.bigSubjectListType[e]this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)// let s=12console.log(typeof this.getAnswerSheet.answerJson == 'string')let that = this// var jsondata = JSON.stringify(this.getAnswerSheet)// uni.request({//   url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheetObject',//     method: 'POST',//     header: {//         'content-type': 'application/x-www-form-urlencoded;charset=utf-8;charset=utf-8',//    },//    data: this.getAnswerSheet,//    success: (res) => {//       // this.examName = res.data.data.examName//    }// })},// 选中任一radio时，由radio-group触发radioGroupChange(e) {// console.log(e);},// checkboxClick(multipleChoice, index, optionList) {// alert(index)console.log(index)console.log(optionList)console.log(multipleChoice)this.examNames = this.selectTypelist[1].select.examNamethis.examRemark = this.selectTypelist[1].select.examRemarkthis.singleChoiceSort = this.singleChoiceList.length + index + 1this.singleChoiceQuestion = multipleChoice.multipleChoiceQuestionthis.optionList = optionList// this.value = this.answerJson.bigSubjectList[0].smallSubjectList[0].single.answerCharthis.isDanxuan = falsethis.isjudgment = falsethis.isDuoxuan = truethis.issimptop = falsethis.checkboxClickIndex = indexif (this.answerJson.bigSubjectList[1].smallSubjectList[this.checkboxClickIndex] != null) {this.multipleChoiceOptionChar = this.answerJson.bigSubjectList[1].smallSubjectList[this.checkboxClickIndex].multiple.answerCharListconsole.log(this.multipleChoiceOptionChar)} else {this.multipleChoiceOptionChar = multipleChoiceconsole.log(this.multipleChoiceOptionChar)}console.log(this.multipleChoiceOptionChar)// $('.contentUl li').addClass},chk: function(e) {this.cls = e.detail.value //定义cls获取复选框的数组值this.cls = this.cls.join(",") //将数组转化为字符串向后台传递console.log(this.cls)// console.log(this.)if (this.cls != "") {this.clslist.push(this.cls)}this.answerJson.bigSubjectList[1].smallSubjectList[this.checkboxClickIndex].multiple.answerCharList = this.clslistthis.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)let that = this// var jsondata = JSON.stringify(this.getAnswerSheet)uni.request({// url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheetObject',url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheet',method: 'POST',header: {'content-type': 'application/json;charset=utf-8',},data: this.getAnswerSheet,success: (res) => {this.examName = res.data.data.examName}})console.log(this.clslist)},// 判断judgeClick(index) {// console.log(index)this.isjudgment = truethis.isDanxuan = falsethis.isDuoxuan = falsethis.issimptop = false// console.log(this.selectTypelist[2].judgmentList[index].judgmentQuestion)this.examNames = this.selectTypelist[2].select.examNamethis.examRemark = this.selectTypelist[2].select.examRemarkthis.singleChoiceQuestion = this.selectTypelist[2].judgmentList[index].judgmentQuestionthis.singleChoiceSort = this.singleChoiceList.length + this.selectTypelist[1].multipleChoiceList.length + index + 1this.isjudgmentVlues = this.value = this.answerJson.bigSubjectList[2].smallSubjectList[index].judgment.answerthis.isjudgmentIndex = index// alert(this.isjudgmentIndex)// console.log(isjudgmentVlues)},radioGroupChangeJudgment(e) {console.log(e)this.answerJson.bigSubjectList[2].smallSubjectList[this.isjudgmentIndex].judgment.answer = ethis.answerJson.bigSubjectList[2].smallSubjectList[this.isjudgmentIndex].judgment.finish = trueconsole.log(this.answerJson.bigSubjectList[2].smallSubjectList[this.isjudgmentIndex].judgment.answer)this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)if (typeof this.getAnswerSheet.answerJson == 'string') {try {JSON.parse(this.getAnswerSheet.answerJson);return true;} catch (e) {console.log(e);return false;}}let that = this// var jsondata = JSON.stringify(this.getAnswerSheet)uni.request({url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheet',method: 'POST',header: {'content-type': 'application/json;charset=utf-8',},data: this.getAnswerSheet,success: (res) => {this.examName = res.data.data.examName}})},// 简单题simpleTop(index) {this.isjudgment = falsethis.isDanxuan = falsethis.isDuoxuan = falsethis.issimptop = truethis.issimpleTopIndex = index// alert(this.issimpleTopIndex)this.examNames = this.selectTypelist[3].select.examNamethis.examRemark = this.selectTypelist[3].select.examRemark// console.log(this.selectTypelist[3].simpleTopicList[index].simpleTopicQuestion)this.singleChoiceQuestion = this.selectTypelist[3].simpleTopicList[index].simpleTopicQuestionthis.singleChoiceSort = this.singleChoiceList.length + this.selectTypelist[1].multipleChoiceList.length + this.selectTypelist[3].simpleTopicList.length + index + 1 + this.singleChoiceList.lengththis.textareaText = this.answerJson.bigSubjectList[3].smallSubjectList[index].simpleTopic.answer},// 提交简答textareclick(e) {console.log(e)this.answerJson.bigSubjectList[3].smallSubjectList[this.issimpleTopIndex].simpleTopic.answer = econsole.log(this.answerJson.bigSubjectList[3].smallSubjectList[this.issimpleTopIndex].simpleTopic.answer)this.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)let that = this// var jsondata = JSON.stringify(this.getAnswerSheet)uni.request({url: helper.kileApi + 'app/examAnswerSheet/saveAnswerSheet',method: 'POST',header: {'content-type': 'application/json;charset=utf-8',},data: this.getAnswerSheet,success: (res) => {this.examName = res.data.data.examName}})},// 倒计时countDown() {// alert(this.customerId)let that = thisuni.request({url: helper.kileApi + 'app/examAnswerSheet/getSurplusTime',method: 'POST',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8'},data: {examId: 9,userId: that.userId,},success: (res) => {this.timestamp = res.data.data / 60console.log(res.data.data)}})},// 完成complete() {// 提交考试模式this.getAnswerSheet.pattern = this.patternthis.getAnswerSheet.answerJson = JSON.stringify(this.answerJson)// var jsondata = JSON.stringify(this.getAnswerSheet)uni.request({url: helper.kileApi + 'app/examAnswerSheet/submitAnswerSheet',// url: helper.kileApi + 'app/examAnswerSheet/submitAnswerSheetObject',method: 'POST',header: {'content-type':'application/json;charset=utf-8',},data: this.getAnswerSheet,success: (res) => {if (res.data.status == 200) {this.$refs.uToast.show({title: '提交成功',type: 'success',url:'/pages/index/examination/examination_careful'// url: '/pages/index/mytechnology/skill/skills'})} else {this.$refs.uTips.show({title: res.data.msg,type: 'success',duration: '2300'})}}})},}}
</script><style>/* 答题卡 */.content {width: 90%;height: 238px;margin-left: 5%;margin-top: 15px;/* border: 1px solid red; */}.contents {width: 90%;height: auto;margin-left: 5%;margin-top: 30px;border: 1px solid #ECECEC;position: absolute;}.duoxuan uni-checkbox {margin-top: 5px;}.duoxuan uni-checkbox:nth-child(2) {display: none;border: 1px solid red;}.duoxuan uni-checkbox:nth-child(3) {display: none;border: 1px solid red;}.addColor {color: red;}.redColor {border: 1px solid red}.addColorwhith {color: #000000;}.content text:nth-child(1) {display: inline-block;width: 100%;height: auto;font-size: 18px;font-weight: bold;}.boxTixing {width: 100%;height: 30px;margin-top: 58px;/* border: 1px solid red; */}.u-btn--success {width: 20%;height: 100%;display: inline-block;line-height: 30px;text-align: center;margin-left: 3px;margin-left: 3%;}.content text:nth-child(2) {display: inline-block;width: 100%;height: auto;font-size: 16px;margin-top: 5px;}.u-btn[data-v-059e7e79] {padding: 0 0px;z-index: 1;}.content text:nth-child(3) {display: inline-block;width: 100%;height: auto;font-size: 18px;margin-top: 5px;border-bottom: 1px solid #ECECEC;}.contentUl {width: 90%;height: auto;list-style-type: none;margin: 0;padding: 0;margin-top: 0px;margin-left: 5%;position: relative;}.contentUl text {display: none;position: relative;left: 10px;top: 5px;margin-top: 15px;/* padding-bottom: 0px; */}.contentUl li {width: 25px;height: 25px;border: 1px solid #ECECEC;float: left;margin-left: 10px;margin-top: 11px;line-height: 25px;text-align: center;}
</style>

考试系统（uniapp）第二节（考试试题）相关推荐

科目一在线考试系统php,单机考试系统/科目一模拟考试在线-考试系统
产品品牌融智云考产品型号 TH 生产城市北京发货城市北京供货总量 10000 最小起订 1 产品单价 100 计量单位个单机考试系统/科目一模拟考试在线-考试系统作为高校教学的重要组 ...
优考试在线考试系统计算机,使用优考试在线考试系统解决企业员工考核评比
随着信息时代的高速发展,很多实体传统的东西已经慢慢搬到网络上了,在线考试就是在其中发展的很迅速的一种,企业的员工考核.员工的培训.评比都可以使用企业在线考试系统来解决了,电脑+微信+小程序+手机考试相 ...
Java JSP JAVAweb在线考试系统源码网上考试系统源码（ssm考试管理系统）
Java JSP JAVAweb在线考试系统源码网上考试系统源码(ssm考试管理系统) 常见的Javaweb题材有理财系统,就业管理系统,汽车租赁,简易网盘,疫情数据查看,在线招标房,屋租赁,教务管 ...
JSP JAVAweb在线考试系统源码网上考试系统源码（ssm考试管理系统）
JSP JAVAweb在线考试系统源码网上考试系统源码(ssm考试管理系统)
java基于微信小程序的在线考试系统 uniapp 小程序
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受学生的喜爱,微信在线考试系统被学生普遍使用,为方便学生能够可以随时 ...
高校在线考试系统_高校在线考试系统有哪些优点
学校平时出题考试,通常会重复劳动,造成人力.财力.物力和时间资源的浪费,如今,信息技术高速发展的时代,我们也会把信息技术也运用在教育上,对于考试出题,越来越多的学校会采取无纸化的学生在线考试系统,让考 ...
软考-架构师-第七章-系统规划第二节可行性研究与效益分析 (读书笔记)
版权声明主要针对希赛出版的架构师考试教程<系统架构设计师教程(第4版)>,作者"希赛教育软考学院".完成相关的读书笔记以便后期自查,仅供个人学习使用,不得用于任何商业 ...
软考-架构师-第五章-系统性能评价第二节性能计算(读书笔记)
版权声明主要针对希赛出版的架构师考试教程<系统架构设计师教程(第4版)>,作者"希赛教育软考学院".完成相关的读书笔记以便后期自查,仅供个人学习使用,不得用于任何商业 ...
学生机房随堂测试软件,全智能考试系统——随堂评测考试系统
简介: 青岛正日全智能考试系统--随堂评测软件是直接面向中小学.职校.高校用户.该系统以教学目标为依据,组织灵活方便.重视教学效果的及时反馈,集考试管理.题库管理.考试过程控制(答题.监考).评分. ...
在线考试系统,在线考试系统网站WEB,在线考试系统毕业设计
项目背景和意义目的:本课题主要目标是设计并能够实现一个在线考试的java系统,整体使用了基于浏览器的B/S架构,技术上使用了基于java的springboot框架:使用浏览器,通过后台添加考试题目, ...

考试系统（uniapp）第二节（考试试题）

考试系统（uniapp）第二节（考试试题）相关推荐

最新文章

热门文章

考试系统（uniapp）第二节 （考试试题）

考试系统（uniapp）第二节 （考试试题）相关推荐

最新文章

热门文章

考试系统（uniapp）第二节（考试试题）

考试系统（uniapp）第二节（考试试题）相关推荐