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
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
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.
Entering and Styling Text:
The educator types in the lesson's description and styles it as needed using the editor.
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.
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.
Displaying in Lesson Overview:
The lesson plan description displays neatly below the lesson title in the end-user lesson overview.