应用程序发明家(app inventor) QuizMe 项目学习

准备工作：下载实例图片

开始：

设置组件

 

 

使用组件设计为QuizMe创建接口。你什么时候完成,它应该类似于下面所示的屏幕快照(也有更详细的说明快照)。

 

要创建这个接口,首先加载图片下载到你的项目。点击Add按钮,并选择一个地区的媒体下载的文件(例如,Larsenberra.jpg)。然后做同样的其他三个图像。　　　　接下来,创建以下组件从调色板中通过拖拽到查看器。

Component Type	Palette Group	What you'll name it	Purpose of Component
Image	Basic	Image1	The picture part of the question
Label	Basic	QuestionLabel	Displays the current question
HorizontalArrangement	Screen Arrangement	HorizontalArrangement1	Organizes the AnswerPrompt and Text
Label	Basic	AnswerPromptLabel	Text prompting for an anwer
TextBox	Basic	AnswerText	User will enter answer here.
Label	Basic	RightWrongLabel	Correct/Incorrect is displayed here.
HorizontalArrangement	Screen Arrangement	HorizontalArrangement2	Organizes the AnswerButton and NextButton
Button	Basic	AnswerButton	User clicks to submit an answer
Button	Basic	NextButton	User clicks to proceed to the next answer

设置组件的属性如下所述:

Component	Action
Image1	Set its Picture property to "Larsenberra.jpg". This is the first picture that should appear.
QuestionLabel	Change Text property to "question"
AnswerPromptLabel	Change Text property to "Enter Answer:". On the Viewer screen, move this label intoHorizontalArrangement1.
AnswerText	Change Hint to "please enter an answer". On the Viewer screen, move AnswerText intoHorizontalArrangement1.
AnswerButton	Change Text property to "Submit". On the Viewer, move the button intoHorizontalArrangment2.
NextButton	Change Text property to "Next". Move the button into HorizontalArrangement2.
RightWrongLabel	Change Text property to "correct/incorrect".

添加到组件的行为

打开块编辑器来添加行为的应用。首先,您将定义两个列表变量,QuestionList举行的问题列表,AnswerList持有相应的答案列表。　　　　定义两个变量列表,您需要以下内容块:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the QuestionList variable (rename it)
def variable	Definitions	Defines the AnswerList variable (rename it)
make a list	Lists	Used to insert the items of the QuestionList
text (3 of them)	Text	The actual questions
make a list	Lists	Used to insert the items of the AnswerList
text (3 of them)	Text	The actual answers

您创建全局变量通过拖拽在def可变块从定义抽屉,双击默认的名字“变量”来改变它的名字。def的可变块有一个位置变量的初始值。变量可以代表一个数字或文字,甚至是一个列表,您可以插入列个清单块到变量定义。　　　

　这个街区应该看起来像这样:

 

 

 

定义隐藏的索引变量

每当用户单击NextButton继续通过测验,这个应用程序需要记住,问题就在。在程序设计中,记住一些东西,您定义一个新的变量。在这种情况下,应用程序需要记住当前问题的数字——该指数为QuestionList列表。

要创建变量currentQuestionIndex,您需要以下内容块:

Block Type	Drawer	Purpose
def variable	Definitions	Defines the currentQuestionIndex variable (rename it)
number (1)	Math	Set the initial value of currentQuestionIndex to 1

The blocks should look like this:

显示第一个问题

首先,你会忽略这些答案,只是工作行为序列通过问题。期望的行为如下:当应用程序启动时,第一个问题应该出现在标签QuestionLabel命名。当用户单击NextButton,第二个问题应该出现。当用户单击再次,第三个应该出现。当最后一个问题是达成,单击NextButton应该导致第一个问题再次出现在theQuestionLabel。

与应用程序发明家,你选择特定项的列表中选择列表项的块。块要求您指定列表和一个指数——一个列表中的位置。如果一个列表有三个项目,索引1、2和3都是有效的。

对于QuizMe,当应用程序启动时,应用程序应该选择列表中的第一个问题,在QuestionLabelcomponent显示它。

对于这个应用程序初始化行为,您需要以下内容块:

