---
url: https://docs.nemo12.com/design-system/scorecards/learn-ielts-diagnostic.md
description: >-
  Bảng điểm 25 yếu tố cho màn Diagnostic bốn bài của sân luyện IELTS: chấm theo
  Focus Order và Information Load, kèm việc cần sửa.
---

# Bảng điểm: learn `/ielts/diagnostic` (SRC-1303)

Màn: Diagnostic (bốn bài). Mã nguồn: `apps/learn/src/ielts/Diagnostic.tsx` (`Diag4Home`), shell `apps/learn/src/ielts/Shell.tsx` → `journeys/IeltsJourneyShell.tsx`. Chuẩn: [focus-and-load.md](../focus-and-load.md). Skill: `/ui-audit-25`. Bản ngắn (lượt 4): chấm qua mã + Playwright 375 x 812 và 1440 x 900 với `mockApi`, chưa qua ảnh của chủ dự án. Dòng không ghi gì là pass theo số đo chung của lượt 4: một h1, không tràn ngang, tối đa 5 khối trong tầm nhìn đầu ở 375px, thanh bước sáng đúng bước (e2e `ieltsAuditPass4.spec.ts`).

| 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 | 49/50 | lô 1 dưới đây |
| 2 (sau lô 2) | 09.10.2026 | 50/50 | lô 2 dưới đây (lượt 5 của /ui-audit-25) |

## Hai câu bắt buộc

* **Nhìn đâu trước?** lượt 0: vệt "Diagnostic" rồi h1 "Diagnostic" (y=210), đoạn dẫn bốn dòng, không nút tô đầy (chỉ link "Làm tiếp →" trong thẻ). Sau: h1 y=174, một dòng phụ, nút "Làm tiếp bài Reading →" y=286.
* **Bao nhiêu thứ?** lượt 0: 2 khối nhưng một là vệt lặp h1; sau: 4 khối (h1, dòng phụ, nút chính, thẻ đầu). Tràn ngang: `scrollWidth` = 375.

## 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 |  |
| 2 | Navigation | partial | pass | pass | vệt đường dẫn một nhánh chỉ lặp tên trang (L5), không bấm được; nay `Shell.tsx` bỏ vệt khi nó chỉ có nhánh trỏ về chính trang |
| 3 | Layout | pass | pass | pass |  |
| 4 | Visual Hierarchy | fail | pass | pass | F1: không có nút tô đầy; nay một nút accent theo trạng thái (bài đang làm trước, rồi bài chưa làm); e2e |
| 5 | Responsive Design | pass | pass | pass |  |
| 6 | Interaction Pattern | pass | pass | pass |  |
| 7 | User Flow | partial | pass | pass | F4: nút chính đổi theo trạng thái |
| 8 | Affordance | pass | pass | pass |  |
| 9 | Feedback | pass | pass | pass |  |
| 10 | State | partial | partial | pass | chưa tải xong thì bốn thẻ giữ `Skeleton` ở chỗ nhãn trạng thái và chỗ link, không còn "Not checked" giả; e2e `ieltsAuditPass5.spec.ts` chặn API rồi thả: 4 khung chờ, 0 "Not checked", rồi 4 "Not checked" |
| 11 | Design System | pass | pass | pass |  |
| 12 | Components | pass | pass | pass |  |
| 13 | UI Patterns | pass | pass | pass |  |
| 14 | Forms | pass | pass | pass |  |
| 15 | Data Display | pass | pass | pass |  |
| 16 | Onboarding | pass | pass | pass |  |
| 17 | Empty State | pass | pass | pass |  |
| 18 | Error Handling | fail | pass | pass | trả lời thiếu `skills` làm `st.skills[...]` ném lỗi, ErrorBoundary thay cả trang bằng "Có lỗi khi hiển thị trang"; nay dòng `role=alert` + "Thử lại"; e2e |
| 19 | Accessibility | pass | pass | pass |  |
| 20 | Personalization | pass | pass | pass |  |
| 21 | Typography | partial | pass | pass | L2: đoạn dẫn bốn dòng còn một câu |
| 22 | Color | pass | pass | pass |  |
| 23 | Spacing | pass | pass | pass |  |
| 24 | Iconography | pass | pass | pass |  |
| 25 | Motion | pass | pass | pass |  |

## Lô đã sửa

| Lô | Ngày | PR | Yếu tố |
| --- | --- | --- | --- |
| 1 | 09.10.2026 | session/ui-audit-pass4 | 2, 4, 7, 18, 21 |
| 2 | 09.10.2026 | session/ui-audit-pass5 | 10 |

## Còn lại

Không còn yếu tố partial hay fail theo số đo lượt 5.