基于微信小程序的單選題題庫開發(fā)

摘? 要：基于微信小程序的題庫應(yīng)用使用起來方便快捷，是題庫應(yīng)用開發(fā)方向的不二之選。單選題題庫的開發(fā)是其他類型題庫開發(fā)的基礎(chǔ)，文章以單選題題庫的基本功能分析為基礎(chǔ)，從后臺數(shù)據(jù)搭建、前端界面開發(fā)及后端程序設(shè)計等方面進(jìn)行了系統(tǒng)性的闡述，并對各開發(fā)階段的技術(shù)難點問題進(jìn)行解析，構(gòu)建了涵蓋題目展示、答案選擇、評價反饋、錯題查看、進(jìn)度提醒的單選題題庫開發(fā)案例，供開發(fā)者學(xué)習(xí)參考之用。

關(guān)鍵詞：微信小程序；單選題；題庫；程序交互設(shè)計

中圖分類號：TP311? 文獻(xiàn)標(biāo)識碼：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? 引? 言

微信用戶的不斷增加，使微信小程序獲得了肥沃的應(yīng)用生長土壤。微信小程序使用起來方便快捷，不受時間和空間的限制，使用戶真正獲得想學(xué)就行、學(xué)完就跑的使用體驗感。基于微信小程序的單選題題庫開發(fā)，可讓使用者從使用效率、使用體驗上全面升級。

1? 基于微信小程序單選題題庫開發(fā)的基本功能分析

基于微信小程序的單選題題庫開發(fā)功能應(yīng)該建立在問題解決策略的基礎(chǔ)之上，即解決那些現(xiàn)實應(yīng)用問題。在題庫的建設(shè)中，應(yīng)該提供題目展示、答案選擇、評價反饋、錯題查看、進(jìn)度提醒等基本功能。單選題庫制作是多選題庫及判斷題庫制作的基礎(chǔ)，看似簡單，實則不易。

2? 微信小程序單選題題庫后臺數(shù)據(jù)庫的建設(shè)

基于微信小程序的單選題題庫后臺數(shù)據(jù)庫的建設(shè)，可采用微信CMS庫實現(xiàn)，在課程模型中，創(chuàng)建課程試題庫所需的各個參數(shù)，如序號、題目、題目主圖、類型、選項一、答案等，如圖1所示。在建立模型參數(shù)時，要充分分析課程單選題格式的特征，將單選題組成要素進(jìn)行細(xì)分，確保在后臺數(shù)據(jù)庫中能完整地涵蓋題目的內(nèi)容。

在內(nèi)容模型建立完成后，在內(nèi)容集合中上傳已有的題庫?？赏ㄟ^“導(dǎo)入數(shù)據(jù)”的方式導(dǎo)入題庫，也可以通過CSV或json等方式導(dǎo)入，注意導(dǎo)入方式的規(guī)范性，采用CSV導(dǎo)入方式時必須采用UTF-8數(shù)據(jù)格式，如圖2所示。導(dǎo)入成功后，即可在數(shù)據(jù)庫中查看上傳的完整單選題數(shù)據(jù)，如圖3所示。

3? 微信小程序單選題界面的制作及交互程序編制

3.1? 導(dǎo)向文字制作區(qū)

導(dǎo)向文字包括課程名、題目類型、第幾題、共幾題等，其目的是讓使用者對當(dāng)前答題的基礎(chǔ)信息有一個清晰的認(rèn)識，如圖4中①處所示。

3.1.1? 界面設(shè)計

wxml界面程序設(shè)置如下，其中current、total分別為第幾題、共幾題變量名稱：

第

{{current}}

題/共

{{total}}

題

3.1.2? 交互程序設(shè)計

在交互程序中，可通過aggregate聚合方式、match類型方式、limit讀取數(shù)量方式讀出CMS中的題庫數(shù)據(jù)，程序中app.globalData.

kemo為全局變量讀取的課程名，開發(fā)者可直接更換為CMS中的課程名。數(shù)據(jù)庫讀取成功后，將讀取的數(shù)據(jù)庫總長度賦值給total，將當(dāng)前需要展示的題目序號賦值給current。交互設(shè)計程序設(shè)計如下：

