微信小程序（看文档写实例七）微信小程序课堂宝APP实现在线课堂测试

￡神魔★判官ぃ 2022-05-11 01:10 180阅读 0赞

接着上篇博文已经完成签到功能，这篇来完成课堂测试功能。

# 一、需求描述 #

1、在后台选择题、主观题表中上传测试题

2、客户端获取题目信息

3、把题目信息格式化加载显示

4、客户端答题，主观题每题能上传一张答题图片

5、客户端答题结束提交到服务器

# 二、前台页面 #

提交大量数据当然用表单了，代码并不多。wxml代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class='section' hidden='{ {selectedScrollItemsHiddenSign[1]}}'&gt; &lt;form bindsubmit="formSubmit"&gt; &lt;view class='section item-block' style='text-align: center;font-size=20px;'&gt;{ {onlineTestSeries}}&lt;/view&gt; &lt;view class='section item-block'&gt;选择题&lt;/view&gt; &lt;view class='section item-block' wx:for="{ {onlineTestChooseItems}}" wx:for-item="i" wx:key="*unique"&gt; &lt;view class='choose-item-title'&gt;{ {i.number_id}}、{ {i.title}}&lt;/view&gt; &lt;radio-group class="radio-group" name="choose-radio-group{ {i.number_id}}"&gt; &lt;label class="radio" wx:for="{ {i.chooseItems}}" wx:key="*unique"&gt; &lt;radio value="{ {item.name}}"/&gt; { {item.value}} &lt;/label&gt; &lt;/radio-group&gt; &lt;/view&gt; &lt;view class='section item-block'&gt;简答题&lt;/view&gt; &lt;view class='section item-block' wx:for="{ {onlineTestSelfQuestionItems}}" wx:key="*unique"&gt; &lt;view class='choose-item-title'&gt;{ {item.number_id}}、{ {item.title}}&lt;/view&gt; &lt;textarea class="answer-mainbody" name="answer-textarea{ {item.number_id}}" placeholder="在这里写下您的答案..." type="textarea"/&gt; &lt;view class="answer-img" name="answer-img{ {item.number_id}}" id="{ {index}}" bindtap='chooseAnswerImage'&gt;&lt;/view&gt; &lt;text class='answer-img-text'&gt;{ {answerImgPaths[index].path}}&lt;/text&gt; &lt;/view&gt; &lt;view class='section item-block'&gt; &lt;button formType="submit" class='btn-commit'&gt;提交&lt;/button&gt; &lt;/view&gt; &lt;/form&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

