DOL English Exercise Bank - Shared Structure

DomainsDOL EnglishUX1.172 words6 min read

activebyDOL Product Design

DOL English - Exercise Bank Shared Structure (Home & Discovery)

Reading Rule

Nếu câu hỏi là full navigation canon hoặc owner map của Exercise Banks, đọc ../../ENG_Navigation_00_Overview.md trước rồi tới ./HOME_ENG_Exercise_Banks_00_Overview.md.
File này chỉ giữ shared structure và route contract chung cho bank pages.

Shell Fit

Exercise Bank là shared launcher pattern cho nhu cầu tự chọn bài trong kho bên trong Home & Discovery.
Shared structure này chỉ mô tả selection surface và handoff vào PRA; nó không tạo owner flow song song với Luyện tập.

Legacy Source Key Note

discover_menu là source key nội bộ cho backward-compatible entry tracking.
Khi mô tả UX hiện tại, không dùng nó như nav label canon; đọc nó như discovery/program entry.

Purpose

Vấn đề: Các kho luyện tập giữa chương trình/kỹ năng có cấu trúc tương đồng, nếu viết lặp sẽ khó bảo trì.
Đối tượng chính: Team soạn tài liệu và team triển khai các trang Exercise Bank.
Tín hiệu thành công: Mọi bank dùng chung một contract cấu trúc; file theo chương trình chỉ còn mô tả khác biệt nội dung.

Elements / Scope

Shared page anatomy (dùng chung cho mọi bank):
- Bank Identity Header: là vùng badge chương trình + title + subtitle + KPI tóm tắt; mục đích là định vị user đang ở kho nào; hoạt động bằng cách giữ context program/skill xuyên suốt.
- Stats Snapshot Panel: là khối thống kê nhanh (Cộng đồng / Của bạn); mục đích là cho user đủ context trước khi lọc/chọn bài; hoạt động bằng toggle view dữ liệu mà không thay đổi cấu trúc list.
- Filter Rail: là cột bộ lọc trái; mục đích là thu hẹp danh sách bài nhanh; hoạt động theo filter profile của từng bank (khác option nhưng cùng cơ chế lọc).
- Search + Sort + View Controls: là hàng điều khiển trên list; mục đích là tìm nhanh, đổi thứ tự và đổi cách nhìn; hoạt động bằng query state đồng bộ với list.
- Exercise Grid/List: là vùng danh sách bài tập; mục đích là giúp user quét và vào bài nhanh; hoạt động theo metadata card + CTA trạng thái.
- Exercise Card Actions: là nhóm nút trên card (Làm bài, Làm tiếp, Bài đã làm, lưu bài, overflow); mục đích là đưa user vào hành động phù hợp trạng thái; hoạt động bằng mapping progress_state -> CTA.
- Footer: là điều hướng cuối trang; mục đích là tránh dead-end; hoạt động như lối đi phụ, không thay flow chính vào attempt.
Access entry contract (nguồn truy cập bank):
- hub_landing: đi từ Self-study Hub.
- program_landing: đi từ landing riêng từng chương trình.
- discover_menu: đi từ discovery/program entry.
- direct_link: deeplink trực tiếp.
Variation contract (điểm khác nhau giữa các bank):
- filter_profile_id: profile bộ lọc theo skill/program.
- catalog_profile_id: profile danh mục bài tập.
- skill_tag: context kỹ năng cụ thể (reading, listening, writing, speaking, …).

Logic

Bank role rule:
- Exercise Bank sở hữu câu hỏi Nếu tôi muốn tự chọn, tôi sẽ làm bài nào trong kho này?
- Bank không sở hữu câu hỏi ưu tiên program/module và không sở hữu diagnosis tiến bộ.
- Bank cũng không sở hữu Attempt hay Result; hai flow này luôn thuộc Practice Flow.
Mọi bank kế thừa cùng contract cấu trúc và route, chỉ thay content profile.
Nguồn truy cập hợp lệ vào bank gồm Hub, Program Landing, discovery/program entry, và deeplink.
Từ discovery/program entry, bank phải mở đúng program + skill đã chọn (nếu có).
Với các group filter dạng task/part (ví dụ Writing/Speaking), mặc định áp dụng single-select.
Filter logic:
- Trong cùng nhóm filter, option có thể single hoặc multi-select tùy profile.
- Giữa các nhóm filter, áp dụng kết hợp để thu hẹp danh sách.
Card action logic:
- not_started -> Làm bài
- in_progress -> Làm tiếp
- done -> Bài đã làm
Click CTA card -> PRA Attempt; submit -> PRA Result; quay lại bank phải giữ filter/search/sort context.
Các rule thống kê sâu vẫn không nằm ở bank pages (thuộc Learning Management).
Stats/teaser trong bank chỉ phục vụ việc chọn bài, không được kéo trang thành challenge board hoặc analytics dashboard.

UI / Behavior

Nhịp trang chuẩn: Header -> Stats -> Filter/Search/Sort -> Exercise List.
Filter rail ưu tiên khả năng quét nhanh; search/sort phản hồi trực tiếp trên cùng page.
CTA chính trên card phải đưa user vào attempt trong một bước.
Trạng thái card cần nhận diện nhanh bằng badge + label CTA.
User quay lại từ attempt/result sẽ giữ context gần nhất (filter, search, sort, view).

Data model / API touchpoints

Required route params cho entry vào PRA:
- entry_source (hub_landing | program_landing | discover_menu | direct_link)
- program
- skill
- bank_id
- exercise_id
- returnTo
Required list state params:
- filter_profile_id
- sort_key
Optional params:
- difficulty
- challenge_id
- search_query
- view_mode
- saved_only

Dependencies / Integration

Practice Flow: nhận route vào attempt/result.
Learning Management: nhận sync sau result.
Vocabulary: nhận payload gợi ý nếu bài có feature tương ứng.
Home Header / discovery/program entry: nguồn điều hướng vào bank theo program + skill.

References

Change log

2026-03-26: Thêm Reading Rule và làm rõ discover_menu chỉ là source key legacy; UX hiện tại đọc nó như discovery/program entry.
2026-03-11: Chốt bank là page self-browse selection; đổi role của stats sang selection context, không cạnh tranh với program priority hay LM diagnosis.
2026-02-08: Bổ sung rule single-select cho filter group kiểu task/part (Writing/Speaking).
2026-02-08: Bổ sung contract truy cập bank từ hub_landing, program_landing, discover_menu, direct_link.
2026-02-08: Chuẩn hóa anatomy trang bank theo thiết kế thực tế (header, stats panel, filter rail, search/sort, card action states).
2026-02-07: Tạo contract cấu trúc dùng chung cho toàn bộ Exercise Bank pages để giảm lặp tài liệu.