Đề tài xây dựng website thi trắc nghiệm online

Với sự phát triển của internet và các công nghệ liên quan, việc tạo ra một nền tảng trực tuyến cho các bài thi trắc nghiệm không chỉ mang lại sự tiện lợi cho người dùng mà còn tăng cường

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG WEBSITE THI TRẮC

NGHIỆM ONLINE

Lớp học phần: (15)

Sinh Viên Thực Hiện 1: Hồ Thế Bảo

Mã Sinh Viên: 22IT016

Sinh Viên Thực Hiện 2: Võ Quốc Hoàng

Mã Sinh Viên: 22IT103

Khóa: 2022 – 2027

Đà Nẵng, Tháng 6 năm 2023

Để làm ra trang website này, chúng em đã nhận được rất nhiều sự hỗ trợ từ các bạn và từ Giảng viên hướng dẫn – Ths Đặng Thị Kim Ngân

Đây đồng thời cũng là cơ hội để chúng em trau dồi kiến thức và kỹ năng lập trình web, thiết kế giao diện cho đến triển khai các chức năng Qua quá trình này, chúng em cũng đã rèn luyện khả năng làm việc nhóm, tư duy phân tích và giải quyết vấn đề, cùng với sự sáng tạo và kiên nhẫn Tuy nhiên với vẫn có những hạn chế và những thiếu sót nên chúng em mong nhận được cáca ý kiến và đánh giá để trở nên hoàn thiện hơn, nâng cao kĩ năng và kinh nghiệm để thực hiện các dự án sau này

Cuối cùng, chúng em muốn cảm ơn tất cả các bạn và thầy cô đã đồng hành và đóng góp ý kiến trong quá trình xây dựng dự án này Sự hỗ trợ và động viên từ các bạn

và thầy cô đã truyền động lực và khích lệ chúng em vượt qua mọi khó khăn Chúng

em hi vọng rằng sản phẩm cuối cùng sẽ đáp ứng được mong đợi và mang lại lợi ích cho cộng đồng

Một lần nữa, xin chân thành cảm ơn và hy vọng chúng ta sẽ tiếp tục có cơ hội hợp tác và phát triển trong tương lai

Chúng em xin chân thành cảm ơn!

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Mục Lục: Phần 1: LỜI NÓI ĐẦU 5

1.1 Giới thiệu 5

1.2 Mục tiêu của đề tài 5

Phần 2: TÌM HIỂU CÁC CÔNG CỤ 5

2.1 Tìm hiểu HTML 5

2.1.1 HTML là gì ? 5

2.1.2 Vai trò của HTML 5

2.1.3 Đặc điểm của HTML 6

2.2 Tìm hiểu CSS 6

2.2.1 CSS là gì ? 6

2.2.2 Vai trò của CSS 7

2.2.3 Cấu trúc của CSS 7

2.2 Tìm hiểu JavaScript 7

2.3.1 JavaScript là gì ? 7

2.3.2 Vai trò của JavaScript 7

2.3.1 Cấu trúc của JavaScript 8

Phần 3: PHÂN TÍCH VÀ TRIỂN KHAI XÂY DỰNG 9

3.1 Phân tích 9

3.1.1 Giao diện người dùng 9

3.1.2 Các chức năng 12

3.1 Thiết kế hệ thống 15

3.2.1 Chức năng chính 15

3.2.2 Thiết kế hệ thống 15

3.2 Biểu đồ UseCase 17

3.3.1 Biểu đồ UseCase của người dùng 17

Phần 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 17

4.1 Kết luận 17

4.1.1 Chương trình đã làm được 17

4.1.2 Chương trình chưa làm được 18

4.2 Hướng phát triển 18

TÀI LIỆU THAM KHẢO 18

Phần 1 : LỜI NÓI ĐẦU

1.1 Giới thiệu

Trong thời đại kỹ thuật số ngày nay, việc sử dụng công nghệ để nâng cao quy trình học tập và đánh giá hiệu quả trở nên ngày càng quan trọng hơn bao giờ hết Với sự phát triển của internet và các công nghệ liên quan, việc tạo ra một nền tảng trực tuyến cho các bài thi trắc nghiệm không chỉ mang lại sự tiện lợi cho người dùng mà còn tăng cường tính tương tác và chất lượng của quá trình học tập 1.2 Mục tiêu của đề tài

Mục tiêu chính của đề tài này là xây dựng một website thi trắc nghiệm online hoàn chỉnh và đáng tin cậy Chúng ta sẽ tập trung vào việc phát triển một giao diện đẹp mắt, dễ sử dụng và thân thiện với người dùng Website sẽ cung cấp một loạt các bài thi trắc nghiệm từ các lĩnh vực khác nhau, cho phép người dùng lựa chọn và tham gia vào các bài thi theo nhu cầu cá nhân Bên cạnh đó, chúng ta

sẽ tích hợp các tính năng như đánh giá kết quả tự động, cung cấp phản hồi chi tiết

