Reassign Modal | Assignment Details

Overview

The Manage Assignment, Re-assign modal interface allows educators to reassign learning content with the status ‘Complete’ to students within the RethinkEd platform.

Objectives

  • To provide an intuitive process for educators to selectively re-assign content from students.

Figma

https://www.figma.com/design/O0FDJoUbCHKQGlk3Wqq9ND/Teacher-UI?node-id=3119-40043&t=QoLZQS9PP9IfCLfk-1

Epic

Feature 193776: Manage Assignment

UI Description

  1. ‘Reassign’ button:

    • Unassign button is located in Manage Assignments in the specific content (Quiz, Video, Interactive) view or specific student view.

    • Button will be in the bottom left corner below content table and student table.

  2. Assignment Modal:

    • The modal is triggered from the "Reassign' button in the bottom left of page or the ‘Unassign’ in the ‘Action’ column of a table row.

    • Displays items to be assigned, including the lesson/activity title, grade(s), and subject.

    • By default, all resources and activities related to the lesson(s) or activities are deselected.

    • Learn, Practice, and Dive Deeper headings will display in the Lesson resource/activity selections so that the user can see which part of the lesson the resource/activity belongs to.

  • Date Selection Interface:

    • Calendar Picker

      • Description: Presents a calendar interface for users to pick a start and end date for the assignment.

      • Highlights selected dates in blue for visual confirmation

      • Input field displays the chosen start and end dates

    • Customize Date Ranges for Content

      • Description: Disables the date range calendar picker and shows the pre-defined date range from the field next to each assignable resource or activity

      • User selects date range for an assignable resource or activity and a calendar interface shows for users to pick a start and end date for the assignment.

  • Lesson Items Selection:

    • Allows users to select or deselect individual items to be included in the assignment.

    • Lesson information can be expanded or collapsed to show detailed items or only the lesson title, grade(s), and subject.

  • Resource or Activity Preview:

    • All resources and activities will be links that open a preview modal upon selecting the resource or activity.

  • Assign To

    • Description: The Classroom and Student dropdown menus are disabled because the user selects ‘Reassign’ button in bottom left page corner or in the ‘Action’ column of a table row in a specific content view or specific student view

    • Input Type: Dropdown Menu; disabled with the classroom or student pre-selected from the main page the user was viewing in manage assignments.

  • Student Selection:

    • Description: A designated area within the modal that enables users to select one or more students for the assignment.

    • Type of Input: Checkbox

    • ‘Reassign’ selected in ‘Action’ column of a table row will open the Assign modal with only the specific student pre-selected and available in the assign list.

    • ‘Reassign’ button selected in bottom left page corner will open Assign modal with students that have an assignment status as ‘Complete’.

  • Language Selection

    • Description: Allows the user to select the language the assignment will show in the student center for each assigned student

    • Type of Input: Dropdown menu

    • Dropdown Values:

      • Student Default Language

      • English

      • Spanish

  • Confirmation Message:

    • Lottie File Animation: Left aligned lottie file animation. This is used in the Vizzle confirmation modals.

    • Header: Assignment Sent!

    • Date: Date(s) of the assignment

      • If custom dates are selected display ‘Custom’

    • Students: Number of students the content was assigned to

    • Items: Content titles that were assigned from students.

User Interaction and Validation Notes

  • Modal Initiation:

    • User interaction begins when the "Reassign" button is clicked, and a version of the assign modal appears on the screen.

  • Item Selection:

    • Users can check or uncheck items to include in the assignment. A validation check ensures at least one item is selected before assignment.

  • Resource or Activity Preview:

    • User selects link of Resource or Activity in the list and the preview modal opens to display the resource/activity.

  • Student Selection:

    • Users can select students individually by classroom(s) or individual student view. The interface should validate that at least one student is selected.

    • Users can select or deselect all student in the list for classroom(s), individual by using the checkbox with the student total above the list of students.

      • If user deselects a student from the list of students, the checkbox for select all will be unchecked

  • Language Selection:

    • The default setting is “Student Default Language” which shows the default language for each student in the list of students

      • The user can change the language for a specific student for this specific assignment that would override the default student language

    • Users can select English or Spanish in the language selection to set the language for the assignment for all students.

  • Date Selection:

    • Users set the assignment duration using the calendar tool, and the system validates that the end date is after the start date.

    • Users can customize the date ranges for each selected resource or activity by clicking on the date range which will open a calendar to select a start and end date.

      • A resource or activity that is unchecked (deselected) will not have a date range and will show as “N/A”.

  • Assigning and Canceling:

    • The user commits the assignment by clicking the "Assign" button or cancels the operation by clicking the "Cancel" button.

Workflow Description

  1. Open Assignment Modal:

    • The educator clicks on the "Assign" button, prompting the assignment modal to open, showing the pre-selected lessons and their details.

  2. Set Assignment Duration:

    • The educator selects the start and end dates for the assignment from the provided calendar.

  3. Edit Assignment Contents:

    • The educator reviews the pre-selected items and adjusts the selection according to what needs to be assigned.

  4. Select Students:

    • The educator chooses the students who will receive the assignment from the Selected Students section.

  5. Select Language:

    • The educator chooses the language that the students will receive in the student center for the assignment.

  6. Finalize Assignment:

    • After reviewing all selections and dates, the educator clicks the "Assign" button to distribute the assignment to the selected students.

  7. Cancel Assignment:

    • If the educator decides not to proceed, they can click the "Cancel" button to close the modal and return to the previous screen without saving changes.

  8. Confirmation Message: Confirmation Message displays with dates of assignment, number of students, and content titles.