基于App Inventor的連線題應用設計與實現

收稿日期：2023-08-03

基金項目：江蘇省教育科學“十四五”規劃重點課題（B/2021/03/69）

DOI：10.19850/j.cnki.2096-4706.2024.04.034

摘? 要：基于App Inventor的可視化編程環境設計一個功能強大的連線題應用，該應用可提供題目生成、答案校對和成績統計等功能。通過功能測試，驗證了該應用的可行性和實用性；通過調查評估，對應用的各項功能進行了多維度的評價，提升了用戶體驗。應用的開發實現，提高了學生的學習效率和學習效果，讓學習變得更加有趣和有效。

關鍵詞：App Inventor；連線題；安全標志

中圖分類號：TP311? 文獻標識碼：A? 文章編號：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? 引? 言

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

1? 連線題設計

在使用App Inventor時，我們采用可視化拖拽編程方式設計連線題應用的界面和功能。該應用預設的模塊包括題目展示、用戶劃線作答、自動答案校對與統計得分等。具體而言，我們設計了一個題目生成器，配有海量豐富的題庫，可以隨機生成不同類型的連線題。題目展示模塊將生成的題目以圖像和文本的組合形式展示給用戶。用戶可通過手指在屏幕上劃線完成連線題的作答。系統會獲取用戶作答的線條信息，并與標準答案進行對比，實現自動判題與提示功能。

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

開發方面我們充分利用App Inventor的可視化編程優勢，通過拖拽的方式完成界面元素的布局和程序邏輯的實現。關鍵的答案校驗算法采用坐標對比的方法，根據用戶所勾畫線條的坐標信息來判斷其答案的正確與否。在題庫內容準備方面使用CSV文件進行存儲，通過讀取文件實現題庫內容的動態擴充。

2? 連線題的功能模塊設計

2.1? 用戶界面設計

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

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

圖1? 用戶界面設計

2.2? 題目生成模塊

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

為了達到上述目標，在軟件初始化時，首先將軟件中已上傳的圖片生成圖標表，將對應的答案生成對應表，如圖3所示。本例中，以7個圖標為例。實際作答連線題時，可以依據連接題數量的多少進行列表設置，如果連接題數量較大可采用文件形式導入，讀取文件中數據生成圖示表及對應表。

為了實現軟件初始化時界面上能夠清晰顯示題目，采用了延時功能。在軟件中加載計時器，計時器原始啟用狀態設置為否，軟件初始化時，圖形及答案列表生成后，計時器的啟用計時設置為真，然后開始計時，到達計時點時，實現調用圖標、對應答案，隨機放置圖標及對應答案。計時器1到達計時點時，將計時器1的啟用計時狀態設置為假，不再更換圖標及答案，用戶可以直接連線作答，如圖4所示。

圖2? 題目顯示示例

圖3? 軟件初始化

圖4? 計時器的設置

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

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

2.3? 答案校對模塊

為實現答案校對功能，使用App Inventor的事件觸發功能。用戶完成連線后，軟件檢查答案區域的順序與正確答案的順序是否一致，并給出相應的反饋[5]。

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

圖7? 連線正確原理

圖8? 答案校對代碼

2.4? 成績統計模塊

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

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

3? 連線題應用的改進與優化

在對該連線題應用進行實際測試的過程中，發現依然有可優化和改進的空間。在題目的內容選擇上，可以增加題目的多樣性和豐富度。具體來說，可以不斷擴充題庫，增加不同難度級別的題目，滿足不同用戶的多樣化需求。在題目類型上也可以豐富和完善，增添類似填空、排列等其他形式的連線題，使應用提供的內容更加豐富全面。這些不同題型的加入可以在某種程度上增強用戶的學習興趣與積極性[7]。

在答案校驗算法方面，可以通過收集更多用戶答題數據，采用機器學習的方式不斷優化線條判定模型，提高答案判定的準確率和魯棒性，模型優化可以使判題更加智能和可靠。一些邊界情況可以通過人工標注獲取訓練數據，還可以研究不同劃線方式對判定準確度的影響。

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

4? 連線題應用的評估

從移動學習資源的視角審視連續題應用的設計和開發，不應該僅僅追求應用界面和交互的新穎與有趣，而是要圍繞教學目標和學生的學習需求進行設計，發揮移動學習資源的優勢，切實提升學習效果[9]。

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

5? 結? 論

連線題應用在功能性和易用性方面表現良好，能夠給用戶帶來較好的使用體驗。在未來的迭代設計中，將繼續增加更多的教學設計元素，強化該應用的教育性，使其成為學生移動學習的得力助手，這也為該應用的完善和改進提供了新思路和新方向。

參考文獻：

[1]趙書靜.“互聯網+”環境下的移動學習資源設計研究 [D].北京：北京理工大學，2020.

[2] 梁彤.基于微信公眾平臺的課程資源設計與開發研究[D].曲阜：曲阜師范大學，2019.

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

[4] 李單奕，陳永義，李金龍，等.基于微服務的人才尋訪APP設計與實現 [J].大眾標準化，2023（6）：178-180.

[5] 吳瑩瑩.APP產品設計基于用戶體驗的精簡評價模型建立 [J].科技風，2023（12）：59-61.

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

[7] 古鵬飛.APPinventor手機編程課程中的案例教學淺析 [J].現代職業教育，2015（8）：64-65.

[8] 孫湛.兒童益智游戲類APP交互界面設計研究 [J].遵義師范學院學報，2015，17（1）：149-151.

[9] 徐秀萍.基于Android移動平臺兒童益智游戲的開發探究 [J].山西青年，2021（2）：166-167.

[10] 謝學斌.基于App Inventor“學英語”應用程序的設計與開發 [J].現代信息科技，2021，5（1）：102-104.

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