CHƯƠNG 4 : THIẾT KẾ WEBSITE
1.2.3. Screen Flow của ứng dụng web phía quản trị viên
Hình 4.22: Screen Flow của ứng dụng web phía quản trị viên
No Screen Name Description
SCA001 Manage Quiz/Exam
Screen Màn hình quản lý quiz/exam
SCA002 Manage Study Route
Screen Màn hình quản lý lộ trình học SCA003 Create Study Route
93 SCA004 Manage Bank Question
Screen Màn hình quản lý ngân hàng câu hỏi SCA005 Create Match Word
Question Screen Màn hình tạo câu hỏi dạng nối từ SCA006 Manage Section Screen Màn hình quản lý bài học SCA007 Censorship Quiz/Exam
Screen Màn hình kiểm duyệt quiz/exam Bảng 4.40: Screen Flow của ứng dụng web phía quản trị viên
4.2.3.1. SCA001. Manage Quiz/Exam Screen
Hình 4.23: SCA001. Manage Quiz/Exam Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thông báo True Icon Khi click sẽ
hiển thị modal danh sách thông báo
2 Thông tin tài khoản
True Item Data từ API
CHƯƠNG 4: THIẾT KẾ WEBSITE
94 4 Quản lý
exam
True Tab
5 Thêm quiz True Button
6 Tên bài True Paragraph Data từ API 7 Số câu hỏi True Paragraph Data từ API
8 Độ khó True Paragraph Data từ API
9 Xem trước True Button
10 Sửa True Icon
11 Xóa True Icon
12 Lọc True Select
13 Quay lại True Button Khi click sẽ
quay lại trang trước đó 14 Trang hiện tại True Button
15 Tiếp theo True Button Khi click sẽ
chuyển qua trang mới Bảng 4.41: SCA001. Manage Quiz/Exam Screen
95 Hình 4.24: SCA002. Manage Study Route Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thông báo True Icon Khi click sẽ
hiển thị modal danh sách thông báo
2 Thông tin tài khoản
True Item Data từ API
3 Thanh tìm kiếm
True Input
4 Tìm kiếm True Icon
5 Thêm lộ trình
True Button
6 Tiêu đề True Paragraph Data từ API
CHƯƠNG 4: THIẾT KẾ WEBSITE
96
8 Mô tả True Paragraph Data từ API
9 Số lượng bài học
True Paragraph Data từ API
10 Thêm bài học
True Button
11 Chỉnh sửa True Button
12 Xóa True Button
13 Lọc True Select
14 Quay lại True Button Khi click sẽ
quay lại trang trước đó 15 Trang hiện tại True Button
16 Tiếp theo True Button Khi click sẽ
chuyển qua trang mới Bảng 4.42: SCA002. Manage Study Route Screen
97 Hình 4.25: SCA003. Create Study Route Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Icon Khi click sẽ
chuyển sang màn hình SCA002 2 Thêm bài học True Button
3 Nội dung bài học
True Item Data từ API
4 Xem trước True Button
5 Xóa True Icon
6 Lưu True Button
7 Hủy True Button
Bảng 4.43: SCA003. Create Study Route Screen
4.2.3.4. SCA004. Manage Bank Question Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
98
STT Name Required
(Input… Validation)
Format Reference Not
1 Thông báo True Icon Khi click sẽ
hiển thị modal danh sách thông báo
2 Thông tin tài khoản
True Item Data từ API
3 Thanh tìm kiếm
True Input
4 Tìm kiếm True Icon
5 Thêm câu hỏi
True Button
6 Câu hỏi True Paragraph Data từ API
7 Nội dung True Paragraph Data từ API 8 Loại câu hỏi True Paragraph Data từ API 9 Số câu hỏi True Paragraph Data từ API
10 Xem trước True Button
11 Chỉnh sửa True Button
12 Xóa True Button
13 Lọc True Select
14 Quay lại True Button Khi click sẽ
quay lại trang trước đó
99 15 Trang hiện
tại
True Button
16 Tiếp theo True Button Khi click sẽ
chuyển qua trang mới 17 Phân loại
câu hoỉ
True Radio button
18 Thống kê câu hỏi
True Item Data từ API
Bảng 4.44: SCA004. Manage Bank Question Screen
4.2.3.5. SCA005. Create Match Word Question Screen
Hình 4.27: SCA005. Create Match Word Question Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Icon Khi click sẽ
chuyển sang màn hình SCA004
CHƯƠNG 4: THIẾT KẾ WEBSITE
100 2 Câu hỏi mặc
định
True Tab
3 Câu hỏi nối từ
True Tab Khi click sẽ
chuyển sang màn hình thêm câu hỏi dạng nối từ 4 Câu hỏi sắp
xếp
True Tab Khi click sẽ
chuyển sang màn hình thêm câu hỏi dạng sắp xếp 5 Câu hỏi điền
– dạng 1
True Tab Khi click sẽ
chuyển sang màn hình thêm câu hỏi điền dạng 1 6 Câu hỏi điền
– dạng 2
True Tab Khi click sẽ
chuyển sang màn hình thêm câu hỏi điền dạng 2 7 Câu hỏi hội
thoại
True Tab Khi click sẽ
chuyển sang màn hình thêm câu hỏi dạng hội thoại 8 Câu hỏi
toeic
True Tab Khi click sẽ
chuyển sang màn hình thêm câu hỏi dạng toeic
101
10 Xem trước True Icon
11 Lưu lại True Icon
12 Câu hỏi True Editor
13 Đáp án True Item
14 Thêm đáp án True Button Khi click sẽ
thêm item đáp án Bảng 4.45: SCA005. Create Match Word Question Screen
4.2.3.6. SCA006. Manage Section Screen
Hình 4.28: SCA006. Manage Section Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thông báo True Icon Khi click sẽ
hiển thị modal danh sách thông báo
CHƯƠNG 4: THIẾT KẾ WEBSITE
102 2 Thông tin tài
khoản
True Item Data từ API
3 Thanh tìm kiếm
True Input
4 Tìm kiếm True Icon
5 Thêm bài học
True Button
6 Tiêu đề True Paragraph Data từ API
7 Ảnh True Paragraph Data từ API
8 Mô tả True Paragraph Data từ API
9 Thuộc lộ trình True Paragraph 10 Thêm bài học True Icon
11 Xem trước True Icon
12 Chỉnh sửa True Icon
13 Xóa True Icon
Bảng 4.46: SCA006. Manage Section Screen
103 Hình 4.29: SCA007. Censorship Quiz/Exam Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thông báo True Icon Khi click sẽ
hiển thị modal danh sách thông báo
2 Thông tin tài khoản
True Item Data từ API
3 Danh sách quiz chờ kiểm duyệt True Tab 4 Danh sách exam chờ kiểm duyệt True Tab
5 Tên bài True Paragraph Data từ API
6 Mô tả True Paragraph Data từ API
CHƯƠNG 4: THIẾT KẾ WEBSITE
104 8 Số câu hỏi True Paragraph Data từ API
9 Người tạo True Paragraph Data từ API
10 Xem trước True Button
11 Lọc True Select
12 Quay lại True Button Khi click sẽ
quay lại trang trước đó 13 Trang hiện tại True Button
14 Tiếp theo True Button Khi click sẽ
chuyển qua trang mới Bảng 4.47: SCA007. Censorship Quiz/Exam Screen
105