Learning

Course Details (course_details)

The exhaustive product page for a course.

• Hero: Video preview or thumbnail image.
• Tabs:
  • About: Description, Mentor info, Key points.
  • Lessons: Accordion list of curriculum chapters.
  • Reviews: User feedback list.
• Action: Floating “Enroll Now” button.

Enrollment (course_enroll)

The confirmation screen before payment.

• Summary: Displays total price and tax.
• Payment Selection: Triggers the payment method sheet.

Video Player (video_player)

A custom player UI meant to replace the native controls for a premium feel.

• Controls: Play/Pause, Seek bar, Fullscreen toggle.
• Overlay: “Course Completed” dialog triggers at end of video.

Dashboard

My Courses (my_courses)

Displays purchased content.

• Tabs: “Ongoing” vs “Completed”.

Ongoing Course (ongoing_course)

The active learning interface where students consume content. It features a 3-Tab Layout:

1. Playlist: The curriculum view. Lists all lessons with status indicators (Locked/Unlocked/Completed).
2. Assignments: Lists quizzes associated with the course.
3. Certificates: Visual certificate preview (unlocked upon completion).

Key interactions:

• Course Completion: Triggered when all lessons are done. Displays a “Success” dialog prompting the user to leave a review or download their certificate.

Assignment (assignment)

A complete Quiz/Exam Interface for testing student knowledge.

• Quiz UI:
  • Timer: Circular countdown shows remaining duration.
  • Progress: Linear indicator tracks current question index.
  • Questions: Multiple-choice format with immediate visual selection feedback.
• Results & Analytics:
  • Scoreboard: Displays total score, correct answers, wrong answers, and skipped questions.
  • Feedback: Dynamic messages (e.g., “Great job!”, “Keep Trying”) based on performance percentage.