【Angular2】试卷整体设计

前端之家收集整理的这篇文章主要介绍了【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提供的模块化,组件化可以很好的帮助我们实现这些功能要求

原文链接:https://www.f2er.com/angularjs/145717.html

猜你在找的Angularjs相关文章