Thiết kế giao diện

Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



2.3.2 Danh sách các màn hình

STT

1



Tên màn hình



Chức năng



Màn hình chính - Trang Giới thiệu về trang web các chức năng chính

chủ



2



Màn hình đăng nhập



Màn hình cho phép đăng nhập vào hệ thống

của trang web học và thi TOEFL



3



Màn hình Đăng kí



Màn hình đăng kí để trở thành thành viên

chính thức của hệ thống.



4



Màn hình đăng xuất



Màn hình xóa cookies của thành viên sau khi

đăng nhập muốn thoát khỏi hệ thống.



5



Màn



hình



điều



chỉnh Để thành viên trong hệ thống có thể chỉnh sửa



thông tin cá nhân.

6



thông tin cá nhân của mình.



Màn hình danh sách thành Xem danh sách các thành viên hiện có trong

viên.



7



hệ thông trang web



Màn hình quản lí câu hỏi



Màn hình để quản trị có thể thêm, xóa sửa

danh sách các câu hỏi có trong cơ sở dữ liệu

theo 3 section



8



Màn hình học bài



Màn hình dùng để cho các thành viên trong

trang web có thể theo dõi các bài học có sẵn.



9



Màn hình chỉnh sửa và Màn hình để cho quản trị viên có thể thay đổi

soạn bài học .



10



nội dung bài học nếu muốn.



Màn hình lựa chọn 1



Để cho thành viên khi muốn luyện tập lựa

chọn số câu và phần muốn luyện tập của

Section 1



11



Màn hình lựa chọn 2



Để cho thành viên khi muốn luyện tập lựa

chọn Part muốn luyện tập và số câu câu hỏi

cho mỗi Part của Section 2



12



Màn hình lựa chọn 3



Để cho thành viên khi muốn luyện tập lựa

chọn số đoạn văn muốn luyện tập của Section



0112077-Lê Khánh Trí



69/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên

3



13



Màn hình luyện tập



Dùng cho thành viên khi luyện tập, hiển thị

câu hỏi cho người dùng trả lời sau đó sẽ đánh

giá kết quả cho từng câu hỏi đó



14



Màn hình thi



Màn hình tổ chức thi cho người dùng có nhu

cầu cần thi TOEFL lần lượt theo từng Section

và Part của mỗi Section.



15



Màn hình Thay đổi Tham Thay đổi các tham số dùng cho sự hoạt động

số hệ thống



16



của hệ thống.



Màn hình quản lí thành Chỉnh sửa quyền hạn của thành viên hay xóa

viên



17



thành viên ra khỏi hệ thống.



Màn hình diễn đàn



Hiển thị các vấn đề đang được thảo luận trong

diễn đàn.



18



Màn hình chuyên mục



Các chuyên mục của một diễn đàn con.



19



Màn hình chủ đề diễn đàn



Các chủ đề do thành viên trong trang web gửi

trong một chuyên mục nhất định nào đó.



20



Màn hình bài viết



Các bài viết của thành viên trong diễn đàn

thảo luận về một chủ đề có sẵn.



2.3.4 Mô tả màn hình

Cấu trúc màn hình sử dụng trong trang web có 4 phần chính:

-



Logo, banner quảng cáo và Topmenu ở trên cùng

+ Top Menu bao gồm các thành phần: đăng kí, diễn đàn, thành viên, ngôn



ngữ sử dụng trong trang web.

-



Phần bên trái là menu chính với các menu thành phần như: Trang chủ, bài học,



thi thử, luyện tập, game…

-



Phần bên phải là các menu thống kê, đăng nhập, hay liên kết

Phần chính giữa là phần hiển thị những module có trong trang web.



0112077-Lê Khánh Trí



70/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



Tùy vào từng màn hình hay ngôn ngữ hiển thị mà các menu trên, trái, phải có thể

thay đổi theo nội dung của của màn hình.



Figure 2.14 Cấu trúc màn hình chương trình

Màn hình chính giới thiệu về trang web.

