收稿日期：2023-08-03

基金項(xiàng)目：江蘇省教育科學(xué)“十四五”規(guī)劃重點(diǎn)課題（B/2021/03/69）

DOI：10.19850/j.cnki.2096-4706.2024.04.034

摘? 要：基于App Inventor的可視化編程環(huán)境設(shè)計(jì)一個(gè)功能強(qiáng)大的連線題應(yīng)用，該應(yīng)用可提供題目生成、答案校對(duì)和成績統(tǒng)計(jì)等功能。通過功能測試，驗(yàn)證了該應(yīng)用的可行性和實(shí)用性；通過調(diào)查評(píng)估，對(duì)應(yīng)用的各項(xiàng)功能進(jìn)行了多維度的評(píng)價(jià)，提升了用戶體驗(yàn)。應(yīng)用的開發(fā)實(shí)現(xiàn)，提高了學(xué)生的學(xué)習(xí)效率和學(xué)習(xí)效果，讓學(xué)習(xí)變得更加有趣和有效。

關(guān)鍵詞：App Inventor；連線題；安全標(biāo)志

中圖分類號(hào)：TP311? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：2096-4706（2024）04-0167-04

Design and Implementation of Matching Application Based on App Inventor

HE Bing

（Jiangsu Taixing Secondary Specialized School， Taizhou? 225400， China）

Abstract： Based on the visual programming environment of App Inventor， a powerful matching application is designed， which can provide functions such as question generation， answer proofreading， and score statistics. The feasibility and practicality of the application have been verified through functional testing. Through investigation and evaluation， multi-dimensional evaluations are conducted on the various functions of the application， improving the user experience. The development and implementation of applications have improved the learning efficiency and effectiveness of students， making learning more interesting and effective.

Keywords： App Inventor; matching; safety sign

0? 引? 言

隨著移動(dòng)設(shè)備功能的不斷拓展，其實(shí)用性越來越強(qiáng)，成為學(xué)生學(xué)習(xí)和生活中不可或缺的工具。采用帶有無線網(wǎng)絡(luò)的便攜式設(shè)備（例如筆記本電腦、平板電腦、PDA和智能手機(jī)）可以實(shí)現(xiàn)移動(dòng)學(xué)習(xí)，從而可使教學(xué)和學(xué)習(xí)擴(kuò)展到傳統(tǒng)教室以外的空間。在課堂內(nèi)，移動(dòng)學(xué)習(xí)為教師和學(xué)生提供了更高的靈活性和互動(dòng)性。數(shù)字化教學(xué)資源是移動(dòng)學(xué)習(xí)的重要載體，加強(qiáng)數(shù)字化教學(xué)資源的建設(shè)與應(yīng)用，能夠拓展教學(xué)途徑，深化教育改革[1]。連線題是一種常見的教育游戲，可以幫助學(xué)生鞏固知識(shí)，拓展思維，提升問題解決能力。App Inventor是一款為非專業(yè)開發(fā)者設(shè)計(jì)的可視化編程工具，適合于快速開發(fā)Android應(yīng)用。

1? 連線題設(shè)計(jì)

在使用App Inventor時(shí)，我們采用可視化拖拽編程方式設(shè)計(jì)連線題應(yīng)用的界面和功能。該應(yīng)用預(yù)設(shè)的模塊包括題目展示、用戶劃線作答、自動(dòng)答案校對(duì)與統(tǒng)計(jì)得分等。具體而言，我們?cè)O(shè)計(jì)了一個(gè)題目生成器，配有海量豐富的題庫，可以隨機(jī)生成不同類型的連線題。題目展示模塊將生成的題目以圖像和文本的組合形式展示給用戶。用戶可通過手指在屏幕上劃線完成連線題的作答。系統(tǒng)會(huì)獲取用戶作答的線條信息，并與標(biāo)準(zhǔn)答案進(jìn)行對(duì)比，實(shí)現(xiàn)自動(dòng)判題與提示功能。

為使用戶能夠快速知曉自己的表現(xiàn)，我們額外設(shè)計(jì)了成績統(tǒng)計(jì)功能。系統(tǒng)會(huì)跟蹤記錄用戶的做題情況，并對(duì)所有數(shù)據(jù)進(jìn)行匯總，計(jì)算出總得分，并以統(tǒng)計(jì)圖表的形式反饋給用戶[2]。

