马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
原博：uni-app小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)_uniapp答题模板-CSDN博客
标签： 小程序 uni-app
模板链接:答题模板
html部分
这里没啥好说的,就是根据不同的状态显示不同的内容
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,所以要+1
- console.log(e);
- let index = e.target.current;
- this.pageIndex = index + 1
- if(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;
- //获取对应value
- var 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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
