Exercise Detail Done Xem Diem UI Concept

KIDEX-S03_exercise_detail_done_xem_diem_UI_CONCEPT

Global Context

• Feature: KID LMS Exercise.
• Screen ID: KIDEX-S03.
• Lane: exercise detail.
• State: completed / score visible.
• Source anchors: [SRC-002] KID_LMS_Exercise_Home, [SRC-003] KID_LMS_Exercise_Flow, [SRC-004] KID_LMS_Course_Management_Flow.

Product & User Goal

• Product summary: Đây là state Done / Xem điểm bên trong Exercise Detail, nơi user xem kết quả ngắn gọn rồi quay lại list với progress đã cập nhật. [SRC-003]
• User job-to-be-done: Biết mình làm được đến đâu và biết bấm gì tiếp theo. [SRC-003]
• Business outcome: đóng vòng lặp submit -> thấy điểm -> quay lại list -> mở bài kế tiếp. [SRC-002] [SRC-003]

Screen Context In Flow

• Entry: User vừa submit thành công từ state Do exercise. [SRC-003]
• Exit: User quay lại Exercise Home, mở bài kế tiếp, hoặc làm lại. [SRC-002] [SRC-003]
• Back behavior: quay về Exercise Home với item hiện tại đã đổi state và score hiển thị sẵn trên card. [SRC-002]

Core Question

• Mình vừa làm xong rồi, điểm của mình thế nào và làm gì tiếp theo?

Information Hierarchy

• Celebration Hero
  • xác nhận đã xong bài và tạo reward moment ngắn.
• Completion / Score Block
  • kết quả ngắn gọn; score là phần quan trọng nhưng không đi trước completion signal.
• One Key Takeaway
  • 1 điều cần nhớ, rất ngắn.
• Next Step Block
  • bài kế tiếp hoặc CTA quay lại list.

CTA Hierarchy

• Primary CTA: Quay lại danh sách bài
• Secondary CTA: Xem bài tiếp theo
• Optional tertiary CTA: Làm lại

Interaction Rules

• Vừa render state này xong:
  • hệ thống cập nhật progress cho Exercise Home,
  • hệ thống cập nhật progress lane exercise cho Course Detail. [SRC-002] [SRC-003] [SRC-004]
• Nếu user quay lại list:
  • card bài hiện tại hiển thị Xem điểm hoặc Làm lại.
• Nếu có bài kế tiếp phù hợp:
  • chỉ gợi ý 1 bài kế tiếp, không hiển thị nhiều recommendation song song. [SRC-003]

Required States

• success
  • score và CTA đã sẵn sàng.
• score_pending
  • chỉ dùng khi engine chưa trả score ngay; copy ngắn Đang chấm bài.
• error
  • thông báo ngắn + CTA quay lại list an toàn.

Component Tree

• Top app bar
• Completion hero
• Score card
• Key takeaway card
• Action cluster

Visual Direction

• Tông tích cực, ấm, vui, nhưng không kéo quá dài thành màn chúc mừng tách biệt.
• Completion hero đi trước, score block đứng ngay sau để user vẫn thấy kết quả nhanh.
• Phần support lùi xuống sau; không dựng dashboard phân tích nặng như flow English. [SRC-003]

Copy & CTA

• Title gợi ý: Con làm xong rồi
• Score label: Kết quả của con
• Primary CTA: Quay lại danh sách bài
• Secondary CTA: Xem bài tiếp theo
• Retry CTA: Làm lại

Constraints

• Không biến state này thành result hub hoặc analytics hub.
• Không nhồi quá nhiều explanation.
• Không tách khỏi Exercise Detail; đây là state tiếp theo của cùng screen family. [SRC-003]

Success Criteria

• User nhìn vào là thấy ngay bài đã xong và điểm hiện tại.
• User quay lại list và thấy card cùng summary đã cập nhật.
• Course Detail phản ánh lại progress mà không cần reload rối.

Appendix: Facts & Constraints

• Fact: Done / Xem điểm là state trong Exercise Detail. [SRC-003]
• Fact: CTA chính sau khi xong bài là quay lại Exercise Home. [SRC-003]
• Constraint: progress update phải phản ánh ở cả Exercise Home và Course Detail. [SRC-002] [SRC-003] [SRC-004]