Block Type	Drawer	Purpose
Screen1.Initialize	Screen1	When the app begins, this event-handler is triggered.
set QuestionLabel.Text to	QuestionLabel	Need to put the first question in QuestionLabel
select list item	Lists	Need to select the first question from QuestionLabel
global QuestionList	My Definitions	The list to select from
number (1)	Math	Select the first question by using an index of 1

这个街区应该看起来像这样:

块的工作如何

Screen1的。初始化事件时触发应用程序开始。第一项QuestionList的变量选择和放置在QuestionLabel.Text。因此,当应用程序开始,用户将看到的第一个问题。

测试这个行为。单击重启手机应用程序(或连接的电话如果没有连接)。什么东西出现在电话吗?如果你创建了QuestionList如上所述,QuestionList的第一项,“谁投一个完美的游戏世界系列吗?“,应该出现在QuestionLabel。

遍历问题

现在项目NextButton的行为。你已经定义了currentQuestionIndex记住用户的问题上。当NextButton被单击时,应用程序需要增加这个变量,例如,改变它从1到2个或2到3等等,然后使用结果值来选择新“当前”的问题。对于这种行为,您需要以下内容块:

Block Type	Drawer	Purpose
NextButton.Click	NextButton	When user clicks Next, this event-handler is triggered.
set currentQuestionIndex to	My Definitions	Need to put the first question in QuestionLabel
+ block	Math	Used to increment currentQuestionIndex
global currentQuestionIndex	My Definitions	New value will be old value + 1
number (1)	Math	For the + 1
set QuestionLabel.Text to	QuestionLabel	Need to display the next question here
select list item	Lists	Need to select the first question from QuestionList
global QuestionList	My Definitions	Plug into list slot of call select list item
global currentQuestionIndex	My Definitions	Plug into index slot of call select list item, we want nth item

这个拼图应该看起来像这样:

块的工作如何

第一行的拼图currentQuestionIndex增加变量。如果currentQuestionIndex有一个1,它就变成了2。如果它有一个2,它就变成了3,等等。一旦currentQuestionIndex变量已经改变,应用程序使用它来选择“当前”的问题。

回想一下,在Screen.Initialize事件句柄,这个应用程序选择第一个问题来显示:

当NextButton被单击时,应用程序不选择列表中的第一项,或者第二或者第三次,它选择这currentQuestionIndex项目.

这个街区是在从右到左的方式执行。这个应用程序首先评估指标参数的选择列表项,它是currentQuestionIndex的变量。这个数字是存储在currentQuestionIndex用作指数当选择列表项目执行。

当NextButton第一次点击,增加currentQuestionIndex块将从1到2,那么应用程序将从QuestionList选择第二个项目,“谁投第一场完全比赛2010 ?”。NextButton第二次点击,currentQuestionIndex会设置2到3,程序会选择列表中的第三问题,“谁投第一场完全比赛的现代吗?”

测试这个行为。测试NextButton的行为,看看这个应用程序是否正常工作为止。为了测试,扮演角色的用户并单击NextButton打电话。做手机显示的第二个问题,“谁投第一场完全比赛的2010吗?“它应该,和第三个问题应该出现当你点击NextButton再次。如果这是工作,拍拍自己的迅速恢复,然后继续。　　　　尝试再次单击NextButton(第三次)。您应该看到一个错误:“试图获得第四项列表的长度为3”。这个应用程序有一个bug,你知道是什么问题?

问题是,它的应用程序总是增加currentQuestionIndex变量当NextButton点击。当currentQuestionIndex已经3和用户单击NextButton,这个应用程序更改currentQuestionIndex 3到4,然后调用选择列表项目获得currentQuestionIndex-th,或在这种情况下,第四项。因为只有三个项目在变量QuestionList,Android抱怨。　　　　这个应用要做的是问一个问题——先检查条件——当NextButton被单击,并执行不同的块dependending在答案。问这个问题的一个方法是问,“是变量currentQuestionIndex已经3 ?“如果答案是肯定的,你应该设定currentQuestionIndex回到0,因此用户被送回到第一个问题。　　　　您需要以下块:

Block Type	Drawer	Purpose
if test then-do	Control	To ask if user is on last question
= block	Math	to test if currentQuestionIndex is 3
global currentQuestionIndex	My Definitions	-
number 3	Math	3 is number of items in the list
set currentQuestionIndex to	My Definitions	set to 0 to go back to first question
Number 0	Math	set to 0 because next blocks will increment to 1

