Nemo12 Docs

SDD-043 · Lát cắt ở admin và Dolphin, skill và level, bố cục trang lesson ​

Một phần của SDD-043. lát cắt AI Teen ở admin và Dolphin, skill-level-chỉ báo ở màn Mục tiêu, bố cục trang lesson card Activity bên trái.

12. Trang xem lát cắt AI Teen ở admin và Dolphin (SRC-1270) ​

Chỉ đạo chủ dự án 07.10.2026: trang riêng cho lát cắt AI Teen, trong dolphin.nemo12.com và admin.nemo12.com. ✍️ Một hàm dựng dữ liệu cho cả hai cổng (workers/api/src/modules/aiTeen/modelPage.ts): hai bản truy vấn riêng sẽ sớm nói hai điều khác nhau về cùng một đứa trẻ. Hai cổng chỉ khác ở chỗ chặn quyền và cách bày.

CổngĐịa chỉAPIAi vào được
Admin#/models/{learnerId}/ai-teen, thẻ "AI Teen Learner Model" ở trang learnerGET /v1/admin/learners/{id}/ai-teen-modelvai admin
Dolphintab AI Teen ở màn quan sát learner (/learner/{id}), sau IELTSGET /v1/mentor/learners/{id}/ai-teen-modelvai mentor, staff, admin
  • Dữ liệu trang: lát cắt tính NGAY từ sổ bằng chứng và hành trình (không chờ engine); từng unit (chặng, sản phẩm nộp, bản tự chấm theo tên tiêu chí rubric, reflection nguyên văn); bài thử ở Where am I?; sổ bằng chứng AI Teen đếm theo nguồn kèm why; lịch sử lát cắt trong các bản chụp Learner Model, chỉ giữ bản mà lát cắt đổi.
  • Admin xếp cho người điều tra hệ: đủ bốn tầng (hệ nói gì, learner làm gì, dựa trên bằng chứng nào, đổi thế nào theo thời gian). Mở trang KHÔNG dựng lại model; nút "Dựng lại Learner Model" (?refresh=true) mới dựng và để lại bản chụp, cùng luật trang IELTS.
  • Dolphin xếp cho người ngồi cạnh learner: con đang ở đâu, chỗ đáng hỏi (skill mà level tự khai và level tự chấm task lệch nhau từ 1 bậc, hoặc còn thiếu so với đích), unit đang dở rồi unit đã xong với bài nguyên văn. Không có sổ bằng chứng chi tiết và lịch sử: đó là việc của admin. Chữ gốc tiếng Anh, có bản tiếng Việt trong apps/mentors/src/lang.tsx.
  • Trang nói rõ mọi level là tự đánh giá, ngay cạnh con số.
  • Tên unit, tên skill CCS và tên tiêu chí rubric phía API sinh bằng node scripts/aiteen/gen-api-catalog.mjs vào workers/api/src/modules/aiTeen/taskSkills.ts; program.test.ts bên learn đối chiếu, sửa nội dung mà quên chạy lại thì test đỏ.
  • Test: modelPage.test.ts (quyền cả hai cổng, nội dung, mở trang không dựng lại, lịch sử bỏ bản trùng).

13. Skill, level và chỉ báo ở màn Mục tiêu của unit (SRC-1278) ​

Chủ dự án 07.10.2026: màn Mục tiêu (Khởi động, bước 1) của mỗi unit đưa Unit Outcomes lên đầu dưới dạng SKILL; learner tick chỉ báo sẽ học, rồi ở Mình đang ở đâu? tick chỉ báo đã đạt.

13.1 Hai skill mỗi course ​

Mỗi course hiện đúng hai skill CCS, ghi ở Course.focusSkills (program.ts, kèm comment lý do) và hiện ở khu Skills của trang course (thay danh sách mọi skill) và ở hai màn trên của MỌI unit. ✍️ Luật chọn (rankCourseSkills, skillGoals.ts), theo thứ tự: (1) nhiều task unit đo nhất; (2) level cao nhất task yêu cầu; (3) nhiều unit đo một skill cùng competency CCS nhất; (4) unit sớm nhất. Ghi lại kết quả thay vì tính mỗi lần, để một lần sửa task không lặng lẽ đổi skill learner đã tick; skillGoals.test.tsx giữ hai bên khớp nhau.

