第 10 章　出题及答题

第8章的“总统测验”可以被定制成各种测验，但这种定制只对App Inventor程序员有用。只有程序员可以修改问题和答案，而对于父母、老师或其他用户来说，他们无法创建一个测验或变换问题（除非他们也学App Inventor！）。

本章将构建一个“出题”应用，“老师”可以在输入表单中创建试题。试题和答案将被存储在Web数据库中，以便“学生”可以单独访问“答题”应用并参加考试。通过创建这两个应用，你会在概念上产生更大的飞跃，并学习如何创建一个应用，让用户自行生成数据，并实现用户之间跨应用的数据共享。

“出题”与“答题”这两个应用协同工作，让“老师”可以为“学生”出题。父母可以在长途旅行中做一些旅行花絮类的应用，以增加孩子们的乐趣；小学教师可以创建“数学突击”一类的小测验；而大学生们可以创建一系列的测验，帮助他们的学习小组来准备期末考试。本章建立在第8章“总统测验”的基础上，如果你还没学过，在继续本章之前，请先学习第8章。

本章将设计两个应用：针对“老师”的“出题”应用（见图10-1）以及针对“学生”的“答题”应用。在“出题”应用中：

• 用户在输入表单中输入问题及答案；

• 显示输入的一对问答；

• 将问题及答案存储在数据库中。

图 10-1　出题应用

“答题”应用的功能与之前的“总统测验”类似。事实上，是以“总统测验”为起点创建“答题”应用，不同的是，这里的问题是使用“出题”应用输入并保存在数据库中的。

学习要点

“总统测验”是一个使用静态数据的应用范例：不管用户做多少次测验，问题都是一样的，因为问题被写在程序中（称为“硬编码”）。新闻应用、博客以及像Facebook和Twitter这类的社交网络应用采用的是动态数据，这意味着数据随时在改变。通常这种动态信息由用户生成，这类应用允许用户输入、修改并共享信息。在“出题”与“答题”应用中，将学习创建一个应用，来处理用户生成的数据。

在第9章“木琴”应用中，我们首次引入动态列表概念：用户输入的音符被记录在列表中。由用户生成数据的应用更为复杂，而且使用的块也更抽象，因为没有预设的静态数据可供参照。尽管可以定义列表变量，但不能设置具体的项。在编写程序的同时，需要设想最终用户输入的数据被添加到列表中。

本章涵盖了App Inventor中的如下内容：

• 输入表单：允许用户输入信息；

• 显示来自多个列表的数据项；

• 永久保存数据：“出题”应用将问题和答案保存到网络数据库中，“答题”应用将从同一个数据库中加载它们；

• 数据共享：使用TinyWebDB组件（而不是之前的TinyDB）将数据存储在Web数据库中。

准备开始

登陆App Inventor网站，创建新项目“MakeQuiz”，屏幕标题设为“出题”，并连接到测试手机或模拟器。

设计组件

使用组件设计器来创建用户界面，如图10-2所示（图的后面有更详细的说明），组件清单列于表10-1中。从Palette中拖出组件，将名称改为表中的命名。注意，标题Label的名称（Label1 – Label3）不必改，就用它们的默认值（因为在编辑器中不会使用这些名称）。

表10-1 “出题”应用中的所有组件

图 10-2　组件设计器中的“出题”应用

按以下方式设置组件属性：

1. 设置Text属性：Label1为“问题：”，Label2为“答案：”，Label3为“试题及答案”；

2. 设置Label3的字号为18，并勾选FontBold属性；

3. 设置QuestionText的Hint属性为“输入问题”，AnswerText的Hint属性为“输入回答”；

4. 设置SubmitButton的Text属性为“提交”；

5. 设置QuestionsAnswersLabel的Text属性为“试题及答案”；

6. 将QuestionText、AnswerText以及与它们相关的Label移入TableArrangement1。

为组件添加行为

在“总统测验”中，首先定义了两个全局列表变量QuestionList和AnswerList，本章中无需为这两个变量提供预设的问题和答案，如图10-3所示。