The modified NextButton.Click event-handler should look like this:

块的工作如何

当NextButton被单击时,应用程序首先检查是否有一个3 currentQuestionIndex在它。如果是这样,currentQuestionIndex是重新设置为0,这样当1添加到它下面的街区,这将是1和测验将循环回到显示第一个问题。注意,只有块嵌入在如果测试然后做块都依赖于条件——增量和QuestionLabel设置。文本块的执行在所有条件。

测试这个行为。因为变量如currentQuestionIndex是隐藏的,他们常常是在一个程序错误的来源。幸运的是,App 
Inventor提供了一种方法来做这样的隐藏变量在测试期间的透明。具体地说,App 
Inventor可以让你“看”如何改变一个变量的值作为一个应用的进展。在这个测试中,右键单击currentQuestionIndex 
def块在街区编辑器并选择观看。然后选择重启手机应用程序,然后将显示def块和一个手表盒显示的初始值currentQuestionIndex(这应该是1):

现在拿起电话并单击NextButton。第二个问题,“谁把最近的完美的游戏在大联盟吗?“应该出现在QuestionLabel打电话,像以前一样。在App 
Inventor屏幕,2应该出现在currentQuestionIndex记忆细胞:

当你再次单击,第三个问题应该出现在电话和3应该出现在记忆细胞。如果你再次单击,1应该出现在currentQuestionIndex和在电话上的第一个问题。

一个可维护的应用程序:使它容易修改的问题

接下来,您将修改应用程序以使它容易添加和删除元素的列表。你会重写块,因此,他们将继续工作,任何列表,而不只是一个恰好三个项目。首先,添加第四个问题的回答,AnswerList QuestionList和另一个。这个街区应该看起来像这样:

修改后的应用程序测试。单击NextButton好几次。你应该看到,第四个问题再也不会现身,无论有多少次你点击Next。

修改后的应用程序测试。单击NextButton好几次。你应该看到,第四个问题再也不会现身,无论有多少次你点击Next。

你可以改变数字3到4,这个应用程序将再次正常工作。这个解决方案的问题在于,每次修改问题和答案,你也要记得做这种改变。这种依赖关系在计算机程序往往会导致错误,特别是作为一个应用生长在复杂性。最好是设置程序,它将工作无论多少的问题存在。这种普遍性是更重要的,当你正在与列表动态变化,例如,一个测试应用程序,允许用户添加新的问题。　　　　更好的解决方案是问这个问题在一个更普遍的方式。你真的想知道如果当前问题用户仍在——currentQuestionIndex的价值——是一样大QuestionList中项目的数量。如果程序问这个问题在这个更通用的方式,它将工作甚至当你添加到null

Block Type	Drawer	Purpose
length of list	Lists	asks how many items are in QuestionList
global QuestionList	My Definitions	put into list slot of length of list

Your NextButton.Click event-handler should now appear as:

块的工作如何

如果现在的测试比较了currentQuestionIndex QuestionList的长度。所以,如果currentQuestionIndex有一个4,QuestionList的长度是4,那么currentQuestionIndex将被设置为0(然后1增量操作后在第一排块后,如果)。注意,因为块不再引用3或任何特定的大小,这种行为将工作不管列表项的多少。

测试修改后的行为。当你点击NextButton,并应用程序现在序列通过四个问题,移动到第一个后的第四种吗?

转换图像为每个问题

当前的应用程序显示了相同的图像,不管什么问题问。你可以改变这样一个图像用于修饰或说明每个问题出现在NextButton点击。早些时候,你增加了四个图片作为媒体项目。现在,您将创建一个列表,PictureList第三的名字,作为其项目的图像文件。和你theNextButton将修改。单击事件句柄来切换每个图片的时间。　　　　首先,创建一个PictureList和初始化它的名称图像文件。确保名称是完全一样的文件的名称中被加载到媒体的项目。下面是这个块PictureList应该:

接下来,您需要修改NextButton。单击事件句柄,以便它修改图片根据用户仍在什么问题。如果你设置图像。图片财产到一个文件的名字的影像时,已经被加载,图像将会出现。NextButton修改。单击,您需要以下内容块:

