2.3　习题界面

2.3.1　制作标题栏

步骤1　创建新页面，命名为“Exercises”，拖入手机外框及系统状态栏，将背景设置为白色，标题栏可用文本标签实现，将文本框拖入工作区，并将宽高设置为360×50，如图2-52所示。

步骤2　将文本标签的背景设为蓝色，文本位置设为垂直居中和水平居中，字号设置为20，文字颜色设为白色，如图2-53所示。

2.3.2　制作习题列表界面

步骤1　首先制作习题列表中的一个选项，从元件库中拖入一个矩形，设置宽高为360×70，并在矩形中编写两行文本，其中第一行文本是章节名称，字号为14，字体加粗；第二行文本是习题数量，字号为12，字体颜色为#999999，如图2-54所示。

步骤2　由于每个选项之前都有编号，因此首先放入一个图片元件，并导入相应图片，如图2-55所示。

步骤3　拖入文本标签放置在图片中间，显示章节编号，并将文本大小设置为14，文本颜色设置为#FFFFFF，如图2-56所示。

步骤4　在习题列表中，每一个条目之间会有一条灰色的分隔线，这个分隔线可以通过矩形实现。将矩形高度设为1，并将矩形填充色设置为灰色，如图2-57所示。

步骤5　由于每个条目的内容基本相同，因此可将条目内容与分隔线制作成母版或者进行组合，本项目将其进行组合使用，之后将条目放入原型图中，如图2-58所示。

步骤6　将第一个条目组合进行复制，修改其中的文本内容并更改章节图片，完成习题列表的制作，如图2-59所示。

2.3.3　修改底部导航栏

步骤1　将导航栏放入原型图中，由于当前界面处于习题界面，因此需要更换图片以及修改文本颜色，将其置于选中状态，如图2-60所示。

步骤2　在导航栏中，点击不同按钮可以切换到不同界面。为了能够切换到课程界面，还需给“课程”按钮添加交互事件，点击课程按钮时在当前窗口中打开课程界面，如图2-61所示。

2.3.4　制作习题详情界面导航栏

步骤1　创建页面，命名为“Questions”，将手机外框及系统状态栏放入工作区域，拖入一个矩形元件，设置宽高为360×50，将矩形背景设置为蓝色，文本颜色设置为白色，如图2-62所示。

步骤2　在标题栏左侧有一个返回按钮，点击返回按钮跳转到习题列表界面。首先向原型图中拖入一个图片元件，将图片宽高设置为40×40，之后添加返回按钮图片，如图2-63所示。

步骤3　为返回按钮添加交互事件，当点击返回按钮时跳转到习题列表界面，如图2-64所示。

2.3.5　制作习题详情界面

步骤1　制作题型栏。将文本标签拖入原型图中，设置宽高为360×40，背景颜色设置为白色，对齐方式设置成左对齐，字号设置为16，如图2-65所示。

步骤2　制作习题内容部分。拖入文本标签元件，设置宽高为360×60，将背景颜色设置为白色，对齐方式设置成左对齐，字号设置为13，如图2-66所示。

步骤3　制作试题选项部分。首先制作选项内容，将文本标签拖入工作区域并设置宽高为290×40，垂直居中，如图2-67所示。

步骤4　制作选项图标。将图片元件拖入工作区并命名，设置宽高为40×40，导入选项未选中时的图片，放置于选项内容左侧，如图2-68所示。

步骤5　将图片与矩形进行组合，以便之后的使用，将选项放置于原型图中，使右侧对齐，如图2-69所示。

步骤6　通过复制第一个选项组合，制作其他三个选项，更换选项图片及选项内容，并设置每个选项的名称，如图2-70所示。

2.3.6　添加选项的交互事件

在做选择题时，会出现两种交互情况，当选择正确答案时，选项会显示选择正确且其他选项不能被选择；当选择错误选项时，会在该选项处显示错误图片，同时会显示正确的选项，其余选项不能被选择。接下来添加选择正确时的交互事件（以选项“C”为例）。

步骤1　添加图片点击事件，当选择答案“C”时，将选项图片变成正确图片，如图2-71所示。

步骤2　选择一个选项之后其他三个选项不能够再被选择，因此将其他三个选项设为禁用状态，如图2-72所示。

至此，选择正确时的交互事件添加完毕，接下来添加选择错误时的交互事件（以选项“A”为例）。

步骤3　当选择错误选项时，首先该选项的图标变成错误图标，如图2-73所示。

步骤4　选择错误选项时还需要将正确选项“C”的图标修改为正确图标，如图2-74所示。

步骤5　在选择选项之后，其他选项不能够再次被选中，因此需要禁用其他选项，如图2-75所示。

步骤6　按照上述步骤，添加所有选项的交互事件，如图2-76所示。

步骤7　再放置一个练习题，完成习题详情界面内容，并设置选项的交互事件，如图2-77所示。

2.3.7　添加习题列表的交互事件

在习题列表中点击每一章的条目时会跳转到相应的习题详情界面，因此需要为习题列表的每一个条目添加交互事件。以第1章条目为例，添加点击事件，如图2-78所示。

2.3.8　添加底部导航栏的交互事件

在课程界面点击导航栏中的习题按钮会跳转到习题界面，因此需要在“习题”按钮上添加鼠标点击的交互事件，如图2-79所示。

至此，课程界面与习题界面设计完成。读者可自行为底部导航栏的其他按钮添加交互事件，添加方式与上述一致，不再赘述。