--- url: https://docs.nemo12.com/design-system/scorecards/learn-ielts-reading.md description: >- Bảng điểm 25 yếu tố cho trang kỹ năng Reading IELTS (/ielts/reading), cùng khuôn với Listening, Writing, Speaking: kèm việc cần sửa. --- # Bảng điểm: learn `/ielts/reading` (SRC-1303) Màn: trang kỹ năng Reading của sân luyện IELTS (cùng khuôn với `/ielts/listening`, `/ielts/writing`, `/ielts/speaking`). Mã nguồn: `apps/learn/src/ielts/Reading.tsx` (`ReadingHome`), anh em `Listening.tsx`, `Production.tsx`. Chuẩn: [focus-and-load.md](../focus-and-load.md). Skill: `/ui-audit-25`. Bản ngắn: chấm qua mã + Playwright 375 x 812 và 1440 x 900 với `mockApi`. | Lượt | Ngày | Điểm | Ghi chú | | --- | --- | --- | --- | | 0 (trước khi sửa) | 09.10.2026 | 42/50 | đo bằng Playwright | | 1 (sau lô 1) | 09.10.2026 | 45/50 | lô 1 dưới đây | | 2 (sau lô 2) | 09.10.2026 | 50/50 | lô 2 dưới đây; đo lại bằng Playwright 375/1440 | ## Hai câu bắt buộc * **Nhìn đâu trước? (lượt 0)** không có h1: thứ đầu tiên là thẻ "Where am I strong?" (10 dòng sub-skill). Ở 375px thẻ ấy chiếm trọn tầm nhìn đầu; ô chính "Keep going / Read a passage" ở dưới nếp gấp (F3). Ở 1440px ô chính ở y=696, dưới thẻ mastery và vạch "What to do now". * **Bao nhiêu thứ? (lượt 0)** 375px: một khối (thẻ mastery) lấp đầy màn. Vệt đường dẫn "Reading" là chỗ duy nhất nói tên trang. * **Sau lô 1:** h1 "Reading" (y=174 ở 375px), vệt dừng ở gốc nên tên trang nói một lần. Ô chính vẫn dưới nếp gấp ở 375px (xem "Còn lại"). * **Sau lô 2:** ở 375px mắt đi h1 "Reading" → ô chính "Keep going" (một nút/ô tô màu) → thẻ mastery → dòng video gập. Tầm nhìn đầu có 2 khối (h1, ô chính) cộng phần đầu thẻ mastery. Ở 1440px thứ tự không đổi so với lượt 1. Không gì nói hai lần. ## 25 yếu tố | # | Yếu tố | Lượt 0 | Lượt 1 | Lượt 2 | Bằng chứng / luật | | --- | --- | --- | --- | --- | --- | | 1 | Information Architecture | partial | pass | pass | tên trang chỉ ở vệt; nay h1 "Reading" và vệt không lặp (L5), e2e `ieltsHubsLayout.spec.ts` | | 2 | Navigation | pass | pass | pass | thanh bước sáng "Practise" | | 3 | Layout | pass | pass | pass | không thẻ trạng thái ở trang luyện (F7) | | 4 | Visual Hierarchy | fail | partial | pass | ở 375px ô chính "Keep going" ngay dưới h1, trước thẻ mastery (F3, chủ dự án quyết 09.10.2026); 1440px giữ thứ tự cũ; e2e `ieltsAuditPass3.spec.ts` so `y` ở cả hai cỡ | | 5 | Responsive Design | partial | partial | pass | 375px: tầm nhìn đầu là h1 + ô chính (`data-part=hub-primary-phone`), bản trong lưới `hidden lg:block` nên chỉ một ô chính hiện (e2e đếm `[data-hub-primary]` hiện = 1) | | 6 | Interaction Pattern | pass | pass | pass | ô `HubTile` cả ô là link | | 7 | User Flow | partial | partial | pass | việc chính bấm được không cần cuộn ở 375px | | 8 | Affordance | pass | pass | pass | ô khoá nói vì sao khoá | | 9 | Feedback | pass | pass | pass | thanh mastery có nhãn "Solid" | | 10 | State | pass | pass | pass | khoá "Word list" theo mastery, có câu đếm | | 11 | Design System | pass | pass | pass | shadcn, token | | 12 | Components | pass | pass | pass | `HubTile`, `MasteryCard`, `ExamPracticeBand` dùng chung bốn trang | | 13 | UI Patterns | pass | pass | pass | hub ba ô + dải luyện đề | | 14 | Forms | pass | pass | pass | không có form | | 15 | Data Display | pass | pass | pass | số cụm, số bài có đơn vị | | 16 | Onboarding | partial | partial | pass | video gập thành một dòng (`IeltsClip` bỏ `shown`, e2e `video` = 0); tour `whenInView`: chỉ tự mở khi đỉnh thẻ mastery đã vào tầm nhìn, không tự cuộn (e2e `scrollY` = 0 sau 1,2s; cuộn tới thẻ thì tour mở và `scrollY` không đổi) | | 17 | Empty State | pass | pass | pass | chưa có bài thì dẫn sang danh sách cụm | | 18 | Error Handling | partial | partial | pass | `useSkillPageState` + `state` của cụm: hỏng thì dòng `role=alert` tiếng Việt "Chưa tải được dữ liệu" + nút "Thử lại" (e2e chặn API, bấm thử lại, dòng biến mất) | | 19 | Accessibility | partial | pass | pass | không h1 cho trình đọc màn hình → có một h1 | | 20 | Personalization | pass | pass | pass | bài kế tiếp theo server | | 21 | Typography | pass | pass | pass | h1 `text-2xl` một dòng | | 22 | Color | pass | pass | pass | một màu nhấn | | 23 | Spacing | pass | pass | pass | thang | | 24 | Iconography | pass | pass | pass | icon lucide | | 25 | Motion | pass | pass | pass | `FadeIn`, `Stagger` từ preset | ## Lô đã sửa | Lô | Ngày | PR | Yếu tố | Thay đổi | | --- | --- | --- | --- | --- | | 1 | 09.10.2026 | session/ui-audit-pass2 | 1, 4 (một phần), 19 | h1 tiếng Anh ở cả bốn trang kỹ năng (Reading, Listening, Writing practice, Speaking practice); vệt dừng ở gốc để không lặp | | 2 | 09.10.2026 | session/ui-audit-pass3 | 4, 5, 7, 16, 18 | chủ dự án quyết 09.10.2026: dưới `lg` ô chính lên trước thẻ mastery (`PrimaryFirstOnPhone`), desktop giữ nguyên; video gập; tour `whenInView` không tự cuộn; dòng lỗi + "Thử lại". Cùng sửa ở Listening, Writing practice, Speaking practice (chung `Hub.tsx`) | ## Còn lại Không còn yếu tố partial hay fail. 1. **Về h1:** lô 1 đưa h1 lại (SRC-878 từng bỏ nó vì lặp vệt). Vệt nay không lặp tên trang và h1 một dòng `text-2xl`; nếu chủ dự án vẫn muốn bỏ hẳn tiêu đề thì đổi `ieltsHubsLayout.spec.ts` và `ieltsExamParts.spec.ts`. 2. Ở 375px ô chính có HAI bản trong DOM (một bản `lg:hidden` dưới h1, một bản `hidden lg:block` trong lưới), chỉ một bản hiện ở mỗi cỡ màn nên trình đọc màn hình chỉ gặp một. Chọn cách này thay vì `order` CSS để thứ tự DOM khớp thứ tự nhìn (F7). 3. Dòng video gập nay gập ở cả desktop, không chỉ ở điện thoại: một video bày sẵn vẫn tranh chỗ với việc chính ở mọi cỡ màn.