LearnPath

Navigating the Editor

Introduction

In LearnPath UGC, there are three main interfaces for creating and managing content:

1. Path Editor — Organize multiple Rooms into a cohesive learning journey and optionally attach a certificate.
2. Room Editor — Create and arrange steps in a single “Room” of study, define difficulty, and set premium access.
3. Step Editor — Build the core learning content with a rich-text editor, along with interactive questions and answers.

1. Path Editor

The Path Editor lets you create a learning path that can contain multiple Rooms. You can also upload a certificate PDF (optional) to provide learners with a completion certificate.

  • Path List View: Shows all paths you’ve created, allowing you to edit or toggle their published status.
  • Add/Edit Path Page: Set the path’s title, description, intro content, and attach existing Rooms in a custom order. You can also specify an image banner and upload a certificate PDF.
Path List Example
path-edit-page

Below is a snippet from the UGCEditorPaths component. It fetches a list of paths and displays them in a table, allowing you to:

  • Click “+Add Path” to create a new path
  • Toggle the published setting via a dialog
  • Edit or update a path’s details

2. Room Editor

A Room is a container for steps. You can upload a 1:1 icon image, specify difficulty (Easy/Medium/Hard), and configure whether the Room is premium (paid) or free.

  • Room List View: Lists all your Rooms. You can create new Rooms or toggle published status similarly to Paths.
  • Add/Edit Room Page: Attach “Steps” in a chosen order, set a difficulty level, and optionally mark it as premium. Once the Room is saved and published, it can be included in a Path.
Room Creation Example
Room Creation Example

The AddRoomPage and EditRoomPage components let you:

  • Upload an icon image (square ratio)
  • Set title, description, and difficulty fields
  • Attach steps in a custom order
  • Preview your room to see how it looks to learners

3. Step Editor

Steps are the smallest unit of learning content. They are created with a powerful rich-text editor that allows you to format text, insert images or YouTube videos, and add interactive questions and answers.

  • Step List View: Shows all your created steps. Each step can be opened for editing or assigned to a Room.
  • Add/Edit Step Page: Use the Tiptap-based editor for text formatting (bold, italic, underline, highlight, code blocks, and more). You can also add quiz-style questions with correct answers and placeholders.
step-list-page

In RichTextEditor, you’ll find:

  • Toolbar actions for headings (h1, h2, h3), lists (bulletList / orderedList), code blocks, etc.
  • Color and highlight pickers (Color, Highlight extensions).
  • Insert link, image, or embedded YouTube videos.
  • A question-and-answer section with placeholders (e.g., “abc efg” → “*** ***”).
Step Editing Example
Step Editing Example

This approach lets you create interactive learning material, from plain text tutorials to rich quizzes with immediate feedback.