onLoad（） {

wx.showLoading（{

title： '加載中'，

}）

wx.cloud.database（）.collection（app.globalData.kemo）

.aggregate（）

.match（{

type： '單選題'，

}）

.limit（200） // important

.end（）

.then（res => {

console.log（'題庫數(shù)據(jù)'， 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） //字符串轉(zhuǎn)成數(shù)字

}）

wx.hideLoading（{

}）

}）

}，

3.2? 題目展示區(qū)

3.2.1? 界面設(shè)計

題目展示的wxml界面程序設(shè)置如下，其界面設(shè)計難點之一在于除了文字展示外，還需要實現(xiàn)單選題題目及選項中各圖片的展示，因此，界面設(shè)計中必須通過image組件實現(xiàn)，同時，若題目中有小圖或特殊符號類圖形，必然會將題目割裂，因此，在界面設(shè)計時，必須提前考慮到這一點，下例中的tmimage1、tmimage2及title1、title2、title3正是基于這種考慮，其題目格式是按文字、圖片、文字、圖片、文字的順序排列，若題目中題圖形更多更復(fù)雜，開發(fā)者可以增加文字及圖片數(shù)量；界面設(shè)計難點之二在于題目單選項的控制，界面設(shè)計中采用radio-group及radio組件實現(xiàn)，radio-group可實現(xiàn)選項的互斥，確保四個選項中只選擇一個。本例中，只展示了A選項界面設(shè)計方式，其他B、C、D選項界面設(shè)計方式與之相似，如圖4中②處所示。

{{current}}.

{{subject.title1}}

{{subject.title2}}

{{subject.title3}}

{{subject.X1}}

……

3.2.2? 交互程序設(shè)計

交互程序設(shè)計與導(dǎo)向文字制作區(qū)程序設(shè)計方式一樣，都需要從CMS調(diào)用數(shù)據(jù)庫，并將調(diào)取獲得的數(shù)據(jù)賦值給各變量參數(shù)，這些數(shù)據(jù)調(diào)用并賦值可合并進(jìn)行程序設(shè)計，見上例。程序中的titles = res.list即為單選題總數(shù)據(jù)庫內(nèi)容，而subject = titles[app.globalData.dongtaishuju - 1]即為當(dāng)前讀取的單條試題，采用app.globalData.dongtaishuju設(shè)置一個全局變量，在調(diào)用時，如果輸入app.globalData.dongtaishuju數(shù)值，則單選題庫會從這一序號開始調(diào)用全庫，實現(xiàn)抽序讀取。

3.3? 進(jìn)度條制作區(qū)

進(jìn)度條的設(shè)計采用可視化目視管理的方法，使用戶能夠更加直觀清晰地觀察到做題進(jìn)度及成功率，如圖4中③處所示。界面設(shè)計程序較為簡單，其交互設(shè)計只需在程序中根據(jù)題進(jìn)度及正確率計算出進(jìn)度條數(shù)值percent即可，這里不做贅述。

4? 微信小程序答案選擇及評價判斷的交互程序編制

4.1? 界面設(shè)計

題目展示只是單選題庫的一個功能，更重要的是用戶選擇正確選項及判斷選擇正確與否。在上例題目展示程序中，設(shè)計了value="A" checked="{{isSelect}}"，其實現(xiàn)目標(biāo)是當(dāng)用戶選擇了A選項，則觸發(fā)該選項被選中，同時使選中值為“A”，再與調(diào)用題庫中的答案進(jìn)行比對，兩者一致即答案正確。由于題庫為單選題，故每一選項value值可設(shè)計為不同，在這里設(shè)置為A、B、C、D四種，此外，題庫的答案項也應(yīng)設(shè)置為A、B、C、D，否則無法比對正確與否。在界面設(shè)計中再增加一個button按鈕實現(xiàn)選項比對提交，通過綁定"submit"實現(xiàn)程序交互，界面設(shè)計的程序如下：

提交答題

