基于微信小程序的多選題題庫設計與開發

收稿日期：2023-07-17

DOI：10.19850/j.cnki.2096-4706.2024.05.010

摘" 要：文章介紹了基于微信小程序的多選題題庫的設計與開發。通過對多選題小程序主體功能的分析，構建多選題小程序的界面及交互功能；通過設計題目數據結構、開發前端界面和構建后端邏輯，實現了一個功能完善的多選題題庫應用；通過用戶評估和功能測試，驗證了該應用的可行性和有效性。實踐證明，基于微信小程序的多選題題庫使用起來方便快捷，正確性、穩定性高，滿足了用戶的學習需求。

關鍵詞：小程序；多選題；前端后端

中圖分類號：TP311" " 文獻標識碼：A" 文章編號：2096-4706（2024）05-0045-05

Design and Development of Multiple Choice Question Bank Based on WeChat Mini Program

DAI Feng

（Jiangsu Taixing Secondary Specialized School， Taizhounbsp; 225400， China）

Abstract： This paper introduces the design and development of multiple choice question bank based on WeChat mini program. Through the analysis of the main function of the multiple choice question mini program， the interface and interactive functions of the multiple choice question mini program are constructed. Through the design of the topic data structure， the development of the front-end interface and the construction of the back-end logic， a well-functioning multiple choice question bank application is implemented. Through user evaluation and functional testing， the feasibility and effectiveness of the application are verified. Practice has proven that the multi choice question bank based on WeChat mini programs is convenient， fast， accurate， and stable to use， meeting the learning needs of users.

Keywords： mini program; multiple choice question; front-end and back-end

0" 引" 言

多選題作為一種常見的教學評測手段，在教育教學中得到了廣泛的應用。隨著移動互聯網技術的迅猛發展，微信小程序作為一種輕量級、便捷的應用形式，得到越來越多的關注和應用。微信小程序可以在微信生態圈內快速傳播和使用，學生隨時隨地可以通過微信小程序進行多選題練習。進行基于微信小程序的多選題練習，有助于提高學生的思考、分析和推理能力，激發學生對知識的深層次理解和靈活應用，提升學生分析、判斷、解決問題等方面的綜合能力。

1" 多選題小程序主體功能分析

基于微信小程序的多選題題庫應用應提供用戶友好的題目瀏覽、答題、反饋和統計功能，幫助用戶進行多選題的測試和學習，并通過個性化學習和用戶登錄設計進一步提升用戶體驗和學習效果[1]。

1.1" 題目展示功能

在題目展示頁面應顯示題目的編號、題目的詳細內容和相關選項信息。如果題目中及選項內容中包含圖片，應在正確位置上顯示圖片，還應正確顯示特殊的專業符號，如圖1所示。

圖1" 題目顯示界面

1.2" 答題功能

在題目展示頁面，用戶可以選擇題目中的多個選項作為答案。用戶選擇好選項后，所選選項將被記錄，并在界面上顯示選中的選項。用戶可以取消選擇已選中的選項，之后重新選擇答案。本例中，點擊各選項前的方框即可完成選擇或取消選擇。

用戶選擇完答案后，點擊按鈕提交答題。系統將用戶給出的答案與正確答案進行比較，并給出相應的反饋。如果用戶作答正確，系統將顯示“答對了”并更新用戶得分。如果用戶作答錯誤，系統將顯示“答錯了”并將該題記為錯題。

1.3" 錯題查看功能

用戶可以查看個人答錯的題項。在錯題展示頁面，顯示錯題的內容和用戶的選擇答案。用戶通過查看錯題，重新回顧題項內容和重新作答，如圖2所示。

1.4" 統計功能

統計功能用于顯示用戶答題的總題數和正確率。通過顯示用戶的得分和答錯的題目數量，使用戶即時了解個人答題進展，提升個人使用小程序題庫的沉浸式體驗感。如圖1所示為采用進度條的方式實行答題進程管理，并在下方顯示得分和錯題數[2]。

1.5" 數據存儲和管理

使用云數據庫或本地數據庫存儲題目數據和用戶的答題記錄，數據存儲和管理包括題目添加、編輯和刪除，即時更新題庫的內容等。本示例中，應用騰訊云自帶的云數據庫上傳及更新數據，并可即時調用數據[3]。

圖2" 錯題顯示界面

2" 多選題小程序題庫開發設計

2.1" 題庫數據結構設計