Block Type	Drawer	Purpose
set Image1.Picture to	Image1	set this to change the picture
select list item	Lists	need to select the picture corresponding to current question
global PictureList	My Definitions	select a file name from this list
global currentQuestionIndex	My Definitions	select the currentQuestionIndex-th item

这是块如何应该:

块的工作如何

这个currentQuestionIndex作为索引QuestionList和currentQuestionIndex是1,这个应用程序选择第一个问题和第一个图像。当currentQuestionIndex是2,这个应用程序选择第二个问题和第二幅。当然这个计划取决于列表被同步,事实上他们是。例如,第一张图片,LarsenBerra。jpg,是一幅唐拉森,唐拉森是第一个问题的答案,“谁投一个完美的游戏世界系列吗?“测试修改后的行为。做一个不同的图像看起来每一次你点击NextButton吗? 　　　

　评估答案

接下来,您将添加块报告用户是否已经回答了一个问题正确与否。用户输入答案,然后单击AnswerButton AnswerText。应用程序必须比较用户输入的答案“当前”问题,使用一个ifelse块来检查。这个RightWrongLabel应该修改报告是否答案是正确的。您需要以下块这种行为：

Block Type	Drawer	Purpose
AnswerButton.Click	AnswerButton	the behavior is triggered when user clicks the AnswerButton
ifelse	Control	if answer is correct, do one thing, else do another
= block	Math	to ask if answer is correct
AnswerText.Text	AnswerText	the user's answer is in this textbox
select list item	Lists	to select the current answer from AnswerList
global AnswerList	My Definitions	The list to select from
global currentQuestionIndex	My Definitions	the question number (and answer number) the user is on
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "correct"	Text	if answer is right
set RightWrongLabel.Text to	RightWrongLabel	report the answer here
text block "incorrect"	Text	if answer is wrong

The blocks should look like this:

块的工作如何

测试的ifelse写道,“是用户的答案(AnswerText.Text)等于currentQuestionIndex-th项目在theAnswerList吗?“如果currentQuestionIndex是1,该应用程序将比较用户的答案与第一项在AnswerList,”唐拉森”。如果currentQuestionIndex是2,该应用程序将比较用户的答案与列表中的第二个答案,”达拉斯布莱登”,等等。如果测试结果是积极的,然后做块的执行和RightWrongLabel设置为“正确!”。如果测试是假的,其他块的执行和RightWrongLabel设置为“不正确的”。　　　　

修改后的应用程序测试。尝试回答的问题之一。它应该报告你是否回答这个问题完全一样AnswerList中指定。试验与一个正确和错误的答案(因为文本相比,测试是大小写敏感)。　　　　

单击NextButton和回答第二个

Block Type	Drawer	Purpose
set RightWrongLabel.Text to	RightWrongLabel	the label to blank out
text (blank)	Text	When Next is clicked, erase old answer critique
set AnswerText.Text to	AnswerText	the user's answer from previous question
text (blank)	Text	When Next is clicked, erase old answer

这个拼图应该看起来像这样:

块的工作如何

当NextButton点击,用户移动到下一个问题,所以前两行中的事件句柄清空RightWrongLabel和AnswerText。　　　

　测试这个行为。回答问题,并单击Submit,然后单击NextButton。做你以前的回答和应用批判消失?

最终计划

QuizMe! Final Version:

方案的最终版本应用程序通过选择包电话|条形码从组件设计菜单。当条码出现,使用条形码扫描仪,在你的手机下载和安装这个应用程序。　　　　

变化　　　　

一旦你得到一个测验工作,你可能想要探索一些变化。

例如, 　　　

　而不是仅仅显示图像对于每个问题,试着声音剪辑或短视频。与声音,你可以把你的测试应用程序到一个名称,调优应用程序。　　

这个测试是非常严格的条件被接受为一个有效的回答。有许多方法来修改这个。一种方法是使用文本。包含块看看用户的答案是包含在实际的回答。另一种方法是提供多个回答每个问题,检查通过迭代(使用foreach)通过它们来看看任何匹配。　　

变换测验,所以这是多项选择题的答案列表需要