Foreword: I have been idle in the company these days. It just happens that the team needs to pass the online exam, so I spontaneously used a simple exam WeChat applet. Pure front-end, the data is written in the data.json file, and each test result is stored in the cache.
1. Test data
When creating a small program project, we see that there are already index and logs pages, so leave them alone. We add a new data folder at the same level as the pages folder, and create a new json.js file to store our data.
1. Data format:
// data/json.js
var json = {
"001": [
{
"question": "爸爸的爸爸叫什么?",
"option": {
"A": "爷爷",
"B": "姥爷",
"C": "叔叔",
"D": "伯伯",
"E": "阿姨",
"F": "老舅"
},
"true": "A", // 正确答案
"type": 1, // 类型 1 单选 2 多选
"scores": 10, // 分值
"checked": false // 默认没有选中
},
{
"question": "妈妈的姐妹叫什么?",
"option": {
"A": "姥姥",
"B": "奶奶",
"C": "叔叔",
"D": "大姨",
"E": "小姨",
"F": "老舅"
},
"true": ["D", "E"], // 正确答案
"type": 2, // 类型 1 单选 2 多选
"scores": 10, // 分值
"checked": false // 默认没有选中
},
... ...
],
"002": [
// ...数据格式同上
]
}
2. Export data
// data/json.js
var json = {...}
module.exports = {
questionList: json
}
After defining the data, use module.exports to export at the end of json.js.
3. Import data
// app.js
// 导入数据
var jsonList = require('data/json.js');
App({
globalData: {
questionList: jsonList.questionList // 拿到答题数据
}
})
Use require in app.js to import data and define it in the global variable globalData. When using in the future:
首先 var app = getApp();
然后 app.globalData.questionList 就可以拿到导出的json数据。
Because we don't only have one set of test papers, we defined two arrays in json: 001 and 002. Afterwards, you can app.globalData.questionList["001"]selectively import test data.
2. Home page (exam entrance)
Add a home page in the pages folder. After the homepage is authorized to log in, click to jump to this page. There are two modules on the page: 001 and 002. Click on the module to take the corresponding exam.
1. Main code
home.wxml
<view class="page">
<view class="page-title">请选择试题：</view>
<view class="flex-box">
<view class="flex-item"><view class="item bc_green" bindtap="toTestPage" data-testId="001">001</view></view>
<view class="flex-item"><view class="item bc_red" bindtap="toTestPage" data-testId="002">002</view></view>
</view>
</view>
home.js
Page({
data: {
},
onLoad: function (options) {
},
toTestPage: function (e) {
let testId = e.currentTarget.dataset['testid'];
wx.navigateTo({
url: '../test/test?testId=' + testId
})
}
})
2. Page
3. Answer page and end page
Whether it is 001 or 002 test questions, they share a set of page templates. On this page, it is necessary to realize the functions of answering questions (including: each time you enter the test paper, the test questions must be arranged out of order), scoring, viewing wrong questions, and recording answer data (time/question id/score).
1. Implement a simple question and answer page (test page)
First create a test page folder, and write our answer template in the test.wxml file. In the first step, don't consider the functions of disorderly ordering and recording the answers, only realize the simple function of selecting answers and the next question and scoring.
test.wxml parsing
The answer template is very simple, mainly composed of questions, answers (single choice/multiple choice), next question (submit), and exit answer.
test.wxml code
<!--pages/test/test.wxml-->
<view class="page">
<!--标题-->
<view class='page__hd'>
<view class="page__title">
{
{index+1}}、{
{questionList[index].question}}
{
{questionList[index].type==1?"【单选】":"【多选】"}}
（{
{questionList[index].scores}}分）
</view>
</view>
<!--内容-->
<view class="page__bd">
<radio-group class="radio-group" bindchange="radioChange" wx:if="{
{questionList[index].type == 1}}">
<label class="radio my-choosebox" wx:for="{
{questionList[index].option}}" wx:for-index="key" wx:for-item="value">
<radio value="{
{key}}" checked="{
{questionList[index].checked}}"/>{
{key}}、{
{value}}
</label>
</radio-group>
<checkbox-group bindchange="checkboxChange" wx:else>
<label class="checkbox my-choosebox" wx:for="{
{questionList[index].option}}" wx:for-index="key" wx:for-item="value">
<checkbox value="{
{key}}" checked="{
{questionList[index].checked}}"/>{
{key}}、{
{value}}
</label>
</checkbox-group>
</view>
<!--按钮-->
<view class='page_ft'>
<view class='mybutton'>
<button bindtap='nextSubmit' wx:if="{
{index == questionList.length-1}}">提交</button>
<button bindtap='nextSubmit' wx:else>下一题</button>
<text bindtap='outTest' class="toindex-btn">退出答题</text>
</view>
</view>
</view>
test.wxss style
/* pages/test/test.wxss */
.page {
padding: 20rpx;
}
.page__bd {
padding: 20rpx;
}
.my-choosebox {
display: block;
margin-bottom: 20rpx;
}
.toindex-btn {
margin-top: 20rpx;
display:inline-block;
line-height:2.3;
font-size:13px;
padding:0 1.34em;
color:#576b95;
text-decoration:underline;
float: right;
}
test.js analysis
test.js
var app = getApp();
Page({
data: {
index: 0, // 题目序列
chooseValue: [], // 选择的答案序列
totalScore: 100, // 总分
wrongList: [], // 错误的题目集合
},
onLoad: function (options) {
console.log(options);
wx.setNavigationBarTitle({ title: options.testId }) // 动态设置导航条标题
this.setData({
questionList: app.globalData.questionList[options.testId], // 拿到答题数据
testId: options.testId // 课程ID
})
},
/*
* 单选事件
*/
radioChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
this.data.chooseValue[this.data.index] = e.detail.value;
console.log(this.data.chooseValue);
},
/*
* 多选事件
*/
checkboxChange: function (e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
this.data.chooseValue[this.data.index] = e.detail.value.sort();
console.log(this.data.chooseValue);
},
/*
* 下一题/提交 按钮
*/
nextSubmit: function () {
// 如果没有选择
if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) {
wx.showToast({
title: '请选择至少一个答案!',
icon: 'none',
duration: 2000,
success: function () {
return;
}
})
return;
}
// 判断答案是否正确
this.chooseError();
// 判断是不是最后一题
if (this.data.index < this.data.questionList.length - 1) {
// 渲染下一题
this.setData({
index: this.data.index + 1
})
} else {
// 跳转到结果页
}
},
/*
* 错题处理
*/
chooseError: function () {
var trueValue = this.data.questionList[this.data.index]['true'];
var chooseVal = this.data.chooseValue[this.data.index];
console.log('选择了' + chooseVal + '答案是' + trueValue);
if (chooseVal.toString() != trueValue.toString()) {
this.data.wrongList.push(this.data.index);
this.setData({
totalScore: this.data.totalScore - this.data.questionList[this.data.index]['scores'] // 扣分操作
})
}
}
})
At this point, a simple answer and the next page are completed.
2. The end page (results page)
Earlier we realized the display of the question and the operation of the next question. What should happen to the submit button of the last question? Usually it tells the user a result of answering a question. Below we create a results page to display the user's answer results (including score, evaluation, check wrong question button and return home button)
test.js jump to pass parameters
// 跳转到结果页
let wrongList = JSON.stringify(this.data.wrongList);
let chooseValue = JSON.stringify(this.data.chooseValue);
wx.navigateTo({
url: '../results/results?totalScore=' + this.data.totalScore + '&wrongList=' + wrongList + '&chooseValue=' + chooseValue
})
First of all, we need to improve the nextSubmit function in test.js so that when the submit button is clicked, we jump to the results page. Here we pass in three data: totalScore score, wrongList wrong question collection, and chooseValue user-selected answer collection.
results.wxml
Let's first look at the page structure of the results page
results.wxml code
<view class="page">
<!--标题-->
<view class='page-head'>
<view class="page-title">
答题结束！您的得分为:
</view>
<!--分数-->
<view class='page-score'>
<text class="score-num">{
{totalScore}}</text>
<text class="score-text">分</text>
</view>
<text class="score-remark">{
{totalScore==100?remark[0]:(totalScore>=80?remark[1]:remark[2])}}</text> <!-- 评价 -->
</view>
<!--查询错误-->
<view class='page-footer'>
<view class="wrong-view" wx:if="{
{wrongList.length > 0}}">
<text>错误的题数：</text>
<text wx:for="{
{wrongList}}">[{
{item-0+1}}]</text> 题
</view>
<view class="wrong-btns">
<button type="default" bindtap="toView" hover-class="other-button-hover" class="wrong-btn" wx:if="{
{wrongList.length > 0}}"> 点击查看 </button>
<button type="default" bindtap="toIndex" hover-class="other-button-hover" class="wrong-btn"> 返回首页 </button>
</view>
</view>
</view>
results.js
// pages/results/results.js
var app = getApp();
Page({
data: {
totalScore: null, // 分数
wrongList: [], // 错误的题数
chooseValue: [], // 选择的答案
remark: ["好极了！你很棒棒哦", "哎哟不错哦", "别灰心，继续努力哦！"], // 评语
},
onLoad: function (options) {
console.log(options);
wx.setNavigationBarTitle({ title: options.testId }) // 动态设置导航条标题
let wrongList = JSON.parse(options.wrongList);
let chooseValue = JSON.parse(options.chooseValue);
this.setData({
totalScore: options.totalScore,
wrongList: wrongList,
chooseValue: chooseValue
})
console.log(this.data.chooseValue);
},
// 查看错题
toView: function () {
},
// 返回首页
toIndex: function () {
wx.switchTab({
url: '../home/home'
})
}
})
- Analysis: We can see that in the onLoad function, we get the data we need: totalScore user score, wrongList wrong question collection, chooseValue user selected answer. Then it will be automatically rendered on the page.
- Data of the array type must be converted by JSON.parse().
Four, view the wrong question shell component
View the wrong question popup (wrongModal popup component)
We see that there is a click to view button on the results page. When it is clicked, a layer will pop up to display the user's wrong question information. Including the wrong question, the answer selected by the user and the correct answer to the question.
results use component bomb layer
First, configure in the results.json file
// results.json
{
"navigationBarTitleText": "WeChatTest",
"usingComponents": {
"wrong-modal": "/components/wrongModal/wrongModal"
}
}
Then introduce the component in results.wxml
<wrong-modal modalShow="{
{modalShow}}" wrongList="{
{wrongList}}" wrongListSort="{
{wrongListSort}}" chooseValue="{
{chooseValue}}" questionList="{
{questionList}}" testId="{
{testId}}"></wrong-modal>
wrongModal.wxml
<!--components/wrongModal/wrongModal.wxml-->
<view class="modal-page" wx:if="{
{modalShow}}">
<view class="modal-mask" bindtap="closeModal"></view>
<!-- 内容 -->
<view class="modal-content">
<view class="modal-title">
题目: {
{questionList[wrongList[index]].question}}
{
{questionList[wrongList[index]].type==1?"【单选】":"【多选】"}}
（{
{questionList[wrongList[index]].scores}}分）
</view>
<view class="modal-body">
<radio-group class="radio-group" bindchange="radioChange" wx:if="{
{questionList[wrongList[index]].type == 1}}">
<label class="radio my-choosebox" wx:for="{
{questionList[wrongList[index]].option}}" wx:for-index="key" wx:for-item="value">
<radio disabled="{
{true}}" value="{
{key}}" checked="{
{questionList[wrongList[index]].checked}}"/>{
{key}}、{
{value}}
</label>
</radio-group>
<checkbox-group bindchange="checkboxChange" wx:else>
<label class="checkbox my-choosebox" wx:for="{
{questionList[wrongList[index]].option}}" wx:for-index="key" wx:for-item="value">
<checkbox disabled="{
{true}}" value="{
{key}}" checked="{
{questionList[wrongList[index]].checked}}"/>{
{key}}、{
{value}}
</label>
</checkbox-group>
</view>
<!-- 答案解析 -->
<view class="modal-answer">
<text class="answer-text wrong-answer">
您的答案为 {
{chooseValue[wrongList[index]]}}
</text>
<text class="answer-text true-answer">
正确答案为 {
{questionList[wrongList[index]]['true']}}
</text>
</view>
<!-- 操作按钮 -->
<view class="modal-button">
<view wx:if="{
{index == wrongList.length-1}}" class="modal-btns">
<button bindtap='again' class="modal-btn">再来一次</button>
<button bindtap='toIndex' class="modal-btn">返回首页</button>
</view>
<button bindtap='next' wx:else class="modal-btn">下一题</button>
</view>
</view>
</view>
wrongModal.js
// components/wrongModal/wrongModal.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示
modalShow: {
type: Boolean,
value: false
},
// 题库
questionList: {
type: Array,
value: []
},
// 课程ID
testId: {
type: String,
value: '101-1'
},
// 错题题序集合
wrongList: {
type: Array,
value: []
},
// 选择的答案集合
chooseValue: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
index: 0 // wrongList的index
},
/**
* 组件的方法列表
*/
methods: {
// 下一题
next: function () {
if (this.data.index < this.data.wrongList.length - 1) {
// 渲染下一题
this.setData({
index: this.data.index + 1
})
}
},
// 关闭弹窗
closeModal: function () {
this.setData({
modalShow: false
})
},
// 再来一次
again: function () {
wx.reLaunch({
url: '../test/test?testId=' + this.data.testId
})
},
// 返回首页
toIndex: function () {
wx.reLaunch({
url: '../home/home'
})
}
}
})
It is easy to understand the code, mainly in the properties of the Component component to define the data to be received by the component, and the method is defined in the methods. Both the file structure and the events are very similar to the test page. The main difference is that the wrongModal page displays the wrong questions of the filtered users.
- Parsing
questionList[wrongList[index]] // 试题[错题集合[当前index]]
例如用户第2、3题答题错误(index从0开始) 错题集合=[2,3] 当前index=0 下一题index+1
那么依次展示的就是questionList[2]、questionList[3]题
Now, a simple answering applet is implemented. But now the questions that appear every time are fixed. If we have 20 questions in our 001 question bank, we are required to randomly select 10 questions for assessment each time, and these 10 questions are arranged out of order. What should I do? Just add a step out of order.
Five, out of order
1. Realize out of order
js code
onLoad: function (options) {
// ... ...省略
let count = this.generateArray(0, this.data.questionList.length - 1);
this.setData({
shuffleIndex: this.shuffle(count).slice(0, 10) // 生成随机题序并进行截取
})
console.log(this.data.shuffleIndex); // [2,0,3,1,5,4...]
},
/*
* 数组乱序/洗牌
*/
shuffle: function (arr) {
let i = arr.length;
while (i) {
let j = Math.floor(Math.random() * i--);
[arr[j], arr[i]] = [arr[i], arr[j]];
}
return arr;
},
/**
* 生成一个从 start 到 end 的连续数组
*/
generateArray: function (start, end) {
return Array.from(new Array(end + 1).keys()).slice(start)
},
test.wxml
- Analysis: Replace
all on the pagequestionList[index]withquestionList[shuffleIndex[index]],shuffleIndexis an array, which stores the subscripts of the titles after disorder. Use index control to display the out-of-order questions in turn.
2. Improve the result page and the wrong question bullet layer component
- After doing the above, we found:
- The order of the wrong questions on the results page is also out of order
- Click to view the pop-up wrongModal's wrong questions and the user's wrong questions are inconsistent (because the data in wrongModal is still the subscript in the correct order)
- The answer selected by the user is inconsistent with the answer selected in wrongModal. (The reason is the same as above)
- solve:
test page (test.js)
① data
data: {
index: 0, // 题目序列
chooseValue: [], // 选择的答案序列
totalScore: 100, // 总分
wrongList: [], // 错误的题目集合-乱序
wrongListSort: [], // 错误的题目集合-正序
},
Added wrongListSort collection in data
② chooseError method
// chooseError 错题处理方法更改如下
chooseError: function () {
var trueValue = this.data.questionList[this.data.shuffleIndex[this.data.index]]['true'];
var chooseVal = this.data.chooseValue[this.data.index];
console.log('选择了' + chooseVal + '答案是' + trueValue);
if (chooseVal.toString() != trueValue.toString()) {
this.data.wrongList.push(this.data.shuffleIndex[this.data.index]);
this.data.wrongListSort.push(this.data.index);
this.setData({
totalScore: this.data.totalScore - this.data.questionList[this.data.shuffleIndex[this.data.index]]['scores'] // 扣分操作
})
}
}
- Analysis:
var trueValue = this.data.questionList[this.data.shuffleIndex[this.data.index]]['true'];
// 当前正确答案更新为 乱序排列后的当前题的正确答案
this.data.wrongList.push(this.data.shuffleIndex[this.data.index]);
// wrongList错题集合里保存 乱序排列后的错题题序，
如错误的题为: [2,0,3] 相当于 001题库的[2,0,3]
this.data.wrongListSort.push(this.data.index);
// wrongListSort错题集合里保存 当前题目相对于乱序排列后的题的下标
例如 shuffleIndex = [2,0,1,3] 用户做错了第3、4题， wrongListSort保存为[2,3]
this.setData({
totalScore: this.data.totalScore - this.data.questionList[this.data.shuffleIndex[this.data.index]]['scores'] // 扣分操作
})
// 扣分操作，逻辑同上，扣的是乱序后对应的题目分值
③ nextSubmit method
// 判断是不是最后一题
if (this.data.index < this.data.questionList.length - 1) {
// ...
} else {
// 跳转到结果页
let wrongList = JSON.stringify(this.data.wrongList);
let wrongListSort = JSON.stringify(this.data.wrongListSort);
let chooseValue = JSON.stringify(this.data.chooseValue);
wx.navigateTo({
url: '../results/results?totalScore=' + this.data.totalScore + '&wrongList=' + wrongList + '&chooseValue=' + chooseValue + '&wrongListSort=' + wrongListSort + '&testId=' + this.data.testId
})
}
Pass the wrongListSort to the results page (Note: The wrongList here has also been updated to the set of out-of-order questions)
results page
① results.js
// results.js
data: {
wrongList: [], // 错误的题数-乱序
wrongListSort: [], // 错误的题数-正序
},
onLoad: function (options) {
// ... 省略
let wrongList = JSON.parse(options.wrongList);
let wrongListSort = JSON.parse(options.wrongListSort);
this.setData({
wrongList: wrongList,
wrongListSort: wrongListSort,
})
},
WrongListSort is defined in data, received and assigned in the onLoad life cycle.
② results.wxml
// results.wxml
<view class="wrong-view" wx:if="{
{wrongList.length > 0}}">
<text>错误的题数：</text>
<text wx:for="{
{wrongListSort}}">[{
{item-0+1}}]</text> 题
</view>
<wrong-modal modalShow="{
{modalShow}}" wrongList="{
{wrongList}}" wrongListSort="{
{wrongListSort}}" chooseValue="{
{chooseValue}}" questionList="{
{questionList}}" testId="{
{testId}}"></wrong-modal>
- Analysis:
Wrong number of questions: If wrongList is displayed, it is the disorder effect of [2],[0],[3] relative to the question bank, and wrongListSort displays the index of the wrong question relative to the current test.
<wrong-modal>Component binding wrongListSortdata. Because:
wrongListSort has another scene that needs to be used, that is, the wrong Modal bullet layer, showing "The answer you choose is XX". In test.js, we save the user's option set for this exam based on the subscript of the current question,
// test.js
this.data.chooseValue[this.data.index] = e.detail.value;
For example, there are three questions in total, this.data.chooseValue = ["B","C",["A","D"]] corresponds to the user options of the
three questions. If the user answers the second and third questions incorrectly, What is stored in wrongListSort is the subscript of the wrong question [1,2], and the user options of the current wrong question can be obtained in turn by switching the index.
// wrongModal.wxml
{
{chooseValue[wrongListSort[index]]}}
wrongModal component
① wrongModal.js
// wrongModal.js
properties: {
// ... 省略
// 错题题数-乱序
wrongList: {
type: Array,
value: []
},
// 错题题数-正序
wrongListSort: {
type: Array,
value: []
}
},
properties newly define the wrongListSort data to be received
① wrongModal.wxml
// wrongModal.wxml
<!-- 答案解析 -->
<view class="modal-answer">
<text class="answer-text wrong-answer">
您的答案为 {
{chooseValue[wrongListSort[index]]}}
</text>
<text class="answer-text true-answer">
正确答案为 {
{questionList[wrongList[index]]['true']}}
</text>
</view>
[Your answer is] The expression is updated.
5. Cache the user's answer data
First we need a Logs page to display the user's answer data. A Logs page has been generated when creating a small program project, so we can just change it on it.
1. Setting up the cache
Because it is a pure front-end small program, we use the cache to save the answer records. Set in test.js.
// test.js
// 设置缓存
var logs = wx.getStorageSync('logs') || []
let logsList = { "date": Date.now(), "testId": this.data.testId, "score": this.data.totalScore }
logs.unshift(logsList);
wx.setStorageSync('logs', logs);
At the end of each answer, you get the current logs cache data, manually define the data format (current timestamp/question id/score) in logList, append it to the obtained logs data, and finally call the wx.setStorageSync()interface to save the logs data.
2. Get the cache
logs.js
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: [],
},
onShow: function () {
this.setData({
logs: this.formatLogs()
})
},
// 拿到缓存并格式化日期数据
formatLogs: function () {
let newList = [];
(wx.getStorageSync('logs') || []).forEach(log => {
if (log.date) {
log['date'] = util.formatTime(new Date(log.date));
newList.push(log);
}
})
return newList;
}
})
Because the time of the data is a timestamp, we import the util.js file and use the formatTime method inside to convert the time format.
In data, we define an empty array of logs. In the formatLogs function, we wx.getStorageSync('logs')get the buffer and traverse-convert the time format-add to the new empty array, and finally return to the new array. In the OnShow life cycle, we call the formatLogs method to assign values to logs.
3. Data rendering
logs.wxml
<!--logs.wxml-->
<view class="page">
<view class="table" wx:if="{
{logs.length>0}}">
<view class="tr bg-w">
<view class="th first">时间</view>
<view class="th">试题</view>
<view class="th ">得分</view>
</view>
<block wx:for="{
{logs}}" wx:for-item="item">
<view class="tr">
<view class="td first">{
{item.date}}</view>
<view class="td">{
{item.testId}}</view>
<view class="td">{
{item.score}}</view>
</view>
</block>
</view>
<view class="no-record" wx:else>
<image src="/image/wechat.png" class="no-image"></image>
<text class="no-text">没有数据哦~</text>
</view>
</view>
Write a table structure yourself, traverse the logs cache data, and display data such as answer time/test id/score. Here we have also made a judgment, if there is no data, show a hint that there is no data.
logs.wxss
.table {
border: 0px solid darkgray;
font-size: 12px;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 2rem;
align-items: center;
}
.td {
width:40%;
justify-content: center;
text-align: center;
}
.bg-w{
background: snow;
}
.th {
width: 40%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 2rem;
align-items: center;
}
.first {
flex:1 0 auto;
}
.no-record {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.no-image {
width: 200rpx;
height: 200rpx;
margin-top: 200rpx;
margin-bottom: 40rpx;
}
.no-text {
font-size: 16px;
color: #ccc;
display: block;
}
4. tabBar page
Here we have completed the logs page, but where is its entrance? Don't worry, we now change the home page to a tabBar page.
app.json
"tabBar": {
"color": "#666666",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "答题"
},
{
"pagePath": "pages/logs/logs",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "记录"
}
]
}
First, configure the tabBar parameters in app.json. The pictures are placed in the image folder at the same level as pages.
In index.js, a wx.switchTabjump to the tabBar page.
// index.js
bindViewTap: function() {
wx.switchTab({
url: '../home/home'
})
}
effect
Gitee source code address
Complete source code of answering WeChat applet
end.