Overview

The updated quiz assignment UI has been updated as part of 0.18 to make better use of page space during the quiz creation/editing workflow.

We are moving the in-page assignment to a side panel, for consistency and also for saving space.

The "recipients" can be:

• 'Entire class'
• any groups that the coach has created
• individual learners
• some combination of groups and individual learners

See complete Figma designs for detailed implementation

Acceptance criteria

Side panel:

1. The side panel does not need to be its own route, it can just be a view if open. If you refresh the page, state does not need to persist if it is unsaved.
2. The header should be an h1 but match the size of text in the spec
3. Overall, this should align with the kolibri demo version closely, except be located in the side panel rather than in the main body

• Only learners in the class are displayed
• Individual learners are not active for selection if they are already included in a selected group
• Coaches can search for a learner
• The same pagination should be used

Underlying assignment:

1. There are no changes to the underlying assignment behavior for groups, entire class, etc.
2. Assignment behavior for not-started, vs. started quizzes remains the same.
3. The "ungrouped" category can be thought of as a list of individual learners to assign to, rather than a separate "group". The adHocLearners can be used for both selected individual learners and the "all ungrouped".

Other considerations:

1. A validation must be run to ensure the quiz is assigned to learners. If the coach has selected the radio button for "groups and individual learners" but not made their selection, the quiz should not save and an alert banner should appear
2. Make sure to review the aria-live and focus reset guidance included in the figma around the alert messages. Remember that the focus should return to the same place ("Select") that launches the side modal
3. After a quiz is "ended" the "Edit Details" option is removed from the options menu (see Figma)