Tính năng chính của đồ án Quiz App bao gồm:- Đăng nhập và đăng ký: Người dùng có thể đăng nhập hoặc đăng ký tài khoản để sử dụng hệ thống.- Quản lý tài khoản: Người dùng có thể thay đổi
TỔNG QUAN ĐỒ ÁN
Mục đích
Quizz là một ứng dụng được dùng để kiểm tra kiến thức ở thông qua hình thức trả lời trắc nghiệm Các câu hỏi trắc nghiệm trong Quizizz thuộc nhiều danh mục với cấp độ khác nhau để thử sức, đánh giá trình độ của bản thân; hoặc giáo viên có thể truy cập bộ câu hỏi do người khác chia sẻ để sử dụng trong giảng dạy, kèm cặp, đồng thời cũng có thể tham gia vào Quiz để làm bài kiểm tra Nhìn chung, Quiz phù hợp với cả việc học tại nhà và trên lớp.
Mục tiêu
Xây dựng một hệ thống trắc nghiệm trực tuyến để hỗ trợ người dùng trong việc kiểm tra kiến thức và cung cấp giải trí thông qua các câu hỏi trắc nghiệm đa dạng.
Cung cấp môi trường học tập và giải trí trực tuyến thú vị, tương tác và hấp dẫn cho người dùng.
Tính năng
Một ứng dụng trắc nghiệm trực tuyến, nhằm cung cấp môi trường học tập và giải trí thông qua việc tham gia các bài trắc nghiệm với nhiều chủ đề đa dạng Ứng dụng này sẽ được xây dựng trên nền tảng ASP.NET và sử dụng cơ sở dữ liệu để lưu trữ thông tin về người dùng, bài trắc nghiệm và kết quả Tính năng chính của đồ án Quiz App bao gồm:
- Đăng nhập và đăng ký: Người dùng có thể đăng nhập hoặc đăng ký tài khoản để sử dụng hệ thống.
- Quản lý tài khoản: Người dùng có thể thay đổi thông tin cá nhân, thay đổi mật khẩu và quản lý tài khoản của mình.
- Trắc nghiệm đa dạng: Hệ thống cung cấp các câu hỏi trắc nghiệm đa dạng về nhiều chủ đề khác nhau, bao gồm khoa học, lịch sử, văn hóa, thể thao, v.v.
- Xếp hạng và điểm số: Hệ thống lưu trữ và hiển thị xếp hạng và điểm số của người dùng để so sánh với các người chơi khác.
- Giao diện thân thiện: Giao diện người dùng được thiết kế dễ sử dụng và phản hồi tốt trên các thiết bị di động.
CƠ SỞ LÝ THUYẾT
Kiến trúc hệ thống
Ứng dụng được xây dựng trên nền tảng NET Framework, với kiến trúc tổng thể bao gồm các thành phần chính là giao diện người dùng (Frontend), ứng dụng Web Server (Backend), cơ sở dữ liệu và các chức năng liên quan đến xác thực và quản lý người dùng.Kiến trúc hệ thống tổng thể của ứng dụng Quiz App có thể bao gồm các thành phần chính như sau:
- Giao diện người dùng (UI): Phần giao diện mà người dùng tương tác để tham gia vào các bài trắc nghiệm, đăng ký tài khoản, đăng nhập, v.v.
- HTML/CSS/JavaScript: Các ngôn ngữ và công cụ phát triển giao diện trên trình duyệt web.
- Cơ sở dữ liệu (Database): Lưu trữ các dữ liệu như câu hỏi, câu trả lời, tài khoản người dùng, v.v.
- Web Server: Xử lý yêu cầu từ trình duyệt và trả về các trang HTML, CSS, JS cho người dùng.
- Application Server: Xử lý logic nghiệp vụ của ứng dụng, bao gồm xác thực người dùng, kiểm tra câu trả lời đúng/sai, tính điểm, v.v.
- Cơ sở dữ liệu (Database): Cơ sở dữ liệu quan hệ (SQL Database) để lưu trữ thông tin về câu hỏi, câu trả lời, tài khoản người dùng, v.v.
- Tầng Logic (Business Logic): Xử lý logic nghiệp vụ của ứng dụng như xác thực người dùng, kiểm tra câu trả lời, tính điểm, v.v.
- Tầng Presentation (Presentation Layer): Giao diện người dùng (UI) để tương tác với người dùng.
- Tầng Truyền thông (Communication Layer): Giao tiếp giữa frontend và backend thông qua các API và giao thức truyền thông như HTTP.
- Tầng Bảo mật (Security Layer): Xử lý vấn đề bảo mật như xác thực người dùng, phân quyền truy cập, bảo vệ dữ liệu, v.v.
- Tầng Quản lý (Management Layer): Quản lý dữ liệu và cung cấp các giao diện quản lý để quản lý câu hỏi, câu trả lời, người dùng, v.v.
- Tầng Tích hợp (Integration Layer): Tích hợp các thành phần của hệ thống với nhau.
- Tầng Trình bày (Presentation Layer): Định dạng và hiển thị dữ liệu cho người dùng.
- Tầng Dịch vụ (Service Layer): Cung cấp các dịch vụ và chức năng cho ứng dụng.
Sơ đồ cấu trúc
Dưới đây là sơ đồ cấu trúc minh họa và chi tiết các thành phần, tương tác giữa chúng:
Trình duyệt Web: Đại diện cho người dùng cuối (end device), sử dụng trình duyệt web để truy cập vào ứng dụng bằng cách nhập URL hoặc nhấp vào liên kết. Web Server: Là máy chủ web chạy trên máy chủ, xử lý các yêu cầu HTTP từ trình duyệt và phản hồi bằng cách cung cấp các trang web được định dạng HTML, CSS và JavaScript.
Authentication & Authorization Layer: Đây là một lớp quan trọng để xác thực và quản lý quyền truy cập của người dùng Khi người dùng cố gắng truy cập vào một trang cụ thể hoặc thực hiện một hành động cụ thể (ví dụ: bắt đầu bài trắc nghiệm), lớp này sẽ xác thực xem người dùng đã đăng nhập hay chưa và có quyền truy cập hay không.
User Manager: Là một thành phần quản lý người dùng trong hệ thống Nó quản lý thông tin người dùng, chẳng hạn như thông tin đăng nhập, thông tin cá nhân và vai trò của họ (ví dụ: người dùng thường, quản trị viên) User Manager cung cấp các phương thức để đăng nhập, đăng ký, tạo tài khoản mới và quản lý vai trò của người dùng. Database (SQL Server): Là cơ sở dữ liệu SQL Server được sử dụng để lưu trữ dữ liệu của ứng dụng, bao gồm thông tin về người dùng (tài khoản, mật khẩu), câu hỏi của bài trắc nghiệm, kết quả của người dùng v.v.
2.2.2 Tương tác trong ứng dụng
Bước 1: Truy cập trang web
Khi người dùng truy cập vào trang web, trình duyệt gửi yêu cầu truy cập đến máy chủ web.
Bước 2: Xác thực người dùng
Máy chủ web nhận yêu cầu và chuyển đến Authentication & Authorization Layer để xác thực người dùng Nếu người dùng chưa đăng nhập, hệ thống sẽ yêu cầu họ đăng nhập hoặc đăng ký.
Bước 3: Kiểm tra quyền truy cập
Sau khi người dùng đăng nhập thành công, hệ thống sẽ kiểm tra quyền truy cập của họ để đảm bảo họ có thể truy cập vào các chức năng cụ thể (ví dụ: bắt đầu bài trắc nghiệm).
Bước 4: Làm bài trắc nghiệm và Tạo/Bắt đầu Quiz
Với vai trò Student: Khi người dùng có vai trò Student, họ có thể tham gia làm bài trắc nghiệm Các kết quả của người dùng sẽ được lưu trữ trong Database thông qua User Manager.
Với vai trò Teacher: Khi người dùng có vai trò Teacher, họ có thể tạo và quản lý các quiz Sau khi tạo quiz, họ cũng có quyền bắt đầu quiz để cho phép các học sinh làm bài.
Bước 5: Lưu trữ thông tin vào Database
Database lưu trữ thông tin người dùng, câu hỏi của bài trắc nghiệm và kết quả của họ, cho phép ứng dụng truy xuất và cập nhật dữ liệu.
Chi tiết triển khai
Một số chi tiết triển khai cụ thể cho các yếu tố đã nêu trong ứng dụng Quiz App:
Sử dụng hệ quản trị cơ sở dữ liệu Microsoft SQL Server để lưu trữ dữ liệu của ứng dụng.
Thiết kế cơ sở dữ liệu chuẩn hóa để tránh lặp lại dữ liệu và tối ưu hóa cấu trúc lưu trữ.
Sử dụng Entity Framework để tạo mô hình dữ liệu và tương tác với cơ sở dữ liệu, giúp giảm thiểu việc viết mã SQL thủ công.
2.3.2 Xác thực và ủy quyền
Sử dụng Microsoft.AspNet.Identity để quản lý thông tin người dùng như đăng nhập, đăng ký và quản lý tài khoản.
Sử dụng System.Security.Claims để xác thực và cấp quyền hạn cho người dùng thông qua các vai trò (roles) và quyền (claims).
Cân nhắc sử dụng cơ chế xác thực hai yếu tố để bảo mật cao hơn.
Tối ưu hóa trải nghiệm người dùng bằng cách đảm bảo giao diện thân thiện với người dùng trên các kích thước màn hình khác nhau.
Sử dụng Bootstrap hoặc CSS để tùy chỉnh giao diện và làm cho ứng dụng trở nên đẹp mắt hơn.
2.3.4 Tối ưu hóa tải trang
Giảm thiểu thời gian tải trang bằng cách sử dụng caching để lưu trữ các dữ liệu thường xuyên truy cập.
Tối ưu hóa hình ảnh và tập tin tĩnh để giảm thiểu kích thước và tăng tốc độ tải trang.
2.3.5 Đảm bảo tương thích trình duyệt
Kiểm tra ứng dụng trên các trình duyệt phổ biến như Chrome, Firefox, Edge và Safari để đảm bảo tương thích.
Thiết kế ứng dụng sao cho có thể dễ dàng mở rộng tính năng và quy mô hệ thống.
Sử dụng kiến trúc modul và dependency injection để giảm thiểu sự phụ thuộc và dễ dàng thêm các tính năng mới.
2.3.7 Tối ưu hóa hiệu suất
Thực hiện các biện pháp tối ưu hóa để cải thiện hiệu suất ứng dụng, bao gồm tối ưu hóa truy vấn cơ sở dữ liệu và sử dụng cache.
Chức năng của Server – Client
Trong Quizz App, máy chủ (server) chịu trách nhiệm xử lý và quản lý dữ liệu, trong khi máy khách (client) chịu trách nhiệm hiển thị giao diện người dùng và cho phép người dùng tương tác với ứng dụng Thuật toán hoặc cấu trúc dữ liệu đáng chú ý có thể bao gồm các thuật toán kiểm tra câu trả lời, tính điểm số, và sắp xếp thứ hạng người dùng trong cuộc thi Điều này có thể được thực hiện bằng cách so sánh câu trả lời của người dùng với câu trả lời đúng trong cơ sở dữ liệu và tính điểm tương ứng Dưới đâu là chi tiết vai trò của máy chủ (server) và máy khách (client):
Trong controller: Máy chủ xử lý các yêu cầu từ máy khách (client) thông qua các controller Nó quản lý luồng công việc của ứng dụng và là nơi xử lý logic nghiệp vụ của ứng dụng Máy chủ sẽ xử lý các yêu cầu như tạo, chỉnh sửa, xóa câu hỏi và quản lý các thông tin về cuộc thi và kết quả.
Truy cập cơ sở dữ liệu: Máy chủ truy xuất cơ sở dữ liệu để lấy và cập nhật dữ liệu, chẳng hạn như câu hỏi, câu trả lời, thông tin người dùng, kết quả cuộc thi, vv.
Xử lý logic: Máy chủ thực hiện các phép tính và kiểm tra câu trả lời của người dùng, tính điểm và cung cấp kết quả cuộc thi hoặc bài kiểm tra cho người dùng.
Giao diện người dùng (UI): Máy khách hiển thị giao diện người dùng cho người dùng để tương tác Giao diện người dùng bao gồm các trang web hoặc ứng dụng di động mà người dùng sử dụng để tham gia cuộc thi hoặc bài kiểm tra, trả lời câu hỏi và xem kết quả.
Gửi yêu cầu: Máy khách gửi các yêu cầu từ giao diện người dùng đến máy chủ thông qua giao thức HTTP hoặc HTTPS Các yêu cầu này bao gồm yêu cầu tham gia cuộc thi, trả lời câu hỏi, lưu trữ thông tin người dùng, vv.
Nhận và hiển thị kết quả: Máy khách nhận và hiển thị kết quả từ máy chủ, bao gồm kết quả cuộc thi, điểm số, và thông tin khác liên quan.
Trong Quizz App, thuật toán hoặc cấu trúc dữ liệu đáng chú ý có thể bao gồm các thuật toán kiểm tra câu trả lời, tính điểm số, và sắp xếp thứ hạng người dùng trong cuộc thi Điều này có thể được thực hiện bằng cách so sánh câu trả lời của người dùng với câu trả lời đúng trong cơ sở dữ liệu và tính điểm tương ứng Để duy trì tính trung thực và bảo mật, có thể sử dụng các cấu trúc dữ liệu như hàm băm để lưu trữ mật khẩu người dùng một cách an toàn trong cơ sở dữ liệu.
Trong mục đăng nhập và đăng ký của Quiz App, được triển khai các thuật toán để xác thực người dùng và quản lý thông tin tài khoản Dưới đây là mô tả về thuật toán trong mục đăng nhập và đăng ký:
Giải thuật Mã hóa mật khẩu (Password Hashing):
Giải thuật này được sử dụng trong phần đăng ký người dùng khi tạo tài khoản mới và lưu trữ mật khẩu của người dùng dưới dạng mã hóa Mục đích của việc mã hóa mật khẩu là bảo mật thông tin mật khẩu của người dùng trong cơ sở dữ liệu hoặc bất kỳ nơi lưu trữ dữ liệu nào khác, giúp ngăn chặn việc truy cập trái phép vào mật khẩu người dùng trong trường hợp hệ thống bị tấn công hoặc lộ dữ liệu.
Giải thuật Cấp quyền truy cập (Authorization):
Giải thuật này được sử dụng trong phần đăng ký người dùng khi cấp vai trò cho người dùng Nó đóng vai trò quan trọng trong việc kiểm soát quyền truy cập của người dùng đến các chức năng và tài nguyên trong ứng dụng Nó đảm bảo rằng người dùng chỉ có thể thực hiện các hành động mà họ được phép thực hiện dựa trên vai trò hoặc quyền của họ.
Ngoài ra, đoạn mã cũng sử dụng một số phương thức hỗ trợ khác như đăng nhập, đăng xuất, xử lý lỗi, quản lý thông tin người dùng và quản lý đăng nhập bằng tài khoản bên ngoài (nếu có).
Sơ đồ giải thuật sử dụng trong bài Quiz
Giải thuật trong ứng dụng Quiz App có một số bước quan trọng để xử lý và kiểm tra câu trả lời của người dùng trong bài trắc nghiệm Dưới đây là phân tích chi tiết của từng bước trong giải thuật:
- Bước 1: Khởi tạo câu hỏi (i=0, i là số thứ tự câu hỏi, input là đáp án người dùng nhập vào)
Bước này bắt đầu quá trình kiểm tra câu trả lời của người dùng bằng cách thiết lập biến i là 0 để đánh số thứ tự của câu hỏi, và biến input để lưu trữ đáp án mà người dùng nhập vào.
- Bước 2: Kiểm tra tổng số câu hỏi (n) nếu sai sẽ kết thúc vòng lặp, đúng sẽ tới bước kiểm tra đáp án
Bước này kiểm tra nếu vẫn còn câu hỏi để kiểm tra (n là số lượng câu hỏi), tiếp tục vòng lặp để kiểm tra các câu hỏi tiếp theo Nếu không còn câu hỏi nào để kiểm tra, thì kết thúc vòng lặp.
- Bước 3: Kiểm tra đáp án, đúng thì điểm số cộng m (m là số điểm cộng dựa trên tổng số câu hỏi), sai thì m = 0:
KẾT QUẢ THỰC NGHIỆM
Công nghệ sử dụng
3.1.1 Liệt kê các ngôn ngữ lập trình
Sử dụng HTML, CSS, JavaScript và các thư viện, framework như Bootstrap, jQuery để tạo giao diện đáp ứng và tương tác.
Sử dụng ASP.NET hoặc ASP.NET Core để xây dựng phần back-end của ứng dụng. Xây dựng các Controller để xử lý các yêu cầu từ phía client.
3.1.2 Các framework sử dụng trong đồ án
Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive.
Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích mang lại cho lập trình viên của Bootstrap là gì nhé!
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website.
3.1.2.2 JQuery jQuery là một khung JavaScript Nó tạo điều kiện thuận lợi cho khả năng đọc và thao tác của các phần tử HTML DOM, xử lý sự kiện, hoạt ảnh và lệnh gọi AJAX Đây cũng là phần mềm mã nguồn mở miễn phí tuân theo Giấy phép
MIT Cú pháp của jQuery giúp điều hướng tài liệu, tạo hoạt ảnh, xử lý sự kiện và phát triển ứng dụng Ajax dễ dàng hơn Developer có thể sử dụng điều này để xây dựng các phần trừu tượng cho hoạt ảnh và tương tác ở mức độ thấp, các hiệu ứng phức tạp và các tiện ích có thể thay đổi chủ đề ở mức cao Bản chất mô-đun của framework jQuery cho phép các developer tạo các ứng dụng và trang web phức tạp.
.NET Framework là một nền tảng lập trình và cũng là một nền tảng thực thi ứng dụng chủ yếu trên hệ điều hành Microsoft Windows được phát triển bởi Microsoft từ năm 2002, kết thúc phát triển vào năm 2022 ở phiên bản 4.8.1.
.NET Framework bao gồm tập các thư viện lập trình lớn, và những thư viện này hỗ trợ việc xây dựng các chương trình phần mềm như lập trình giao diện; truy cập, kết nối cơ sở dữ liệu; ứng dụng web; các giải thuật, cấu trúc dữ liệu; giao tiếp mạng CLR cùng với bộ thư viện này là 2 thành phần chính của NET Framework.
Thư viện sử dụng trong ứng dụng và các namespace, class cụ thể của chúng:
3.1.3 Ngôn ngữ lập trình: HTML, C#, JS
System.ComponentModel.DataAnnotations thuộc NET Framework.
"System.ComponentModel.DataAnnotations" là một namespace trong NET Framework, và nó chứa các lớp và thuộc tính để hỗ trợ việc thực hiện kiểm tra dữ liệu và đánh dấu dữ liệu trong các lớp mô hình (model) trong ứng dụng, cung cấp các thuộc tính như "Required", "StringLength", "Range", "RegularExpression" và nhiều thuộc tính khác, cho phép bạn xác định các quy tắc kiểm tra và giới hạn dữ liệu cho các thuộc tính của lớp mô hình Khi dữ liệu được gửi từ giao diện người dùng đến ứng dụng, các kiểm tra này sẽ được thực hiện để đảm bảo rằng dữ liệu hợp lệ trước khi được xử lý.
Thư viện lớp cơ sở (Base Class Library - BCL): Chứa các lớp và phương thức cơ bản để thực hiện các chức năng chung như xử lý chuỗi, toán học, cấu trúc dữ liệu, thao tác với tệp, và nhiều chức năng khác Tất cả đều được chứa trong namespace System Đồng thời, nó chứa một số tính năng không chuẩn như LINQ, ADO.NET (đối với tương tác cơ sở dữ liệu), khả năng vẽ, biểu mẫu và hỗ trợ web.
Chứa các lớp cơ bản và các lớp cơ sở xác định các kiểu dữ liệu tham chiếu và giá trị thường được sử dụng, các sự kiện và trình xử lý sự kiện, giao diện, thuộc tính và các xử lý ngoại lệ.
Chứa các giao diện và lớp xác định các bộ đối tượng khác nhau, như danh sách (List), hàng đợi(Queue), mảng bit, bảng băm (HashTable) và từ điển (Dictionary). 3.1.4.3 System.Linq
Cung cấp các lớp và giao diện hỗ trợ truy vấn sử dụng ngôn ngữ Truy vấn tích hợp (LINQ)
3.1.4.4 System.Web Đối với NET Framework, namespace này chứa các lớp và giao diện cho phép giao tiếp giữ browser-server Các lớp này bao gồm lớp HttpRequest, cung cấp thông tin mở rộng về yêu cầu HTTP hiện tại; lớp HttpResponse quản lý đầu ra HTTP cho máy khách (client); và lớp HttpServerUtility, cung cấp quyền truy cập vào các quy trình và tiện ích phía máy chủ System.Web cũng bao gồm các lớp để thao tác cookie, truyền tệp, thông tin ngoại lệ và kiểm soát bộ đệm đầu ra trong NET Framework. 3.1.4.5 System.Collections.Generic
Cung cấp các lớp và cấu trúc dữ liệu chung để làm việc với các bộ sưu tập dữ liệu trong NET Nó chứa các lớp chung để thao tác với các cấu trúc dữ liệu như danh sách (List), từ điển (Dictionary), hàng đợi (Queue), ngăn xếp (Stack) và nhiều loại bộ sưu tập dữ liệu khác.
Cung cấp các công cụ và API giúp xử lý bất đồng bộ một cách dễ dàng hơn trong ứng dụng C# Nó hỗ trợ việc thực hiện các tác vụ phức tạp mà không làm đứt quãng luồng chính của ứng dụng, giúp cải thiện hiệu suất và khả năng phản hồi của ứng dụng.
Cung cấp các lớp được sử dụng định tuyến URL, cho phép sử dụng các URL không ánh xạ tới file vật lý.
Cung cấp các lớp và phương thức liên quan đến quản lý và xác thực người dùng trong ứng dụng Nó được sử dụng trong hệ thống xác thực và ủy quyền, đặc biệt trong các ứng dụng web và dịch vụ web.
Dùng để xây dựng các ứng dụng web, bao gồm ASP.NET Web Forms và ASP.NET MVC.
Thiết kế giao diện người dùng
Là nơi người dùng có thể truy cập sau khi đăng nhập thành công Trang này được phân chia cho 2 vai trò chính là Student (Học sinh) và Teacher (Giáo viên) Người dùng sẽ thấy các phần tùy thuộc vào vai trò của họ, bao gồm danh sách các cuộc thi hoặc bài kiểm tra đang diễn ra hoặc đã hoàn thành, các bài kiểm tra đã tham gia, điểm số và thông tin cá nhân. Đối với role Teacher: Đối với role Student :
3.2.2 Trang giới thiệu ứng dụng
Trang giới thiệu cung cấp thông tin tổng quan về ứng dụng và mô tả các chức năng chính mà người dùng có thể trải nghiệm khi sử dụng ứng dụng.
Trang Đăng nhập cho phép người dùng đăng nhập vào tài khoản của họ bằng cách nhập thông tin đăng nhập hợp lệ, bao gồm tên người dùng và mật khẩu Nếu thông tin đăng nhập chính xác, người dùng sẽ được chuyển đến trang chủ với vai trò tương ứng.
Form đăng nhập với các trường nhập liệu cho tên người dùng và mật khẩu Nút
"Đăng nhập" để xác nhận thông tin đăng nhập Liên kết đến trang Đăng ký nếu người dùng chưa có tài khoản.
Hình trang Đăng nhập (Login)
Cho phép người dùng tạo tài khoản mới bằng cách cung cấp các thông tin bắt buộc như tên người dùng, địa chỉ email và mật khẩu Sau khi đăng ký thành công, người dùng có thể sử dụng tài khoản của mình để đăng nhập vào ứng dụng.
Form đăng ký với các trường nhập liệu cho tên người dùng, địa chỉ email, mật khẩu và xác nhận mật khẩu.
Dropdown để chọn vai trò (role) của người dùng (teacher hoặc student). Nút "Đăng ký" để tạo tài khoản mới.
Liên kết đến trang Đăng nhập nếu người dùng đã có tài khoản.
Người dùng thực hiện đăng ký tài khoản bao gồm: username, email, password, chức năng của tài khoản (dành cho giáo viên và dành cho học sinh, sinh viên).
Hình trang đăng ký (Register) 3.2.5 Trang Tham gia Quiz (Join Quiz)
Hiển thị câu hỏi và các lựa chọn trả lời cho người dùng chọn.
Có thể sử dụng giao diện đơn giản hoặc phức tạp với các hiệu ứng và hình ảnh. Nút "Tiếp tục" để chuyển tới câu hỏi tiếp theo.
Hiển thị điểm số tích lũy và số câu hỏi đã trả lời.
Giao diện nhập mã code để bắt đầu vào quiz
Giao diện thực hiện câu hỏi trong quiz với 4 đáp án A,B,C,D
3.2.6 Trang Kết quả Quiz (Quiz Result)
Hiển thị điểm số và kết quả sau khi người dùng hoàn thành một bài kiểm tra hoặc cuộc thi Trang này cung cấp thông tin chi tiết về số câu trả lời đúng và sai, thời gian hoàn thành và điểm tổng kết.
Giao diện khi hoàn thành bài Quiz và hiển thị điểm, button ViewAnswer, OtherChoose
Khi nhấn vào button ViewAnswer, hiển thị tất cả câu trả lời của quiz
3.2.7 Trang Tạo mới Quiz (Create Quiz) - Chỉ dành cho người dùng có vai trò là
Tạo mới một bài kiểm tra hoặc cuộc thi Người dùng có thể nhập các câu hỏi, lựa chọn và điểm số tương ứng cho mỗi câu hỏi và lưu lại để tạo thành một bài kiểm tra hoàn chỉnh.
Form tạo mới bài Quiz với các trường nhập liệu cho tên bài Quiz, mô tả, danh sách câu hỏi và đáp án.
Nút "Tạo mới" để tạo bài Quiz và lưu vào cơ sở dữ liệu.
Các chức năng để quản lý danh sách câu hỏi, thêm hoặc xóa câu hỏi trong bài
Khi nhấn vào Create Topic hiện button view all question, sau đó click vào.
3.2.8Trang báo cáo thống kê điểm người tham gia Quiz
Trang báo cáo thống kê điểm người tham gia Quiz cung cấp cái nhìn tổng quan về hiệu suất của người dùng trong các bài kiểm tra hoặc cuộc thi đã tham gia.