STT Name Required
(Input… Validation)
Format Reference Not
1 Tìm kiếm True Input Khung nhập
nội dung tìm kiếm
CHƯƠNG 4: THIẾT KẾ WEBSITE
66
2 Tìm kiếm True Button Khi click
tiến hành tìm kiếm theo nội dung nhập
3 Lọc True Select Lọc theo yêu
cầu.
4 Loại bài True Checkbox Chọn để lọc
theo loại bài
5 Độ khó True Radio Chọn để lọc
theo độ khó
6 Tiêu đề True Text Tên của bài
kiểm tra 7 Thời gian
làm bài
True Text Thời gian
làm bài của bài kiểm tra
8 Làm bài True Link Click để làm
bài, chuyển sang màn hình SCL 9 Hiển thị
thêm
True Button Click để tải
thêm dữ liệu Bảng 4.24: SCL004. List Exam Screen
67 Hình 4.7: SCL005. Do Exam Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Cài đặt True Button Khi click
hiển thị 1 popup để cài đặt trang làm kiểm tra. 2 Thời gian còn lại
True Label Bộ đếm thời
gian còn lại của bài exam.
3 Nộp bài True Button Khi click
hiển thị 1 popup xác nhận nộp bài
4 Menu True Button Khi click
hiển thị 1 popup menu điều hướng câu hỏi
CHƯƠNG 4: THIẾT KẾ WEBSITE
68 trong bài
exam.
5 Thoát True Button Khi click
hiển thị 1 popup xác nhận thoát khỏi trang làm exam.
6 Trước True Button Khi click
chuyển câu hỏi về câu hỏi trước đó.
7 Sau True Button Khi click
chuyển câu hỏi về câu hỏi sau đó.
8 Câu hỏi False Text Phần để hỏi
của câu hỏi
9 Nội dung True Text Phần nội
dung câu hỏi
10 Nghe True Image Hình ảnh
loa, khi click tiến hành phát bài nghe.
11 Đáp án True Text Khi click,
đáp án được chọn chuyển màu để thông báo đã chọn đáp án. Bảng 4.25: SCL005. Do Exam Screen
69 Hình 4.8: SCL006. Learn Section Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Tiến trình True Progress Bar Thanh tiến
trình thể hiện tiến trình hồn thành kịch bản học.
2 Thốt True Button Khi click,
hiển thị 1 popup xác nhận thoát/hủy khỏi trang học.
3 Tiêu đề True Text Trạng thái
đối với từ vựng (đã học/chưa học)
CHƯƠNG 4: THIẾT KẾ WEBSITE 70 4 Hình ảnh True Image Hình ảnh mặc định của từ vựng nếu người học chưa cài đặt hình ảnh của riêng mình. 5 Từ vựng True Text Từ vựng
6 Play True Button Khi click,
phát/dừng đoạn phát âm của từ vựng
7 Nghĩa True Image Nghĩa của từ
vựng
8 Ví dụ True Text Ví dụ cho từ
vựng
9 Kế tiếp True Text Khi click,
tiếp tục tiến trình học. Nếu đã hết chuyển thành nút kết thúc.
Bảng 4.26: SCL006. Learn Section Screen
71 Hình 4.9: SCL007. Vocabulary Learning Progress Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Các từ còn yếu True Text Bộ đếm số lượng từ vựng còn yếu
2 Lọc từ vựng True Select Lọc theo yêu
cầu
3 Ôn tập ngay True Link Click để
luyện tập, chuyển sang màn hình SCK
4 Từ vựng True Text
5 Nghĩa True Text
6 Mức độ nắm True Text, Svg Hiển thị
mức độ nắm vững
CHƯƠNG 4: THIẾT KẾ WEBSITE
72 7 Thời gian
làm bài
True Text Thời gian
làm bài của bài kiểm tra Bảng 4.27: SCL007. Vocabulary Learning Progress Screen
4.2.1.8. SCL008. Forum Screen
Hình 4.10: SCL008. Forum Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Tab True Tab Phân nhóm
chức năng theo tab
2 Bài viết True Link Khi click,
chuyển sang màn hình SCL010
3 Ảnh đại diện True Image Ảnh đại diện
của người tạo bài viết
73 4 Tên tài
khoản
True Text Tên tài
khoản của người tạo bài viết 5 Tiêu đề bài
viết
True Text Tiêu đề của
bài viết
6 Thời gian True Text Khoảng thời
gian từ lúc bài viết được tạo đến hiện tại
7 Bình luận True Text Bộ đếm bình
luận có trong bài viết
8 Tìm kiếm True Input Khung nhập
nội dung tìm kiếm
9 Tìm kiếm True Button Khi click
tiến hành lọc theo nội dung tìm kiếm 10 Bài viết theo
dõi
True Link Khi click,
chuyển sang màn hình SCL Bảng 4.28: SCL008. Forum Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
74 Hình 4.11: SCL009. Detail Discussion Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Ảnh đại diện True Image Ảnh đại diện
của người dùng 2 Tiêu đề bài
viết
True Text Tiêu đề của
bài viết 3 Tên tài
khoản
True Text Tên tài
khoản của người dùng
4 Nội dung True Text Nội dung
của bài viết
5 Đánh giá True Button Click để
chọn mức đánh giá cho bài viết
75 6 Bình luận
mới
True Input Khung nhập
bình luận mới
7 Đăng True Button Click để
thêm bình luận mới
8 Hủy True Button Click để
reset khung nhập bình luận 9 Bộ lọc True Select Lọc bình luận theo yêu cầu
10 Bình luận True Text Nội dung
của bình luận
11 Lượt thích True Text Bộ đếm lượt
thích của bình luận
12 Bình luận True Button Click để mở
rộng phần phản hồi cho bình luận Bảng 4.29: SCL009. Detail Discussion Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE 76 Hình 4.12: SCL010. Chat Screen STT Name Required (Input… Validation)
Format Reference Not
1 Tiêu đề nhóm chat
True Text Tiêu đề của
nhóm chat được chọn
2 Tìm kiếm True Input Khung nhập
nội dung tìm kiếm
3 Tìm kiếm True Button Khi click
tiến hành tìm kiếm dữ liệu theo nội dung nhập
4 Chi tiết True Button Khi click
hiển thị popup thông tin chi tiết, chỉnh sửa nhóm chat
77
5 Ảnh đại diện True Image Ảnh đại diện
của người gửi tin nhắn
6 Tài khoản True Text Tên tài
khoản của người gửi tin nhắn
7 Tin nhắn True Text Nội dung tin
nhắn được gửi
8 Tin nhắn True Input Khung nhập
nội dung tin nhắn để gửi
9 Thêm True Button Khi click
hiển thị popup thêm nhóm chat mới 10 Tin nhắn bỏ lỡ
True Text Bộ đếm tin
nhắn mà người dùng bỏ lỡ từ nhóm chat
11 Nhóm chat True Image Nhóm chat
mà người dùng là thành viên Bảng 4.30: SCL010. Chat Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
78
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
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