基于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—），男，汉族，江苏泰兴人，讲师，本科，研究方向：电子技术。