wcss代码如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /* 每个题目块样式 */ .item-block{ margin: 2%; background: rgb(232, 233, 232); color: royalblue; font-size: 15px; padding: 4%; border-radius: 3%; width: 96%; display: flex; flex-direction: column; } /* 单选题radio-group样式 */ .radio-group{ margin: 2%; display: flex; flex-direction: column; } /* 主观题答题区 */ .answer-mainbody{ height: 150px; margin: 2%; padding: 6px; font-family: monospace; white-space: pre-wrap; background: whitesmoke; border-radius: 3%; border: 1px solid rgb(214, 214, 214); } /* 主观题图片上传 */ .answer-img{ margin: 1%; background: url(http://i.pengxun.cn//content/images/imgpost2/01/post-big-pic-01.png) no-repeat 0 -286px; background-size: 100%; height: 26px; width: 26px; } .answer-img-text{ height: 25px; padding: 6px; /* 超出一行文字自动隐藏 */ overflow:hidden; /* 文字隐藏后添加省略号 */ text-overflow:ellipsis; /* 强制不换行 */ white-space:nowrap; } .btn-commit{ background: royalblue; color: whitesmoke; } </td> 
 </tr> 
 </tbody> 
</table>

# 三、后台代码 #

## 1、初始data ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> data: { // 选择题题目信息列表 onlineTestChooseItems:null, //课堂测试试题系列 onlineTestSeries:null, // 主观题题目信息列表 onlineTestSelfQuestionItems:null, // 模拟测试试题系列 simulateTestSeries: null, // 主观题答题图片路径列表 answerImgPaths:[], }, </td> 
 </tr> 
 </tbody> 
</table>

## 2、获取题目信息 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /** * 获得课堂测试答题信息 * id为scroll-view menu中已经加载完成的index * testType为测试类型，可以是课堂测试、模拟测试或者其他，以服务器中的数据为参照 */ getPracticeItemsInfo:function(id,testType){ let query_choose = Bmob.Query('choose_item'); query_choose.order('number_id'); query_choose.equalTo("type", "==", testType); query_choose.find().then(res =&gt; { if(res.length&gt;0){ if (testType=='课堂测试') that.setData({ onlineTestSeries:res[0].series}); else that.setData({ simulateTestSeries: res[0].series }); } var choose_items = new Array(); for (var i = 0; i &lt; res.length; i++) { choose_items[i] = { objectId: res[i].objectId, number_id: res[i].number_id, title: res[i].title, chooseItems: [ { name: 'a', value: res[i].choose_item_a }, { name: 'b', value: res[i].choose_item_b }, { name: 'c', value: res[i].choose_item_c }, { name: 'd', value: res[i].choose_item_d } ] } } let query_subjective = Bmob.Query('subjective_item'); query_subjective.order('number_id'); query_choose.equalTo("type", "==", testType); query_subjective.find().then(res_subjective =&gt; { var subjective_items = new Array(); for (var i = 0; i &lt; res_subjective.length; i++) { subjective_items[i] = { objectId: res_subjective[i].objectId, number_id: res_subjective[i].number_id, title: res_subjective[i].title }; } that.data.selectedScrollItemsLoadingComplete[id] = true; that.setData({ onlineTestChooseItems: choose_items, onlineTestSelfQuestionItems: subjective_items, selectedScrollItemsLoadingComplete: that.data.selectedScrollItemsLoadingComplete }); wx.hideToast(); }).catch(err =&gt; { wx.hideToast(); console.log(err.msg); wx.showToast({ title: '加载出错', duration: 2000 }); }); }).catch(err =&gt; { wx.hideToast(); console.log(err); wx.showToast({ title: '加载出错', duration: 2000 }); }); }, </td> 
 </tr> 
 </tbody> 
</table>

## 3、上传主观题图片 ##

先上传主观题图片，然后把上传好的url记录下来，最后保存到对应的主观题目即可。查看文档发现上传图片要用wx.api中的wx.chooseImage(Object object)，object的参数如下表：

<table> 
 <thead> 
 <tr> 
 <th>属性</th> 
 <th>类型</th> 
 <th>默认值</th> 
 <th>是否必填</th> 
 <th>说明</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>count</td> 
 <td>number</td> 
 <td>9</td> 
 <td>否</td> 
 <td>最多可以选择的图片张数</td> 
 </tr> 
 <tr> 
 <td>sizeType</td> 
 <td>Array.&lt;string&gt;</td> 
 <td>['original', 'compressed']</td> 
 <td>否</td> 
 <td>所选的图片的尺寸</td> 
 </tr> 
 <tr> 
 <td>sourceType</td> 
 <td>Array.&lt;string&gt;</td> 
 <td>['album', 'camera']</td> 
 <td>否</td> 
 <td>选择图片的来源</td> 
 </tr> 
 <tr> 
 <td>success</td> 
 <td>function</td> 
 <td>&nbsp;</td> 
 <td>否</td> 
 <td>接口调用成功的回调函数</td> 
 </tr> 
 <tr> 
 <td>fail</td> 
 <td>function</td> 
 <td>&nbsp;</td> 
 <td>否</td> 
 <td>接口调用失败的回调函数</td> 
 </tr> 
 <tr> 
 <td>complete</td> 
 <td>function</td> 
 <td>&nbsp;</td> 
 <td>否</td> 
 <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
 </tr> 
 </tbody> 
</table>

于是得到如下上传代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // 主观题选择答题拍照或者图片 chooseAnswerImage: function(e) { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original'], // 指定是原图 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 // 如果该题已经上传答题图片则先删除原先的图片 var currentAnswerImgPathsItem = that.data.answerImgPaths[e.currentTarget.id]; if (currentAnswerImgPathsItem != null) { // 传入string是单个文件删除，传入array是批量删除 var del = Bmob.File(); del.destroy([currentAnswerImgPathsItem.file.url]).then(res1 =&gt; { that.uploadAnswerImg(e.currentTarget.id, res.tempFilePaths[0]); }).catch(err =&gt; { console.log(err); wx.showToast({ title: '图片上传失败', duration: 2000 }) }) } else { that.uploadAnswerImg(e.currentTarget.id, res.tempFilePaths[0]); } } }); }, uploadAnswerImg: function(pathId, pathImg) { // 上传选中的图片 var file = Bmob.File('subjectImg.jpg', pathImg); wx.showToast({ title: '正在上传', icon: 'loading', duration: 10000 }); file.save().then(res =&gt; { wx.hideToast(); wx.showToast({ title: '图片上传成功', duration: 2000 }) that.data.answerImgPaths[pathId] = { path: pathImg, file: res[0] }; that.setData({ answerImgPaths: that.data.answerImgPaths }); }).catch(err =&gt; { console.log(err); wx.showToast({ title: '图片上传失败', duration: 2000 }) }); }, </td> 
 </tr> 
 </tbody> 
</table>

## 4、提交答题数据 ##

提交答案分选择题和主观题，主观题还有对应的图片，由于bmob中pointer类型不能直接新增，因此在新增一条含有pointer字段的数据时，要先增其他的信息成功后在回调函数中再把对应的pointer类型数据插入。下面是上传一个题目的代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /** * 上传单个题信息 * value是题目信息 * itemType是题目类型 */ uploadAItemAnswersInfo: function(value, itemType) { var query = Bmob.Query('choose_item_submit'); query.set("answer", value.answer); if (value.file != null) query.set("subjectiveImg", value.file); // 先保存answer和上传成功的图片信息 query.save().then(res =&gt; { query.get(res.objectId).then(res1 =&gt; { // 保存关联对象 // 设置用户关联对象 var userIdPointer = Bmob.Pointer('_User'); var pointerUserId = userIdPointer.set(value.userId); res1.set('userId', pointerUserId); if (itemType == 'choose') { // 设置选择题关联对象 var chooseItemIdPointer = Bmob.Pointer('choose_item'); //关联字段 var pointerIdChooseItemId = chooseItemIdPointer.set(value.chooseItemId); res1.set('chooseItemId', pointerIdChooseItemId); // 设置后保存 res1.save(); } else { // 设置主观题关联对象 var subjectItemIdPointer = Bmob.Pointer('subjective_item'); //关联字段 var pointerIdSubjectItemId = subjectItemIdPointer.set(value.subjectItemId); res1.set('subjectiveItemId', pointerIdSubjectItemId); res1.save(); } return true; }); }).catch(err =&gt; { wx.showToast({ title: '上传失败', duration: 2000 }); return false; }); }, </td> 
 </tr> 
 </tbody> 
</table>

接下来是只要把表单中的所有答题信息遍历，按类型上传即可，不过再上传结果判定时要确保每个题目都已经上传，有一个题目上传不成功就提示没有提交成功。下面是上传所有答题数据的代码：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> /** * 上传所有答案信息 * value是表单提交上来的信息 */ uploadAnswersInfo: function(value) { // 显示加载loading wx.showToast({ title: '提交中...', icon: 'loading', duration: 1000 }); // 上传题目结果列表 var allUploadSuccess = []; // 选择题索引 var chooseItemIndex = 0; // 主观题索引 var subjectiveItemIndex = 0; // 遍历submit提交的数据 for (var keyname in value) if (value[keyname] != "") { //console.log(value.keyname); // 判断是否是单选题 var data = {}; if (keyname.indexOf('choose-radio-group') != -1) { data = { userId: app.globalData.currentUser.objectId, chooseItemId: that.data.onlineTestChooseItems[chooseItemIndex].objectId, file: null, answer: value[keyname] } allUploadSuccess[chooseItemIndex + subjectiveItemIndex] = that.uploadAItemAnswersInfo(data, 'choose'); chooseItemIndex++; } else { var fileName = null; if (that.data.answerImgPaths[subjectiveItemIndex] != null) fileName = that.data.answerImgPaths[subjectiveItemIndex].file; data = { userId: app.globalData.currentUser.objectId, subjectItemId: that.data.onlineTestSelfQuestionItems[subjectiveItemIndex].objectId, file: fileName, answer: value[keyname] } allUploadSuccess[chooseItemIndex + subjectiveItemIndex] = that.uploadAItemAnswersInfo(data, 'subjective'); subjectiveItemIndex++; } } // 定时监听所有返回结果 var checkResult = setInterval(function() { if (allUploadSuccess.length == that.data.onlineTestChooseItems.length + that.data.onlineTestSelfQuestionItems.length) { var allUploadSuccessFlag = true; for (var i = 0; i &lt; allUploadSuccess.length; i++) { if (allUploadSuccess[i] == false) { allUploadSuccessFlag = false; if (i &gt; that.data.onlineTestChooseItems.length) wx.showToast({ title: '第' + (i + 1) + '选择题上传失败', duration: 1000 }); else { wx.showToast({ title: '第' + (i + 1 - that.data.onlineTestChooseItems.length) + '主观题上传失败', duration: 1000 }); } } } // 清除定时器 clearInterval(checkResult); wx.hideToast(); // 所有题目都成功提交 if (allUploadSuccessFlag) { // 上传提交记录 var query = Bmob.Query('submit_record'); query.set("type", '课堂测试'); query.set('series', that.data.onlineTestSeries); query.save().then(res =&gt; { query.get(res.objectId).then(res1 =&gt; { var pointer = Bmob.Pointer('_User'); var poiID = pointer.set(app.globalData.currentUser.objectId); res1.set('userId', poiID); res1.save(); // 显示加载logo wx.showToast({ title: '提交成功', duration: 3000 }); }).catch(err =&gt; {}); }).catch(err =&gt; {}); } } else { wx.showToast({ title: '提交中...', icon: 'loading', duration: 1000 }); } }, 1000); }, </td> 
 </tr> 
 </tbody> 
</table>

# 四、效果 #

## 1、服务器题目信息 ##

选择题信息

![70][]

主观题信息

![70 1][]

## 2、获取题目信息加载 ##

![70 2][]

![70 3][]

## 3、提交结果 ##

![70 4][]

然后课堂测试和模拟测试功能一样，就是换个数据，因为课堂提问要实时推送，而bmob实时推送是收费的，这在后面做最后的完成，下节先实现练习模块的前台。

[70]: /images/20220511/948828d82a11442e8f624a1372e18df8.png
[70 1]: /images/20220511/6523be02e9794566866ceb1a6191b2b6.png
[70 2]: /images/20220511/480dd34b137949e1a520cb16216dd3eb.png
[70 3]: /images/20220511/ed1a6cfba7a04670ad7cad132afbea32.png
[70 4]: /images/20220511/94f86373d663419c892247aa55dcb4da.png