Quiz Creation Select Resources - Handle resource selection

[nucleogenesis]

Overview

The ResourceSelection.vue component currently leverages the useQuizResources component for fetching exercises from the backend. However, due to the protracted dev cycle on that module, we currently are not updating the useQuizCreation module's state based on the user's selections.

The user's selections will be reflected in the state of useQuizCreation as the user confirms their selection and there are some scenarios that we'll need to cover to give the user a seamless experience.

Guidance

Consider the types defined in the quizCreationSpecs.js file - namely the QuizExercise, QuizQuestion, and QuizSection types.

Now, consider that in Kolibri, we piece of content with the Exercise kind is a single piece of content that contains individual questions. For example, an Exercise called "Count to 10" may have several individual questions within it. Individual questions are commonly referred to as "assessments" -- see that the QuizExercise has an assessment_ids property that we leverage to identify the specific question within the Exercise that we want to reference.

"Quiz Creation" is the process of selecting the Exercise nodes that belong in the QuizSection.resource_pool, then allowing the user to adjust which "Assessments" (or QuizQuestions) are actually shown within a given Quiz Section

With all of that in mind, the purpose of this issue is to handle the process of the user selecting QuizExercise items and then keeping the useQuizCreation state up-to-date based on the user's decisions.

Acceptance criteria

NOTE: This does not all need to be done in a single PR -- in fact, please consider how/where you can break this up into multiple PRs. Perhaps the sub-headings here can be used as a guide for this, but use your discretion and reach out if you would like some help with this

Saving, exiting, confirmation modal

Note that all of the following notes are within the context of the ResourceSelection.vue component unless noted otherwise

Note also that because we must work under the assumption that the ResourceSelection.vue component will be remounted on every route navigation, we will need to track the working state of the user's selections within the useQuizCreation module. This means that ResourceSelection can maintain the value a ref from useQuizCreation and it will persist across route navigations.

• In the useQuizCreation module, add a new ref to track the "working resource pool" - something like _working_resource_pool which will track the user's selected Exercises throughout the use of the side panel - the default value should be []
• When the user clicks to open the side panel -- specifically and only when they click to open the side panel -- set the value of _working_resource_pool to the activeSection.value.resource_pool so that the _working_resource_pool can be the "working" source of truth about which resources are selected or not. This can be done by adding a method to useQuizCreation like "initializeWorkingResourcePool" which will only be called when going from "the side panel is not open at all" to "the side panel is open". This means that we'll likely need to call the method when the "Add Questions" button is clicked and then proceed with the navigation that will open the side panel.
• When the ResourceSelection.vue component is closed, the newly created _working_resource_pool should be cleared back to an empty array. Note that this includes when the user saves their changes OR closes the side panel and confirms that they want to discard their changes.
• As the user clicks the checkboxes on Exercises, add them to the _working_resource_pool ref's value. When they deselect an Exercise, remove it from that same array
• When the user ultimately "Saves changes", the activeSection's resource_pool property should be set using useQuizCreation#updateSection to the value of the _working_resource_pool. This means that we only actually persist the user's changes when they've explicitly saved them
• The "Continue" button should instead say "Save changes"
• When the user clicks to close the side panel and has made changes to their selection, they are prompted to confirm (Figma -- note that the text in this link is not what you'll use but the modal/style of prompt is)
• Check with @radinamatic and @tomiwao for proper messaging for the confirmation modal
• Call the appropriate methods from the injected useQuizCreation module to update the current section's "Resource pool" based on the selected items
• Update the function passed to the :contentIsChecked prop to return true when the content passed to the function is found within the _working_resource_pool
• "Select all" checkbox should select all of the Exercises currently visible to the user. Note that this may not actually select everything under the Topic if there is a "View more" button the user has not clicked. If all visible items are in the working resource pool, the "Select all" checkbox should be checked, but if not, then it shouldn't be (which means, again, that if they "Select all" and then click "View more" then the "Select all" checkbox would go from being checked to unchecked as more items which are added to the list

Keeping the active section up-to-date upon resource_pool update

• Implement a method in useQuizCreation that leverages the selectQuestions.js function (or possibly copies it over) to select questions pseudo-randomly from the section's resource_pool

• • This method should be setup specifically for this context such that it will always exclude questions which are in the current section's questions property -- more concretely: the questionIdArrays should exclude any question in the current section's questions property
• • Note how the return value of the selectQuestions function maps well onto the QuizQuestion type

• The current section's questions property is kept up-to-date with the change in resource_pool.
  -- If the questions property has a question in it which was part of an exercise which was deselected, then those questions should be removed
  -- When we automatically remove questions from the questions property, be sure that we select a number of questions from the resource_pool resources to keep the questions property's length equal to the section's question_count property