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:
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 an additional Objective number and Textbox
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
User clicks inside ‘Include Objectives’ checkbox to show 3 objectives with default objectives text
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