Giao diện
PRD — Product Requirements Document
TL;DR — Build a minimalist, bilingual learning web app for two sequential courses. Learners move through one idea per screen, answer and create, and leave evidence tied to Learning Outcomes at every step. Mentors get a clear plan for each 2-hour lesson. Phase 1 runs fully locally; phase 2 adds Cloudflare Workers, D1 and R2.
1. Bối cảnh & vấn đề
Học sinh cấp 2–3 dùng AI hằng ngày nhưng thường nhầm khái niệm (công ty/model/ứng dụng), tin kết quả AI mà không kiểm chứng, và chưa biết biến ý tưởng thành sản phẩm. Trường cần một chương trình có năng lực đo được, không chỉ nội dung truyền đạt.
2. Mục tiêu
| # | Mục tiêu | Chỉ số thành công (đề xuất) |
|---|---|---|
| G1 | Mỗi khóa đạt 10 Learning Outcomes với evidence rõ ràng | ≥ 80% học viên có trạng thái "Đã vững" ở ≥ 8/10 LO |
| G2 | Mỗi buổi 120 phút chạy được theo kế hoạch | Mentor hoàn thành đúng 6 chặng ≥ 90% số buổi |
| G3 | Trải nghiệm tối giản, tập trung | Học viên hoàn thành ≥ 85% màn hình của một buổi |
| G4 | Học viên xuất bản được sản phẩm thật (WebAI Builder) | 100% học viên có URL công khai ở buổi 12 |
| G5 | Mọi bước tương tác để lại evidence | 100% màn tương tác ghi được bản ghi |
3. Đối tượng
Học sinh cấp 2 và cấp 3 (một lộ trình chung); mentor; người thiết kế nội dung; quản trị chương trình. Xem URD.
4. Phạm vi
Giai đoạn 1 — Bản test local (hiện tại)
| ID | Tính năng | Ghi chú |
|---|---|---|
| F1 | Trang chủ chọn khóa, lộ trình 12 buổi | Hai khóa nối tiếp, không khóa cứng |
| F2 | Trình chơi buổi học "một thông tin mỗi màn" | Gồm màn Guiding Question, màn mục tiêu, các bước, màn tổng kết |
| F3 | Bốn kiểu tương tác: chọn đáp án, tự luận, liên kết/sản phẩm, thang tự tin | Cùng màn thông tin thuần |
| F4 | Phản hồi tức thì, cho thử lại tối đa 2 lần | Đáp án hiện ra sau lần sai thứ hai |
| F5 | Tự kiểm tra theo rubric sau câu tự luận/liên kết | Evidence ghi selfCheck |
| F6 | Hồ sơ bằng chứng theo LO, trạng thái Chưa bắt đầu / Đang hình thành / Đã vững | Có xuất JSON |
| F7 | Song ngữ VI/EN, đổi tức thì | Mặc định VI |
| F8 | Lưu tiến độ và evidence trong trình duyệt | localStorage, có dự phòng bộ nhớ |
| F9 | Site tài liệu VitePress sinh tự động từ dữ liệu chương trình | 24 trang buổi học |
Giai đoạn 2 — Backend (sau)
Đăng nhập; lưu evidence vào D1; upload ảnh/file lên R2; bảng điều khiển cho mentor xác nhận LO; báo cáo cho phụ huynh. Xem Lộ trình.
Ngoài phạm vi (hiện tại)
Chấm điểm tự động bằng AI cho câu tự luận; thanh toán; mạng xã hội; ứng dụng di động gốc; chạy code của học sinh bên trong web.
5. Yêu cầu phi chức năng
- Tối giản kiểu Brilliant: tối đa một thông tin hoặc một nhiệm vụ mỗi màn hình; một nút hành động chính cố định ở đáy.
- Nhận diện Sư Tử Con: màu, font, bo góc, "ledge" theo Brand Guidelines.
- Truy cập: tương phản đủ, điều hướng bàn phím,
aria-livecho phản hồi, tôn trọngprefers-reduced-motion. - Hiệu năng: tải nhanh trên điện thoại cũ; không phụ thuộc framework nặng.
- Quyền riêng tư: không thu họ tên hoặc dữ liệu định danh ở giai đoạn 1; xem SSD mục bảo mật.
6. Rủi ro
| Rủi ro | Giảm thiểu |
|---|---|
| Định nghĩa ReDesign Learning Cycle khác giả định | Cấu hình tập trung ở một file, sửa là cả hai site cập nhật |
| Học sinh gõ thông tin cá nhân vào ô tự luận | Buổi 10 dạy nguyên tắc; giao diện nhắc không nhập thông tin nhạy cảm; giai đoạn 2 cần đồng ý phụ huynh |
| Công cụ AI/lệnh thay đổi nhanh | Nội dung dùng thông báo minh họa; mentor kiểm tra trước buổi |
| Tự đánh giá có thể thổi phồng | Trạng thái "Chờ mentor xác nhận"; giai đoạn 2 thêm bước mentor duyệt |