Giao diện
Buổi 4 — Từ Brief đến trang chạy được
Lesson 4 — From Brief to a working page · WebAI Builder
Guiding Question (Compelling)
Từ Brief đến một trang web chạy được: AI làm gì và mình làm gì?
From Brief to a working page: what does AI do and what do I do?
1. Learning Outcomes (Backward Design — bước 1)
| ID | Outcome | Performance Task trong khung / Framework task |
|---|---|---|
C4.2 | Tạo được một sản phẩm số có thể sử dụng với sự hỗ trợ của AI. Create a usable digital product with AI’s help. | Học sinh tạo website Quiz có thể mở trên trình duyệt, hiển thị câu hỏi và nhận câu trả lời. The learner builds a Quiz website that opens in a browser, shows questions and takes answers. |
Performance Task của buổi / Lesson performance task: Tạo website Quiz mở được trên trình duyệt, hiển thị câu hỏi và nhận câu trả lời.
Build a Quiz website that opens in a browser, shows questions and takes answers.
2. Evidence & Assessment (bước 2)
2 bước đánh giá tổng kết (assess) · 16 màn hình · mọi tương tác đều ghi evidence.
2 summative steps · 16 screens · every interaction leaves evidence.
| Bước / Step | LO | Loại / Type | Nội dung / Prompt |
|---|---|---|---|
s13 | C4.2 | Tự luận Text | Quiz của em đã làm được 3 việc nào trong checklist? Mô tả cách em thử từng việc. |
s14 | C4.2 | Liên kết/sản phẩm Link/artifact | Ghi đường dẫn tới thư mục hoặc file của Quiz và cách mở nó. |
3. Learning Plan — 120 phút (bước 3)
| Chặng / Phase | Phút | CRA | Hoạt động của mentor / Mentor activity | Màn hình / Screens |
|---|---|---|---|---|
| Gợi mở Wonder | 10 | C | Hỏi: khi đã có Brief, phần nào vẫn là việc của em? Ask: once you have a Brief, what is still your job? | 3 |
| Khám phá Explore | 35 | C | Mở thư mục dự án, chạy Claude Code, dán Brief; mở index.html bằng trình duyệt. Open the project folder, run Claude Code, paste the Brief; open index.html in a browser. | 5 |
| Biểu diễn Represent | 25 | R | Checklist “dùng được”: mở được, có câu hỏi, nhận trả lời, hiện kết quả. A “usable” checklist: opens, shows questions, takes answers, shows results. | 2 |
| Khái quát Abstract | 20 | A | Phân vai người và AI trong lúc xây. Define the roles of person and AI during building. | 2 |
| Thiết kế lại Redesign | 20 | A | Performance Task: hoàn thiện Quiz và ghi lại bằng chứng chạy được. Performance Task: finish the Quiz and record evidence that it works. | 2 |
| Nhìn lại Reflect | 10 | A | Điều gì AI làm tốt, điều gì em phải kiểm tra lại? What did AI do well, and what did you need to double-check? | 2 |
4. IB
| Key concepts | Chức năng / Function · Sáng tạo / Creativity |
| Global context | Đổi mới khoa học & kỹ thuật / Scientific & technical innovation |
| ATL skills | Tự quản lý / Self-management · Tư duy / Thinking |
| Learner profile | Dám thử / Risk-takers · Biết nhìn lại / Reflective |
5. Vật liệu / Materials
- Máy đã cài Claude Code (mentor kiểm tra trước)
Computer with Claude Code installed (mentor checks in advance) - Thư mục dự án trống
An empty project folder - Brief của học sinh từ buổi 3
The learner’s Brief from lesson 3
6. Màn hình học viên / Learner screens
Xem toàn bộ 16 màn hình / Show all 16 screens
| # | Chặng | Loại | Nội dung |
|---|---|---|---|
| 1 | Gợi mở | Thông tin | Em đã có Brief. Giờ em nhờ Claude Code tạo trang web Quiz. |
| 2 | Gợi mở | Chọn đáp án | Phần nào vẫn là việc của em? |
| 3 | Gợi mở | Biểu mẫu nhiều ô | Sau khi AI làm xong, em sẽ kiểm tra những gì? |
| 4 | Khám phá | Thông tin | Mở thư mục dự án, chạy Claude Code và dán Brief của em. |
| 5 | Khám phá | Thông tin | Đây là khung trang đang được tạo: đầu trang, phần câu hỏi, và nút đáp án. |
| 6 | Khám phá | Chọn đáp án | Cách đơn giản nhất để xem trang vừa tạo là gì? |
| 7 | Khám phá | Sắp thứ tự | Sắp xếp các bước đưa Brief thành trang chạy được. |
| 8 | Khám phá | Chọn đáp án | Quiz hiện câu hỏi, nhưng bấm đáp án thì không có gì xảy ra. Đây là gì? |
| 9 | Biểu diễn | Thông tin | Checklist “dùng được”: mở được. Có câu hỏi. Nhận câu trả lời. Hiện kết quả. |
| 10 | Biểu diễn | Chọn đáp án | Trang chỉ có tiêu đề rất đẹp. Dùng được chưa? |
| 11 | Khái quát | Tự luận | Trong lúc xây sản phẩm, người làm gì và AI làm gì? |
| 12 | Khái quát | Thông tin | Nói gọn: em quyết định điều cần làm và kiểm tra. AI viết code theo yêu cầu của em. |
| 13 ★ | Thiết kế lại | Tự luận | Quiz của em đã làm được 3 việc nào trong checklist? Mô tả cách em thử từng việc. |
| 14 ★ | Thiết kế lại | Liên kết/sản phẩm | Ghi đường dẫn tới thư mục hoặc file của Quiz và cách mở nó. |
| 15 | Nhìn lại | Tự luận | AI làm tốt điều gì? Em phải kiểm tra lại điều gì? |
| 16 | Nhìn lại | Mức tự tin | Em tự tin tạo một sản phẩm web với AI đến mức nào? |
★ = bước đánh giá tổng kết / summative step