3.5.6. Làm quiz
Luồng xử lý chung 1. Người học truy cập trang danh sách quiz và lựa chọn quiz để làm.
2. Hệ thống hiển thị trang làm bài.
3. Người học chọn đáp án và hệ thống tiến hành kiểm tra kết quả sau đó thơng báo cho người học. Nếu đáp án sai tiến hành đưa câu hỏi vào cuối hàng đợi để thực hiện lại.
4. Hệ thống kiểm tra hồn thành và thơng báo cho người học.
5. Hệ thống lưu thông tin và điều hướng về trang danh sách quiz.
Luồng xử lý thành công 1. Người học hoàn thành đúng toàn bộ câu hỏi. Luồng xử lý thất bại 1. Người học click thoát ở trang làm bài.
CHƯƠNG 3: PHÂN TÍCH VÀ MƠI TRƯỜNG HĨA U CẦU
42 Hình 3.8: Sequence Diagram làm quiz
3.5.7. Theo dõi
Luồng xử lý chung 1. Người học truy cập trang hồ sơ người học khác.
2. Hệ thống hiển thị trang hồ sơ.
3. Người học click nút theo dõi. Hệ thống lưu thông tin.
4. Người học được theo dõi sau khi thực hiện hành động có trong danh sách, hệ thống tiến hành gửi thông báo về do những người học đã theo dõi.
43 Luồng xử lý thành công 1. Người học click nút theo dõi.
Luồng xử lý thất bại 1. Người học click nút hủy theo dõi. Bảng 3.30: Luồng xử lý sequence diagram theo dõi
Hình 3.9: Sequence Diagram theo dõi
3.6. Sơ đồ lớp
CHƯƠNG 3: PHÂN TÍCH VÀ MƠI TRƯỜNG HĨA U CẦU
44 Hình 3.11: Sơ lược class diagram
45 Hình 3.12: Sơ lược class diagram
CHƯƠNG 4: THIẾT KẾ WEBSITE
46
CHƯƠNG 4: THIẾT KẾ WEBSITE 4.1. Thiết kế cơ sở dữ liệu
Hình 4.1: Sơ đồ ERD
Tên bảng Mô tả
Account Bảng thơng tin về tài khoản của tồn bộ người dùng trên hệ thống. Được phân chia quyền theo bảng Role.
Role Bảng thông tin về phân quyền tài khoản. Post Bảng thông tin bài viết thảo luận.
47 PostImage Bảng thơng tin về hình ảnh là các hình ảnh mà người học
đăng tải lên các bài viết.
Comment Bảng thơng tin về bình luận trong bài viết Word Bảng thông tin về từ vựng.
Category Bảng thơng tin về phân nhóm từ vựng. Memory Bảng thơng tin về thẻ ghi nhớ cho từ vựng.
Quiz Bảng thông tin về các bài quiz.
QuizHistory Bảng thông tin về lịch sử làm bài quiz. Exam Bảng thông tin về các bài exam.
ExamHistory Bảng thông tin về lịch sử làm bài exam. Route Bảng thơng tin về các lộ trình học. Section Bảng thông tin về các bài học.
Script Bảng thông tin về các kịch bản học. SectionProgress Bảng thông tin về tiến độ học.
ProgressDetail Bảng thông tin chi tiết về tiến độ học. Question Bảng thông tin về các câu hỏi.
Answer Bảng thông tin về các đáp án của câu hỏi. Notification Bảng thông tin về các thông báo.
Message Bảng thông tin về các tin nhắn trong boxchat. BoxChat Bảng thông tin về các boxchat.
BoxChatMember Bảng thông tin về thành viên trong boxchat. Bảng 4.1: Mô tả khái quát về các class
4.1.1. Account
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa
1 Id int Khóa chính
CHƯƠNG 4: THIẾT KẾ WEBSITE
48
3 Username string Tên tài khoản
4 Email string Email
5 Phone string Số điện thoại
6 DateOfBirth datetime Ngày sinh
7 Address string Địa chỉ
8 Avatar string Ảnh đại diện
Bảng 4.2: Account
4.1.2. Exam
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 Title string Tên bài exam Không
3 Detail string Mô tả bài exam Không
4 Duration int Thời gian quy
định làm bài
Không
5 TotalScore int Tổng số điểm Không
6 Difficult string Độ khó Khơng
8 AccessCount int Số lượng tham gia Không
Bảng 4.3: Exam
4.1.3. Quiz
49
1 Id guid Khóa chính Khơng
3 QuizPhoto string Hình ảnh bài quiz Khơng
4 QuizName string Tên bài quiz Khơng
5 Difficult string Độ khó bài quiz Không
Bảng 4.4: Quiz 4.1.4. Question Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 Audio string File audio Có
3 Image string File hình ảnh Có
4 PreQuestion string Câu hỏi Có
5 Content string Nội dung Có
6 Explaination string Giải thích Có
7 Type string Loại câu hỏi Không
8 Score int Số điểm Có
9 Difficult string Độ khó Khơng
10 Toeic string Câu hỏi thuộc
phần toeic
Có
11 Duration datetime Thời gian quy định làm câu hỏi
Có Bảng 4.5: Questions
CHƯƠNG 4: THIẾT KẾ WEBSITE
50
4.1.5. Post
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Không
2 CreatedDate datetime Ngày đăng Không
3 CreatedBy string Người đăng Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 AccountId int Id của người tạo Không
7 Title string Tiêu đề Không
8 Content string Nội dung bài
viết
Không Bảng 4.6: Post
4.1.6. Comment
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 ReplyId guid Id phản hồi Có
3 PostId guid Id bài viết Không
4 AccountId int Id người học
bình luận
Khơng
5 [Content] string Nội dung Không
6 Timestamp datetime Ngày bình luận Khơng
51
4.1.7. Word
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 Id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Image string Hình ảnh từ vựng Có
7 Eng string Tiếng anh Không
8 Spelling string Phát âm Không
9 Audio string File nghe từ vựng đó Không
10 Vie string Nghĩa tiếng việt Không
11 Class String Từ loại Không
12 Type String Kiểu tạo Không
Bảng 4.8: Word
4.1.8. QuizHistory
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 AccountId string Id của người
học
Không
CHƯƠNG 4: THIẾT KẾ WEBSITE
52 4 StartTimestamp datetime Thời gian bắt
đầu
Không
5 EndTimestamp datetime Thời gian kết thúc
Có
6 IsDone bit Kiểm tra đã
hồn thành chưa
Khơng
7 Spent int Thời gian làm
bài
Không Bảng 4.9: Histories
4.1.9. ExamHistory
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id string Khóa chính Khơng
2 AccountId string Id của người
học
Không
3 ExamId string Id của bài quiz Không
4 Timestamp_start datetime Thời gian bắt đầu
Không 5 Timestamp_end datetime Thời gian kết
thúc
Không 6 Timestamp_paus
e
datetime Thời gian dừng Có 7 CurrentQuestion int Câu hỏi hiện tại Không
8 TotalTime int Tổng thời gian Không
9 Score int Số điểm Không
53
4.1.10. Route
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Image string Hình ảnh Có
7 Name string Tên lộ trình Khơng
8 Description string Mô tả Không
9 IsSequentially bit Các bài học có
u cầu tính t̀n tự
Khơng
Bảng 4.11: Route
4.1.11. Section
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
CHƯƠNG 4: THIẾT KẾ WEBSITE
54
7 SectionName string Tên bài học Không
8 Description string Mô tả Khơng
9 RequireLogin bit Có u cầu đăng
nhập
Không
10 RouteId guid Khóa ngoại – id
lộ trình học
Có Bảng 4.12: Section
4.1.12. Script
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Không
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Theory string Lý thuyết Có
7 Type string Loại kịch bản Không
8 SectionId guid Khóa ngoại – id
bài học
Khơng Bảng 4.13: Script
4.1.1.13. Answer
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
55
2 QuestionId guid Id câu hỏi Không
3 [Content] string Nội dung Không
4 IsQuestionAnswer bit Kiểm tra có phải là câu trả lời của câu hỏi không
Không
Bảng 4.14: Answers
4.1.14. PostImage
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 PostId guid Id bài viết Không
3 ImageUrl string File ảnh Không
4 FileName string Tên file Không
Bảng 4.15: Postimages
4.1.15. Memory
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Username người
tạo
Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Username người
chỉnh sửa
Có
CHƯƠNG 4: THIẾT KẾ WEBSITE
56
7 Title string Tiêu đề Có
8 MemImg string Hình ảnh Khơng
9 WordId guid Id từ vựng Không
Bảng 4.16: Memories
4.1.16. Notification
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id guid Khóa chính Khơng
2 CreateDate datetime Ngày tạo Không
3 CreateBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 [Content] string Nội dung Không
7 Url string Đường dẫn Có
8 Type string Loại thông báo Không
9 FromId int Khóa ngoại – id
người gửi
Có Bảng 4.17: Notification
4.1.17. Message
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id string Khóa chính Không
57
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 [Content] string Nội dung Không
7 IsEdited bit Kiểm tra có
chỉnh sửa khơng
Khơng
8 AcccountId int Id tài khoản Không
9 BoxChatId string Id hộp tin nhắn Không
Bảng 4.18: Message
4.1.18. BoxChat
Stt Tên thuộc tính Kiểu dữ liệu Ý nghĩa NULL
1 id string Khóa chính Khơng
2 CreatedDate datetime Ngày tạo Không
3 CreatedBy string Người tạo Không
4 UpdatedDate datetime Ngày chỉnh sửa Có
5 UpdatedBy string Người chỉnh sửa Có
6 Title string Tiêu đề Không
7 AccountId int Id tài khoản Không
8 Description string Mô tả Không
CHƯƠNG 4: THIẾT KẾ WEBSITE
58
4.2. Thiết kế giao diện
4.2.1. Screen Flow của ứng dụng web phía người học
Hình 4.2: Screen Flow của ứng dụng web phía người học
No Screen Name Description
SCL001 List Section Screen Màn hình danh sách các bài học
SCL002 List FlashCard Screen Màn hình danh sách các chủ đề từ vựng SCL003 FlashCard Screen Màn hình học từ vựng
SCL004 List Exam Screen Màn hình danh sách các bài exam SCL005 Do Exam Screen Màn hình làm bài exam
SCL006 Learn Section Screen Màn hình học SCL007 Vocabulary Learning
Progress Screen Màn hình xem tiến độ học từ vựng SCL008 Forum Screen Màn hình thảo luận
SCL009 Detail Discussion Screen Màn hình xem chi tiết một bài viết SCL010 Chat Screen Màn hình nhắn tin
Bảng 4.20: Screen Flow của ứng dụng web phía người học
59 Hình 4.3: SCL001. List Section Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Chủ đề học True Button Khi click,
chuyển sang màn hình chủ đề học SCL002
2 Từ vựng True Button Khi click,
chuyển sang màn hình SCL003
3 Kiểm tra True Button Khi click,
chuyển sang màn hình SCL005 4 Tiến độ học
từ vựng
True Button Khi click,
chuyển sang màn hình SCL006
CHƯƠNG 4: THIẾT KẾ WEBSITE
60
5 Tin nhắn True Button Khi click,
chuyển sang màn hình SCL011
6 Từ điển True Button Khi click,
chuyển sang màn hình SCL
7 Thảo luận True Button Khi click,
chuyển sang màn hình SCL009
8 Lộ trình True Button Khi click,
mở popup lộ trình học.
9 Thơng báo True Button Khi click
mở popup thông báo.
10 Tài khoản True Button Khi click
mở popup tài khoản.
11 Ngữ pháp True Button Khi click
chuyển sang màn hình SCL
12 Từ vựng True Button Khi click
chuyển sang màn hình SCL
13 Luyện nghe True Button Khi click
chuyển sang màn hình SCL
61
14 Luyện đọc True Button Khi click
chuyển sang màn hình SCL
15 Luyện viết True Button Khi click
chuyển sang màn hình SCL
16 Mini test True Button Khi click
chuyển sang màn hình SCL 17 Xem những
bài học khác
True Button Khi click
hiển thị popup lộ trình học.
18 Chatbot True Button Khi click
hiển thị popup chatbot. Bảng 4.21: SCL001. List Section Screen
4.2.1.2. SCL002. List FlashCard Screen
CHƯƠNG 4: THIẾT KẾ WEBSITE
62
STT Name Required
(Input… Validation)
Format Reference Not
1 Tag True Button Bộ lọc theo
tag, khi click tiến hành lọc lại dữ liệu trên trang
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 Nhóm từ True Link Khi click
chuyển sang màn hình SCL004 5 Hình ảnh
của nhóm
True Image Hình ảnh đại
diện cho nhóm từ vựng
6 Tên nhóm True Text Tên của
nhóm từ vựng 7 Số từ vựng True Text Đếm số lượng từ vựng có trong nhóm
8 Mơ tả True Text Mơ tả về
nhóm từ vựng
63 9 Hiển thị
thêm
True Button Khi click
tiến hành tải thêm dữ liệu Bảng 4.22: SCA002. List FlashCard Screen
4.2.1.3. SCL003. FlashCard Screen
Hình 4.5: SCL003. FlashCard Screen
STT Name Required
(Input… Validation)
Format Reference Not
1 Trở về True Link Khi click
chuyển sang màn hình SCL003
2 Tiến độ True Progress Bar Thanh tiến
độ thể hiện vị trí của từ vựng trong nhóm
3 Luyện tập True Button Khi click
CHƯƠNG 4: THIẾT KẾ WEBSITE
64 màn hình SCL
4 Test Toeic True Button Khi click
chuyển sang màn hình SCL
5 Trộn thẻ True Button Khi click,
xáo trộn ngẫu nhiên toàn bộ từ vựng 6 Thêm vào nhóm
True Button Khi click,
hiển thị 1 popup danh sách nhóm của người học để lựa chọn.
7 Hình ảnh True Image Hình ảnh đại
diện cho từ vựng
8 Audio True Image Khi click,
phát/dừng đoạn phát âm của từ vựng
9 Từ vựng True Text Từ vựng
10 Phát âm True Text Phát âm của
từ vựng
11 Nghĩa True Text Nghĩa của từ
vựng
12 Từ loại True Text Từ loại của
65
13 Ghi nhớ True Text Khi click,
hiển thị 1 form cho phép người học submit thẻ ghi nhớ của riêng mình.
14 Tới False Text Khi click,
chuyển đến từ vựng tiếp theo
Bảng 4.23: SCL003. FlashCard Screen
4.2.1.4. SCL004. List Exam Screen
Hình 4.6: SCL004. List Exam Screen
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 Thoát True Button Khi click,
hiển thị 1 popup xác nhận