Migrate quizzes to updated resource selection

[AlexVelezLl]

Summary

• Updates Quiz Resource Selection workflow to use the new UpdatedResourceSelection component, and the same sub pages structure we use in lessons.
• Remove logic to select folders and max number of questions on random mode.
• Adds new subpage to manage the selection settings.
• Move LessonResourceSelection subpages to common to use the same components for lessons and quizzes.
• Use the useResourceSelection composable in quizzes for data loading, not yet used to store the resource selection.
• Adapt useResourceSelection to accept filters and annotators for channels, quizzes and bookmarks.

Screencast

Compartir.pantalla.-.2025-01-30.11_54_11.mp4

References

Closes #12994.

Reviewer guidance

• Play with quizzes resource selection in random mode
• Does the flow match the figma specs?
• Test that there are not regression in the whole quiz resource selection flow
• Test that there are not regression in the lessons resource selection flow, I have modified most of these files, so there are chances that I have accidentally broken something here 😅.

[AlexVelezLl]

Even though github shows this as a new file, I managed to keep the blame, as this was renamed and refactored from https://github.com/learningequality/kolibri/pull/13043/files#diff-de1998b52a97bdcd29e801e6fee5e43980b32478bf3afda44537e61aba2b47a8

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0a0.dev0_git.461.g07bf6775.pex
Windows Installer (EXE)	kolibri-0.18.0a0.dev0+git.461.g07bf6775-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0a0.dev0+git.461.g07bf6775-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0a0.dev0+git.461.g07bf6775.dmg
Android Package (APK)	kolibri-0.18.0a0.dev0+git.461.g07bf6775-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.0a0.dev0+git.461.g07bf6775.zip
TAR file	kolibri-0.18.0a0.dev0+git.461.g07bf6775.tar.gz
WHL file	kolibri-0.18.0a0.dev0+git.461.g07bf6775-py2.py3-none-any.whl

[marcellamaki]

@pcenov (cc @radinamatic) this should also be ready for manual QA - Alex has left a few notes above. Thank you!

[nucleogenesis]

I really like the injection w/ the bookmarks, channels, etc objects w/ the annotator function and such - a very clean way to pass around and handle that logic <3

I left a few comments and read through the code and in general, things are looking great.

I didn't get a chance to manage my resources due to the error I noted below - ping me if you cannot replicate it or when you're able to resolve it - I look forward to playing with this PR 😃

[nucleogenesis]

This appears to expect an array of functions, might be good to add a validator to that effect. Could use lodash's isFunction on each item given to make it simple

[nucleogenesis]

Also it might be good to note in a comment here that it specifically expects a set of predicate functions that should return bools

[AlexVelezLl]

Thanks! Just did it! :)

[nucleogenesis]

I'm getting this error, the initial stack trace points to here

[nucleogenesis]

This prevents me from adding any contents as everything beneath the "[] Choose questions manually" string is blank

[AlexVelezLl]

Hmm thats weird, I am not getting it, Im not using a KRadioButton anywhere in that page 🤔, and thats a warning of a KRadioButton validator, it shouldnt prevent us from seeing the rendered component 🤔.

Are you seeing any other errors in the console? Could you send a screencast/screenshot of what are you seeing in the side panel?

[pcenov]

Hi @AlexVelezLl - I was able to identify the following issues:

1. When I add a new section and I add a title of the section, then when I click the "Add questions" button I see the "Are you sure you want to leave this page?" instead of the side panel:

1.error.when.adding.a.new.section.mp4

2. The "Settings" text is not centered to the icon and the icon is smaller than the one in Figma:

3. This one is more of a question to @jtamiace: currently there's no back arrow once I go from the "Questions settings..." page to the "Add questions..." page (one can still use the browser's back button though) and I can see how it can be useful for coaches to be able to go back and change the number of questions. Personally I found it confusing the first time I saw it because it was not immediately clear that I had to click the "Settings" button in order to be able to change the number of questions:

back.arrow.mp4

[AlexVelezLl]

Thanks @pcenov! I have just pushed a fix for the navigation from the section settings to the resource selection side panel!

For number two, this is actually an issue with our Design System, I think this issue is related learningequality/kolibri-design-system#242 cc: @marcellamaki @jtamiace.

[jtamiace]

@pcenov the reason why there is no back button on the 'Add questions to' page is to avoid any confusion in how it should behave in relation to the channel/folder breadcrumb (will this back button take me "up" a folder level? Behave as a browser back? Leave the question adding process entirely?). But I do see how this layout is still confusing from your description.

One small change that comes to mind is changing the button label from "Settings" to "Questions" to create more specificity. But I'm curious if there is another behavior you would expect instead?

[pcenov]

Thanks @AlexVelezLl - I confirm that the navigation from the section settings is working correctly now.
For the KDS issue - will you be creating a separate follow-up issue?

Hi @jtamiace - I think that if we decide to add a back arrow it should behave exactly as the browser's back button, I don't see any harm in doing so (though there could be some edge cases). The "Settings" button could also be renamed to "Questions settings" if it's not too long. On that note, are we supporting viewing this page in mobile phones, because the buttons don't look positioned correctly in resolution which is less than 600px:

[AlexVelezLl]

Hi @pcenov! I have made the button icon a little bigger. The alignment problem will be tracked with this issue learningequality/kolibri-design-system#931.

For the layout in small screens, for now I have at least aligned them to the right

[pcenov]

Thanks @AlexVelezLl - I confirm that the buttons are aligned to the right now.