Page Comparison

Overview

The Lesson Builder Content tab allows users add and organize modules within a lesson with various sections like Learn, Practice, Dive Deeper, and Teaching Resources.

Figma

https://www.figma.com/file/hq6VjWO99WfQaSzXswgVIY/Authoring?type=design&node-id=2091%3A117271&mode=design&t=MFtQPzYj1LUJzvI2-1

Epic

Feature 189034: Lesson Builder | SEL Authoring Tool

Objectives

• To allow educators to create a structured lesson plan by adding different content sections.

• To enable the addition of modules to each section of the lesson with ease.

UI Description

1. Content Tab Layout:

   • The content tab is selected, showcasing an empty state with an "Add Section" button prominently displayed.

   • The interface is divided into collapsible sections: Learn, Practice, Dive Deeper, and Related Teacher Resources.

2. Add Section Feature:

   • Description: Each "Add Section" action reveals a dropdown menu with predefined default section types, which are sequential based on lesson structure.

   • Required: Yes

   • Type of Input: Dropdown menu

   • Dropdown Menu Values:

     • Learn

     • Practice

     • Dive Deeper

     • Teaching Strategies

     • Sample IEP

     • Related Teacher Resources

3. Add Module Modal:

   • Plus buttons are situated in each section for adding new modules.

   • User clicks plus button, selects Module, and the Add Module modal fills the screen viewport, maintaining consistent height and width, with options to select modules from a list.

   • Includes a search bar, status filters (Active, Draft), and columns for thumbnails, titles, subject, and status.

   • Pagination controls for navigating through the module list.

4. Module Management:

   • Added modules display their status (Active or Draft)

   • Delete Icon

     • Allows the user to remove the module from the lesson

   • Duplicate Icon

     • Duplicates the module so that it is attached to the lesson a second time

   • Preview

     • Allows the user to preview the module as the end-user view.

   • Edit (pencil icon)

     • Opens the Module Builder with the specific module so that the user can make edits or change the information.

User Interaction and Validation Notes

1. Adding Sections and Modules:

   • When the "Add Section" button is clicked, the user is presented with a dropdown to choose the type of section.

   • The plus button within each section opens the "Add Module" modal for selecting existing modules or creating new ones.

2. Module Selection and Creation:

   • Within the modal, the user can select a module to add to the lesson or create a new module.

   • New modules are saved and automatically linked to the lesson. The lesson is linked as a dependency in the Module Builder > Dependencies tab.

3. Module Management:

   • Added modules display their status (Active or Draft) with options to delete, preview, or edit using corresponding icons.

   • User can organize modules by dragging the module above or below another module in a section.

Workflow Description

1. Initializing Lesson Structure:

   • Users begin structuring their lesson by adding sections sequentially, starting with Learn, followed by Practice, and so on.

2. Adding Modules to Sections:

   • Users populate each section by adding modules, which can be selected from existing module content or created a new module.

3. Module Creation and Linking:

   • If creating a new module, the user is transitioned to the Module Builder without leaving the lesson plan context. Upon saving, the module is automatically attached to the lesson and the user returns to the Lesson Builder > Content tab.

4. Editing and Organizing Modules:

   • Users can manage the modules within the lesson by deleting, previewing, or editing, ensuring the lesson content is up to date and correctly ordered.