Practice quiz renderer

[rtibbles]

Summary

• Creates initial practice quiz experience rendering in the content page
• Adds initial reporting once quiz has been submitted
• Allows for retry of quiz attempt
• Updates progress tracking endpoint and adds tests for practice quizzes
• Forces mastery_model for practice quizzes to always be QUIZ
• Updates ExamReport component and subcomponents to properly handle multiple tries
• Adds timer component for practice quizzes
• Adds somewhat sensible progress tracking for practice quizzes
• Adds time_spent tracking on a per try basis for all assessments (in addition to composite tracking)

References

Fixes #8622
Fixes #8520
Fixes #8511
Fixes #8538
Fixes #8509
Fixes #8540
Fixes #8508
Fixes #8510

Reviewer guidance

---

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

[sairina]

This looks great! THANK YOU SO MUCH for doing this. Did some quick manual QA based on your summary:

• As learner, am able to take practice quiz, able to retry (from modal), and can see what I've done after I have submitted a practice quiz

Questions:

• It should be that if I submit, then I see the "completed" icon on the content card, and when I practice again (even if I haven't answered any questions), I no longer see the "completed" icon, but instead it goes back to being blank - is this correct? (below, my "Recognize fractions" practice quiz is in progress, but I've exited)

• Is the plan that the additional UI changes for renderer in full screen (the timer, namely), be rebased on top of this?
• There is a todo attached to this PR: Integration with new API endpoint for fetching tries data; should that be a separate issue, or is this something to be tracked here?

[marcellamaki]

Timer will be added as a separate PR. The front end for it is almost done, and once I push my PR for that (probably tomorrow morning) Richard will make one backend change to "reset" the time spent based on which try you are on (right now, it just resumes and adds on to the time from the previous try).

ETA: cancel that, changes have been included here

[rtibbles]

I no longer see the "completed" icon, but instead it goes back to being blank - is this correct?

I think we should change the progress to a 'peppercorn' progress once you click retry (we do this as soon as you start an exercise similarly) so that it shows that you have started it at least, rather than being completely blank.

There is a todo attached to this PR: Integration with new API endpoint for fetching tries data; should that be a separate issue, or is this something to be tracked here?

I added this assuming that we'd have the new API fairly soon as I knew that @bjester had already made progress on it - but we can do this in follow up instead.

[rtibbles]

I have updated the progress setting for the QuizRenderer so it should actually show some progress as long as any interaction has happened, and should show progress that is roughly correlated with the number of questions answered.

[radinamatic]

Test results from the current progress (EXE asset on Windows 7, tested in Firefox and Chrome)

Issue	Result	Comment	Screenshot
#8622	-	-	-
#8520	✅ ❗	1. Channel quiz assigned directly has: - no timing - no Try again button in the report - no quiz title as in the prototype - everything looks just like the normal quiz at this point 2. Channel quiz assigned as a resource in a lesson has: - no timing (report does have Time spent) - no completion modal to continue to the next resource in the lesson 3. When learner reopens the report, the counter is still conting 🏃🏽
#8511	✔️	-	-
#8538	❌	Practice quiz in a lesson is skipped and not displayed when learner chooses to Move on in the completion modal	https://user-images.githubusercontent.com/1457929/142470816-c24a751a-ab8c-41ea-9551-b7aacdb23fb7.mp4
#8509	✔️ ❕	Learner sees no score on the card once the quiz is submitted
#8540	❌	No counter in the quiz	-
#8508	❌	Same as #8538	-
#8510	✔️ ❕	No indication of various attempts taken	-

There is also an annoying delay when the final Submit button is pressed from the modal, it seems as if nothing is happening, and this lag invites the learner to click the Submit button again.

Not seeing any errors in the console, but including logs just in case:
logs.zip

[marcellamaki]

Status update of what's covered (not Gherkin official!):

• As a learner, I can find a practice quiz in the library, as part of a lesson, or in a channel
• When I interact with that practice quiz ("as practice"), I see the quiz in the new hybrid learning content renderer
• I can click on the timer icon* to see the time spent, and if there is a suggested time, that will also display
  *pending KDS merge -- local KDS shown in screenshot

• When I finish and submit the practice quiz ("as practice"), I see the learner quiz report.
• I can see the "try again" button on the report and be redirected to a new quiz try when I click it

• When I am assigned a practice quiz by my coach ("as assessment"), I see the traditional quiz render, which displays the time spent, and if there is a suggested time, it also displays
• There is no learner report or option to "try again" on the coach-assigned-quizzes

[bjester]

Some comments. I took a practice quiz multiple times and everything looks good too

[marcellamaki]

lgtm!