CHƯƠNG 4 : THIẾT KẾ WEBSITE
1.2.2. Screen Flow của ứng dụng mobile app phía người học
Hình 4.13: Screen Flow của ứng dụng mobile app phía người học
No Screen Name Description
SCLA001 Home Screen Màn hình chính của người học SCLA002 Calendar Screen Màn hình xem lịch nhắc nhở SCLA003 Create Reminder Screen Màn hình thêm nhắc nhở SCLA004 List Section Screen Màn hình danh sách bài học SCLA005 Section Screen Màn hình xem nội dung các phần có
trong bài học
SCLA006 List Quiz Screen Màn hình danh sách bài quiz
SCLA007 Do Quiz Screen Màn hình làm bài quiz
SCLA008 FlashCard Screen Màn hình học từ vựng Bảng 4.31: Screen Flow của ứng dụng mobile app phía người học
79 Hình 4.14: SCLA001. Home Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Menu Menu
2 Lộ trình học True Icon Khi click sẽ
hiển thị modal lộ trình
3 Tất cả True Button Khi click sẽ
CHƯƠNG 4: THIẾT KẾ WEBSITE
80 màn hình SCLA006 4 Bài quiz True Silder Data từ API Khi click sẽ
chuyển sang màn hình SCLA007
5 Tất cả True Button
6 Từ vựng True Silder Data từ API
7 Tất cả True Button
8 Tài khoản True Silder Khi click sẽ
hiển thị modal thông tin chi tiết tài khoản
9 Trang chủ True Icon
10 Lịch True Icon
11 Avatar True Image Data từ API
12 Thông báo True Icon
13 Tin nhắn True Icon
Bảng 4.32: SCLA001. Home Screen
81 Hình 4.15: SCLA002. Calendar Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Button Khi click sẽ
chuyển sang màn hình SCLA001 2 Chuyển sang tháng trước đó True Icon
CHƯƠNG 4: THIẾT KẾ WEBSITE 82 3 Chuyển sang tháng tiếp theo True Icon
4 Tên tháng True Paragraph
5 Ngày đã được nhắc nhở True Datatime 6 Ngày chưa được nhắc nhở True Datatime
7 Ngày True Datatime
8 Nội dung nhắc nhở
True Paragraph Data từ API
9 Sửa nhắc nhở
True Button
10 Thêm nhắc nhở
True Button Khi click sẽ
chuyển sang màn hình SCLA003 Bảng 4.33: SCLA002. Calendar Screen
83 Hình 4.16: SCLA003. Create Reminder Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Button Khi click sẽ
chuyển sang màn hình SCLA002
2 Tiêu đề True Input
CHƯƠNG 4: THIẾT KẾ WEBSITE
84
4 Thời gian True Datatime
5 Thêm True Button
Bảng 4.34: SCLA003. Create Reminder Screen
4.2.2.4. SCLA004. List Section Screen
Hình 4.17: SCLA004. List Section Screen
STT Name Required
(Input… Validation)
85
1 Thoát True Button Khi click sẽ
chuyển sang màn hình SCLA001 2 Thơng tin
bài học
True Item Khi click sẽ
chuyển sang màn hình SCLA005 3 Thơng tin phần mở rộng True Item
Bảng 4.35: SCLA004. List Section Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
86 Hình 4.18: SCLA005. Section Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Icon Khi click sẽ
chuyển sang màn hình SCLA004 2 Thông tin bài học True Item
87 3 Nội dung
phần mở rộng
True Item
4 Bắt đầu True Button
5 Tiếp theo True Khi click sẽ
slider qua phần nội dung khác Bảng 4.36: SCLA005. Section Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
88 Hình 4.19: SCLA006. List Quiz Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Button Khi click sẽ
chuyển sang màn hình SCLA001
2 Tìm kiếm True Input
3 Lọc dữ liệu True Button
4 Chia sẻ True Button
5 Thông tin bài quiz
True Slider Data từ API
6 Làm ngày True Button Khi click sẽ
chuyển sang màn hình SCLA007 Bảng 4.37: SCLA006. List Quiz Screen
89 Hình 4.20: SCLA007. Do Quiz Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Button Khi click sẽ
chuyển sang màn hình SCLA001 2 Tên bài quiz True Paragraph Data từ API
3 Số câu đã chọn
CHƯƠNG 4: THIẾT KẾ WEBSITE
90
4 Câu hỏi True Paragraph Data từ API
5 Đáp án trả lời
True Paragraph Data từ API
6 Quay lại câu hỏi trước đó
True Icon Khi click sẽ
quay lại câu hỏi trước đó 7 Danh sách
câu hỏi
True Paragraph Khi click sẽ
hiển thị modal danh sách câu hỏi
8 Chuyển sang câu hỏi tiếp
theo
True Icon Khi click sẽ
chuyển sang câu hỏi tiếp theo
Bảng 4.38: SCLA007. Do Quiz Screen
91 Hình 4.21: SCLA008. FlashCard Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Thoát True Button Khi click sẽ
chuyển sang màn hình SCLA001 2 Chủ đề từ
vựng
True Paragraph Data từ API
CHƯƠNG 4: THIẾT KẾ WEBSITE
92 4 Nội dung từ
vựng
True Slider Data từ API
5 Thanh tiến trình
True Progress bar
6 Tôi không biết
True Button
7 Tôi đã biết True Button
Bảng 4.39: SCLA008. FlashCard Screen