Quiz creation: Question replacement & a bevy of misc fixes and polish #11937

nucleogenesis · 2024-03-05T23:20:00Z

Summary

Adds the ability to replace selected questions
Fixes Enhance Quiz- Side panel doesn't show on mobile #11826
Snackbars
"Are you sure?" messaging and handling when closing a panel without saving changes
Miscellaneous small fixes, as described in the commit list (I hope fairly clearly)

References

Closes #11017
Closes #11013
Closes #11015
Closes #4708
Closes #4766

This directly impacts the following Product Issues - I hope that this can close them @radinamatic so please let me know your thoughts. I'll be going through them to make sure they're up-to-date with design decisions

Reviewer guidance

Known issues

_I will be preparing some follow-up issues for the items below. Sorry to disappoint re: the keyboard navigation @radinamatic 😭 but we'll get it worked out 💪🏻 _

Whether or not a question's contents render is dependent on a Perseus bug [https://github.com/Upgrade perseus to npm published version. #9759] - if you go bottom-to-top then you'll see the questions as they'd look normally and can render multiple questions at once... but if you go top to bottom you'll see the bug.
That same bug also means that the question replacement panel's accordion won't show a question's content unless you "Collapse all" of the items on the root page's accordion
Sections drag & drop is a bit inconsistent
~~Cannot navigate between the Section Tabs by way of keyboard due to [issue to be created soon]~~ FIXED

QA Review

There are no gherkins yet for this version of the feature, so I suspect that walking through all possible paths is the best way to go. The issues in the 10xxx range are feature-level issues.

I think that maybe I can lay out some potential variables that you can test combinations of to ensure things work as expected. I hope that this, in combination with the issues above, can serve as a guide of what to test.

Content on device

When I have no content on my device and try to add resources
When I have content on my device, but none of them include Exercises
When I have any channels with Exercises
When I have Bookmarks, but none of them are Exercises
When I have no Bookmarks
When I have Bookmarks and some are Exercises

Side panel

When I click outside the side panel
When I do or do not have any changes made to the current page of the side panel do I get the "Are you sure?" message
When I click the "back" arrow, do I go back to the page I was on before?
Is the navigation intuitive?

Snackbars

Do you get them when you think you should?

Content selection

Import tigil-fajod for a channel that has one folder with enough exercises to trigger our lazy loading
When you click "View more" at the bottom is the behavior as expected?

Add, Replace, Sort questions

Can you make a quiz and do all the things?
Sort
Drag & drop
Open close accordions
Editing section
Deleting sections
Changing "question count" when deleting questions
Adding/removing questions to match changes to the "question count"

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Critical and brittle code paths are covered by unit tests

PR process

PR has the correct target branch and milestone
PR has 'needs review' or 'work-in-progress' label
If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
If this is an important user-facing change, PR or related issue has a 'changelog' label
If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

…delete

pcenov · 2024-03-29T10:30:41Z

Hi @nucleogenesis the following issues from above are still not fixed:

Sections - The expand/collapse all buttons are not functioning correctly when switching between the sections.

Expand-collapse-both-enabled.mp4

Sections - It's possible to add unlimited number of sections but once they get listed under the ellipsis button then there's no way to know which section I am viewing at the moment

Current.section.is.not.selected.mp4

Sections - There's no confirmation prompt when deleting a section from the options menu (while there is such if I am deleting it

No.prompt.mp4

Also now I can't delete the last remaining question in a section, so I can 't fully retest the issue "Section settings - Once I delete all the questions I can't add them again as the 'Save changes' button remains disabled":

1.Can.t.delete.all.questions.mp4

New issues noticed:

Replace questions - I can't preview questions after having just replaced them:

Can.t.preview.questions.after.having.replaced.them.mp4

Section settings - getting a "Changes saved successfully" message each time after just clicking outside of the modal:

Clicking.outside.the.modal.mp4

nucleogenesis · 2024-03-29T22:28:38Z

Thank you @pcenov , listing each issue noted:

Previous issues

Unnecessary snackbar messages when closing side panel -- new issue for fixing Snackbars Quiz creation: Snackbars improvements #12038
Identifying the active section -- to be fixed in Quiz Creation: Replace TabsWithOverflow with KListWithOverflow #12011
No confirmation when deleting section from Options dropdown -- tracked in Quiz creation: Known issues, bugs, quick fixes #12037
Can't delete the final question -- so the way I've worked this out is that a section cannot have 0 questions, so when you delete all of the questions, I default it to have a "question count" of 1. So in the case where you would have deleted all of the questions from the section, the only way to add questions back to it is to update the section's "question count". When you go to "Change resources" -- that's just updating the pool of questions from which we randomly select (also from which you can replace) within that particular section. I think it's worth considering an updated UX overall for this as it's kind of unclear what is happening when you delete questions (cc @tomiwao)
"Collapse/Expand" state not being tracked while navigating between sections -- we've not set this up to track the collapsed/expanded state of the questions and each time you move to a new section it was intended during dev that they all start collapsed. This shouldn't be a blocker for merge, but I will discuss w/ @tomiwao