và thống kê kết quả để giúp người dùng nắm bắt được tiến độ học tập của mình

Để đạt được mục tiêu này, chúng ta sẽ sử dụng các công nghệ phổ biến và mạnh mẽ như HTML, CSS, JavaScript và các ngôn ngữ lập trình phía máy chủ để tạo nên một hệ thống ổn định và tin cậy Đồng thời, chúng ta sẽ tạo ra cơ sở dữ liệu

để lưu trữ câu hỏi và kết quả thi của người dùng Điều này sẽ giúp chúng ta cung cấp trải nghiệm học tập tốt hơn và tăng cường sự tiến bộ trong quá trình học

Phần 2 : TÌM HIỂU CÁC CÔNG CỤ

2.1 Tìm hiểu HTML

2.1.1 HTML là gì ?

HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu để xây dựng và cấu trúc các trang web Vai trò của HTML bao gồm xác định cấu trúc trang web, định nghĩa nội dung, tạo liên kết giữa các trang web và hỗ trợ đa phương tiện

2.1.2 Vai trò của HTML

Xác định cấu trúc trang web: HTML cho phép xác định cấu trúc và tổ chức các phần tử trên trang web, bao gồm tiêu đề, đoạn văn bản, hình ảnh, bảng, liên kết

và nhiều các phần tử khác

Định nghĩa nội dung: HTML cho phép định nghĩa và hiển thị nội dung trên trang web, bao gồm văn bản, hình ảnh, video, âm thanh và các phương tiện truyền thông khác

Tạo liên kết giữa các trang web: HTML cung cấp các thẻ liên kết để tạo các liên kết giữa các trang web, cho phép người dùng điều hướng giữa các trang và tương tác với nội dung khác nhau

Hỗ trợ đa phương tiện: HTML hỗ trợ tích hợp hình ảnh, video, âm thanh và các phương tiện truyền thông khác vào trang web, tạo ra trải nghiệm đa phương tiện cho người dùng

2.1.3 Đặc điểm của HTML

Ngôn ngữ đánh dấu: HTML sử dụng các thẻ (tags) để đánh dấu và xác định cấu trúc và vai trò của các phần tử trên trang web

Dễ học và sử dụng: HTML có cú pháp đơn giản và dễ hiểu, giúp người dùng nhanh chóng tạo và chỉnh sửa nội dung trang web

Đa nền tảng: HTML là một ngôn ngữ độc lập nền tảng, cho phép tạo và hiển thị trang web trên nhiều trình duyệt và thiết bị khác nhau

Khả năng tương tác: HTML hỗ trợ tích hợp các phần tử tương tác như liên kết, biểu mẫu và JavaScript để tạo ra trải nghiệm tương tác trên trang web

Mở rộng được: HTML hỗ trợ việc mở rộng và mô-đun hóa thông qua việc

sử dụng CSS (Cascading Style Sheets) và JavaScript để tùy chỉnh và mở rộng chức năng và giao diện trang web

2.2 Tìm hiểu CSS

2.2.1 CSS là gì ?

CSS (Cascading Style Sheets) là một ngôn ngữ đánh dấu dùng để định dạng

và trình bày giao diện của trang web

2.2.2 Vai trò của CSS

Định dạng giao diện: CSS cho phép xác định các thuộc tính như màu sắc, kích thước, kiểu chữ, căn chỉnh, viền và nhiều thuộc tính khác để định dạng và trình bày giao diện của trang web

Tách biệt nội dung và kiểu dáng: CSS tách biệt nội dung (HTML) và kiểu dáng (CSS), giúp làm cho mã HTML dễ đọc và bảo trì hơn Nó cũng cho phép tái

sử dụng kiểu dáng trên nhiều trang web khác nhau

Đa nền tảng: CSS có thể áp dụng cho nhiều trình duyệt và thiết bị khác nhau, giúp đảm bảo giao diện được hiển thị đồng nhất trên các nền tảng khác nhau

2.2.3 Cấu trúc của CSS

selector {

  property : value ;

  property : value ;

 

}

 Selector xác định phần tử HTML nào sẽ được áp dụng kiểu dáng

 Property là thuộc tính mà bạn muốn định dạng, ví dụ như color (màu sắc), font-size (kích thước chữ), background (nền), và nhiều thuộc tính khác

 Value là giá trị được gán cho thuộc tính, ví dụ như red (màu đỏ), 14px (14 pixel), url(image.jpg) (đường dẫn đến hình ảnh), và nhiều giá trị khác Cấu trúc này cho phép bạn tùy chỉnh kiểu dáng của các phần tử HTML bằng cách chọn chính xác phần tử đó và áp dụng các thuộc tính và giá trị tương ứng

2.2 Tìm hiểu JavaScript

2.3.1 JavaScript là gì ?

JavaScript là một ngôn ngữ lập trình phía client (thông qua trình duyệt web) được sử dụng để làm cho trang web trở nên tương tác và động

