Exercise Detail Do Exercise UI Concept

KIDEX-S02_exercise_detail_do_exercise_UI_CONCEPT

Global Context

• Feature: KID LMS Exercise.
• Screen ID: KIDEX-S02.
• Lane: exercise detail.
• State: active attempt.
• Source anchors: [SRC-001] KID_LMS_Exercise_00_Overview, [SRC-002] KID_LMS_Exercise_Home, [SRC-003] KID_LMS_Exercise_Flow.

Product & User Goal

• Product summary: Đây là state Do exercise bên trong Exercise Detail, nơi user tập trung làm bài ngắn, ít áp lực, và có thể resume nếu dở dang. [SRC-001] [SRC-003]
• User job-to-be-done: Làm xong bài tập nhanh, không bị rối, không mất tiến độ nếu thoát ra giữa chừng. [SRC-003]
• Business outcome: tăng completion rate và giảm abandon khi bài còn ngắn hoặc user bị gián đoạn. [SRC-001] [SRC-003]

Screen Context In Flow

• Entry: User chọn 1 bài từ Exercise Home. [SRC-002] [SRC-003]
• Exit: User submit để sang Done / Xem điểm, hoặc thoát ra rồi quay lại tiếp tục. [SRC-003]
• Back behavior: nếu thoát trước khi nộp, giữ draft và khi quay lại Exercise Home card phải hiện Làm tiếp. [SRC-002] [SRC-003]

Core Question

• Mình làm xong bài này như thế nào một cách dễ hiểu nhất?

Information Hierarchy

• Header
  • back CTA,
  • tên bài,
  • lesson context ngắn,
  • progress.
• Main Exercise Stage
  • chỉ chứa nội dung bài và tương tác chính.
• Support Strip
  • hint nhẹ nếu có,
  • trạng thái đang lưu khi cần.
• Bottom Action
  • CTA Nộp bài.

Layout Intent

• Trọng tâm là vùng làm bài.
• Header và support phải yên, không lấn át content.
• Không dùng layout giống online test hoặc test formal. [SRC-001] [SRC-003]

Interaction Rules

• Auto-save bật mặc định. [SRC-003]
• Nếu user thoát giữa chừng:
  • draft được giữ,
  • card tương ứng trong Exercise Home đổi sang Làm tiếp. [SRC-002] [SRC-003]
• Nếu còn câu trống:
  • dùng nhắc ngắn khi submit,
  • không chặn cứng bằng modal nặng. [SRC-003]
• CTA chính luôn là Nộp bài.

Required States

• loading
  • skeleton cho header + content stage.
• active
  • render bài đang làm.
• saving
  • hiển thị tín hiệu nhẹ Đang lưu.
• submit_retry_needed
  • báo ngắn, giữ nguyên đáp án, CTA Thử nộp lại. [SRC-003]

Component Tree

• Top app bar
• Context row
• Exercise canvas
• Hint / save status strip
• Sticky primary CTA bar

Visual Direction

• Tone: vui nhưng bình tĩnh.
• Bề mặt ưu tiên card lớn, vùng chạm rộng, ít chrome.
• Màu nhấn chỉ phục vụ tiến độ và CTA.
• Tránh confetti, gamification nặng, hoặc dữ liệu phụ làm nhiễu.

Copy & CTA

• Primary CTA: Nộp bài
• Exit copy: Thoát và làm tiếp sau
• Save signal: Đang lưu
• Retry signal: Nộp chưa thành công, thử lại

Constraints

• Không nhảy sang hub khác trong lúc làm bài.
• Không thêm multiple CTA ngang nhau ở đáy màn.
• Không hiện score trước khi user submit.
• Không dùng ngôn ngữ áp lực như thi thử hoặc countdown formal.

Success Criteria

• User hiểu bài và thao tác trong lần nhìn đầu.
• Draft không mất nếu rời màn.
• Submit đưa user sang state Done / Xem điểm mà không tạo dead-end.

Appendix: Facts & Constraints

• Fact: Exercise Detail có state Do exercise và Done / Xem điểm. [SRC-003]
• Fact: baseline behavior gồm auto-save, resume, untimed, và submit chỉ finalize một lần. [SRC-003]
• Constraint: KID flow không dùng ngôn ngữ/UI kiểu formal test. [SRC-001] [SRC-003]