CourseSkill 1Skill 2Vì sao
AI Teen 1dpd-3.2-4 Deploy applications (L3)dpd-3.1-1 Prompt AI effectively (L2)skill duy nhất hai task đo (Unit 3, 5); rồi competency AI-assisted Development được hai unit đo (1, 4), unit sớm nhất
AI Teen 2cognitive-2.1-2 Information categorization (L3)dpd-4.1-2 Communicate product value (L3)skill duy nhất hai task đo (Unit 2, 4); rồi skill Level 3 duy nhất còn lại (Unit 6)
AI Teen 3dpd-3.2-2 Debug applications (L3)cu-4.2-2 Gather user feedback (L3)mỗi skill một task; trong năm skill Level 3, competency Software Development được ba unit đo (3, 4, 5), Feedback Loop & User Testing hai unit (3, 6)

13.2 Level và chỉ báo: dữ liệu thật, không bịa ​

  • CCS không có mô tả level (competency_skill_levels rỗng, §3), nên không có chỉ báo theo từng skill để chép. Nguồn mô tả level duy nhất là thang tạm SKILL_LEVELS (§3). Chỉ báo (LEVEL_INDICATORS) là câu gợi ý của thang ấy tách thành các phần quan sát được, CHỈ ở chỗ câu nối hai việc riêng bằng "và" hoặc dấu phẩy; test giữ mọi chỉ báo là một mảnh của câu gợi ý, và gộp lại đủ mọi chữ của nó.
LevelNhãnChỉ báo
1Nhận biếtNói được skill này là gì · Nhận ra khi thấy người khác làm
2Làm có hướng dẫnLàm được khi có mẫu, có checklist hoặc có người đi cùng (một chỉ báo: ba hỗ trợ là lựa chọn "hoặc", tách ra là đổi nghĩa)
3Tự làm đượcTự làm từ đầu tới cuối trên một sản phẩm thật
4Vận dụng linh hoạtLàm được ở tình huống mới · Giải thích được vì sao chọn cách ấy
  • Từ SRC-1280 bảng trên chỉ còn là dự phòng cho skill chưa có chỉ báo riêng; sáu skill của ba course dùng chỉ báo riêng (§13.5).
  • Khoảng trống, chờ chủ dự án: (a) và (b) đã có bản nháp ở §13.5, chờ duyệt: (a) Level 2 và Level 3 chỉ có MỘT chỉ báo, chưa đủ 2-3; (b) chỉ báo giống nhau ở mọi skill vì thang dùng chung, chưa nói "deploy" khác "debug" ở chỗ nào; (c) nhiều unit không có task đo skill nào trong hai skill của course (AI Teen 1: 3/6 unit có, AI Teen 2: 3/6, AI Teen 3: 2/6). Cần mô tả level theo từng skill ở CCS, hoặc chủ dự án chốt chỉ báo, hoặc gắn lại skill cho task.
  • Id chỉ báo <skill CCS>:<level>:<n> (ví dụ dpd-3.2-4:2:1): đổi thứ tự hiển thị không đổi id.

13.3 Hai màn ​