New issues

"Cannot preview questions after replacement" -- I've fixed this in a new commit

The test here was previously accounting for a possibility where the same resource from a different channel was being used -- however, we only select questions now by using a fully unique ID combining the exercise_id:question_id so this test is no longer needed

…mViewer module

rtibbles

More than just being neater, I think there is an actual bug in the updates to the learn viewset.

Some tests of the useQuizCreation updates for the synthetic id generation would be helpful. I am also not seeing where we are stripping out those ideas before sending the data to the backend, but maybe that was already happening and I'm not seeing in it in a more restricted diff.

rtibbles · 2024-04-04T00:19:10Z

kolibri/plugins/coach/assets/src/composables/useQuizCreation.js

-    const { question_count } = updates;
-    if (question_count) {
-      if (question_count < (targetSection.question_count || 0)) {
+    // Make sure all questions in the an updated pool have proper unique IDs


Possible additional refactoring in the future - the resource pool and questions could maybe be factored out into separate functions, that are both called from this one?

rtibbles · 2024-04-04T00:21:43Z

kolibri/plugins/learn/viewsets.py

        for exam in exams:
-            exam_node_ids |= {


I mentioned this on slack, but this diff would be simpler:

from kolibri.core.exam.models import exam_assignment_lookup

then here:

exam_node_ids |= { exercise_id for exercise_id, _ in exam_assignment_lookup(exam.get("question_sources", [])) }

Aye I hadn't considered that exam_assignment_lookup handles the backward compatibility for us , thanks!

rtibbles · 2024-04-04T00:22:47Z

kolibri/plugins/learn/viewsets.py

@@ -218,7 +234,7 @@ def consolidate(self, items, queryset):
                }
            exam["missing_resource"] = any(
                question["exercise_id"] not in available_exam_ids
-                for question in exam.get("question_sources")
+                for question in (section_questions or exam.get("question_sources"))


and here:

for question, _ in exam_assignment_lookup(exam.get("question_sources", [])

This is better, because currently the section_questions will be collecting all questions from every exam, so this will mean that if any quiz has missing resources, then all quizzes will be marked as having missing resources (because section_questions will always be all of the questions from every exam).

…place

this was kind of a pain to work out, ultimately, the method to select random questions needed to take a parameter for the resource_pool it will select from. this implementation results in a massive updateSection method. an ideal alternative would probably involve changes to the API overall, which would require a moderate refactor but would also likely result in a much cleaner interface

pcenov · 2024-04-12T14:28:19Z

Hi @nucleogenesis, here are the latest findings of my testing which I'll just list again for you to sort out other whether they will be addressed here or as follow-ups:

Questions replacement/deletion/order:

Replace questions - Previewing questions in the 'Replace questions' modal is not working. I'm guessing this is caused by the Perseus bug that you've already mentioned as a known issue, but since previewing the questions is at least partially working in the 'Question list' I'm mentioning it here as well:

replace.-.no.preview.mp4

Replace questions - If I select one question and I replace it with another one, then the new question goes to the bottom of the question list, while ideally it should be displayed at the same position as the original question:

replaced.question.s.position.mp4

Question list - A question selected for replacement/deletion is being selected in several sections, while it should be selected only in the section that I am currently editing:

selected.question.mp4

Question order - When I go to the section options, the question order is set to 'Fixed' by default. However if I select 'Randomized' and save the change, then the option to drag and reorder the question should no longer be available:

randomized.mp4

Other general issues:

Section settings - I can save a section without a title and questions:

no.title.no.questions.mp4

Section settings - Not getting any notification that there are not enough questions if I attempt to add too many. In general the users should be notified what is the max number that they can add:

Number.of.questions.mp4

Section settings - The scrollbar is not functioning correctly (there's none in Firefox) and the sections are displayed under the 'Delete section' and 'Apply settings' buttons:

section.order.mp4

nucleogenesis · 2024-04-12T22:03:58Z

Thank you @pcenov ! <3

I fixed the issue w/ replacement questions previews.

The other items will be added to #12037 or discussed w/ designers next week, after which I'll make more issues to cover everything.

pcenov · 2024-04-15T12:38:06Z

Thanks @nucleogenesis - I can confirm that in the latest build I can see the preview of the replacement questions but only if the questions in the 'Question list' are not expanded and if I am opening the preview separately for each question - in any case it's best for us to wait for the Perseus bug to be fixed to fully test the preview:

preview.mp4

rtibbles

Just one last possible thing that I think might bite us.

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue

rtibbles

This looks good to me - still some cleanup to do, but have been filed in follow up issues.

nucleogenesis added 30 commits March 5, 2024 14:45

questions are replaced successfully & select all logic fixed

dfeea15

fix checkbox logic on replacement list

229d8c2

breadcrumbs polish

1991ef7

channels link breadcrumbs works properly

61675d8

side panel doesn't open if the section_id in the URL is bad

7dd656f

show questions in replacements accordions

c5e6af9

active & replacement question pools in useQuizCreation

218df74

update x of y replacements selected string

e2fb1c4

remove unused style

cad04b3

add counter_in_exercise to question titles in main accordion

77a4084

replace import/export lost in rebase

94178e5

SectionEditor styles tweaks

8624302

checkbox cleanup in reploacement

c7c3c58

align "Add section" button

1dab3c1

misc style updates, fix duplicate back arrow in side panel

c784ee2

fix delete section in section editor; add

d67e319

update & clean-up strings; replace ConfirmCancellationModal w/ KModals

6cb417d

back arrow & x on resource selection

5e89cd5

basic general snackbar messages

dd80271

additional snackbar message

1f7f9be

ensure "no results" message shows when search yields nothing

9b991bf

fix missing styles on bottom-nav of replace questions; snackbars for …

1bce015

…delete

correct messaging for close confirmation select resources

82e3fd2

handle clicking outside of modal as closing side panel

d0f9ad4

fix sidepanelmodal breakpoint for when it would go into mobile-mode

642b250

fix number of resources on section editor

e84f7ab

fix browser nav issues w/ showBookmarks

c73ed36

styles updates & message update

39885ab

spacing fix

69e855f

proper message on side panel back/close button

3fed2b3

nucleogenesis added 2 commits March 27, 2024 16:07

conditional label for resource change button in section editor

6b09a5a

update questions more reliably

236d309

use unique_id_arrays while generating list of activequestions

531d375

nucleogenesis added 3 commits March 29, 2024 15:52

update homehydrate viewset to account for Exam v3

f8a690a

use proper node id for exercise_id, proper data_model property in exa…

7e8c4a3

…mViewer module

github-actions bot added DEV: backend Python, databases, networking, filesystem... APP: Learn Re: Learn App (content, quizzes, lessons, etc.) labels Apr 2, 2024

use exam_assignment_lookup for cleaner itearator

00de4e8

rtibbles requested changes Apr 4, 2024

View reviewed changes

nucleogenesis added 7 commits April 4, 2024 13:40

use exam_assignment_lookup throughout as it is itself backwardcompatible

fac5ef7

remove outdated/unnecessary DEBUG functionality from useQuizCreation

843271d

update quiz creation specs to clarify exercise_id origin

b600ee2

add unique_question_ids to resources when they're saved in the first …

5b1472e

…place

better definition for QuizQuestion.id in specs

e80c04b

update useQuizCreation spec data to accommodate unique IDs

f70e25c

AlexVelezLl mentioned this pull request Apr 12, 2024

Quiz creation: Snackbar improvements #12080

Merged

9 tasks

nucleogenesis added 2 commits April 12, 2024 13:35

update og to original

84a37a3

fix replacement contentrenderer id refs

dbc342b

rtibbles reviewed Apr 18, 2024

View reviewed changes

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue Outdated Show resolved Hide resolved

use question.id on ref to ensure uniqueness

4cf2258

rtibbles approved these changes Apr 18, 2024

View reviewed changes

rtibbles merged commit afe5a61 into learningequality:develop Apr 18, 2024
31 checks passed

KshitijThareja mentioned this pull request Apr 22, 2024

Move handleReplacement logic from ReplaceQuestions.vue to useQuizCreation.js #12099

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Quiz creation: Question replacement & a bevy of misc fixes and polish #11937

Quiz creation: Question replacement & a bevy of misc fixes and polish #11937

nucleogenesis commented Mar 5, 2024 •

edited

Loading

pcenov commented Mar 29, 2024

nucleogenesis commented Mar 29, 2024

rtibbles left a comment

rtibbles Apr 4, 2024

rtibbles Apr 4, 2024

nucleogenesis Apr 4, 2024

rtibbles Apr 4, 2024

pcenov commented Apr 12, 2024

nucleogenesis commented Apr 12, 2024

pcenov commented Apr 15, 2024

rtibbles left a comment

rtibbles left a comment

Quiz creation: Question replacement & a bevy of misc fixes and polish #11937

Quiz creation: Question replacement & a bevy of misc fixes and polish #11937

Conversation

nucleogenesis commented Mar 5, 2024 • edited Loading

Summary

References

Reviewer guidance

Known issues

QA Review

Content on device

Side panel

Snackbars

Content selection

Add, Replace, Sort questions

Testing checklist

PR process

Reviewer checklist

pcenov commented Mar 29, 2024

nucleogenesis commented Mar 29, 2024

rtibbles left a comment

Choose a reason for hiding this comment

rtibbles Apr 4, 2024

Choose a reason for hiding this comment

rtibbles Apr 4, 2024

Choose a reason for hiding this comment

nucleogenesis Apr 4, 2024

Choose a reason for hiding this comment

rtibbles Apr 4, 2024

Choose a reason for hiding this comment

pcenov commented Apr 12, 2024

nucleogenesis commented Apr 12, 2024

pcenov commented Apr 15, 2024

rtibbles left a comment

Choose a reason for hiding this comment

rtibbles left a comment

Choose a reason for hiding this comment

nucleogenesis commented Mar 5, 2024 •

edited

Loading