開發(fā)方面我們充分利用App Inventor的可視化編程優(yōu)勢，通過拖拽的方式完成界面元素的布局和程序邏輯的實(shí)現(xiàn)。關(guān)鍵的答案校驗(yàn)算法采用坐標(biāo)對(duì)比的方法，根據(jù)用戶所勾畫線條的坐標(biāo)信息來判斷其答案的正確與否。在題庫內(nèi)容準(zhǔn)備方面使用CSV文件進(jìn)行存儲(chǔ)，通過讀取文件實(shí)現(xiàn)題庫內(nèi)容的動(dòng)態(tài)擴(kuò)充。

2? 連線題的功能模塊設(shè)計(jì)

2.1? 用戶界面設(shè)計(jì)

用戶界面設(shè)計(jì)力求簡潔直觀。界面主要包括題目區(qū)域和答案區(qū)域兩部分。題目區(qū)域位于屏幕上方，用于展示待連線的題目選項(xiàng)。采用圖像加文本的形式呈現(xiàn)題目，圖像作為選項(xiàng)的圖標(biāo)，文本給出選項(xiàng)的描述。圖像與文本鋪排合理，匹配恰當(dāng)，確保題目信息的完整表達(dá)。考慮到連線題選項(xiàng)數(shù)量可能不同，我們采用了響應(yīng)式布局，可以動(dòng)態(tài)調(diào)整選項(xiàng)在題目區(qū)域的排列方式，從而確保任何題目都能完整顯示。

答案區(qū)域位于屏幕下方，上方提供空白畫布供用戶連線作答，如圖1所示。用戶可以通過手指劃線的方式連接題目區(qū)域的選項(xiàng)圖標(biāo)。設(shè)計(jì)開發(fā)實(shí)時(shí)畫線功能，并在試驗(yàn)測試環(huán)節(jié)進(jìn)行了相應(yīng)的優(yōu)化，使得所畫出的線條更加流暢自然。在顏色選擇上，使用明亮顯眼的顏色來區(qū)分選項(xiàng)，不但醒目突出，而且便于用戶加深記憶和明確區(qū)分。線條上選用紅色線條，既能明顯區(qū)分畫布背景，又能突出強(qiáng)調(diào)用戶的作答行為[3]。

圖1? 用戶界面設(shè)計(jì)

2.2? 題目生成模塊

利用App Inventor中的隨機(jī)數(shù)生成模塊，通過配置隨機(jī)數(shù)的范圍，可以生成多種不同的隨機(jī)數(shù)字，這些隨機(jī)數(shù)代表不同的選項(xiàng)。然后我們將隨機(jī)生成的選項(xiàng)順序打亂，使其在題目區(qū)域中隨機(jī)顯示，以此增加練習(xí)的難度和趣味性。打亂選項(xiàng)順序是通過一個(gè)算法函數(shù)實(shí)現(xiàn)的，借助該函數(shù)可以隨機(jī)調(diào)整選項(xiàng)的順序。最后我們將打亂后的選項(xiàng)圖像顯示在題目區(qū)域，并將對(duì)應(yīng)的文本答案隨機(jī)放置在下方的答案區(qū)域中，如圖2所示。為了便于展示，這里我們?cè)O(shè)定了3個(gè)選項(xiàng)圖標(biāo)和3個(gè)文本答案。但實(shí)際應(yīng)用中可以配置更多數(shù)量的選項(xiàng)，豐富題目內(nèi)容[4]。

為了達(dá)到上述目標(biāo)，在軟件初始化時(shí)，首先將軟件中已上傳的圖片生成圖標(biāo)表，將對(duì)應(yīng)的答案生成對(duì)應(yīng)表，如圖3所示。本例中，以7個(gè)圖標(biāo)為例。實(shí)際作答連線題時(shí)，可以依據(jù)連接題數(shù)量的多少進(jìn)行列表設(shè)置，如果連接題數(shù)量較大可采用文件形式導(dǎo)入，讀取文件中數(shù)據(jù)生成圖示表及對(duì)應(yīng)表。

