Overview
The Focus Area Builder Content tab allows users add and organize Focus Area card sections, with various sections like What Is It?, How Does it Work?, Application, Materials.
Figma
Epic
Objectives
To allow educators to create a structured Focus Area card by adding different content sections.
UI Description
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:
What Is It?
How Does It Work?
Application
Materials
Add Section Feature:
Description: Each "Add Section" action reveals a dropdown menu with predefined default section types, which are sequential based on card structure.
Required: Yes
Type of Input: Dropdown menu
Dropdown Menu Values:
What Is It?
How Does It Work?
Application
Materials
WYSIWYG Text Editor
Each Section has a WYSIWYG Text Editor
Section Management:
Added Focus Area card sections display
Delete Icon
Allows the user to remove the section from the Focus Area card.
Preview
Allows the user to preview the Focus Area card as the end-user view. (HTML display of card)
Click and Drag Arrangement Feature:
User can click and drag a section to move it above or below another section on the page.
User Interaction and Validation Notes
Adding Sections:
When the "Add Section" button is clicked, the user is presented with a dropdown to choose the type of section.
Adding Text in WYSIWYG Text Editor
User enters and styles text entries in text editor to author content that will display to the end-user in the Intervention Library.
Workflow Description
Initializing Focus Area Structure:
Users begin structuring their Focus Area card by adding sections sequentially, starting with What Is It?, followed by How Does It Work?, and so on.
Editing and Organizing Focus Areas:
Users can manage the Focus Areas within the Focus Area Builder by deleting, previewing, or editing, ensuring the focus area content is up to date and correctly ordered.