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

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

中圖分類號(hào)：TP311? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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)用生長(zhǎng)土壤。微信小程序使用起來方便快捷，不受時(shí)間和空間的限制，使用戶真正獲得想學(xué)就行、學(xué)完就跑的使用體驗(yàn)感。基于微信小程序的單選題題庫(kù)開發(fā)，可讓使用者從使用效率、使用體驗(yàn)上全面升級(jí)。

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

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

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

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

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

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

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

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

3.1.1? 界面設(shè)計(jì)

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

第

{{current}}

題/共

{{total}}

題

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

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

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

onLoad（） {

wx.showLoading（{

title： '加載中'，

}）

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

.aggregate（）

.match（{

type： '單選題'，

}）

.limit（200） // important

.end（）

.then（res => {

console.log（'題庫(kù)數(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è)計(jì)

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

{{current}}.

{{subject.title1}}

{{subject.title2}}

{{subject.title3}}

{{subject.X1}}

……

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

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

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

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

4? 微信小程序答案選擇及評(píng)價(jià)判斷的交互程序編制

4.1? 界面設(shè)計(jì)

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

提交答題

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

4.2.1? 點(diǎn)選選項(xiàng)的交互程序

示例如下：

checkboxChange（e） {

console.log（e）

let userSelect = e.detail.value

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

this.setData（{

userSelect： userSelect

}）

}，

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

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

submit（） {

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

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

if （！this.data.userSelect） {

wx.showToast（{

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

icon： 'none'，

}）

return

}

//二、判斷正確

else if （

this.data.subject.answer == this.data.userSelect） {

wx.showToast（{

title： '您答對(duì)啦'，

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： '您答錯(cuò)啦'，

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? 微信小程序錯(cuò)題查看

5.1? 建立錯(cuò)題庫(kù)

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

let subjectNow = this.data.subject

//在新的題目中，增加用戶選擇項(xiàng)

subjectNow.userSelect = this.data.userSelect

errorOptions.push（subjectNow）

console.log（'錯(cuò)題'， errorOptions）

this.setData（{

totalError： this.data.totalError + 1

}）

5.2? 錯(cuò)題展示

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

6? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

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

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

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

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

收稿日期：2022-09-26