為了實(shí)現(xiàn)軟件初始化時(shí)界面上能夠清晰顯示題目，采用了延時(shí)功能。在軟件中加載計(jì)時(shí)器，計(jì)時(shí)器原始啟用狀態(tài)設(shè)置為否，軟件初始化時(shí)，圖形及答案列表生成后，計(jì)時(shí)器的啟用計(jì)時(shí)設(shè)置為真，然后開始計(jì)時(shí)，到達(dá)計(jì)時(shí)點(diǎn)時(shí)，實(shí)現(xiàn)調(diào)用圖標(biāo)、對(duì)應(yīng)答案，隨機(jī)放置圖標(biāo)及對(duì)應(yīng)答案。計(jì)時(shí)器1到達(dá)計(jì)時(shí)點(diǎn)時(shí)，將計(jì)時(shí)器1的啟用計(jì)時(shí)狀態(tài)設(shè)置為假，不再更換圖標(biāo)及答案，用戶可以直接連線作答，如圖4所示。

圖2? 題目顯示示例

圖3? 軟件初始化

圖4? 計(jì)時(shí)器的設(shè)置

為了實(shí)現(xiàn)圖標(biāo)的“隨機(jī)”放置目標(biāo)，一般采用從圖標(biāo)表中隨機(jī)抽樣的方案。在設(shè)計(jì)開發(fā)時(shí)，重點(diǎn)解決好兩個(gè)問題：一是解決只抽取3個(gè)圖標(biāo)的目標(biāo)問題，二是確保所抽取的3個(gè)圖標(biāo)不能重復(fù)。在設(shè)計(jì)程序時(shí)，采用了先隨機(jī)抽取，隨機(jī)生成抽取圖標(biāo)的位置數(shù)值，再比對(duì)位置數(shù)值是否相同，解決了這一難題，即讓軟件從位置表中隨機(jī)抽取3個(gè)數(shù)值，在比對(duì)數(shù)值大小時(shí)如果發(fā)現(xiàn)這3個(gè)數(shù)值有兩個(gè)相同，就重新抽取，反復(fù)抽樣，反復(fù)檢查，直至抽取3個(gè)不同的位置數(shù)，也就完成了圖標(biāo)抽樣。完成圖標(biāo)抽取后，就可以采用精靈的方式將3個(gè)圖標(biāo)進(jìn)行圖片展示，如圖5所示。

位置表不重復(fù)時(shí)，可以對(duì)選項(xiàng)對(duì)應(yīng)表項(xiàng)進(jìn)行隨機(jī)排列，并在界面中通過文字寫出。此時(shí)，采用上述抽取方法進(jìn)行答案重復(fù)檢查，直至所抽取的列表項(xiàng)為3個(gè)完全不同的連線題選項(xiàng)為止，如圖6所示，并采用App Inventor命令將其在界面右邊寫好。

2.3? 答案校對(duì)模塊

為實(shí)現(xiàn)答案校對(duì)功能，使用App Inventor的事件觸發(fā)功能。用戶完成連線后，軟件檢查答案區(qū)域的順序與正確答案的順序是否一致，并給出相應(yīng)的反饋[5]。

本次設(shè)計(jì)開發(fā)中，通過讀取各圖標(biāo)的位置數(shù)值及各選項(xiàng)答案的對(duì)應(yīng)位置數(shù)值，對(duì)各圖標(biāo)及各選項(xiàng)答案進(jìn)行了位置隨機(jī)排布，但它們對(duì)應(yīng)的位置數(shù)值沒有變化。因此，在答案校對(duì)過程中，圖標(biāo)1的位置數(shù)值必須等于選項(xiàng)答案的位置數(shù)值，劃線的左起點(diǎn)Y坐標(biāo)值必須是圖標(biāo)的Y坐標(biāo)對(duì)應(yīng)值，劃線的右終點(diǎn)Y坐標(biāo)值必須是選項(xiàng)答案的Y坐標(biāo)對(duì)應(yīng)值。為了能夠?qū)崿F(xiàn)快速劃線，劃線的位置不需要太精準(zhǔn)，所以對(duì)劃線的X值不做要求，對(duì)劃線的Y值設(shè)定一個(gè)范圍值，也就是劃線的左起點(diǎn)Y值落在圖標(biāo)Y上與圖標(biāo)Y下之間，劃線的右終點(diǎn)Y值落在選項(xiàng)答案Y上與選項(xiàng)答案Y下之間，如圖7所示。實(shí)際上，根據(jù)各圖標(biāo)及選項(xiàng)答案的實(shí)際Y坐標(biāo)值給予對(duì)應(yīng)的代碼編寫，并對(duì)每一個(gè)圖標(biāo)位置數(shù)值與各選項(xiàng)值進(jìn)行比對(duì)判斷，從而獲得畫線是否正確的判斷，并給予“畫對(duì)線數(shù)目”計(jì)算，當(dāng)“畫對(duì)線數(shù)目”為3時(shí)，說明畫線全部正確，可以給予計(jì)分，如圖8所示。

