Assignment Details

Overview

The Assignment Details screen allows educators to view specific assignment details, monitor completion status, and perform batch actions on assignments.

Figma:

https://www.figma.com/file/O0FDJoUbCHKQGlk3Wqq9ND/Teacher-UI?type=design&node-id=659%3A8921&mode=design&t=8tSBnP5kKWygQifG-1

Epic:

Feature 193776: Manage Assignment

UI Description

1. Assignment Detail Section:

   • Displays the assignment title and metadata, including the grade, tiers, subject domain, main topic.

   • Segmented controls or tabs for navigating between "Content" and "Students" details (Lessons and Activity views only)

   • Search bar to search by Student, Status, Teacher, Grade

   • Filters to refine table list results (Specific Content Selected - Quiz, Video, Interactive).

     • Grade: Pre-K, Kindergarten, 1st Grade, 2nd Grade, 3rd Grade, 4th Grade, 5th Grade, 6th Grade, 7th Grade, 8th Grade, 9th Grade, 10th Grade, 11th Grade, 12th Grade, Not Applicable

     • Status: For Review, Complete, In-Progress, Not Started

       • Status Filter is multi-select. User can select one or more statuses and each status will display as a separate filter chip.

     • Assigned By: List of All Team Members that have last assigned an assignment.

       • “Inactive Teacher” will display if the teacher has left the school.

     • Assigner Role: Student Self-Assigned Only, Teacher Assigned Only

2. Date Range Selection:

   • A dropdown menu selection with calendar picker and dates display in input field as Month DD, YYYY (Example: Apr 10, 2023 - Apr 24, 2024)

   • User can select date range link or Edit Dates button to open a calendar picker to change the dates to have the assigned content in those dates display.

   • Dropdown menu values next to calendar picker:

     • School Year

     • Last 7 days

     • Last 14 days

     • Last 30 days (default)

     • Last 90 days

     • Last 180 days

   • User can select a custom date range using the calendar picker.

3. Progress Indicators

   • Progress indicator that displays the Student complete percentage for the specific assignment.

4. Assignment Table:

   • Table content for a specific assignment resource/item/activity displays Date Range of assignment, Student Name, Grade of Student, Status of Assignment, Assigned By, Action.

   • Status: For Review, Not Started, Complete, In-Progress

5. Action Buttons: Corresponding to each assignment, which includes:

   • Reassign (opens assign modal)

   • View (opens Review modal with ‘Reviewed’ button selected)

   • Review (opens review modal)

   • Unassign (opens unassign modal)

6. Functional Controls:

   • Pagination controls to navigate through multiple items.

   • "Go Back" link to navigate to the previous page.

User Interaction and Validation Notes

1. Progress Indicators:

   • 0% is represented by an empty bar

   • 100% is represented by a filled orange bar.

2. Assignment Overview:

   • Users can see the key details of an assignment at a glance, including assignment dates, student, student grade, completion metrics, and who it was assigned by.

3. Filtered Table View:

   • If user selected ‘Complete’ or ‘Not Complete’ link on Lesson or Activity page for the specific content, they will be taken to the content page with the status filters selected.

   • Clicking on the number in the ‘Complete’ column of an assignment row will navigate the user to the specific item assignment with the ‘Complete’ and ‘For Review’ filters pre-selected.

   • Clicking on the number in the ‘Incomplete’ column of an assignment row will navigate the user to the specific item assignment with the ‘Not Started’ and ‘In-Progress’ filters pre-selected.

   • Individual Filter chips display for each status

4. Content Interaction:

   • The table allows users to view and interact with the assigned content, checking completion status for each item.

   • User selects Student name to navigate to the Manage Assignments > Student page.

5. Action Modals: Each action (Reassign, View, Review, Unassign) should open its respective modal window.

   • Reassign and View action buttons display for a completed assignment status

   • Review action button displays on a ‘For Review’ assignment status

   • ‘Unassign’ action button displays on a ‘Not Started’ or ‘In-Progress’ assignment status.

6. Unassign Actions:

   • Users can unassign content from students by selecting the Unassign button in the Action table column, which will open the Unassign modal. https://rethinkautism.atlassian.net/l/cp/MUzUEYGL

7. Navigation:

   • Users can return to previous screens or move between tabs within the assignment details using provided links and controls.

Workflow Description

1. Accessing Assignment Details:

   • Educators navigate to the Assignment Details screen from the Assignments overview to manage a specific assignment.

2. Monitoring Completion:

   • Educators review completion status for each student within the assignment.

   • The educator uses the search function to quickly locate specific students.

3. Managing Assignments:

   • Educators select the content and perform actions like unassigning from students.