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
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
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.
Progress Indicators
Progress indicator that displays the Student complete percentage for the specific assignment.
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.
Status: For Review, Not Started, Complete, In-Progress
Functional Controls:
Pagination controls to navigate through multiple items.
"Go Back" link to navigate to the previous page.
User Interaction and Validation Notes
Progress Indicators:
0% is represented by an empty bar
100% is represented by a filled orange bar.
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.
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 filter selected.
Complete displays status: Complete
Not Complete display statuses: Not Started, In-Progress, For Review
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.
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
Navigation:
Users can return to previous screens or move between tabs within the assignment details using provided links and controls.
Workflow Description
Accessing Assignment Details:
Educators navigate to the Assignment Details screen from the Assignments overview to manage a specific assignment.
Monitoring Completion:
Educators review completion status for each student within the assignment.
The educator uses the search function to quickly locate specific students.
Managing Assignments:
Educators select the content and perform actions like unassigning from students.