The first stage is the interface design part, which describes how to build the answer mini-program interface.

The second stage is functional interaction. The last two articles respectively describe how to use cloud development to realize the function of query question bank and dynamically update the obtained question data to the answer page.

This chapter will be followed by a discussion on how to achieve the complete logic and functions of the answer interaction.

Software architecture: wechat native small program + cloud development

Poke source code address, get source code, version continuous iteration…

Without further ado, let’s get right to the code. Step by step demonstration, hand by hand to teach you to achieve a complete answer interaction logic and functions.

It mainly involves answering questions, judging right and wrong, automatic scoring by the system, switching to the next question, submitting the answer sheet, jumping to the answer result page and so on.

Answer the questions on the event

The radio-group component is mainly used here. When the selected item in the radio-group changes, the change event is triggered. Detail = {value:[array of values of the selected radio]}.

Use the bindchange binding in radio-group to listen for the event radioChange.

Test.js defines the radioChange function.

RadioChange (e){this.data.chooseValue[this.data.index] = e.dail.value; radioChange(e){this.data.chooseValue[this.data.index] = e.dail.value; },Copy the code

Switch to the next event

Bind an event handler to the component, such as bindtap, and when the user clicks on the component, the corresponding event handler will be found in the corresponding Page on the Page.

Write the corresponding event handler in the corresponding Page definition, with the parameter event.

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 answer! ', icon: 'None ', duration: 2000})} // Check whether the selected option is the correct answer this.choosejudge (); This.lastjudge (); this.lastjudge (); },Copy the code

What is an event

  • Events are the communication mode from the view layer to the logical layer.

  • Events feed user behavior back to the logical layer for processing.

  • Events can be bound to components, and when a triggering event is reached, the corresponding event handler in the logical layer is executed.

  • Event objects can carry additional information such as ID, dataset, and Touches.

Right and wrong decision logic

ChooseJudge (){var trueValue = this.data.questionList[this.data.index]['true']; var chooseVal = this.data.chooseValue[this.data.index]; if (chooseVal.toString() ! = trueValue. ToString ()) {// Wrong.data.wrong+ +; this.data.wrongListSort.push(this.data.index); this.data.wrongList.push(this.data.questionList[this.data.index]._id); }else{this.setData({totalScore: this.data.totalScore + this.data.questionList[this.data.index]['scores'] }) } },Copy the code

Switch or commit logic

/ / determines if the last question lastJudge () {if (this. Data. The index <. This data. The questionList. Length - 1) {/ / if it is not the last question, Let index = this.data.index + 1; This.setdata ({index})} else {this.addexamRecord ()}},Copy the code

Submit the answer to the cloud database

The system automatically scores, save the results, jump to the answer result page.

AddExamRecord (){wx.showloading ({title: 'commit to answer'}); let examResult = { wrongList: this.data.wrongList, wrong: this.data.wrong, wrongListSort: this.data.wrongListSort, chooseValue: this.data.chooseValue, totalScore: this.data.totalScore }; activityRecord.add({ data: { ... ExamResult, createDate: db.serverDate()}}). Then (res => {wx. /results/results' }); wx.hideLoading(); })}Copy the code

summary

So far, the complete answer interaction logic and functions have been realized, that is, the answer link of the entire answer page has the ability of front and back end and database. In the next article, you will implement the answer results page to view your scores in real time from the database.