Chương 3 XÂY DỰNG HỆ THỐNG LUYỆN THI ĐẠI HỌC
3.5. Thiết kế giao diện
3.5.2. Giao diện một số màn hình của ứng dụng
3.5.2.1. Màn hình Đăng nhập
38
3.5.2.1.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Thanh Headerbar Dùng để di chuyển giữa các mục chính của trang Web
2 Tên tài khoản Textbox Nhập vào tên tài khoản 3 Mật khẩu Textbox Nhập vào mật khẩu 4 Đăng nhập Button Click để tiến hành đăng
nhập với tài khoản và mật khẩu đã nhập
5 Đăng nhập bằng Google Button Click để tiến hành đăng nhập bằng tài khoản Google
6 Đăng nhập bằng Facebook
Button Click để tiến hành đăng nhập bằng tài khoản Facebook
39
7 Đăng nhập, đăng ký Tab Click để chuyển giữa 2 màn hình Đăng nhập và màn hình Đăng ký 3.5.2.2. Màn hình Đăng ký 3.5.2.2.1. Hình chụp của màn hình 3.5.2.2.2. Mơ tả cách sử dụng và xử lý STT Tên thành phần Loại Cách sử dụng
1 Đăng nhập bằng Google Button Click để tiến hành đăng nhập bằng tài khoản Google
2 Đăng nhập bằng Facebook
Button Click để tiến hành đăng nhập bằng tài khoản Facebook
40
4 Tên tài khoản Textbox Điền vào tên tài khoản đăng nhập
5 Email Textbox Điền vào email
6 Trường Textbox Điền vào tên trường hiện tại
7 Mật khẩu Textbox Điền vào mật khẩu đăng nhập
8 Xác nhận mật khẩu Textbox Xác nhận lại mật khẩu bằng cách điền lại mật khẩu 1 lần nữa.
9 Avatar Button Click để lựa ảnh làm ảnh đại diện của tài khoản 10 Đăng ký Button Click để tiến hành đăng ký
tài khoản
3.5.2.3. Màn hình Trang chủ
42
3.5.2.3.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Danh sách Đề thi mới nhất
List Hiển thị những đề thi mới nhất vừa được tải lên 2 Danh sách tài liệu phổ
biến
List Hiển thị những tài liệu tham khảo mới nhất vừa được tải lên
3 Danh sách Bài chia sẻ thịnh hành
List Hiển thị những bài chia sẻ có lượt xem cao
4 Xem tất cả Button Click để đi đến màn hình danh sách muốn xem đầy đủ
3.5.2.4. Màn hình Danh sách mơn học
3.5.2.4.1. Hình chụp của màn hình
43
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các môn học List Hiển thị danh sách các môn học để người dùng lựa chọn. Người dùng có thể click vào mơn học mà mình muốn làm bài.
3.5.2.5. Màn hình Danh sách chương
3.5.2.5.1. Hình chụp của màn hình
3.5.2.5.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Danh sách các chương List Hiển thị danh sách các chương có trong mơn học đã được lựa chọn trước đó. Người dùng có thể click vào chương mà mình muốn
3.5.2.6. Màn hình Bài tập
44
3.5.2.6.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Danh sách bài tập Button Click để mở ra danh sách bài tập có thể làm trong chương này
2 Nội dung Hiển thị bài tập phải làm và có thể lựa chọn đáp án mà mình nghĩ là chính xác 3 Hồn thành Button Click để xác nhận hoàn
45
chuyển sang bài tập tiếp theo
4 Đáp án chi tiết Text Hiển thị lời giải chi tiết cho bài tập phía trên sau khi hồn thành bài tập trên
3.5.2.7. Màn hình Đăng ký thi thử
3.5.2.7.1. Hình chụp của màn hình
3.5.2.7.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Môn học Combobox Click để lựa chọn môn học muốn đăng ký thi 2 Mã đề thi Combobox Click để chọn mã đề thi
muốn làm tương ứng với môn học đã chọn
46
3 Thẻ dự thi Text Hiển thị thông tin người dùng cũng như thông tin về đề thi sắp làm
4 Bảng xếp hạng Text Hiển thị danh sách những người dùng đã hoàn thành bài thi này với số điểm từ cao đến thấp
5 Bắt đầu làm bài Button Click để tiến hành làm bài thi
6 Bài thi đã làm Text Hiển thị danh sách những đề thi đã làm tương ứng với mơn học mình đã chọn bên cạnh
3.5.2.8. Màn hình Bài thi
47
3.5.2.8.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Thẻ thi thử Text Hiển thị thông tin dự thi 2 Đề thi Text Hiển thị tồn bộ thơng tin
đề thi và các phương án để người dùng chọn
3 Hoàn thành Button Click để xác nhận hoàn thành bài thi
4 Danh sách Câu hỏi Text Hiển thị số câu hỏi hiện có trong đề thi thử này và thời gian làm bài còn lại
3.5.2.9. Màn hình Tra cứu
48
3.5.2.9.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Button điểm chuẩn, tuyển sinh, trường Đại học
Button Chuyển đổi giữa các mục tra cứu muốn thực hiện: tra cứu điểm chuẩn hoặc tra cứu ngành học, tra cứu trường đại học.
2 Kết quả tra cứu Hiển thị kết quả mong muốn.
3.5.2.10. Màn hình Xem trang cá nhân
49
3.5.2.10.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Thông tin cá nhân Text Hiển thị những thông tin cơ bản của tài khoản hiện tại đang đăng nhập
2 Danh sách Tab Tabs Hiển thị những tabs chuyển đổi và có thể click để chuyển đổi giữa các màn hình làm việc liên quan đến tài khoản
3.5.2.11. Màn hình Đổi mật khẩu
50
3.5.2.11.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Thay đổi mật khẩu Form Hiển thị những thông tin mà người dùng cần nhập 2 Mật khẩu cũ Textbox Nhập vào mật khẩu hiện
tại của tài khoản
3 Mật khẩu mới Textbox Nhập vào mật khẩu mới mà muốn đổi thành 4 Xác nhận mật khẩu Textbox Nhập lại mật khẩu mới
giống với mật khẩu phía trên 1 lần nữa để xác nhận 5 Lưu thay đổi Button Click để xác nhận thay đổi
3.5.2.12. Màn hình Đổi thơng tin cá nhân
51
3.5.2.12.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Cập nhật thông tin cá nhân
Form Hiển thị những thông tin mà người dùng muốn thay đổi
2 Họ tên Textbox Nhập vào họ tên muốn đổi thành (nếu muốn)
3 Trường Textbox Nhập vào tên trường muốn đổi thành (nếu muốn)
4 Avatar Button Click để đổi ảnh đại diện hiện tại (nếu muốn) 5 Cập nhật Button Click để xác nhận hoàn
thành cập nhật
3.5.2.13. Màn hình Tham khảo
52 3.5.2.13.2. Mơ tả cách sử dụng và xử lý STT Tên thành phần Loại Cách sử dụng 1 Danh sách các mục tham khảo Hiển thị danh sách những mục tham khảo. Người dùng có thể click vào mục tham khảo mong muốn tìm hiểu
3.5.2.14. Màn hình Danh sách Đề thi Thử
53
3.5.2.14.2. Mô tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Đề thi thử Hiển thị danh sách những đề thi thử hiện có
2 Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, có thể nhập vào tên đề thi thử muốn tìm kiếm
54
3 Mơn học Combobox Click vào để lọc những đề thi theo mơn học muốn tìm
4 Tỉnh, thành Combobox Click vào để lọc những đề thi theo tỉnh, thành muốn tìm
5 Năm Combobox Click vào để lọc những đề thi theo năm muốn tìm
3.5.2.15. Màn hình Đề thi Thử
55
3.5.2.15.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Đề thi thử Hiển thị nội dung của đề thi thử được chọn
2 Pre, Next Button Click để chuyển trang lần lượt của các đề thi
3 Tải xuống Button Click để tải về đề thi thử đang xem
56
3.5.2.16. Màn hình Danh sách Tài liệu tham khảo
3.5.2.16.1. Hình chụp của màn hình
3.5.2.16.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Tài liệu tham khảo Hiển thị danh sách những tài liệu tham khảo hiện có 2 Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, có
thể nhập vào tên tài liệu tham khảo muốn tìm kiếm 3 Mơn học Combobox Click vào để lọc những tài liệu tham khảo theo mơn học muốn tìm
57
4 Năm Combobox Click vào để lọc những tài liệu tham khảo theo năm muốn tìm
3.5.2.17. Màn hình Tài liệu tham khảo
3.5.2.17.1. Hình chụp của màn hình
58
STT Tên thành phần Loại Cách sử dụng
1 Tài liệu tham khảo Hiển thị nội dung của tài liệu tham khảo được chọn 2 Pre, Next Button Click để chuyển trang lần
lượt của tài liệu 3 Tải xuống Button Click để tải về tài liệu
đang xem
3.5.2.18. Màn hình Danh sách Bài chia sẻ
3.5.2.18.1. Hình chụp của màn hình
3.5.2.18.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Bài chia sẻ Hiển thị danh sách những bài chia sẻ hiện có
2 Tìm kiếm Textbox Hỗ trợ tìm kiếm nhanh, có thể nhập vào tên bài chia sẻ muốn tìm kiếm
59
3 Năm Combobox Click vào để lọc những bài chia sẻ theo năm muốn tìm
3.5.2.19. Màn hình Bài chia sẻ
61
3.5.2.19.2. Mơ tả cách sử dụng và xử lý
STT Tên thành phần Loại Cách sử dụng
1 Nội dung bài share Text Hiển thị nội dung bài chia sẻ. 3.5.2.20. Màn hình quản lý người dùng 3.5.2.20.1. Hình chụp của màn hình 3.5.2.20.2. Mơ tả cách sử dụng và xử lý STT Tên thành phần Loại Cách sử dụng 1 Tổng số tài liệu chia sẻ
Text Hiển thị tổng số tài liệu chia sẻ (đề thi thử, tài liệu tham khảo, bài chia sẻ)
2 Tổng số tài khoản Text Hiển thị số tài khoản trên hệ thống 3 Tổng số đề thi thử Text Tổng số đề thi thử có sẵn trên hệ thống 4 Danh sách tài
khoản
62