4.2? 交互程序設(shè)計

4.2.1? 點選選項的交互程序

示例如下：

checkboxChange（e） {

console.log（e）

let userSelect = e.detail.value

console.log（'用戶選擇了'， userSelect）

this.setData（{

userSelect： userSelect

}）

}，

4.2.2? 提交答題并判斷的交互程序

程序的設(shè)計，首先判斷是否有選項被選中，如果沒有選項被選中，則提示“您還沒有選擇呢”，如果有選項被選中，則判斷該選項值this.data.userSelect與試題庫中的答案this.data.subject.answer是否相同，相同則提示‘您答對啦'，用戶答對數(shù)量值userScore加1，計算答對題目總分totalScore。無論答對答錯，只要提交了，首先計算進(jìn)度百分比percent，在進(jìn)度條中予以顯示，如圖5所示；其次，界面題目重置為下一條，并刪除選擇項，讓所有選擇項為空；最后，判斷該題是否為最后一題，如果是最后一題，則提示‘已經(jīng)是最后一題'，提交時，不再重置題目，并讓提交按鈕變?yōu)椴豢捎茫硎颈敬慰荚嚨慕Y(jié)束。示例如下：

submit（） {

//一、判斷是否沒有選擇

//當(dāng)數(shù)據(jù)為空字符串或者null的時候，我們對這個數(shù)據(jù)取反

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： '已經(jīng)是最后一題'，

icon： 'none'，

}）

return

}

}，

5? 微信小程序錯題查看

5.1? 建立錯題庫

建立錯題庫，可以讓用戶查看做過的錯題，幫助用戶鞏固疑難點，強(qiáng)化學(xué)習(xí)，并在解題時前端顯示錯題數(shù)量。錯題集建立的方案是，當(dāng)用戶單選題選項為錯時，將該題增加到一個數(shù)組中，本例中采用errorOptions.push（subjectNow），具體程序設(shè)計如下：

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? 錯題展示

錯題展示即是將所有錯題逐一展示，可新設(shè)計一個頁面實現(xiàn)。當(dāng)用戶點擊錯題查看按鈕時，跳轉(zhuǎn)到該頁面并調(diào)用錯題庫，可通過點擊“上一個錯題”及“下一個錯題”將錯題逐一展示，反復(fù)回看，如圖6所示。界面設(shè)計及程序設(shè)計與單選題界面的設(shè)計及程序編寫方式類似，這里不做贅述。

6? 結(jié)? 論

習(xí)題教學(xué)是教學(xué)中不可缺少的一種課型，其目的在于鞏固和深化基礎(chǔ)知識，培養(yǎng)和提高學(xué)生分析問題、解決問題的能力。單選題題庫開發(fā)是多選題、判斷題等類型題庫開發(fā)的基礎(chǔ)，開發(fā)單選題題庫可以從用戶的角度出發(fā)，提高題庫的可操作性和實用性，更好地滿足用戶需求。題庫的建立，可以方便學(xué)生的學(xué)習(xí)，增加學(xué)生的知識儲備，拓展學(xué)生的知識結(jié)構(gòu)，提高學(xué)生的綜合素質(zhì)。

參考文獻(xiàn)：

[1] 李海燕，陳善柳.基于微信小程序的教學(xué)平臺建設(shè)及應(yīng)用 [J].科技與創(chuàng)新，2022（9）：174-176.

[2] 王延桃.基于微信小程序的詞匯學(xué)習(xí)平臺設(shè)計與實現(xiàn) [D].昆明：云南師范大學(xué)，2020.

[3] 王金環(huán).基于微信的英語單詞助記系統(tǒng)設(shè)計研究 [J].電腦知識與技術(shù)，2019，15（3）：84-85.

[4] 劉建粉，張海博.基于微信小程序的數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)平臺設(shè)計 [J].科技風(fēng)，2018（36）：247-248.

[5] 張沈梅，孫昊，王玲，等.基于微信小程序的課程在線測試系統(tǒng) [J].電腦知識與技術(shù)，2018，14（32）：82-84+88.

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

收稿日期：2022-09-26