效果
分析
其实这个乍一看还是有难度的,很复杂,说复杂的主要原因是在数据结构的设计上,可以提取出以下几个需求:
- 点击【上一题】 时,如果是第一题,需要提示当前是第一题
- 点击【下一题】 时,如果是第最后一题,需要提示不可再往下了
- 【交卷】按钮在最后一题显示,点击时,把之前所有的答案传给服务器,如果有题目没有回答,还要给出提示,题目全部有答案后,才能提交服务器。
- 学生答题时,可以点击【上一题】,这时候,已经回答过的题目,答案要记住,并且UI界面上要有勾选。
数据结构
"DATA":{
"EXAMS":Array[3],
"SCORE":"3",
"SUBJECTCOUNT":"3"
}
- EXAMS:表示题目
- SCORE:总分
- SUBJECTCOUNT:题目数量
具体的情况来看看EXAMS
:
"EXAMS":[
{
"RN":"1",
"EXAMNID":"533",
"EXAMNAME":"周瑜姓什么",
"EXAMTYPES":"单选题",
"FIGURES":"1",
"RIGHTANSWER":"A",
"OPTIONA":"周",
"OPTIONB":"瑜",
"OPTIONC":"",
"OPTIOND":"",
"OPTIONE":"",
"OPTIONF":""
},
{
"RN":"2",
"EXAMNID":"534",
"EXAMNAME":"周瑜的老婆叫什么",
"EXAMTYPES":"多选题",
"FIGURES":"1",
"RIGHTANSWER":"A,C",
"OPTIONA":"小乔",
"OPTIONB":"大乔",
"OPTIONC":"大桥未久",
"OPTIOND":"黄月英",
"OPTIONE":"",
"OPTIONF":""
},
{
"RN":"3",
"EXAMNID":"535",
"EXAMNAME":"周瑜是男人?",
"EXAMTYPES":"是非题",
"FIGURES":"1",
"RIGHTANSWER":"A",
"OPTIONA":"对",
"OPTIONB":"错",
"OPTIONC":"",
"OPTIOND":"",
"OPTIONE":"",
"OPTIONF":""
}
],
- EXAMNAME :题目名称
- EXAMTYPES:单选题或多选题或是非题(ps:个人建议数据中使用整型来记录,如0代表单选,1代表多选2代表是非题)
- RIGHTANSWER:正确答案
- OPTIONA~OPTIONF:选项 A~F
代码实现
单选题 wxml
:
因为每个选项都设计了字段,所以,每个选项都得写进去:
<template name="singleSelectionTemplate">
<text class='single-selection-title'>{{currentQueenNumber}}. ({{EXAMTYPES}}){{EXAMNAME}}</text>
<radio-group class="single-radio-group" bindchange="singleRadioChange">
<label wx:if="{{OPTIONA != ''}}">A、
<radio value="{{'A'}}" checked="{{ANSWERA}}" />{{OPTIONA}}</label>
<label wx:if="{{OPTIONB != ''}}">B、
<radio value="{{'B'}}" checked="{{ANSWERB}}" />{{OPTIONB}}</label>
<label wx:if="{{OPTIONC != ''}}">C、
<radio value="{{'C'}}" checked="{{ANSWERC}}" />{{OPTIONC}}</label>
<label wx:if="{{OPTIOND != ''}}">D、
<radio value="{{'D'}}" checked="{{ANSWERD}}" />{{OPTIOND}}</label>
<label wx:if="{{OPTIONE != ''}}">E、
<radio value="{{'E'}}" checked="{{ANSWERE}}" />{{OPTIONE}}</label>
<label wx:if="{{OPTIONF != ''}}">F、
<radio value="{{'F'}}" checked="{{ANSWERF}}" />{{OPTIONF}}</label>
</radio-group>
</template>
单选题 wxss
.single-selection-title {
font-size: 30rpx;
font-weight: 700;
}
.single-radio-group {
display: flex;
flex-direction: column;
}
.single-radio-group label {
font-size: 30rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
}
多选题和是否题和上面类似,就不赘述。
<import src="single-selection-template/single-selection-template.wxml" />
<import src="multiple-selection-template/multiple-selection-template.wxml" />
<import src="yes-or-no-selection-template/yes-or-no-selection-template.wxml" />
<view class='container'>
<view class='tip'>
<text decode="{{true}}">欢迎<{{loader}}>进入考试系统 试题总共{{examsData.SUBJECTCOUNT ? examsData.SUBJECTCOUNT : '0'}}题 试题总分{{examsData.SCORE ?examsData.SCORE :'0' }}分</text>
</view>
<view class='subject'>
<block wx:if="{{currentExam.EXAMTYPES == '单选题'}}">
<template is="singleSelectionTemplate" data = "{{...currentExam}}"/>
</block>
<block wx:elif="{{currentExam.EXAMTYPES == '多选题'}}">
<template is="multipleSelectionTemplate" data = "{{...currentExam}}"/>
</block>
<block wx:elif="{{currentExam.EXAMTYPES == '是非题'}}">
<template is="yesOrNoSelectionTemplate" data = "{{...currentExam}}" />
</block>
</view>
<view class='action'>
<text class='action-former' bindtap='action_former'>上一题</text>
<text class='action-latter' bindtap='action_latter'>下一题</text>
</view>
<view wx:if='{{isCommitBtnShown}}' class='action_submit'>
<text bindtap='action_submit'>交卷</text>
</view>
</view>
利用template
将单选多选是否题都单独封装起来用。
完整代码请上 exam。