基于微信小程序的單選題題庫開發
2023-06-21 02:15:14馬海燕
現代信息科技 2023年1期
摘? 要：基于微信小程序的題庫應用使用起來方便快捷，是題庫應用開發方向的不二之選。單選題題庫的開發是其他類型題庫開發的基礎，文章以單選題題庫的基本功能分析為基礎，從后臺數據搭建、前端界面開發及后端程序設計等方面進行了系統性的闡述，并對各開發階段的技術難點問題進行解析，構建了涵蓋題目展示、答案選擇、評價反饋、錯題查看、進度提醒的單選題題庫開發案例，供開發者學習參考之用。
關鍵詞：微信小程序；單選題；題庫；程序交互設計
中圖分類號：TP311? 文獻標識碼：A 文章編號：2096-4706（2023）01-0036-04
Development of Single Choice Question Bank Based on WeChat Applet
MA Haiyan
（Jiangsu Taixing Secondary Specialized School， Taizhou? 225400， China）
Abstract： The question bank application based on WeChat applet is convenient and fast to use， and is the best choice for the development direction of question bank application. The development of the single choice question bank is the basis for the development of other types of question banks. Based on the analysis of the basic functions of the single choice question bank， this paper systematically expounds the background data building， front-end interface development and back-end program design， analyzes the technical difficulties in each development stage， and constructs a single choice question bank development case covering topic display， answer selection， evaluation feedback， wrong question viewing， and progress reminder， for developers to learn from.
Keywords： WeChat applet; single choice question; question bank; program interaction design
0? 引? 言
微信用戶的不斷增加，使微信小程序獲得了肥沃的應用生長土壤。微信小程序使用起來方便快捷，不受時間和空間的限制，使用戶真正獲得想學就行、學完就跑的使用體驗感。基于微信小程序的單選題題庫開發，可讓使用者從使用效率、使用體驗上全面升級。
1? 基于微信小程序單選題題庫開發的基本功能分析
基于微信小程序的單選題題庫開發功能應該建立在問題解決策略的基礎之上，即解決那些現實應用問題。在題庫的建設中，應該提供題目展示、答案選擇、評價反饋、錯題查看、進度提醒等基本功能。單選題庫制作是多選題庫及判斷題庫制作的基礎，看似簡單，實則不易。
2? 微信小程序單選題題庫后臺數據庫的建設
基于微信小程序的單選題題庫后臺數據庫的建設，可采用微信CMS庫實現，在課程模型中，創建課程試題庫所需的各個參數，如序號、題目、題目主圖、類型、選項一、答案等，如圖1所示。在建立模型參數時，要充分分析課程單選題格式的特征，將單選題組成要素進行細分，確保在后臺數據庫中能完整地涵蓋題目的內容。
在內容模型建立完成后，在內容集合中上傳已有的題庫。可通過“導入數據”的方式導入題庫，也可以通過CSV或json等方式導入，注意導入方式的規范性，采用CSV導入方式時必須采用UTF-8數據格式，如圖2所示。導入成功后，即可在數據庫中查看上傳的完整單選題數據，如圖3所示。
3? 微信小程序單選題界面的制作及交互程序編制
3.1? 導向文字制作區
導向文字包括課程名、題目類型、第幾題、共幾題等，其目的是讓使用者對當前答題的基礎信息有一個清晰的認識，如圖4中①處所示。
3.1.1? 界面設計
wxml界面程序設置如下，其中current、total分別為第幾題、共幾題變量名稱：
3.1.2? 交互程序設計
在交互程序中，可通過aggregate聚合方式、match類型方式、limit讀取數量方式讀出CMS中的題庫數據，程序中app.globalData.
kemo為全局變量讀取的課程名，開發者可直接更換為CMS中的課程名。數據庫讀取成功后，將讀取的數據庫總長度賦值給total，將當前需要展示的題目序號賦值給current。交互設計程序設計如下：
onLoad（） {
wx.showLoading（{
title： '加載中'，
}）
wx.cloud.database（）.collection（app.globalData.kemo）
.aggregate（）
.match（{
type： '單選題'，
}）
.limit（200） // important
.end（）
.then（res => {
console.log（'題庫數據'， res）
titles = res.list
let subject = titles[app.globalData.dongtaishuju - 1]
console.log（'subject'， subject）
this.setData（{
subject，
total： titles.length，
current：? parseInt（app.globalData.dongtaishuju） //字符串轉成數字
}）
wx.hideLoading（{
}）
}）
}，
3.2? 題目展示區
3.2.1? 界面設計
題目展示的wxml界面程序設置如下，其界面設計難點之一在于除了文字展示外，還需要實現單選題題目及選項中各圖片的展示，因此，界面設計中必須通過image組件實現，同時，若題目中有小圖或特殊符號類圖形，必然會將題目割裂，因此，在界面設計時，必須提前考慮到這一點，下例中的tmimage1、tmimage2及title1、title2、title3正是基于這種考慮，其題目格式是按文字、圖片、文字、圖片、文字的順序排列，若題目中題圖形更多更復雜，開發者可以增加文字及圖片數量；界面設計難點之二在于題目單選項的控制，界面設計中采用radio-group及radio組件實現，radio-group可實現選項的互斥，確保四個選項中只選擇一個。本例中，只展示了A選項界面設計方式，其他B、C、D選項界面設計方式與之相似，如圖4中②處所示。
……
3.2.2? 交互程序設計
交互程序設計與導向文字制作區程序設計方式一樣，都需要從CMS調用數據庫，并將調取獲得的數據賦值給各變量參數，這些數據調用并賦值可合并進行程序設計，見上例。程序中的titles = res.list即為單選題總數據庫內容，而subject = titles[app.globalData.dongtaishuju - 1]即為當前讀取的單條試題，采用app.globalData.dongtaishuju設置一個全局變量，在調用時，如果輸入app.globalData.dongtaishuju數值，則單選題庫會從這一序號開始調用全庫，實現抽序讀取。
3.3? 進度條制作區
進度條的設計采用可視化目視管理的方法，使用戶能夠更加直觀清晰地觀察到做題進度及成功率，如圖4中③處所示。界面設計程序較為簡單，其交互設計只需在程序中根據題進度及正確率計算出進度條數值percent即可，這里不做贅述。
4? 微信小程序答案選擇及評價判斷的交互程序編制
4.1? 界面設計
題目展示只是單選題庫的一個功能，更重要的是用戶選擇正確選項及判斷選擇正確與否。在上例題目展示程序中，設計了value="A" checked="{{isSelect}}"，其實現目標是當用戶選擇了A選項，則觸發該選項被選中，同時使選中值為“A”，再與調用題庫中的答案進行比對，兩者一致即答案正確。由于題庫為單選題，故每一選項value值可設計為不同，在這里設置為A、B、C、D四種，此外，題庫的答案項也應設置為A、B、C、D，否則無法比對正確與否。在界面設計中再增加一個button按鈕實現選項比對提交，通過綁定"submit"實現程序交互，界面設計的程序如下：
4.2? 交互程序設計
4.2.1? 點選選項的交互程序
示例如下：
checkboxChange（e） {
console.log（e）
let userSelect = e.detail.value
console.log（'用戶選擇了'， userSelect）
this.setData（{
userSelect： userSelect
}）
}，
4.2.2? 提交答題并判斷的交互程序
程序的設計，首先判斷是否有選項被選中，如果沒有選項被選中，則提示“您還沒有選擇呢”，如果有選項被選中，則判斷該選項值this.data.userSelect與試題庫中的答案this.data.subject.answer是否相同，相同則提示‘您答對啦'，用戶答對數量值userScore加1，計算答對題目總分totalScore。無論答對答錯，只要提交了，首先計算進度百分比percent，在進度條中予以顯示，如圖5所示；其次，界面題目重置為下一條，并刪除選擇項，讓所有選擇項為空；最后，判斷該題是否為最后一題，如果是最后一題，則提示‘已經是最后一題'，提交時，不再重置題目，并讓提交按鈕變為不可用，表示本次考試的結束。示例如下：
submit（） {
//一、判斷是否沒有選擇
//當數據為空字符串或者null的時候，我們對這個數據取反
if （！this.data.userSelect） {
wx.showToast（{
title： '您還沒有選擇呢'，
icon： 'none'，
}）
return
}
//二、判斷正確
else if （
this.data.subject.answer == this.data.userSelect） {
wx.showToast（{
title： '您答對啦'，
duration： 1000，
}）
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，
}）
}
this.setData（{
percent： （（this.data.current / titles.length） * 100）.toFixed（2）
}）
// 題目重置
let num = this.data.current + 1
console.log（num）
let subject = titles[num - 1]
this.setData（{
current： num，
subject，
isSelect： false，
userSelect： ''，
}）
//判斷是否是最后一題
if （num > titles.length） {
this.setData（{
current： [titles.length]，
disabled：'true'
}）
wx.showToast（{
title： '已經是最后一題'，
icon： 'none'，
}）
return
}
}，
5? 微信小程序錯題查看
5.1? 建立錯題庫
建立錯題庫，可以讓用戶查看做過的錯題，幫助用戶鞏固疑難點，強化學習，并在解題時前端顯示錯題數量。錯題集建立的方案是，當用戶單選題選項為錯時，將該題增加到一個數組中，本例中采用errorOptions.push（subjectNow），具體程序設計如下：
let subjectNow = this.data.subject
//在新的題目中，增加用戶選擇項
subjectNow.userSelect = this.data.userSelect
errorOptions.push（subjectNow）
console.log（'錯題'， errorOptions）
this.setData（{
totalError： this.data.totalError + 1
}）
5.2? 錯題展示
錯題展示即是將所有錯題逐一展示，可新設計一個頁面實現。當用戶點擊錯題查看按鈕時，跳轉到該頁面并調用錯題庫，可通過點擊“上一個錯題”及“下一個錯題”將錯題逐一展示，反復回看，如圖6所示。界面設計及程序設計與單選題界面的設計及程序編寫方式類似，這里不做贅述。
6? 結? 論
習題教學是教學中不可缺少的一種課型，其目的在于鞏固和深化基礎知識，培養和提高學生分析問題、解決問題的能力。單選題題庫開發是多選題、判斷題等類型題庫開發的基礎，開發單選題題庫可以從用戶的角度出發，提高題庫的可操作性和實用性，更好地滿足用戶需求。題庫的建立，可以方便學生的學習，增加學生的知識儲備，拓展學生的知識結構，提高學生的綜合素質。
參考文獻：
[1] 李海燕，陳善柳.基于微信小程序的教學平臺建設及應用 [J].科技與創新，2022（9）：174-176.
[2] 王延桃.基于微信小程序的詞匯學習平臺設計與實現 [D].昆明：云南師范大學，2020.
[3] 王金環.基于微信的英語單詞助記系統設計研究 [J].電腦知識與技術，2019，15（3）：84-85.
[4] 劉建粉，張海博.基于微信小程序的數據結構學習平臺設計 [J].科技風，2018（36）：247-248.
[5] 張沈梅，孫昊，王玲，等.基于微信小程序的課程在線測試系統 [J].電腦知識與技術，2018，14（32）：82-84+88.
作者簡介：馬海燕（1978.03—），女，漢族，江蘇泰興人，講師，本科，研究方向：電子信息及仿真。
收稿日期：2022-09-26
