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

Recently, I was bored, so I took the time to do a series of tutorials for the answer applet and share the source code. It is a wechat answer applet v1.0 developed and built with the 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.

(1) The key code of the button jump is the catchtap click event and goToTest event handler.

.wxml

<view catchtap="goToTest">
    <button class='cu-btn bg-red round block lg'>Start answering questions</button>
</view>

.js

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

(2) Share the implementation, use the open type = "share" attribute on the button, and configure onshareaappmessage in the page js.

.wxml

<button class="cu-btn line-red round block lg margin-top" 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.

(1) Connect with the database to obtain the topic data;

// 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();
    })
  },

(2) Front end interaction of the selected option;

.wxml

<radio-group class="radio-group" bindchange="radioChange">
      <label class="radio my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key"  wx:for-item="value" wx:key="index">
        <radio value="{{key}}" checked="{{questionList[index].checked}}" />
        <text class="margin-left-xs">{{value}}</text>
      </label>
    </radio-group>

.js

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

(3) Click to switch to the next question;

.wxml

<button bindtap='nextSubmit' class="cu-btn bg-red round lg" 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()
    }
  },

(4) The system automatically determines the answer result and calculates the score;

// 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
      })
    }
  },

(5) Submit scores to the database for saving;

// 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();
    })
  }

(6) After the answer, jump to the answer score interface.

// 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

Tags: Javascript Front-end Mini Program

Posted on Thu, 25 Nov 2021 21:39:22 -0500 by stephenk