Fix question listing and navigation in quiz reports

[rtibbles]

Summary

• Annotate sections with start and end section numbers.
• Simplify attempt log listing by requiring sections, so only having a mobile and non-mobile condition
• Fix attempt log listing by including the section context in the question numbers.
• Remove background to show selection state.
• Update question number display to show the number globally for the quiz, rather than per section.
• Update learner quiz display to be correlated.
• Cleanup cruft in learner quiz display that was making our computed props over complicated and redundant.

References

Fixes #12334

Reviewer guidance

• Test multi-section quiz reports to ensure that selection state is properly shown.
• Test to ensure that navigation between items occurs properly.
• Regression test practice quiz reports for learners and coaches
• Regression test exercise reports for coaches
• Ensure that multi-section quiz engagement and question selection functions properly.

---

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

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.17.0a0.dev0+git.152.ge847da8b-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0a0.dev0+git.152.ge847da8b-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0a0.dev0+git.152.ge847da8b-0.4.2.dmg
Android Package (APK)	kolibri-0.17.0a0.dev0+git.152.ge847da8b-0.1.3-debug.apk
TAR file	kolibri-0.17.0a0.dev0+git.152.ge847da8b.tar.gz
WHL file	kolibri-0.17.0a0.dev0+git.152.ge847da8b-py2.py3-none-any.whl

[pcenov]

Hi @rtibbles, everything seems ok but noticed 2 issues that can potentially cause confusion:

1. When all the sections are collapsed there's no indication to which section the displayed question belongs so that the learner/coach might have to expand several sections before finding out. Perhaps there should be a selection effect to the section title as well:

2. There's a mismatch between the question title within the section panel and the question title as displayed when viewing the details of the question. For example when I select Question 4 from the second section, it's displayed as Question 1 to the right and that's so for every new section:

2024-06-26_16-29-09.mp4

[rtibbles]

Thanks @pcenov - definitely useful to add an indicator at the section level too - I will use the same background colour.

Will make sure that the titles match!

[rtibbles]

Hi @pcenov I have fixed both these issues, and moved to a consistent 'global across the quiz' question numbering.

To be completely consistent, I have also updated this for learners taking the quiz too, so additional testing there would be very useful.

[pcenov]

Thanks @rtibbles LGTM!

[marcellamaki]

Holding the context for all of this is a bit of a challenge, but that's a factor of the complexity of some of this code. One non-blocking suggestion for an additional comment