Màn hình chính là màn hình mà các người dùng nhìn thấy khi truy cập trang

web học và luyện thi Toefl.

Màn hình chính là màn hình giới thiệu về trang web, lợi ích của học tiếng Anh

và thông tin về nhóm thực hiện.

Màn hình đăng nhập

Màn hình đăng nhập là màn hình dùng để truy cập vào hệ thống theo các quyền hạn

khác nhau.

Nếu thành công, người dùng sẽ đăng nhập và làm việc với hệ thống dưới quyền

hạn đã được phân công



0112077-Lê Khánh Trí



71/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



+ Mô tả hoạt động

Người dùng nhập tên đăng nhập và mật khẩu. Sau đó chọn “Đăng nhập” hoặc

“Đăng kí”

+ Các thành phần của màn hình

Nhóm



Loại



Ý nghĩa



1



TextBox



Hai textbox thuộc nhóm này dùng để nhập tên và mật khẩu

đăng nhập



2



Button



Hai button đăng nhập và đăng kí



Lưu ý: Các nhóm được minh hoạ bằng các số được đánh trên màn hình.



1



2



Figure 2.15 Thiết kế màn hình đăng nhập

Màn hình đăng kí

+ Cấu trúc:

Màn hình chỉ có TopMenu mà không có menu phải hay menu trái.

+ Mô tả hoạt động

Khi người dùng muốn trở thành thành viên của trang web, người dùng nhấn vào

button “Đăng kí” trên top menu . Nếu đăng kí thành công người dùng sẽ trở là

thành viên chính thức của trang web.



0112077-Lê Khánh Trí



72/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



+ Các thành phần của màn hình

Nhóm



Loại



Ý nghĩa



1



TextBox1



Nhập các thông tin cá nhân



2



Validate Sumary



Thông báo lỗi khi nhập các thông tin

không đúng định dạng hay yêu cầu



3



ComboBox



Ngày tháng năm sinh



4



TextBox2



Quy định bắt buộc của trang web.



5



Button



Hai button đồng ý hay không đồng ý



Lưu ý: Các nhóm được minh hoạ bằng các số được đánh trên màn hình.



Figure 2.16 Nội dung màn hình đăng kí

Màn hình chỉnh sửa thông tin người dùng

+ Cấu trúc giống như màn hình đăng kí.

+ Mô tả hoạt động:

Người dùng sau một thời gian sử dụng có thay đổi một số thông tin riêng tư như

mật khẩu, địa chỉ mail, hay một số thông tin khác. Họ có thể chỉnh sửa các thông tin

đó.

0112077-Lê Khánh Trí



73/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



+ Các thành phần của màn hình

Nhóm



Loại



Ý nghĩa



1



TextBox1



Nhập các thông tin cá nhân



2



Validate Sumary



Thông báo lỗi khi nhập các thông tin

không đúng định dạng hay yêu cầu



3



ComboBox



Ngày tháng năm sinh



4



Button



Hai button lưu hay hủy bỏ việc thay

đổi



Màn hình học ôn tiếng Anh

+ Cấu trúc gồm có các phần trên trái giống như các màn hình khác nhưng

phần bên phải là danh sách các bài học.

+ Mô tả hoạt động

Nếu người dùng không có quyền vào trang bài học thì sẽ được thông báo. Khi

người dùng có quyền được truy cập thì menu phải sẽ hiện thị danh sách các bài học



0112077-Lê Khánh Trí



74/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



có sẵn được liệt kê từ những bài đã học đến bài đã học của từng thành viên đang

truy cập diễn đàn.

+ Các thành phần của màn hình

Nhóm



Loại



Ý nghĩa



1



Label



Nội dung bài học



2



Data Grid



Danh sách các bài học trong trang

web



Figure 2.17 Nội dung màn hình Học ôn

Nhóm màn hình liên quan đến việc luyện tập

+ Cấu trúc:

Với mỗi phần luyện tập: Section1, Section2, Section3 sẽ có 2 màn hình: Màn hình