圖7? 連線正確原理

圖8? 答案校對(duì)代碼

2.4? 成績統(tǒng)計(jì)模塊

使用App Inventor提供的計(jì)數(shù)器組件可實(shí)現(xiàn)成績統(tǒng)計(jì)功能。每次用戶答題完成后，系統(tǒng)根據(jù)答題情況對(duì)成績進(jìn)行計(jì)算，并顯示在界面上。如在電工實(shí)訓(xùn)安全標(biāo)志識(shí)別中，就可以采用連線題的形式實(shí)現(xiàn)學(xué)習(xí)訓(xùn)練。如圖9所示，練習(xí)中，一次只顯示3個(gè)標(biāo)志，學(xué)生給出正確匹配后，界面會(huì)即時(shí)給出正誤反饋，系統(tǒng)同時(shí)會(huì)更新成績，如圖10所示。系統(tǒng)要即時(shí)反饋學(xué)生的學(xué)習(xí)結(jié)果，也可以應(yīng)用后臺(tái)數(shù)據(jù)庫及網(wǎng)絡(luò)顯示本班學(xué)生的學(xué)習(xí)結(jié)果，例如顯示個(gè)人在班級(jí)中的本次學(xué)習(xí)排名，對(duì)排名靠前的學(xué)生給予虛擬獎(jiǎng)勵(lì)。為了增加學(xué)習(xí)的趣味性，可以通過網(wǎng)絡(luò)連接將用戶的成績上傳到后臺(tái)服務(wù)器。后臺(tái)服務(wù)器可以收集所有用戶的數(shù)據(jù)，做出用戶學(xué)習(xí)成績排名，反饋給用戶相互比拼，增加他們提高成績的學(xué)習(xí)動(dòng)力[6]。

圖9? 原題展示? ? ? ? ? ? ?圖10? 成績顯示

3? 連線題應(yīng)用的改進(jìn)與優(yōu)化

在對(duì)該連線題應(yīng)用進(jìn)行實(shí)際測試的過程中，發(fā)現(xiàn)依然有可優(yōu)化和改進(jìn)的空間。在題目的內(nèi)容選擇上，可以增加題目的多樣性和豐富度。具體來說，可以不斷擴(kuò)充題庫，增加不同難度級(jí)別的題目，滿足不同用戶的多樣化需求。在題目類型上也可以豐富和完善，增添類似填空、排列等其他形式的連線題，使應(yīng)用提供的內(nèi)容更加豐富全面。這些不同題型的加入可以在某種程度上增強(qiáng)用戶的學(xué)習(xí)興趣與積極性[7]。

在答案校驗(yàn)算法方面，可以通過收集更多用戶答題數(shù)據(jù)，采用機(jī)器學(xué)習(xí)的方式不斷優(yōu)化線條判定模型，提高答案判定的準(zhǔn)確率和魯棒性，模型優(yōu)化可以使判題更加智能和可靠。一些邊界情況可以通過人工標(biāo)注獲取訓(xùn)練數(shù)據(jù)，還可以研究不同劃線方式對(duì)判定準(zhǔn)確度的影響。

在用戶交互方面，通過繼續(xù)追蹤用戶的詳細(xì)操作數(shù)據(jù)，發(fā)現(xiàn)應(yīng)用存在使用障礙或交互不順暢的情況，這些反饋也會(huì)用作改進(jìn)界面設(shè)計(jì)的依據(jù)。關(guān)注訪問量較高的用戶群，研究他們的特征及使用習(xí)慣，從而更好地提升整體易用性。增加一些趣味化的互動(dòng)元素，讓用戶在認(rèn)真學(xué)習(xí)的同時(shí)獲得更好的體驗(yàn)[8]。