text
Khởi động  [1 Mục tiêu] [2 Mình đang ở đâu?]
Mục tiêu · Khi xong unit này
<Compelling Question>
+-- Unit Outcomes: em sẽ học những gì trong unit này? ---------- [ Sửa ] -+
| Skill 1 Deploy applications   Software Development · ... · đo ở Level 3 |
| [Level 1 · Nhận biết ] [Level 2 · Làm có hướng dẫn] [Level 3 · ...]     |  <- MỘT hàng
|  [x] Nói được ...       [x] Làm được khi có mẫu ...  [ ] Tự làm ...     |
| Skill 2 ...                                                             |
| 2/3 chỉ báo đã chọn                        [Xác nhận]                   |
+-------------------------------------------------------------------------+
[ Em sẽ học được gì? (concept) ] [ Em sẽ làm ra sản phẩm nào? ]           <- gọn, cùng hàng từ sm
[ Bắt đầu học -> ]
  • Mục tiêu: hai skill, mỗi skill level 1 tới level task của unit đo (skill unit không đo: tới level của course, màn nói rõ "chưa đo skill này"); level task đo được viền cam, nhãn "Unit này". Tick tối đa 3 chỉ báo; chỉ báo thứ tư bị chặn, giữ nguyên ba cái cũ và hiện lời nhắn (role="alert"); "Xác nhận" khoá khi chưa tick gì. Dưới khối skill, gọn và đúng thứ tự: "Em sẽ học được gì?" rồi "Em sẽ làm ra sản phẩm nào?". Câu "Tôi có thể..." của Unit Outcomes không hiện ở màn này nữa (dữ liệu giữ trong file course).
  • Mình đang ở đâu?: cùng hai skill, đủ bốn level, tick mọi chỉ báo learner tin mình đã làm được, không trần; không tick gì cũng là một câu trả lời ("Unit này là chỗ bắt đầu"), nên "Xác nhận" luôn bật. Danh sách lesson của unit vẫn ở ngay dưới.
  • Card theo bảng chế độ guided-journey.md §2c: tick vào bản nháp; "Xác nhận" lần đầu; rồi chế độ xem (ô tick tắt, tóm tắt một dòng) với "Sửa" ở ô cố định w-[7.75rem] đổi thành "Huỷ" + "Lưu" không xê dịch. Mẫu dùng lại: guided-journey.md §11.
  • Mọi level ở cả hai màn cạnh nhau trên MỘT hàng; hẹp hơn hàng thì hàng tự cuộn ngang, trang không.

13.4 Lưu ​

  • ✍️ Không migration. Hai lựa chọn nằm trong chính dòng hành trình unit (ai_teen_journeys, scope <course>:u<n>, §9.4), trường mới skills: { goal: string[] | null, have: string[] | null }. null = chưa xác nhận, khác [] = đã xác nhận mà không tick. Trường tuỳ chọn, nên dòng lưu trước SRC-1278 vẫn đọc được.
  • Server (workers/api/src/modules/aiTeen/journey.ts, zod unitState) giữ cả luật trần: goal tối đa 3, have tối đa 24, id phải đúng dạng <skill>:<1-4>:<n>; sai thì 400 và không ghi đè bản cũ. Chưa ghi danh course thì như mọi trạng thái unit: giữ trên màn hình, không gửi (409 ở server).
  • Client đọc qua readSkills: bỏ id không còn trên màn (course đổi skill, unit đổi level), bỏ trùng, cắt goal về 3.
  • Kiểm chứng: skillGoals.test.tsx (chỉ báo khớp thang, hai skill mỗi course khớp luật, level theo task, trần 3, hình dạng lưu, số luôn hiện trên pill và mục menu); journey.test.ts phía API (lưu và đọc lại, quá 3 hay id sai bị từ chối mà không ghi đè); e2e aiTeen.spec.ts (số ở journey và bước kể cả xong/khoá, khối skill trên cùng với level một hàng và chỉ báo thật, đúng 2 skill mỗi course, trần 3, tick đã đạt ở Mình đang ở đâu?, còn nguyên sau khi tải lại, 375px không cuộn ngang).

13.5 Chỉ báo riêng của từng skill (SRC-1280, duyệt ở SRC-1297) ​

