【Angular2】试卷整体设计

引言

由于项目中需要用到试卷，而试卷会涉及到很多不同输入表单，所以处理起来比较复杂；
再加上一些特殊的功能和用户体验度的问题，所以需要对试卷进行设计，以处理不同场景

功能要求

1.显示数据：把后端返回的不同题型的数据按照相应要求显示出来；
2.返回数据：将用户输入的数据实时返回给后端；
3..数据回显：将用户的之前填入的数据回显到相应题目；
4.信息显示：包括用户信息，时间信息（同时加入网络状态静默监测）；
5.答题卡功能：可以显示用户对每道题答题状态，点击答题卡可以定位到相应题目；
6.页面操作：用户可以动态操作侧边栏的显示与隐藏；

原型图

设计流程

1.首先将页面分为三大组件：Information-信息组件，ExamPaper-试卷组件，AnswerSheet-答题卡组件；

2.设计一个OnlineExam-在线考试组件，作为容器，盛放上面的三个组件，这样可以实现页面操作侧边栏的功能，还可以为三大组件交互提供传递；

3.在ExamPaper组件中添加不同题型的组件，让ExamPaper组件成为容器，接收后端数据，根据数据的不同挑选不同题型组件来渲染数据；

4.完善不同的题型组件，让其对自身的题型可以做到正常的显示，接收处理提交本类型答案，回显用户提交的答案；

5.完善三大组件之间的交互，让ExamPaper组件传出的题目完成数据传递给Answer组件，使其做对应的改变，另外，让ExamPaper组件传出的时间数据传递给Information组件，Information组件在控制当前状态；

小结

涉及到用户提交表单，一般都比较复杂，在这里的题型就有11种，需要进行相应的设计封装；

还有页面的控制，和组件之间的交互，在前期得有一个大致的规划，它们之间是有一定联系的；

当然，Angular提供的模块化，组件化可以很好的帮助我们实现这些功能要求