4? 連線題應(yīng)用的評(píng)估

從移動(dòng)學(xué)習(xí)資源的視角審視連續(xù)題應(yīng)用的設(shè)計(jì)和開發(fā)，不應(yīng)該僅僅追求應(yīng)用界面和交互的新穎與有趣，而是要圍繞教學(xué)目標(biāo)和學(xué)生的學(xué)習(xí)需求進(jìn)行設(shè)計(jì)，發(fā)揮移動(dòng)學(xué)習(xí)資源的優(yōu)勢，切實(shí)提升學(xué)習(xí)效果[9]。

通過對(duì)連線題應(yīng)用的實(shí)際評(píng)估，分析結(jié)果如下：在功能性方面，該應(yīng)用實(shí)現(xiàn)了連線題目的生成、作答、判定、統(tǒng)計(jì)等完整功能，可以支持用戶的交互式學(xué)習(xí)。就易用性而言，簡潔直觀的界面設(shè)計(jì)、流暢自然的繪圖操作等為用戶提供了良好的使用體驗(yàn)。但是從教育角度來看，該應(yīng)用還有一定的改進(jìn)空間，比如豐富題庫內(nèi)容、增加題型難度、使練習(xí)量更加充足，提供更詳細(xì)的答題反饋與解析，設(shè)計(jì)更科學(xué)合理的評(píng)分機(jī)制等。這些都需要設(shè)計(jì)者進(jìn)一步優(yōu)化應(yīng)用的教學(xué)策略，提升應(yīng)用的教育性[10]。

5? 結(jié)? 論

連線題應(yīng)用在功能性和易用性方面表現(xiàn)良好，能夠給用戶帶來較好的使用體驗(yàn)。在未來的迭代設(shè)計(jì)中，將繼續(xù)增加更多的教學(xué)設(shè)計(jì)元素，強(qiáng)化該應(yīng)用的教育性，使其成為學(xué)生移動(dòng)學(xué)習(xí)的得力助手，這也為該應(yīng)用的完善和改進(jìn)提供了新思路和新方向。

參考文獻(xiàn)：

[1]趙書靜.“互聯(lián)網(wǎng)+”環(huán)境下的移動(dòng)學(xué)習(xí)資源設(shè)計(jì)研究 [D].北京：北京理工大學(xué)，2020.

[2] 梁彤.基于微信公眾平臺(tái)的課程資源設(shè)計(jì)與開發(fā)研究[D].曲阜：曲阜師范大學(xué)，2019.

[3] 王婉秋，陶晶鑫.《城市智慧校園——APP設(shè)計(jì)》[J].傳媒，2022（23）：109.

[4] 李單奕，陳永義，李金龍，等.基于微服務(wù)的人才尋訪APP設(shè)計(jì)與實(shí)現(xiàn) [J].大眾標(biāo)準(zhǔn)化，2023（6）：178-180.

[5] 吳瑩瑩.APP產(chǎn)品設(shè)計(jì)基于用戶體驗(yàn)的精簡評(píng)價(jià)模型建立 [J].科技風(fēng)，2023（12）：59-61.

[6] 陳靖怡，邱曉鵬，楊彥寧.校園類APP的發(fā)展現(xiàn)狀及對(duì)策研究 [J].內(nèi)江科技，2023，44（4）：29-30+151.

[7] 古鵬飛.APPinventor手機(jī)編程課程中的案例教學(xué)淺析 [J].現(xiàn)代職業(yè)教育，2015（8）：64-65.

[8] 孫湛.兒童益智游戲類APP交互界面設(shè)計(jì)研究 [J].遵義師范學(xué)院學(xué)報(bào)，2015，17（1）：149-151.

[9] 徐秀萍.基于Android移動(dòng)平臺(tái)兒童益智游戲的開發(fā)探究 [J].山西青年，2021（2）：166-167.

[10] 謝學(xué)斌.基于App Inventor“學(xué)英語”應(yīng)用程序的設(shè)計(jì)與開發(fā) [J].現(xiàn)代信息科技，2021，5（1）：102-104.

作者簡介：何兵（1981.06—），男，漢族，江蘇泰興人，講師，本科，研究方向：電子技術(shù)。