Customize Goal

Owned by Felicia Mizgorski
Last updated: Sept 16, 2024
2 min read

Overview

Create a modal for the Skills Goals Library that allows the User to customize the goal they selected. Customize includes:

  • changing the name of the goal

  • selecting / deselecting / changing the quantity of objectives

  • changing the text for the objectives

User Story:

As an Admin or Teacher, I need to customize the goal I selected from the Skills bank so that the name of the goal and the quantity of objectives with customize text adequately represent the needs of the student(s).

Figma: Customize Goal

Project: 205670

UI Description:

Title

  • reads: Customize Goal

 

Goal Text with Text Box

  • title reads: Goal Text

  • Text box contains the goal selected from previous screen (Browse Skills Goal Library)

 

Check box (unselected)

  • label reads: Include Objectives

  • Upon User entry, Check box is shown as unselected

 

Checkbox (selected) with Objectives

  • shown as blue box with white check mark inside

  • shows 3 editable text boxes labeled: Objective 1, Objective 2, Objective 3

    • Default objective text is from Objectives connected to the goal chosen (existing functionality)

  • Subtraction icon

    • shown on Objective 2 and Objective 3

  • + Add Objective

    • blue text UI for adding additional objectives

 

Navigation

X (Close Modal)

  • UI to close the Customize Goal Modal

Close Button

  • White button with blue outline and blue text that reads: Close

Next Button

  • Blue button with white text that reads: Next

 

User Interactions and Validation Notes:

 

Goal Text with Text Box

  • Clicking within the Goal Text box and typing updates the goal text

  • There is no limit to the text entered and entry is truncated if necessary.

 

Check box with Objectives

  • Clicking within the check box changes the status to active

    • 3 editable text boxes are shown and prefilled with objectives attached to the goal chosen

    • Clicking inside a text box and typing updates the objective text

    • Clicking on the Subtraction icon removes the Objective and Objective Text Box

    • + Add Objective is shown when the ‘Include Objectives’ Checkbox is selected

    • Clicking on + Add Objective displays one additional Objective number and Textbox per selection

      • example text box heading: Objective 4

      • there is no limit to the number of objectives

 

Workflow Description

  • User clicks inside Goal Text box and types to edit goal text (#1)

  • User clicks inside ‘Include Objectives’ checkbox to show 3 objectives with default objectives text (#2)

  • User clicks inside individual Objective(s) text box and types to edit the objective(s).

  • User clicks on ‘Subtraction’ icon to remove an objective

  • User clicks on + Add Objective add add an additional Objective with textbox

  • User clicks on ‘Next’ button to advance to the next modal