Wechat question answering applet v1.0 developed and built with cloud

Screenshot of interface

The answer applet is roughly as follows:

structural level

The main program consists of three interfaces, namely index, test and result. The structure level is shown in the following figure:

index: contains the page layout and style of the start answer interface, as well as js logic;
test: contains the page layout and style of the answer interface, as well as js logic;
results: contains the page layout and style of the answer score interface, as well as js logic;
app: global configuration file, global variable, etc;
Style: basic UI style of wechat applet;
Cloud development database: store relevant topic data.

1. index start interface

The main function is to display the large picture and information of the home page, button jump and share.

.wxml

<view catchtap="goToTest"> <button>Start answering questions</button> </view>

.js

//Event handler goToTest: function() { wx.navigateTo({ url: '../test/test' }) },

.wxml

<button open-type="share"> Recommend to friends </button>

.js

onShareAppMessage(res) { return { title: '@You, come and participate in the fire safety knowledge answer activity~' } },

2. test answer interface

The answer interface needs to do the following:

• Connect with the database to obtain the topic data;
• Front end interaction of the selected option;
• Click to switch to the next question;
• The system automatically determines the answer result and calculates the score;
• Submit scores to the database for saving;
• After the answer, jump to the answer score interface.

// Get question bank - function definition getQuestionList() { // The loading prompt box is displayed wx.showLoading({ title: 'Loading desperately' }); // Build query criteria activityQuestion.where({ // Specify query criteria and return a new collection reference with new query criteria true: _.exists(true) }) .get() .then(res => { // Get the collection data, or get the collection data filtered according to the query criteria. console.log('[Cloud database] [activityQuestion] query was successful') console.log(res.data) let data = res.data || []; // Send the data from the logical layer to the view layer, which is to update the data to the page display this.setData({ questionList:data, index: 0 }); // Hide the loading prompt box wx.hideLoading(); }) },

.wxml

<radio-group bindchange="radioChange"> <label wx:for="{}" wx:for-index="key" wx:for-item="value" wx:key="index"> <radio value="{}" checked="{}" /> <text>{}</text> </label> </radio-group>

.js

// Check option event radioChange(e){ this.data.chooseValue[this.data.index] = e.detail.value; },

.wxml

<button bindtap='nextSubmit' wx:else>Next question</button>

.js

// Next question / submit button nextSubmit(){ // If there is no choice if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) { return wx.showToast({ title: 'Please select the answer!', icon: 'none', duration: 2000 }) } // Determine whether the selected option is the correct answer this.chooseJudge(); // Judge whether it is the last question this.lastJudge(); }, // Judge whether it is the last question lastJudge(){ if (this.data.index < this.data.questionList.length - 1) { // If it is not the last question, switch to the next one let index = this.data.index + 1; this.setData({ index }) } else { // If it is the last question, submit the answer sheet this.addExamRecord() } },

// Determine whether the selected option is the correct answer chooseJudge(){ var trueValue = this.data.questionList[this.data.index]['true']; var chooseVal = this.data.chooseValue[this.data.index]; if (chooseVal.toString() != trueValue.toString()) { // If the answer is wrong, record the wrong question this.data.wrong++; this.data.wrongListSort.push(this.data.index); this.data.wrongList.push(this.data.questionList[this.data.index]._id); }else{ // If the answer is correct, the total score will be accumulated this.setData({ totalScore: this.data.totalScore + 5 }) } },

// Submit answer sheet addExamRecord(){ wx.showLoading({ title: 'Submitted in the answer sheet' }); let examResult = { wrong: this.data.wrong, totalScore: this.data.totalScore }; activityRecord.add({ data: { ...examResult, createDate: db.serverDate() } }).then(res => { // Jump to the answer result page to view the results wx.redirectTo({ url: '../results/results?id=' + res._id }); wx.hideLoading(); }) }

// Jump to the answer result page to view the results wx.redirectTo({ url: '../results/results?id=' + res._id });

3. results answer result interface

It is mainly to query the answer and display the score. In the answer page, the score is submitted to the database for saving. Then you can get it from the database.

.js

Page({ data: { totalScore: null, wrong: 0, zql: null }, onLoad(options) { // View answer scores this.getExamResult(options.id); }, // System automatic scoring getExamResult(id){ wx.showLoading({ title: 'System scoring' }); activityRecord .doc(id) .get() .then(res => { let examResult = res.data; let { wrong, totalScore } = examResult; this.setData({ totalScore, wrong, zql: (20-wrong)/20*100 }) wx.hideLoading(); }) }, })

Well, the v1.0 version of the wechat question answering applet built by cloud development is now complete. The source code has been submitted to gitee and sprinkled with flowers~

The next version v2.0 is under development

25 November 2021, 21:39 | Views: 9344