Focus Areas Content Tab | Goals & Interventions

Owned by Mary DelPiano
Last updated: May 06, 2024
2 min read

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

https://www.figma.com/file/hq6VjWO99WfQaSzXswgVIY/Authoring?type=design&node-id=4325%3A55151&mode=design&t=gVpC9Qw8XtPhWDm3-1

Epic

 

Objectives

  • To allow educators to create a structured Focus Area card by adding different content sections.

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:

      • What Is It?

      • How Does It Work?

      • Application

      • Materials

  2. 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

  3. WYSIWYG Text Editor

    • Each Section has a WYSIWYG Text Editor

  4. 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

  1. Adding Sections:

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

  2. 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

  1. 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.

  2. 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.