定義題庫的數據結構，包括題目內容、選項、答案等字段。開發時，應選擇適當的數據庫存儲方式（如云數據庫或本地數據庫），存儲題目數據。可以使用關系型數據庫（如MySQL）或非關系型數據庫（如MongoDB）來存儲題庫數據[4]。在騰訊云數據庫中，可以通過內容模型輕松搭建各種數據，如圖3所示，還可以通過數據導入實施題庫內容的增添、刪除、更新，如圖4所示。

2.2" 前端界面開發與實現

題庫的前端界面設計主要包括題目詳情頁面和結果頁面的設計[5]。通過WXML代碼在前端界面實現了題目的動態展示、選項選擇和提交功能。WXML涵蓋元素、組件、渲染以及一些基本的功能和交互，并可根據實際需求進一步擴展和優化程序的功能和樣式。

1）主要組件的使用：

lt;viewgt;組件，用于創建一個可視化的容器以及組織和布局其他元素。

lt;textgt;組件，用于顯示文本內容。

lt;progressgt;組件，用于顯示進度條，通過percent屬性控制進度。

lt;checkbox-groupgt;組件，用于實現多選功能。

lt;checkboxgt;組件，用于創建多個選項供用戶選擇。

lt;imagegt;組件，用于顯示題目中的圖片。

2）界面渲染的實現：

采用{{current}}、{{total}}、{{percent}}、{{subject.title}}等變量，通過數據綁定方式將題庫內容渲染到對應的位置。在開發設計中，采用wx：if和wx：for（微信小程序的條件渲染和列表渲染指令）根據條件顯示或循環渲染元素，這樣能夠逐條渲染展示選項內容。

3）功能和交互的實現：

采用bindchange=\"checkboxChange\"方式綁定多選框組件的bindchange事件，用于處理用戶選擇的選項。

bindtap=\"submit\"：綁定了提交按鈕的bindtap事件，用于處理用戶的答題提交操作。采用disabled=

\"{{disabled}}\"，通過disabled屬性來控制提交按鈕的禁用狀態。

4）核心代碼示例：

本例中，重點展示多選功能的界面實現。

//進度條設置

lt;progress class=\"pro\" percent=\"{{percent}}\" show-info border-radius=\"20\" stroke-width=\"20\" /gt;

//多選項A項內容設置

lt;checkbox-group bindchange=\"checkboxChange\"gt;

lt;view class=\"item\"gt;

lt;checkbox value=\"A\" checked=\"{{isSelect}}\" /gt;

lt;textgt;{{subject.X1}}lt;/textgt;

lt;image class=\"Ximage\" src=\"{{subject.X1image}}\"

wx：if=\"{{subject.X1image.lengthgt;0}}\" mode=\"heightFix\"gt;

lt;/imagegt;

lt;/viewgt;

┅┅┅┅┅┅┅┅┅┅┅┅┅┅（其他代碼省略）

2.3" 后端邏輯開發與實現

微信小程序是采用JavaScript代碼開發而成的，開發中涵蓋了數據和變量、頁面生命周期、數據綁定和事件處理、答題和提交、錯題處理以及其他功能，實現了題目加載、答題邏輯和錯題查看等基本功能，還可以根據實際需求進一步擴展和優化代碼[6]。后端開發的關鍵技術是，通過后端API接口獲取題目數據以及處理用戶提交的答案，實現題目數據的獲取和答案校對的邏輯，確保選擇與答題的正確性和一致性[7]。

1）主要數據和變量。變量titles用于存儲題庫數據的數組；errorOptions、jxjcerrorOptions、jcclerrorOptions等變量用于存儲用戶答錯的題目選項的數組。

2）題目導入與渲染。實現數據導入和渲染展示，這里采用了onLoad（頁面加載時執行的生命周期函數），并使用wx.showLoading指令顯示“數據加載中”提示。通過微信小程序云開發數據庫獲取題庫數據，并將數據存儲到titles數組。再通過titles數組將題目內容分配到各變量值中，實現設置頁面的初始數據（包括題目、題目總數、當前題目索引等）展示。

3）答案選擇。采用checkboxChange多選框選項改變時的事件處理函數實現數據綁定和事件處理，從而獲取用戶選擇的選項，同時更新頁面數據中的userSelect字段。

4）答題和提交。采用submit提交答題的事件處理函數獲取正確答案和用戶選擇的答案，判斷答案是否正確，并根據結果更新用戶得分、總分和答錯題目的數量[8]。同時更新頁面的進度條和題目數據，判斷是否是最后一題，如果是，則禁用提交按鈕并顯示提示。判斷答案個數是否與正確答案個數相同，若相同，則進一步判斷答案是否完全正確。

5）錯題處理。采用errorOption點擊查看錯題按鈕的事件處理函數，將用戶答錯的題目選項存儲到緩存中，并根據用戶是否有錯題進行跳轉或顯示提示[9，10]。

