激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

界面交互篇:答題頁的答題邏輯交互開發(fā)

發(fā)布時間：2024-01-18 20:59:14 瀏覽量：181次

微信小程序云開發(fā)實戰(zhàn)-答題積分賽小程序

界面交互篇：答題頁的答題邏輯交互開發(fā)

前面的那一篇文章，我們已經(jīng)完成了使用云開發(fā)的聚合能力實現(xiàn)從題庫中隨機抽取題目功能。

在頁面加載時，實現(xiàn)從題庫中隨機抽取題目功能。那么，拿到數(shù)據(jù)后要干什么？如何做？

動態(tài)數(shù)據(jù)綁定

實現(xiàn)動態(tài)數(shù)據(jù)綁定，其實，概括起來就三步走：

1）先通過 Collection.get 來獲取題庫集合里的題目數(shù)據(jù);


2）再使用setData函數(shù)將題目數(shù)據(jù)從邏輯層發(fā)送到視圖層；


3）再Mustache 語法（雙大括號）將變量包起來，實現(xiàn)動態(tài)數(shù)據(jù)綁定。


選擇選項答題事件

這里主要用到了radio-group組件，radio-group中選中項發(fā)生改變時觸發(fā) change 事件，detail = {value:[選中的radio的value的數(shù)組]}。

在radio-group使用bindchange綁定監(jiān)聽事件radioChange。


test.js定義監(jiān)聽函數(shù)radioChange。

// 選中選項事件
  radioChange(e){
    this.data.chooseValue[this.data.index] = e.detail.value;
  },

切換下一題事件

在組件中綁定一個事件處理函數(shù)，如bindtap，當用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<button bindtap='okFunc' class="cu-btn lg round bg-sky">確定</button>

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

okFunc(){
 
    // 如果沒有選擇
    if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) {  
      return wx.showToast({
        title: '請選擇答案!',
        icon: 'none'
      })
    }
 
    // 判斷所選擇的選項是否為正確答案
    this.chooseJudge();
 
    this.setData({
      isOk: true
    })
  },

得分判定邏輯

// 判斷所選擇的選項是否為正確答案
  chooseJudge(){
    var trueValue = this.data.questionList[this.data.index]['true'];
    var chooseVal = this.data.chooseValue[this.data.index];
    if (chooseVal.toString() != trueValue.toString()) {
      // 答錯則記錄錯題
      this.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']
      })
    }
  },

實時更新用戶的答題積分

在答題完畢后，實時計算成績并更新所獲得積分到用戶答題總積分，也就是累加。

關(guān)鍵代碼解讀：

  // 實時更新用戶的答題積分
  updateIntegration(){
    // 連接云數(shù)據(jù)庫
    const db = wx.cloud.database();
    // 獲取集合的引用
    const user = db.collection('user');
    // 數(shù)據(jù)庫操作符，通過 db.command 獲取
    const _ = db.command;
 
    user
    .doc(this.data.id) // 獲取集合中指定記錄的引用。方法接受一個 id 參數(shù)，指定需引用的記錄的 _id。
    .update({          // 發(fā)起更新請求
      data: {
        score: _.inc(this.data.score) // 更新操作符，原子操作，用于指示字段自增
      }
    }).then(res => {
      
    })
  },

本篇小結(jié)

至此，已經(jīng)實現(xiàn)了完整的答題交互邏輯以及功能，也就是整個答題頁面的答題環(huán)節(jié)已經(jīng)具備前后端以及數(shù)據(jù)庫能力。云開發(fā)能力，真的極大地提升了開發(fā)效率。據(jù)我搭建過的網(wǎng)絡(luò)安全知識答題、交通安全答題、 消防安全知識宣傳、 安全生產(chǎn)知識學(xué)習、學(xué)法普法、五四青年節(jié)等答題活動或有獎競答等應(yīng)用，進行整理總結(jié)并分享，希望對大家有幫助。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定