lựa chọn hình thức ,số câu hỏi và màn hình luyện tập

+ Mô tả hoạt động:

Trước khi bắt đầu luyện tập thì người dùng sẽ được yêu cầu lựa chọn phần và số

câu hỏi của mỗi phần . Sau đó thì thành viên đó có thể luyện tập theo phần mà mình

đã lựa chọn. Người dùng có thể xem lại kết quả luyện tập của mình nếu muốn.

+ Thành phần của màn hình chuẩn bị luyện tâp

Nhóm

1



Loại

Label



0112077-Lê Khánh Trí



Ý nghĩa

Giới thiệu cách thức luyện tập



75/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL

2



Combobox



- GVHD: Nguyễn Thị Diễm Tiên

Chọn lựa phần hay số lượng câu hỏi

muốn luyện.



3



Button



Nút bắt đầu luyện tập



Figure 2.18 Nội dung màn hình chuẩn bị luyện tập

** Màn hình luyện tập

Nhóm



Loại



Ý nghĩa



1



UserControl



Hiển thị câu hỏi



2



Button



Chọn lựa thứ tự câu hỏi để luyện tập



3



Button



Xem kết quả hay kết thúc luyện tập



0112077-Lê Khánh Trí



76/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



Figure 2.19 Nội dung màn hình luyện tập 1



Figure 2.20 Nội dung màn hình luyện tập 2 – xem kết quả



Nhóm màn hình thực hiện việc thi thử.

+ Cấu trúc:

0112077-Lê Khánh Trí



77/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



Giống như màn hình luyện tập nhưng mỗi lần chỉ hiển thị một câu hỏi.

+ Mô tả hoạt động

Đối với Section1: Sau khi đoạn nghe được đọc lên người dùng sẽ có một khoảng

thời gian để chọn lựa câu trả lời. Sau đó trang web sẽ tự động hiển thị câu hỏi tiếp

theo.

Đối với Section 2 và 3: Thời gian làm bài sẽ được hiển thị . Sau khi thời gian kết

thúc thì trang web sẽ tự động chuyển sang section khác hay kết thúc bài thi.

+ Các thành phần của màn hình

Nhóm



Loại



Ý nghĩa



1



ImageButton Nút chọn câu tiếp theo hay kết thúc bài làm



2



Timer



Hiển thị thời gian làm bài



3



UserControl



Hiển thị câu hỏi



Figure 2.21 Nội dung màn hình thi

Màn hình soạn bài học và chỉnh sửa bài học

Cấu trúc màn hình:

Sử dụng công cụ FreeTextBox.dll – John Dyer 2003

0112077-Lê Khánh Trí



78/155



0112119-Lê Trần Thùy Trang



Website hỗ trợ học và thi TOEFL



- GVHD: Nguyễn Thị Diễm Tiên



Màn hình chỉ dùng cho quản trị viên chỉnh sửa thêm hay soạn bài học mới

Nhóm



Loại



Ý nghĩa



1



FreeTextBox Chứa dữ liệu bài học



2



Button



Lưu hoặc Hủy



Màn hình thay đổi tham số của hệ thống

+ Cấu trúc:

Màn hình bao gồm danh sách các tham số mặc định của hệ thống như: quyền đăng

nhập, thời gian làm bài thi, số câu hỏi cho mỗi đề thi, thời gian để làm một câu

hỏi…..

+ Mô tả hoạt động

Khi Quản trị viên thấy phương pháp hoạt động hiện tại của hệ thống không còn phù

hợp và hệ thống cần có sự thay đổi về các tham số. Quản trị sẽ thay đổi chúng nếu

cần thiết và lưu lại.

+ Các thành phần của màn hình

Nhóm



Loại



Ý nghĩa



1



TextBox



Các tham số mặc định của hệ thống.



2



Button



Button đồng ý hay hủy bỏ việc thay đổi.



0112077-Lê Khánh Trí



79/155



0112119-Lê Trần Thùy Trang