Chủ dự án 07.10.2026 duyệt việc soạn chỉ báo riêng cho sáu skill của ba course, thay bộ chỉ báo chung giống hệt nhau ở mọi skill (§13.2). Dữ liệu ở apps/learn/src/aiTeen/skillIndicators.ts (SKILL_INDICATORS); indicatorTexts (skillGoals.ts) lấy chỉ báo riêng nếu có, không thì bộ chung. Đã duyệt 08.10.2026 theo uỷ quyền của chủ dự án (SRC-1297, §16); mục này chỉ ghi luật.

  • Nguồn, nói thật: CCS chỉ có TÊN skill và competency, không có định nghĩa hay mô tả level, nên không có câu chữ CCS nào để trích. Chỉ báo do Nemo soạn từ tên skill, competency, nghĩa của từng bậc trong thang tạm SKILL_LEVELS và các task của course đo skill ấy. Mỗi bộ mang source: "nemo" (trước SRC-1297 là "nemo-draft"); không gọi chúng là chỉ báo CCS.
  • Số lượng: mỗi skill, mỗi level 1-4: 2-3 chỉ báo (hiện là 2 · 3 · 3 · 3).
  • Câu chữ: giọng learner ("Em ..."), quan sát được: em LÀM hay LÀM RA gì, với mức hỗ trợ nào; riêng cho skill ấy (deploy khác debug); gắn sản phẩm AI Teen khi tự nhiên (tên miền, Learning Map, portfolio, web game, form góp ý). Không gạch dài, không ngoặc cong, không dấu ba chấm.
  • Tăng dần theo nghĩa của thang: Level 1 nói được skill là gì và nhận ra nó trong việc của người khác; Level 2 làm được khi có mẫu, checklist hoặc người đi cùng; Level 3 tự làm từ đầu tới cuối trên sản phẩm thật; Level 4 làm được ở tình huống mới, giải thích được vì sao chọn cách ấy, và giúp được người khác.
  • ✍️ Id giữ nguyên, không migration. Tick lưu theo <skill>:<level>:<n> (§13.4). Bộ chung dùng các vị trí 1:1, 1:2, 2:1, 3:1, 4:1, 4:2; ở bộ riêng, ĐÚNG các vị trí ấy là phiên bản riêng của CÙNG chỉ báo chung (1:1 nói được là gì, 1:2 nhận ra ở người khác, 2:1 làm khi có hỗ trợ, 3:1 tự làm trên sản phẩm thật, 4:1 tình huống mới, 4:2 giải thích lựa chọn), chỉ báo thêm chỉ lấy vị trí mới. Nên tick đã lưu giữ id và giữ nghĩa, readSkills không bỏ id nào. Hai skill × 4 level × tối đa 3 = 24, đúng trần have của server.
  • Kiểm chứng: skillIndicators.test.ts (đủ sáu skill, 2-3 mỗi level, giọng "Em", không ký tự cấm, không hai skill trùng bộ hay trùng câu, id duy nhất và đúng dạng server, mọi id cũ còn và đọc lại nguyên, vị trí giữ nghĩa cũ); e2e aiTeen.spec.ts so chữ trên màn với SKILL_INDICATORS.
  • Sửa câu chữ tại chỗ; sửa câu không đổi id. Bỏ hẳn một chỉ báo ở vị trí cũ thì tick đã lưu ở đó mất nghĩa, cần một bước chuyển có test.

14. Bố cục trang lesson: card Activity bên trái, không thanh bước (SRC-1286) ​

Chủ dự án 07.10.2026. Đây là chuẩn cho trang chi tiết lesson của mọi course AI Teen; phần giao diện do một phiên khác dựng trong PR tái cấu trúc AI Teen 1 (SRC-1281), nên mục này mô tả đích, chưa phải thứ đang chạy. Mẫu chung (dùng lại được ngoài AI Teen): Guided Journey §12.

