【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提供的模块化,组件化可以很好的帮助我们实现这些功能要求

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...