CHƯƠNG 5. THIẾT KẾ GIAO DIỆN
5.1.2.22. SCT03. Manage Problem Screen
Quản lý danh sách bài tập
Hình 5.36: Giao diện trang SCT03 Manage Problem Screen (1) Bảng 5.30: Bảng đặc tả màn hình Manage Problem Screen (1)
No Name Required Format Reference Note
1 Tạo ngày True Button Khi click vào sẽ chuyển đến
trang tạo bài thực hành.
2 Xuất False Button Khi click vào sẽ xuất danh
sách bài thực hành ra file csv.
3 Tên bài tập True Text Data từ
API Tên bài tập trong hệ thống.
4 Điểm True Text Data từ
API Điểm bài tập trong hệ thống.
Chương 5: Thiết kế giao diện Trang 98 5
Output type function
True Text Data từ
API Kiểu trả về của bài tập.
6 Code mẫu True Text Data từ
API Code mẫu của bài tập.
7 Sửa True Button Khi click vào sẽ chuyển sang
màn hình SCT03(5)(6).
8 Xóa True Button
Khi click vào sẽ không hiển thị bài thực hành trong danh sách bài tập và không xóa bài tập ở database.
Tạo mới bài tập
Hình 5.37: Giao diện trang Manage Problem Screen (2)
Chương 5: Thiết kế giao diện Trang 99 Bảng 5.31: Bảng đặc tả màn hình Manage Problem Screen (2)
No Name Required Format Reference Note
1 Tên bài tập True Input Nhập tên bài tập.
2 Tên hàm True Input Nhập tên cho bài tập
3 Số đậu True Input Điểm cho bài tập.
4 Độ khó True Input Độ khó cho bài tập.
5 Kiểu trả về True Input Kiểu trả về của bài tập.
6 Thêm tham số True Button
Khi click vào hệ thống sẽ hiển thị pop up để người dùng nhập tham số.
7 Mô tả bài tập True MarkDo
wn Mô tả bài tập.
8 Mô tả code
mẫu True Code
editor
Hiển thị code mẫu của bài toán thông qua các trường nhập vào.
Hình 5.38: Giao diện trang Manage Problem Screen (3)
Chương 5: Thiết kế giao diện Trang 100 Bảng 5.32: Bảng đặc tả màn hình giao diện trang Manage Problem Screen (3)
No Name Required Format Reference Note
1 Thêm tham số True Button
Khi click vào nút hệ thống sẽ thêm một trường để người dùng nhập tham số.
2 Số lượng True Text Số lượng tham số.
3 Tên tham số True Input 4 Kiểu tham số True Input
5 Xóa True Button
Khi click vào hệ thống sẽ xóa tham số.
Hình 5.39: Giao diện trang SCT03 Manage Problem Screen (4) Bảng 5.33: Bảng đặc tả màn hình Manage Problem Screen (4)
No Name Required Format Reference Note
1 Tham số test case True Input Nhập tham số cho test case.
2 Output Test case True Input Nhập output cho test case.
3 Xóa True Button Xóa test case
4 Xem mô tả test
case True Code
editor
Mô tả test case theo cái trường nhập vào.
Chương 5: Thiết kế giao diện Trang 101
5 Thêm test True Button
Khi click vào hệ thống sẽ thêm một trường để người dùng nhập test case.
6 Lưu True Button Khi click vào sẽ thêm
bài tập mới.
Chỉnh sửa bài tập
Hình 5.40: Giao diện trang SCT03. Manage Problem (5)
Hình 5.41: Giao diện trang SCT03. Manage Problem Screen (6)
Chương 5: Thiết kế giao diện Trang 102 Bảng 5.34: Bảng đặc tả màn hình Manage Problem Screen (5+6)
No Name Required Format Reference Note 1 Tên bài tập True Input Data từ
API Nhập tên bài tập.
2 Tên hàm True Input Data từ
API Nhập tên cho bài tập
3 Số đậu True Input Data từ
API Điểm cho bài tập.
4 Độ khó True Input Data từ
API Độ khó cho bài tập.
5 Kiểu trả về True Input Data từ
API Kiểu trả về của bài tập.
6 Mô tả code
mẫu True Code
editor
Data từ API
Hiển thị code mẫu của bài toán thông qua các trường nhập vào.
7 Thêm tham
số True Button
Khi click vào hệ thống sẽ hiển thị pop up để người dùng nhập tham số.
8 Mô tả bài tập True MarkDown Data từ
API Mô tả bài tập.
9 Tham số test
case True Input Data từ
API
Nhập tham số cho test case.
10 Output Test
case True Input Data từ
API
Nhập output cho test case.
11 Xóa True Button Xóa test case
12 Xem mô tả
test case True Code
editor
Data từ API
Mô tả test case theo cái trường nhập vào.
13 Thêm test True Button
Khi click vào hệ thống sẽ thêm một trường để người dùng nhập test case.
14 Lưu True Button Khi click vào hệ thống
sẽ lưu dữ liệu mới.