Skip to main content

📖 Learning Modules Journey

This journey documents how learners navigate and complete e-learning modules, including videos, articles, podcasts, and exercises.

Interactive Flow Diagram​

Click any step to see detailed information, connected features, and API endpoints.

📖Learner Journey

Learning Modules Journey

How learners navigate and complete e-learning modules including videos, articles, podcasts, and exercises.

🧭Navigate
Access ProgramLearner
View Program NavigationLearner
⚡
Select ModuleLearner
View Module PageLearner
⚡
Select E-Learning TabLearner
Select SkillLearner
⚡
📚Learn
View Skill PageLearner
Select ChapterLearner
Consume Chapter ContentLearner
⚡
Access Document ChapterLearner
View DocumentLearner
Download DocumentLearner
✅Complete
Mark Chapter CompleteLearner
🔌
Progress UpdatedSystem
⚡
Continue or CompleteLearner
Legend:
User Action
Decision Point
System Action
Notification
Milestone

Journey Summary​

AttributeValue
ActorsLearner, System
Entry PointProgram navigation or E-Learning menu
Exit PointModule/Skill completion
Typical DurationVaries by content
Steps13

Content Hierarchy​

Program
└── Module (e.g., "Communication Skills")
    ├── Coaching Sessions (optional)
    └── E-Learning Skills
        └── Skill (e.g., "Active Listening")
            └── Chapters
                ├── Chapter 1: Video
                ├── Chapter 2: Text Article
                ├── Chapter 3: PDF Document
                └── Chapter 4: Podcast

Phase Breakdown​

Phase 1: Navigate​

Finding your learning content:

  1. Access program via dashboard or menu
  2. View module list with progress indicators
  3. Select module to see contents
  4. Switch to E-Learning tab
  5. Select skill to view chapters

Phase 2: Learn​

Consuming content:

  1. View skill page with chapter list
  2. Select chapter to view
  3. Consume content based on type

Phase 3: Complete​

Finishing and tracking:

  1. Mark chapter complete (auto or manual)
  2. Progress updates across UI
  3. Navigate to next or return

Content Types​

Supported Formats​

TypeComponentAuto-Complete
TextMarkdown rendererOn view
Video<Video> (YouTube, Vimeo)On watch %
PDFContentPdfOn open
PPTXContentPptxOn view
PodcastAudioPlayerOn listen
DocumentDocument viewer/downloaderOn view/download

Video Player​

Embeds YouTube/Vimeo videos with:

  • Progress tracking
  • Full-screen support
  • Responsive sizing

PDF Viewer​

In-browser PDF viewing with:

  • Page navigation
  • Zoom controls
  • Download option

Podcast Player​

Audio player with:

  • Play/pause controls
  • Progress bar
  • Listen completion tracking

Document Viewer​

Document access with:

  • In-browser PDF viewing
  • Page navigation
  • Zoom controls
  • Download option
  • Offline access capability

Documents include:

  • Training materials
  • Worksheets and templates
  • Reference guides
  • Resource files

Key Frontend Pages​

RouteComponentPurpose
/programs/[programId]/modules/[moduleId]ModuleViewModule overview with tabs
/programs/[programId]/modules/[moduleId]/skills/[skillId]SkillViewSkill with chapter list
/programs/[programId]/modules/[moduleId]/skills/[skillId]/chapters/[chapterId]ChapterContentIndividual chapter content
/programs/[programId]/modules/[moduleId]/skills/[skillId]/podcastPodcastPagePodcast player page

Progress Tracking​

How Progress is Logged​

// When user completes a chapter
await logElearningReading({
  userId: user.id,
  chapterId: chapter.id,
  skillId: skill.id,
  moduleId: module.id,
  programId: program.id,
  completedAt: new Date().toISOString()
});

Progress Calculation​

// Skill progress
const skillProgress = completedChapters / totalChapters * 100;

// Module progress
const moduleProgress = completedSkills / totalSkills * 100;

// Program progress
const programProgress = completedModules / totalModules * 100;

AI-Tailored Descriptions​

Chapters may display personalized "tailored descriptions" based on:

  • User's role and goals
  • Previous session content
  • Coach's recommendations

This is fetched via:

const tailoredDescription = await queryTailoredDescription({
  chapterId,
  userId,
  context: { goals, previousLearning }
});

Key Integration Points​

Internal APIs​

  • GET /skills/:id - Fetch skill with chapters
  • POST /growth-actions - Log chapter completion
  • GET /user-program-progress/:userId - Get progress data

Frontend Hooks​

  • useProgram() - Current program data
  • useGetModuleSkillById() - Skill details
  • useUserProgramProgress() - Progress tracking
  • usePodcastProgress() - Podcast completion

← Back to Learner Hub