微信小程序 考试业务数据结构设计

效果

分析

其实这个乍一看还是有难度的，很复杂，说复杂的主要原因是在数据结构的设计上，可以提取出以下几个需求：

• 点击【上一题】 时，如果是第一题，需要提示当前是第一题
• 点击【下一题】 时，如果是第最后一题，需要提示不可再往下了
• 【交卷】按钮在最后一题显示，点击时，把之前所有的答案传给服务器，如果有题目没有回答，还要给出提示，题目全部有答案后，才能提交服务器。
• 学生答题时，可以点击【上一题】，这时候，已经回答过的题目，答案要记住，并且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}}">欢迎&lt;{{loader}}&gt;进入考试系统 试题总共{{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。