2.3.2 Vai trò của JavaScript

Tương tác người dùng: JavaScript cho phép bạn tạo ra các hiệu ứng, sự kiện

và phản hồi từ người dùng trên trang web, bao gồm xử lý biểu mẫu, kiểm tra đầu vào và phản hồi theo hành vi người dùng

Thay đổi nội dung động: JavaScript cho phép bạn thay đổi nội dung trên trang web mà không cần tải lại trang, bao gồm thay đổi văn bản, hình ảnh, hiển thị danh sách và nội dung tương tự khác

Tương tác với trình duyệt: JavaScript cung cấp khả năng tương tác với các thành phần của trình duyệt, như thay đổi URL, điều khiển cửa sổ trình duyệt, truy xuất và thay đổi các phần tử DOM, và gửi yêu cầu mạng AJAX để tương tác với máy chủ

Xử lý logic và tính toán: JavaScript là một ngôn ngữ lập trình đầy đủ, cho phép bạn xử lý logic phức tạp, tính toán dữ liệu và thực hiện các tác vụ phía client

2.3.1 Cấu trúc của JavaScript

JavaScript được viết trong các khối mã (code blocks) được đặt trong cặp dấu ngoặc nhọn {} Các dòng mã trong khối được xử lý tuần tự từ trên xuống dưới Cấu trúc cơ bản của JavaScript bao gồm:

 Biến (Variables): Được sử dụng để lưu trữ và tham chiếu các giá trị

 Câu lệnh (Statements): Là các câu lệnh để thực hiện một hành động hoặc điều khiển luồng thực thi

 Hàm (Functions): Là tập hợp các lệnh nhóm lại để thực hiện một tác vụ cụ thể

 Điều kiện (Conditional statements): Sử dụng để kiểm tra điều kiện và thực hiện các hành động tương ứng

 Vòng lặp (Loops): Sử dụng để lặp lại một tập hợp các lệnh nhiều lần cho đến khi một điều kiện được đáp ứng

Cấu trúc JavaScript cho phép bạn tổ chức mã và tạo ra các tác vụ phức tạp thông qua việc sử dụng biến, câu lệnh, hàm, điều kiện và vòng lặp

Phần 3 : PHÂN TÍCH VÀ TRIỂN KHAI XÂY DỰNG

3.1 Biểu đồ UseCase

3.1.1 Biểu đồ UseCase của người dùng

3.2 Phân tích

3.1.1 Giao diện người dùng

Hình 3.2.1 Giao diện đăng nhập

Hình 3.2.2 Giao diện đăng kí

Hình 3.2.3 Giao diện trang chủ

Hình 3.2.4 Giao diện trang cá nhân

Hình 3.2.5 Giao diện đóng góp ý kiến

Hình 3.2.6 Giao diện làm bài trắc nghiệm

3.1.2 Các chức năng

 Chức năng đăng kí

Hình 3.2.7 Đăng kí thành công

 Chức năng đăng nhập

Hình 3.2.8 Đăng nhập thành công

 Chức năng gửi ý kiến

Hình 3.2.9 Gửi ý kiến

Hình 3.2.10 và 3.2.11 Chức năng kiểm tra đáp án

Hình 3.2.12 Chuyển sang câu trước và chuyển sang câu sau

3.3 Thiết kế hệ thống

3.3.1 Chức năng chính

 Dành cho người dùng:

o Đăng nhập

o Đăng ký

o Trang chủ

o Trang cá nhân

o Môn thi

o Liên Hệ

o Đăng xuất

3.3.2 Thiết kế hệ thống

 Dành cho người dùng:

Phần 4 : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

4.1 Kết luận

4.1.1 Chương trình đã làm được

 Giao diện người dùng đơn giản, dễ dùng

 Đăng nhập, đăng kí tài khoản

 Có responsive, tương thích với nhiều thiết bị

 Làm bài thi trắc nghiệm, có thể xem ngay đáp án

 Cập nhật thông tin cá nhân

 Gửi phản hồi

4.1.2 Chương trình chưa làm được

 Vẫn chưa hoàn thiện một vài tính năng

 Ngân hàng câu hỏi còn khá ít

4.2 Hướng phát triển

 Kết nối đến cơ sở dữ liệu

 Mở rộng ngân hàng câu hỏi

 Hoàn thiện các tính năng, thêm các tính năng mới

 Thêm tùy chọn cho Giáo viên

 Giao diện đẹp mắt hơn

 Hướng đến nhiều đối tượng hơn, từ lớp 1 đến lớp 12 chứ không chỉ riêng thi THPTQG

TÀI LIỆU THAM KHẢO HTML Quiz (w3schools.com)

102 CSS Menu (freefrontend.com)

Hệ thống tạo lập website thi trắc nghiệm trực tuyến AZtest

JavaScript Quiz | JavaScript Online Test - javatpoint