图 10-3　列表变量初始化

需要注意，与“总统测验“不同的是，这两个列表没有定义列表项，因为“出题”及“答题”应用中，所有数据都将由用户创建（即动态的、用户生成的数据）。

记录用户的输入

首先来处理用户的输入行为。具体来说，当用户输入问题和答案并点击提交时，程序要向列表中添加数据项来更新QuestionList和AnswerList，如下图所示：

图 10-4　向列表中添加新项

块的作用

向列表中添加项，意味着向列表的末尾追加新项。如图10-4，程序从QuestionText和AnswerText文本框中获取用户输入的内容，并分别被追加到相应的列表中。

向列表中添加的项更新了列表变量QuestionList和AnswerList，但用户看不到任何变化。第三行的块用来显示这个变化：用冒号将两个列表的内容连接起来。默认情况下，App Inventor用小括号来包围列表内容，列表项之间用空格间隔，像这样：（item1 item2 item3）。当然，这不是显示列表的理想方式，只是暂时用来测试程序的行为。稍后我们将用更高级的方式来显示列表，即，每对问题答案各占一行。

清空问题及答案

回忆一下在“总统测验”中，当移动到下一题时，要清空上一题的回答结果。在本应用中，当用户提交了一对问题-答案后，同样要清空QuestionText及AnswerText文本框，以便准备下一题的输入，如下图所示：

图 10-5　提交问题-答案之后清空文本框

块的作用

用户提交的问题-答案，将分别被添加到各自的列表中，并显示出来，这时QuestionText和AnswerText中的文本被清空，如图10-5所示。请注意，可以复制一个有内容的文本块（如上图中的“：”块），通过删除块中的文本，来获得一个空的文本块。

用多行文本显示问题-回答

现在是以App Inventor的默认格式来显示问题及答案。假如有一个有关州首府的测验，已经输入了两对问题-答案，则显示成： （加州首府在哪？ 纽约州首府在哪？）：（萨克拉门托 奥尔巴尼）。

可以想像，如果测验中的问题很多，结果会显得非常混乱。理想的显示方式，应该是每行只显示一对问题-答案：

加州首府在哪？ 萨克拉门托

纽约州首府在哪？ 奥尔巴尼

第20章讲述了单个列表中项的逐行显示技术，在继续学习之前，可以去阅读一下。

这里的任务稍显复杂，因为涉及到两个列表。为了应对这种复杂性，需要创建过程displayQAs，并从SubmitButton.Click事件处理程序中调用该过程。

逐行显示问题-答案，需要做到以下几点：

• 使用foreach块遍历QuestionList中的每个问题；

• 使用变量answerIndex，在遍历问题的同时，获取与问题对应的答案；

• 使用join块连接每对问题-答案，并用换行符（\n）来分开每对问题-答案，如下图所示：

块的作用

过程displayQAs封装了所有用于显示数据的块，如图10-6所示，在需要显示列表时，可直接调用displayQAs，而不必再重复使用过程内部的块。

图 10-6　创建displayQAs过程

由于foreach块只能遍历一个列表，而本应用中有两个列表，因此要求在遍历问题列表的同时，为每个问题选择对应的答案。这需要定义一个索引变量，就像第8章“总统测试”中的currentQuestionIndex一样，这里定义了answerIndex，当foreach遍历QuestionList时，用来跟踪对应的答案在列表AnswerList中的位置。

在foreach开始遍历之前，设answerIndex的值为1；在foreach遍历过程中，answerIndex用来从AnswerList中选择当前问题的答案，然后递增1。在foreach的每次迭代中，当前的问题-答案被添加到QuestionsAnswersLabel的最后一行，问题与答案之间以冒号分隔。

调用新建的过程

已经创建了显示问题-答案的过程displayQAs，但在调用它之前，它起不到任何作用。修改SubmitButton.Click事件处理程序，用displayQAs替代对QuestionsAnswersLabel.Text的简单设置，来显示所有的问题-答案。更新后的块如图10-7所示。