Skip to main content

Module Selection

The Module Selection interface provides a grid-based view for browsing and selecting learning modules.

Dual-Panel Layout​

Left Panel - Module Selection Grid​

Header Section:

  • Title: "Select the modules for your program"
  • Reset Filters button

Grid Layout:

  • 3-column responsive grid
  • Scrollable content for large collections

Right Panel - Program Configuration​

  • Title: "Program Configuration"
  • Drag-and-drop interface for module ordering
  • Continue button to final configuration

Interactive Features​

Module Selection​

  • Click to Select: Add modules to program
  • Remove Functionality: Remove button on selected modules
  • Visual Feedback: Immediate state changes
  • Prevent Re-selection: Selected modules not clickable

After selecting modules:

  1. Review selected modules in right panel
  2. Reorder using drag-and-drop
  3. Click "Continue" to proceed to Final Configuration