Bản thiết kế giao diện (UI/UX Prototype Demo) cho nền tảng giáo dục EduConnect — Tích hợp khảo thí thích ứng AI, chẩn đoán lỗ hổng kiến thức và gợi ý ghép cặp gia sư 1:1 chuẩn GDPT mới.
Dự án hoàn toàn là Frontend thuần (Vanilla HTML/CSS/JS), không phụ thuộc framework nặng, không cần cài đặt backend hay cơ sở dữ liệu, mở trực tiếp trên trình duyệt là có thể trải nghiệm đầy đủ.
EduConnect là bản demo thiết kế giao diện tương tác cao (High-Fidelity Interactive Prototype) nhằm trình bày ý tưởng, trải nghiệm người dùng (UX) và luồng nghiệp vụ 6 bước khép kín của một nền tảng EdTech hiện đại:
[1. Tiếp nhận mục tiêu] ──► [2. Khảo thí AI] ──► [3. Ghép cặp gia sư]
│
[6. Bứt phá kết quả] ◄── [5. Báo cáo tiến độ] ◄── [4. Lộ trình 1:1]
Toàn bộ giao diện được xây dựng theo ngôn ngữ thiết kế riêng (EduConnect Design System) với phong cách thị giác cao cấp, sử dụng bảng màu khoa học, typography chuẩn quốc tế, hiệu ứng chuyển động mượt mà và hỗ trợ dữ liệu giả lập (Mock Data) độc lập.
EdTech/
├── index.html # Trang chủ: Giới thiệu giải pháp, quy trình 6 bước, đội ngũ & cam kết
├── kiem-tra-dau-vao.html # Bước 2: Khảo thí thích ứng AI, đề thi mẫu có hình học SVG, chấm điểm trực tiếp
├── tim-gia-su.html # Bước 3: Tìm kiếm & bộ lọc đa tiêu chí gia sư Top 1%, đặt lịch học thử 0đ
├── ke-hoach-hoc-tap.html # Bước 4: Lộ trình học tập cá nhân hóa 1:1 theo tuần & mục tiêu điểm số
├── bao-cao-tien-do.html # Bước 5: Báo cáo tiến độ học tập đa chiều, biểu đồ năng lực & radar AI
│
├── components/ # Các thành phần giao diện tái sử dụng (Web Components)
│ ├── header.html # Thanh điều hướng Header, logo, menu, nút đăng ký & user dropdown
│ ├── footer.html # Chân trang Footer, thông tin pháp lý, bản quyền & liên kết nhanh
│ └── modals.html # Hộp thoại Modal đặt lịch gia sư, đăng nhập/đăng ký & thanh chuyển đổi nhanh
│
├── css/ # Hệ thống định kiểu (Modular Design System)
│ ├── base.css # CSS Reset, bảng biến màu (Variables), typography, shadows & layout grid
│ ├── components.css # Định kiểu Button, Card, Badge, Modal, Form, Dropdown, Toast
│ ├── pages.css # Định kiểu chuyên biệt cho các trang (Her
B510
o, Diagnostic test, Tutors, Reports)
│ └── main.css # Tệp CSS tổng hợp gom nạp toàn bộ hệ thống style
│
├── data/ # Dữ liệu mẫu (Mock JSON) phục vụ demo tương tác
│ ├── users.json # Danh sách tài khoản người dùng mẫu (Học sinh, Phụ huynh, Gia sư)
│ ├── tutors.json # Danh sách 15+ hồ sơ gia sư xác thực Top 1% kèm đánh giá & học phí
│ ├── diagnostic.json # Ngân hàng đề thi khảo thí 6 câu chuẩn GDPT 2025 kèm thang điểm & lời giải
│ ├── study-plan.json # Lộ trình học tập chi tiết 12 tuần phân hóa theo năng lực
│ ├── progress.json # Dữ liệu phân tích tiến độ, điểm số định kỳ & tỷ lệ hoàn thành
│ ├── platform.json # Dữ liệu thống kê nền tảng, đối tác & phản hồi từ phụ huynh
│ ├── learning-aids.json # Dữ liệu công cụ học tập bổ trợ và gợi ý học tập
│ └── data.json # Tệp tổng hợp backup toàn bộ dữ liệu mock
│
├── js/ # Logic xử lý giao diện (Vanilla ES6+ Modules)
│ ├── layout.js # Nạp động các Custom Element (<app-header>, <app-footer>, <app-modals>...)
│ ├── data.js # Quản lý & nạp dữ liệu Mock từ file JSON (kèm fallback nhúng sẵn)
│ ├── auth.js # Giả lập trạng thái xác thực (Đăng nhập, Đăng ký, LocalStorage, User Menu)
│ ├── diagnostic.js # Xử lý bài thi: Đếm giờ 30:00, chọn đáp án, chấm điểm động, xuất báo cáo AI
│ ├── tutors.js # Xử lý tìm kiếm từ khóa, bộ lọc môn học, khoảng giá & hiển thị thẻ gia sư
│ ├── study-plan.js # Hiển thị timeline lộ trình học tập, checklist nhiệm vụ tuần
│ ├── progress.js # Dựng biểu đồ tiến độ trực quan, thanh chỉ số năng lực
│ ├── classroom.js # Trình diễn mô phỏng phòng học trực tuyến 1:1
│ ├── modals.js # Điều khiển đóng/mở Modal đặt lịch học thử & thông báo
│ └── main.js # Khởi tạo toàn trang, gắn sự kiện toàn cục & hệ thống Toast Notification
│
├── .gitignore # Cấu hình bỏ qua tệp tạm Git
└── README.md # Tài liệu hướng dẫn demo dự án
1. Trang Chủ (index.html)
- Hero Banner tương tác: Tiêu đề ấn tượng, hiệu ứng gradient chữ sống động, thẻ thống kê nhanh học viên.
- Quy trình 6 bước khép kín: Trực quan hóa lộ trình từ kiểm tra năng lực đến bứt phá điểm số.
- Ghép nhanh gia sư AI: Khung tìm kiếm tích hợp bộ lọc môn học và cấp lớp tức thì.
- Bảng so sánh EduConnect vs Gia sư truyền thống: Nêu bật giá trị cốt lõi (cam kết điểm số, trợ giảng AI, hoàn phí nếu không hài lòng).
- Đội ngũ gia sư tiêu biểu: Danh thiếp gia sư Top 1% kèm bằng cấp, trường đại học danh tiếng và đánh giá 5 sao.
2. Khảo Thí Chuẩn Hóa & Chẩn Đoán AI (kiem-tra-dau-vao.html)
- Đề thi mẫu chuẩn ma trận 2025: Tích hợp sẵn 6 câu hỏi Toán học thực tế từ Nhận biết đến Vận dụng cao (tổng 10.0 điểm).
-
Hình vẽ đồ thị toán học vector (SVG): Hiển thị trực tiếp đồ thị hàm số bậc ba cực trị
$M(-1; 3)$ và$N(1; -1)$ . - Đồng hồ đếm ngược thông minh (30:00): Chỉ bắt đầu tính giờ khi người dùng nhấn "Bắt Đầu Làm Bài" hoặc chọn câu trả lời bất kỳ.
- Chấm điểm trực tiếp & hiển thị lời giải: Khi bấm "Nộp Bài & Xuất Báo Cáo Chẩn Đoán AI", hệ thống highlight đáp án đúng (xanh lá), đáp án sai (đỏ), và mở hộp phương pháp giải chi tiết.
- Báo cáo radar năng lực: Phân tích tỷ lệ nắm vững theo từng chuyên đề (Hàm số, Cấp số nhân, Lãi kép, Lôgarit, Hình không gian) và gợi ý ngay gia sư phù hợp nhất.
3. Tìm Kiếm & Lọc Gia Sư Top 1% (tim-gia-su.html)
- Tìm kiếm tức thì: Nhập tên gia sư, trường ĐH hoặc chuyên môn cần tìm.
- Thanh tìm kiếm nhanh (Quick Chips): Nút một chạm lọc nhanh theo chuyên đề (Toán 10-12, Vật lý 11-12, Hóa Học, IELTS 7.5+).
- Bộ lọc đa tiêu chí bên trái: Lọc theo môn học, thanh trượt mức học phí tối đa (100k - 500k/buổi).
- Thẻ hồ sơ gia sư cao cấp: Hiển thị ảnh đại diện, tích xác thực, cam kết tăng điểm, thông số buổi dạy và nút đặt lịch học thử 0đ.
4. Kế Hoạch Học Tập 1:1 (ke-hoach-hoc-tap.html)
- Lộ trình 12 tuần cá nhân hóa theo từng giai đoạn: Bù đắp lỗ hổng căn bản ➔ Rèn luyện phương pháp giải nhanh ➔ Luyện đề thực chiến.
- Danh sách đầu việc và bài tập theo từng tuần kèm trạng thái hoàn thành.
5. Báo Cáo Tiến Độ Đa Chiều (bao-cao-tien-do.html)
- Theo dõi sự tiến bộ qua các bài kiểm tra định kỳ (từ 5.8 ➔ 8.5 điểm).
- Tỷ lệ chuyên cần, thời lượng học tập thực tế và nhận xét chi tiết của gia sư sau mỗi buổi học.
| Yếu tố | Quy chuẩn thiết kế áp dụng |
|---|---|
| Typography | Font chữ hiện đại từ Google Fonts: Plus Jakarta Sans (Tiêu đề, điểm nhấn thương hiệu) kết hợp Inter (Nội dung văn bản, bảng biểu). |
| Bảng màu (Palette) | Màu chủ đạo: Deep Navy (#0a2569), Xanh công nghệ (#2563eb), Cam năng động (#ff6022), Xanh lá thành công (#10b981). |
| Hiệu ứng thị giác | Glassmorphism (backdrop-filter: blur), đổ bóng nhiều tầng (box-shadow), viền gradient tinh tế. |
| Tính tương thích | Đầy đủ thuộc tính chuẩn CSS (background-clip, line-clamp, mask-image) đảm bảo hiển thị đồng nhất trên Chrome, Safari, Edge và Firefox. |
| Responsive | Bố cục linh hoạt (Fluid Layout, Flexbox, CSS Grid) tương thích từ điện thoại di động, máy tính bảng đến màn hình rộng. |
Vì đây là bản Demo giao diện thuần Web (Client-side Design Prototype), bạn không cần cài đặt Node.js, không cần database hay build command phức tạp.
- Truy cập vào thư mục
EdTech. - Nhấp đúp chuột vào file
index.html(hoặc chuột phải chọn mở bằng Google Chrome / Microsoft Edge / Safari). - Duyệt và tương tác tự do giữa các trang thông qua thanh menu Header.
Nếu sử dụng VS Code:
- Cài đặt tiện ích mở rộng Live Server (của Ritwick Dey).
- Chuột phải vào file
index.html➔ Chọn "Open with Live Server". - Trang web sẽ mở tại địa chỉ:
http://127.0.0.1:5500/index.html.
Nếu máy bạn đã có sẵn Python hoặc Node.js:
# Sử dụng Python 3
cd /Users/hmduck/Desktop/EdTech
python3 -m http.server 8000
# Hoặc sử dụng công cụ npx serve
npx serve .Truy cập tại: http://localhost:8000/index.html (hoặc GitHub Pages).
Hệ thống có sẵn tính năng giả lập đăng nhập (lưu phiên tạm thời trên trình duyệt qua LocalStorage):
| Vai trò | Email đăng nhập | Mật khẩu mẫu | Tên hiển thị demo |
|---|---|---|---|
| Học sinh | nguyenvana@gmail.com |
123456 |
Nguyễn Văn A (Lớp 11) |
| Phụ huynh | daothib@gmail.com |
123456 |
Đào Thị B (Phụ huynh) |
| Gia sư | tranvanc@gmail.com |
123456 |
ThS. Trần Văn C (Gia sư) |
- Mục đích dự án: Bản trình diễn ý tưởng thiết kế giao diện (UI/UX Concept & Design Demo).
- Đơn vị phát triển: Nhóm nghiên cứu & thiết kế sản phẩm EdTech (HCMUE).
- Bản quyền: © 2025 - 2026 EduConnect. Mọi tài nguyên đồ họa và giao diện được biên soạn phục vụ mục đích học thuật và trình diễn đề án.