Lesson Plan tab

Overview

The “Lesson Plan" tab will allow internal RethinkEd content creators the ability to create descriptions for the Lesson Plan text.

User Story

As a RethinkEd content creator, I need to create a SEL Lesson so that I can provide more resources for the Lesson Library. 

Figma

https://www.figma.com/file/hq6VjWO99WfQaSzXswgVIY/Authoring?type=design&node-id=2090%3A107343&mode=design&t=emVRMcQrNkZ6i3Ct-1

Epic

Feature 189034: Lesson Builder | SEL Authoring Tool

UI Description

Lesson Plan Tab:

  • When selected, the user can create or edit the lesson plan description.

Text Input Field:

  • The main input field is presented prominently on the screen for users to type the lesson plan description.

  • The text input field contains a WYSWYG editor that has functionality to insert a three-column table.

  • Add Rethink Blue (386DBD) to the font color options in the text editor.

Objective Input Field:

  • Objective header will show above the multi-line text input field.

  • Text entry input field that allows for multiple lines of text to show without hiding the text.

Essential Question Input Field:

  • Essential Question header will show above the multi-line text input field.

  • Text entry input field that allows for multiple lines of text to show without hiding the text.

Vocabulary Input Fields:

  • Vocabulary header will show above the text input fields.

  • Each Vocabulary word will have two text input fields:

    • First input field is for the vocabulary word.

    • Second input field is for the vocabulary word definition.

  • Add Word button adds “Word” and “Definition” text boxes for the user to enter the vocabulary word and definition.

  • User is able to delete a vocabulary word and definition by selecting the “X” next to the word and definition.

  • The Vocabulary word will display in the end-user Lesson Plan details page. The Vocabulary Definition will show when the user hovers over the vocabulary word.

Confirmation Message:

  • Upon saving, a confirmation message appears to notify the user of a successful action.

User Interaction and Validation Notes

Module Description Entry:

  • The user can type directly into the text input field and style their content using the WYSIWYG editor's tools.

Table Insertion:

  • Users can insert a three-column table by selecting the appropriate icon from the editor's toolbar.

  • The system should check that the table is correctly inserted with three distinct columns.

Display of Objective, Essential Questions, Vocabulary Sections:

  • The text input in the Objective, Essential Questions, and Vocabulary sections will display in the end-user Lesson Plan details page.

  • If the text input field is not completed (blank), the section that is not filled out (blank) will be hidden in the end-user Lesson Plan details page.

  • The Vocabulary word will display in the end-user Lesson Plan details page. The Vocabulary Definition will show when the user hovers over the vocabulary word.

Hover State Text Within Editors:

  • User should be able to define what text they want to have as a hover state pop-up when entering text in the text editor.

    • User has ability to add multiple hover states in the same text editor. User cannot assign multiple hover states to a single word or phrase.

  • User can enter the text that goes in the hover state pop-up message.

  • User has visual indication to show they are able to hover and preview the additional information.

Save Confirmation:

  • The "Save" button must trigger the action to store the entered information.

  • A green "Success" message should appear in the bottom right to validate that the lesson plan description has been saved correctly.

Workflow Description

  1. Initiating Lesson Plan Creation:

    • The educator selects the "Lesson Plan" tab and a text input field displays with a WYSIWYG editor that has an array of text editing options.

  2. Entering and Styling Text:

    • The educator types in the lesson's description and styles it as needed using the editor.

  3. Structuring the Lesson Plan:

    • To add structured sections, the educator inserts a three-column table for Objective, Essential Question, and Vocabulary directly below the module description.

  4. Saving the Plan:

    • Once editing is complete, the educator clicks "Save." The system processes the input and displays a "Success" confirmation message, indicating the information is saved.

  5. Displaying in Lesson Overview:

    • The lesson plan description displays neatly below the lesson title in the end-user lesson overview.