Update existing "randomized" quiz selection workflow UI with new helper text and components

[marcellamaki]

Overview

As part of the iterative updates to quizzes, we are making some adjustments to the "randomization" behavior of quiz creation, and making the workflows clearer to the user and more flexible.

For the first portion of this work, we will begin by refactoring and doing some UI adjustments to what is more or less the "exiting" behavior, with some small changes. This can be thought of as the "random question selection" or "choose my questions for me, from the selected resources."

This work is a combination of refactoring where needed (ideally in a minimal way) while also retaining some of the existing functionality. We are not trying to rebuild quizzes from scratch 😄

Tasks

Please take a look at the Figma (see "Default - question selection randomized") as the flow is clearer on the Figma page.

• Update the side panel to use the newly updated "resource selection" component as a subpage, following the component structure and nested routes pattern established in lessons
• Integrate the "shopping cart" resource preview, using the existing component and abstracting where needed, throughout the workflow on the bottom bar
• Make any small adjustments to the UI in terms of helper text and overall component layout. This should be clearer from the figma, but most notable changes will be when banners/alerts display. Using kolibri-demo as a reference for the diff may be helpful in fully understanding what code can be removed and comparing

Acceptance Criteria

• A user can create a quiz with the "choose questions for me" default work flow
• a user can "review" the selected resources using the shopping cart. The shopping cart behaviors for "opening resource" and removing resource should align with the lessons pattern.
• The new resource selection component and sub page is used
• Where possible, we should use the existing useQuizCreation composable to manage resources and questions, and the props of the resource selection component. There may be extra functions that are not unused, which should be cleaned up, and slight adjustments may need to be made. Please discuss any significant changes/concerns with Marcella and Richard if we need to adjust the scope
• The text/UI banners and presentation should be updated
• There are some small but very intentional changes to the "top stuff" of the side panel in quizzes, including the placement of buttons and which buttons are visible in which scenarios. Please make sure this is closely aligned to the figma. If there are complications due to component hierarchy/data availability, please raise in the channel for discussion with Jessica, Marcella, and Richard.

Out of scope

• Integrating the search and filtering behavior and "back to search results" (this can be done in the same way, but as a second issue; I am separating it intentionally as I suspect we will run into interesting situations with the back button behavior, despite our best efforts, and I am trying to not have the scope and complexity of this creep too much.)
• "Switching Modes" - you will see the specs for the below in the figma. We should update the UI to have the "choose questions manually" option when previewing questions, but for now, it shouldn't do anything, since we will not have the second workflow built out.
• Note - there will be changes here to allow "question preview" in addition to "resource preview", but since we have not built out the manual selection process yet, this view is not yet needed. For now, focus on integrating the existing version on the bottom bar and appropriately displaying resources. A separate issue will cover adding the "question view" to the shopping cart, and integrating that in.