text
[logo] AI Teen 1 · Unit 1 · Lesson 2 v                         [VI|EN] [tài khoản]   <- hàng 1
[ 1 Bắt đầu ✓ ] [ 2 Khám phá ví dụ ] [ 3 ... ]                                       <- NavBar (Activity)
+-- Lesson 2 -----------+  +-- vùng chính: CHỈ bước của Activity đang chọn ----------+
| 1 Bắt đầu        ✓    |  | 1 · Câu hỏi                                              |
|   1 Câu hỏi      [x]  |  |   ...                                                    |
|   2 Phần 1       ✓    |  | 2 · Phần 1 (cổng đọc)                                    |
|   3 Phần 2 <-đang đọc |  |   ...                                                    |
| 2 Khám phá ví dụ      |  | 3 · Phần 2                                               |
| 3 Tìm hiểu sâu        |  |   ...                                                    |
+-----------------------+  +----------------------------------------------------------+
LuậtChuẩn
Không thanh bướcTrang lesson KHÔNG có hàng 3 (Progress Bar). Header còn hàng 1 (breadcrumb, Mục lục, VI/EN, tài khoản) và NavBar các Activity (số đứng đầu, xong = số + tick, SRC-1276). Unit và chương trình giữ nguyên ba hàng.
Card cột tráiMột card hẹp (14rem, tối đa 240px) bên trái liệt kê MỌI Activity của lesson; đúng một nhóm mở (Activity hiện tại), mở nhóm khác thì nhóm kia gập (SRC-1294). Activity và Bước đều có số; xong = số + tick. Không ổ khoá, mọi bước tới được (SRC-1294). Không thanh cuộn trong: card cao bằng nội dung, chỉ dính khi vừa khung nhìn. Mật độ: hierarchy.md §3.
Tên ngắnTên Activity và tên Bước trong card tối đa 3 chữ, ưu tiên 1-2 ("Câu hỏi", "Phần 2", "Mang theo"). Tên đầy đủ (tên phần đọc, câu hỏi) là tiêu đề của bước ở vùng chính. Dữ liệu bước khai tên ngắn riêng (short), test giữ trần 3 chữ.
Vùng chínhChỉ hiện các bước của Activity đang chọn, xếp dọc theo thứ tự. Đổi Activity là thay toàn bộ vùng chính và cuộn về đầu. Header: kicker Lesson m/N, h1 {n} {Activity}, một dòng gợi ý; mỗi bước một h2, không kicker; bước Câu hỏi không lặp danh sách activity (SRC-1294, hierarchy.md §4).
Scroll-spyBước đang nằm trong tầm đọc (mép trên ngay dưới header dính) sáng trong card (aria-current="step"). Bấm một bước trong card thì cuộn tới bước ấy, bù chiều cao header (scrollToCard / stickyOffset).
URL.../lessons/{m}/{activity}/{step} như §9.5; cuộn tới một bước cập nhật đoạn {step} bằng replaceState, không thêm lịch sử.
Điện thoạiDưới lg card thành một sheet gọn ở đầu trang, dính dưới header: thu gọn thì một dòng "Activity · Bước k/N" + chevron; mở ra thì đúng danh sách của card (Radix Collapsible, aria-expanded). Chọn một bước thì cuộn tới và thu sheet lại. Trang không cuộn ngang ở 320/375px.
Tick bướcÔ tick của từng bước nằm TRONG card (và trong sheet trên điện thoại); luật xong của từng loại bước ở §15.
  • ✍️ NavBar Activity vẫn giữ cạnh card: chủ dự án viết "chỉ NavBar trên cùng", và ở mọi cấp khác NavBar là nơi chọn journey; bỏ nó riêng ở lesson thì cấp lesson là cấp duy nhất mà hàng 2 vắng. Hai chỗ đọc chung MỘT trạng thái (Activity trong URL), nên không bao giờ nói khác nhau. Nếu chủ dự án muốn bỏ hẳn NavBar ở lesson thì chỉ bỏ hàng 2, card đã đủ.
  • ✍️ Card thay chỗ thanh bước chứ không thay Mục lục: Mục lục (đoạn cuối breadcrumb, §9.7) vẫn là cây unit và lesson của course; card chỉ là dàn bài của MỘT lesson.
  • Thay §9.5 ở đúng một điểm: "bước của journey đang chọn hiện bằng thanh chấm cam" không còn đúng cho trang lesson; thanh vẫn đúng cho trang unit và chương trình.
  • Kiểm chứng (khi dựng): e2e 1280px có card, không có [data-journey-bar] ở trang lesson, đổi Activity thay vùng chính, cuộn đổi bước sáng trong card, bấm bước thì bước vào tầm nhìn dưới header; 375px sheet thu gọn mặc định, mở ra đủ bước, vùng chạm ≥40px, không cuộn ngang; test thuần cho trần 3 chữ của tên ngắn.

Nemo12