--- url: https://docs.nemo12.com/design-system/scorecards/learn-ielts-today.md description: >- Bảng điểm 25 yếu tố cho journey Learn & Practice IELTS (/ielts/today): chấm theo Focus Order và Information Load, kèm việc cần sửa. --- # Bảng điểm: learn `/ielts/today` (SRC-1303) Màn: journey "Learn & Practice" của sân luyện IELTS. Mã nguồn: `apps/learn/src/ielts/journeys/JourneyPages.tsx` (`TodayPage`), cột phải `apps/learn/src/IeltsPathway.tsx` (`LearnBaseLinks`), shell `apps/learn/src/components/JourneyShell.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`, chưa qua ảnh của chủ dự án. | Lượt | Ngày | Điểm | Ghi chú | | --- | --- | --- | --- | | 0 (trước khi sửa) | 09.10.2026 | 40/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 | | 3 (gọn 50%, SRC-1321) | 10.10.2026 | 50/50 | lô 3 dưới đây; đo lại bằng Playwright 375/1280 | ## Hai câu bắt buộc * **Nhìn đâu trước? (lượt 0)** ở 375px thẻ "Your status" đứng giữa header và h1: h1 "Learn & Practice" nằm ở y=384, tức là nửa trên của tầm nhìn đầu là Membership. Một nút tô đầy ("Luyện Reading", y=736). Lần đầu mở, tour tự bật và cuộn trang xuống bước 2. * **Bao nhiêu thứ? (lượt 0)** 375px: thẻ trạng thái, khối tiêu đề, bước 1 (thẻ kỹ năng hôm nay) = 3 khối trong tầm nhìn đầu, trong ngân sách L1. Trang tràn ngang 15px (`scrollWidth` 390). * **Sau lô 1:** h1 ngay dưới thanh bước (e2e: `y(h1) < y(status-card)`), rồi bước 1 với một nút tô đầy; thẻ trạng thái xuống cuối trang ở 375px (vẫn ở cột phải từ `lg`). `scrollWidth` = 375. * **Sau lô 2:** lần đầu mở ở 375px tour không bật và trang không cuộn (`scrollY` = 0, h1 trong tầm nhìn); tour chỉ mở khi learner cuộn tới thẻ "Practise a skill". Số phút hôm nay nói một lần (thẻ trạng thái). * **Sau lô 3 (SRC-1321):** tầm nhìn đầu ở 375px: h1 → thẻ kỹ năng → một nút tô đầy, rồi Status Card ba dòng, Build your base, Learning Setup. Vùng nội dung + cột phải ở 1280px: 26 phần tử, 51 từ (trước 67 và 169); nút/link 18 → 7. Bốn kỹ năng là hàng 2 của Learn; hàng 1 luôn mở, Learn luôn tô. ## 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 | pass | pass | pass | lô 3: một thẻ kỹ năng; bốn kỹ năng ở hàng 2, Grammar/Full tests ở cột phải (không còn hai bước đánh số) | | 2 | Navigation | pass | pass | pass | lô 3: hàng 1 luôn mở, Learn tô `bg-accent-deep` ở mọi trang, mục khác là tag; hàng 2 = READING, LISTENING, WRITING, SPEAKING, không pill nào sáng ở `/ielts/today` | | 3 | Layout | fail | pass | pass | 375px: `aside` thẻ trạng thái đứng trước nội dung trong DOM → nay nội dung trước, `lg:order` giữ cột phải (F7); e2e `ieltsHubsLayout.spec.ts` | | 4 | Visual Hierarchy | partial | pass | pass | một nút tô đầy; lượt 0 h1 bị đẩy xuống y=384 bởi thẻ trạng thái (F3) | | 5 | Responsive Design | fail | pass | pass | lưới `grid lg:grid-cols-2` không khai cột nên track ngầm nở theo dòng "READING + Start here" → `grid-cols-[minmax(0,1fr)]`, nhãn và "Start here" xuống dòng; e2e `scrollWidth <= 375` | | 6 | Interaction Pattern | pass | pass | pass | bước gập/mở, mặc định mở | | 7 | User Flow | pass | pass | pass | "Luyện Reading" dẫn thẳng vào kỹ năng Nemo chọn | | 8 | Affordance | pass | pass | pass | dòng kỹ năng có mũi tên, cả dòng là link | | 9 | Feedback | pass | pass | pass | hover đổi màu chữ | | 10 | State | pass | pass | pass | `Skeleton` khi dữ liệu journey chưa về | | 11 | Design System | pass | pass | pass | shadcn `Card`/`Button`, token | | 12 | Components | pass | pass | pass | `NumberedStep`, `CardHint` dùng chung | | 13 | UI Patterns | pass | pass | pass | journey có bước đánh số | | 14 | Forms | pass | pass | pass | không có form | | 15 | Data Display | partial | partial | pass | bước 1 không còn dòng phụ số phút; số phút hôm nay chỉ ở thẻ trạng thái (L5); e2e đếm `[data-step-line]` = 1 và không còn chữ "Hôm nay:" trong trang | | 16 | Onboarding | partial | partial | pass | lô 3: tour `ielts-hub` bỏ cùng thẻ bốn kỹ năng nó trỏ vào. Trước đó: tour `ielts-hub` dùng `whenInView`: chỉ tự mở khi thẻ "Practise a skill" đã vào tầm nhìn, và không cuộn khi element đã ở trong tầm nhìn; e2e lần đầu ở 375px: `scrollY` = 0, h1 trong tầm nhìn | | 17 | Empty State | pass | pass | pass | chưa có phút thì nói một dòng | | 18 | Error Handling | partial | partial | pass | mọi nguồn dữ liệu learner hỏng thì `loadHomeSignals` báo lỗi thay vì vẽ trang rỗng như thật, và quá 15s không về cũng tính là hỏng: dòng `role=alert` + "Thử lại" thay `Skeleton` (dùng chung cho mọi trang journey); e2e chặn API | | 19 | Accessibility | pass | pass | pass | số bước có nhãn "Step 1 of 4"; nút `?` có vùng chạm mở rộng | | 20 | Personalization | pass | pass | pass | kỹ năng hôm nay theo dữ liệu learner | | 21 | Typography | pass | pass | pass | h1 `text-2xl` + một dòng phụ (L2) | | 22 | Color | pass | pass | pass | một màu nhấn | | 23 | Spacing | pass | pass | pass | thang `mt-3/6` | | 24 | Iconography | partial | partial | pass | lô 3: còn hai icon lucide (Grammar, Full tests) ở cột phải, e2e đếm 2. Trước đó: icon kỹ năng, Grammar, Full tests sang lucide (`BookOpen`, `Headphones`, `PenLine`, `Mic`, `BookText`, `ClipboardList`); e2e: 4 `svg.lucide`, 0 SVG khác trong thẻ | | 25 | Motion | partial | partial | pass | đèn rọi và thẻ tour trượt giữa các bước qua `m.div` (motion), lần đặt đầu tức thì, giảm chuyển động thì tức thì; bỏ `transition` CSS của `.n12-tour-spot/.n12-tour-card` | ## Lô đã sửa | Lô | Ngày | PR | Yếu tố | Thay đổi | | --- | --- | --- | --- | --- | | 1 | 09.10.2026 | session/ui-audit-pass2 | 3, 4, 5 | hết tràn ngang ở 375px; thẻ trạng thái xuống sau nội dung dưới `lg` (đổi ở `JourneyShell`, nên mọi trang journey có thẻ trạng thái cùng được) | | 3 | 10.10.2026 | session/ielts-nav-tags | 1, 2, 16, 24 | SRC-1321: menu cấp 1 luôn mở, Learn luôn tô, mục khác thành tag; hàng 2 của Learn là bốn kỹ năng; trang Learn còn h1 + một thẻ; Grammar, Full tests sang cột phải; Status Card ba dòng | | 2 | 09.10.2026 | session/ui-audit-pass3 | 15, 16, 18, 24, 25 | bỏ dòng số phút ở bước 1; tour `whenInView` (Tour.tsx canonical, chép sang learn và marlins); dòng lỗi thay `Skeleton` đứng mãi ở mọi trang journey; icon lucide; tour trượt qua motion | ## Còn lại Không còn yếu tố partial hay fail. Nói thẳng hai giới hạn: 1. "Dữ liệu không về" được nhận ra theo hai đường: mọi nguồn theo learner (effort, diag4, bốn trang kỹ năng) cùng hỏng, hoặc quá 15 giây. Một vài nguồn hỏng lẻ vẫn vẽ trang với phần còn lại, đúng thiết kế cũ của `homeSignals.ts`, nên trang không báo lỗi cho trường hợp ấy. 2. Hành vi `whenInView` chỉ bật cho hai tour `ielts-hub` và `ielts-subskills`; các tour khác của learn và marlins vẫn tự mở và tự cuộn như cũ.