引言

由於專案中需要用到試卷，而試卷會涉及到很多不同輸入表單，所以處理起來比較複雜；
再加上一些特殊的功能和使用者體驗度的問題，所以需要對試卷進行設計，以處理不同場景

功能要求

1.顯示資料：把後端返回的不同題型的資料按照相應要求顯示出來；
2.返回資料：將使用者輸入的資料實時返回給後端；
3..資料回顯：將使用者的之前填入的資料回顯到相應題目；
4.資訊顯示：包括使用者資訊，時間資訊（同時加入網路狀態靜默監測）；
5.答題卡功能：可以顯示使用者對每道題答題狀態，點選答題卡可以定位到相應題目；
6.頁面操作：使用者可以動態操作側邊欄的顯示與隱藏；

原型圖

設計流程

1.首先將頁面分為三大元件：Information-資訊元件，ExamPaper-試卷元件，AnswerSheet-答題卡元件；

2.設計一個OnlineExam-線上考試元件，作為容器，盛放上面的三個元件，這樣可以實現頁面操作側邊欄的功能，還可以為三大元件互動提供傳遞；

3.在ExamPaper元件中新增不同題型的元件，讓ExamPaper元件成為容器，接收後端資料，根據資料的不同挑選不同題型元件來渲染資料；

4.完善不同的題型元件，讓其對自身的題型可以做到正常的顯示，接收處理提交本型別答案，回顯使用者提交的答案；

5.完善三大元件之間的互動，讓ExamPaper元件傳出的題目完成資料傳遞給Answer元件，使其做對應的改變，另外，讓ExamPaper元件傳出的時間資料傳遞給Information元件，Information元件在控制當前狀態；

小結

涉及到使用者提交表單，一般都比較複雜，在這裡的題型就有11種，需要進行相應的設計封裝；

還有頁面的控制，和元件之間的互動，在前期得有一個大致的規劃，它們之間是有一定聯絡的；

當然，Angular提供的模組化，元件化可以很好的幫助我們實現這些功能要求