Assign Module

Overview

The Assign feature allows educators to assign modules and module content to students from either the Lesson Library > Module Tab or the Module Overview page and manage the materials included in the assignment.

Figma

https://www.figma.com/file/O0FDJoUbCHKQGlk3Wqq9ND/Teacher-UI?type=design&node-id=263%3A34355&mode=design&t=woJJu7ywh08eGjbi-1

Epic

Feature 193775: Lesson Library

UI Description

  • Assignment Modal:

    • The modal is triggered from the "Assign" button found in the Lesson Library > Module tab or Module Overview page.

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

    • By default, all resources and activities related to the lesson(s) are pre-selected.

  • 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.

  • Required Instruction:

    • This is a checkbox only shown to districts who have the permission ‘Required Instruction’ enabled. (Broward and Palm Beach). This allows users to mark specific assigned items as ‘Required’ and will prioritize the items in the student center.

  • Assign To

    • Description: Allows the user to select the target students of the assignment.

    • Input Type: Dropdown Menu

    • Dropdown Values:

      • Building (admin only):

        • Dropdown value (multi-select): Life of all buildings that the admin is associated with.

      • Grade

        • Secondary Dropdown values (multi-select): 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

        • Only include grades that have students assigned to the logged-in user.

        • Admin Building Selected: Include grades that are in the school(s) selected.

      • Classroom

        • Secondary Dropdown values (multi-select): List of all classrooms that the team member is associated with

      • Students

  • 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

  • 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

  • Assign Confirmation

    • Description: A confirmation message displays once the user selects ‘Assign’ button in Assign modal

    • Lottie file animation left aligned in container

    • Header: Assignment Sent!

    • Dates: Display date range for the assignment. If the user selected custom date ranges, display ‘Custom’

    • Students: Display number of students the assignment was assigned to

    • Items: Title of Content items assigned in assignment

User Interaction and Validation Notes

  • Modal Initiation:

    • User interaction begins when the "Assign" button is clicked, and the modal appears on the screen.

  • Modal Display:

    • ‘Assign’ modal will display to fit the view port of the screen.

    • User scrolls within the modal to view more information details, while the height does not expand more than the viewport of the screen.

    • The ‘Cancel’ and ‘Assign’ buttons will always be visible 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.

  • Required Instruction:

    • This is a checkbox only shown to districts who have the permission ‘Required Instruction’ enabled. (Broward and Palm Beach). This allows users to mark specific assigned items as ‘Required’ and will prioritize the items in the student center.

  • Student Selection:

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

    • Users can select or deselect all student in the list for grade(s), 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”.

  • Assign To Defaults:

    • Educator: The first time the educator opens an assign modal, the default will be Classroom with the first Classroom in the list selected and all students pre-selected. After the first time, the default selection will show the last input by the educator.

      • Example: Educator selected students and the list of all pre-selected students will show. Educator selected Classroom and one or more classrooms and these will be pre-selected with the students shown below.

    • Admin: The admin default will be All buildings, Grade, and the grades for the assigned building(s) pre-selected. The list of students will also be pre-selected below the selection.

  • Assigning and Canceling:

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

    • Confirmation screen displays once the user selects ‘Assign’ 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:

    • Once the user selects ‘Assign’ button, the ‘Assignment Sent!’ confirmation modal displays.

Conclusion

This will create of a user-friendly and efficient module assignment feature within the educational platform that facilitates the educators' management of module assignments, thereby enhancing the learning experience for students.