2.4" 核心代碼示例

本例中，圍繞后端開發與設計的關鍵技術，展示多選功能的相關代碼。

//提交答題

submit（） {

Letarr = this.data.subject.answer.split（\"，\"）

let len = arr.length

let arr2 = this.data.userSelect

let len2 = arr2.length

//判斷是否正確

//一、是否沒有選擇

//當數據為空字符串或1的時候，我們對這個數據取反

if （！this.data.userSelect） {

wx.showToast（{

title： '您還沒有選擇呢'，

icon： 'none'，

}）

return

}

//二、判斷正確

else if （len == len2） { //1， 判斷個數是否相同

let rigthNum = 0

arr2.forEach（item =gt; {if （arr.indexOf（item） gt; -1） {rigthNum++}

}）

//2，計算答對的個數

//3，判斷答對的個數是否等于答案的個數

if （rigthNum == len） {

wx.showToast（{

title： '答對啦'，

}）

this.setData（{

userScore： this.data.userScore + 1，

}）

this.setData（{totalScore：（this.data.userScore*100/titles.length）.toFixed（2）

}）}

else {

wx.showToast（{

icon： 'none'，

title： '您答錯啦'，

duration： 1000，

}）

let subjectNow = this.data.subject

//在新的題目中，增加用戶選擇項

subjectNow.userSelect=this.data.userSelect" " " " errorOptions.push（subjectNow）

this.setData（{

totalError： this.data.totalError + 1

}） }

} else {

wx.showToast（{

icon： 'none'，

title： '您答錯啦'，

duration： 1000，

}）

let subjectNow = this.data.subject

//在新的題目中，增加用戶選擇項

subjectNow.userSelect=this.data.userSelect

errorOptions.push（subjectNow）

this.setData（{

totalError： this.data.totalError + 1

}）}

this.setData（{

percent： （（this.data.current / titles.length） * 100）.toFixed（2）

}）

// 題目重置（代碼略）

//判斷是否是最后一題（代碼略）

}，

3" 結" 論

通過設計題目數據結構、開發前端界面和構建后端邏輯，成功實現了一個功能完善的多選題題庫應用。開發過程中，加強了多選題題庫應用的功能測試，驗證了題目展示、選項選擇和答案校對等功能的正確性和穩定性。在實際應用中，根據微信小程序后臺數據分析應用的功能和特性，評估應用的用戶體驗和易用性，及時更新改進軟件。

實踐證明，基于微信小程序的多選題題庫應用具有簡單易用、個性化和實時反饋等特點，具有良好的實用性。基于微信小程序的多選題題庫應用可提供題目資源、實時反饋和統計信息等功能，切實滿足用戶的學習需求，可使用戶獲得良好的學習體驗，能夠顯著提升學生的學習效果和教師的教學質量。后續的研究將進一步拓展應用的平臺和擴展應用的功能，以多方位滿足不斷變化的教育需求。

參考文獻：

[1] 李海燕，陳善柳.基于微信小程序的教學平臺建設及應用 [J].科技與創新，2022（9）：174-176.

[2] 沙浩.基于微信小程序的教輔系統的設計與實現 [D].南京：南京大學，2021.

[3] 林亮亮.基于微信小程序的成人移動學習平臺設計與實現 [J].河北軟件職業技術學院學報，2019，21（2）：5-9.

[4] 呂蘭蘭.基于語音評測技術的英語朗讀評測微信小程序 [J].現代計算機，2023，29（23）：111-115.

[5] 王斌.基于微信小程序的信息技術課程教學平臺的設計與應用 [D].廣州：廣東技術師范大學，2023.

[6] 陸禹文.基于微信小程序的移動學習平臺的設計、開發及應用 [D].蘭州：蘭州大學，2021.

[7] 王東東，張省偉，惠亮亮.基于微信小程序的鐵路職業院校背題系統的設計與應用分析 [J].內蒙古科技與經濟，2023（20）：111-114.

[8] 張茵茵，牛彥敏.移動教學平臺在高等教育教學中的應用——以藍墨云班課平臺為例 [J].軟件導刊：教育技術，2017，16（3）：23-24.

[9] 高洪濤.從零開始學微信小程序開發 [M].北京：電子工業出版社，2017.

[10] 張文.基于SpringBoot的國有企業固定資產信息管理系統的設計與實現 [D].上海：華東師范大學，2024.

作者簡介：戴峰（1978.02—），女，漢族，江蘇泰興人，講師，本科，研究方向：電子信息及仿真。