Assign Modal

We need to adjust the assign screen for SEL and Mental lessons so that a user can assign any item associated with a lesson on one screen.

User Story:

  • As a user, I want to preview all items associated with a lesson, so I can make a decision about which items to assign

  • As a user, I want to add start and due dates to an assignment, so I can ensure my students are completing the assignment at the correct time

  • As a user, I want to assign multiple items associated with a lesson, so I do not have to click on multiple assign buttons

Acceptance Criteria:

Design: https://www.figma.com/file/gdwMnbpudJxuzVrORrOGvd/Ed-Member-Site-UX?node-id=6903%3A638


General Concept

UI

  • At the top of the assign modal, the user will see:

    • Lesson Name

    • Lesson Tier

    • Lesson Grade

    • Lesson Domain

  • Below this, the screen will be divided into 3 sections:

    • Items to assign

    • Preview

    • Assign to

Business Rules

  • This applies to SEL and Mental Health Lessons

  • Users with permission to Lesson Library → Assign will have access to this screen.

  • Lesson Name will show the name of the selected lesson

  • Lesson Tier will show which tier(s) the lesson is associated with. This will not show for Mental Health lessons.

  • Lesson Grade will show the grade of the lesson

  • Lesson Domain will show which domain the lesson is associated with (i.e. Awareness of Self & Others)

  • The Assign Modal should fill as much of the screen as possible


Items to Assign

UI

  • When the user first visits this screen, they will see the empty state instructing them to select an item to assign

  • The user will see a list of all items that can be assigned from the Learn, Practice, and Dive Deeper , areas, as well as the Quiz and Other (i.e. Student Resource)

 

  • If there are no assignable items for a section (i.e. lesson does not have a student resource), we will show a message indicating that there is no item available to assign

  • The user will also see a tool tip explaining that this screen can be used for multiple assignments.

  • When the user clicks on an item, they will be able to complete the Assign to section

  • Once the user creates an assignment, a yellow indicator will appear next to the item name, letting the user know this item will be assigned

 

Business Rules

  • By default, all items will show as unassigned

  • The user may select one item at a time


Preview

UI

  • Once the user has clicked on an item to assign, the Preview and Assign to sections will show

  • When the user clicks on the Preview button,

  • They will see a full-screen preview of the item. The preview should be interactive, meaning the user can click through and watch the video, complete the activity/quiz, etc. When the user closes the preview, they will return to the assign modal

Business Rules

  • Flexible on how we handle this, but ideally we want the preview item modal to lay on top of the assign modal, without showing the assign modal underneath

  • When the user previews the item, we will allow them to complete the activity/video/quiz, but will not save any results.


Assign to

UI

  • In this area, the user will see the options of who to assign the item to.

  • Grade/Classroom

    • If the user clicks Grade or Classroom, they will next determine if they want to Assign or Unassign the item to all students in the selected grade.

    • Next, the user will select the grade(s) they wish to assign/unassign the item to.

    • Next, the user will select the classroom(s) they wish to assign/unassign the item to

    • The user will see a message stating No start or due date

    • Clicking on this statement will reveal a calendar. The start date will automatically select today’s date, but the user may select any date in the future. The user also has the option of selecting a due date. Clicking clear button will remove the start/due date. Once saved, these dates will show under Schedule.

    • The user may also exclude students from this assignment rule by searching for a student by name (as they do now)

  • Student

    • If the user clicks Student, they will see a list of students currently unassigned and assigned to the item

    • Users with access to a large list of students will see the number of unassigned and assigned students instead of seeing student names

    • Users may filter this list by

      • Grade - Selecting a grade will filter the list to students in the selected grade

      • Building - Selecting a building will filter the list to students in the selected building

      • Classroom - Selecting a classroom will filter the list to students assigned to the selected classroom

    • If the user moves a student to the unassigned column, that student will no longer be assigned to that item

    • If the user moves a student to the assigned column, the student will be assigned to that item.

    • In the assigned column, the user will also see the start and due date that currently exists for the student for this item. If no start and due date have been set, the user will see No due date.

    • If the user clicks on the date (or no due date message), they will see the calendar to select a start and due date. The start date will default to today’s date.

    •  

    • If the user clicks Apply, the dates will apply to that student only. If the user clicks Apply to all students, the dates will apply to all students currently under the assigned list.

  • Once the user has made any changes on this screen, a yellow dot will appear next to the item, indicating that the item will be assigned

 

  • If the user clicks the clear button, the assign to panel will revert to default state (no selections) and the yellow dot will be removed from the item

 

Business Rules

  • Grade tab will show for users marked is admin

  • Grade and Building filters will only show for user marked is admin. Users will only see the Buildings they currently have access to.

  • Users will only see the classrooms they currently have access to.

  • When viewing a list of students, any student already assigned the item will be shown under Assigned

  • Start and due dates cannot be a date in the past. They are also optional.

  • The start date determines which date the assignment will begin showing under Due Today in the student center


Save assignment

UI

  • When the user is ready to save the assignments, they will see the # of items that will be assigned next to the Save button

  • When the user clicks the Save all button, they will see a confirmation message stating X number of students have been assigned to X number of assignments

  • If there are not enough licenses to cover the assignment, the user will see an error message and the assignment will not be saved. Clicking Go back will return the user to the assign modal

Business Rules

  • We will check against licenses