Learner view new component: <PracticeQuizTimer>

[sairina]

Summary

A new timer component will be added on top of the answer log component in independent practice quizzes.

Why? Practice quizzes are for learners to practice with content in a "test-like" condition with regards to time, so this component will provide much-needed functionality for the independent practice quiz feature in our past papers project.

Background (optional information)

Currently, when a learner takes a quiz that was assigned by their coach, there are two main things to be aware of (on the UI level): they can only take it once, and the learner does not see a timer. If an independent practice quiz is assigned as a regular quiz, it will follow this same flow.

When a learner takes an independent practice quiz that was found in a channel or assigned in a lesson by their coach, however, they can take it multiple times and, and there is a timer.

Frame	Explanation
	The timer is on the top left portion of the PracticeQuizRenderer Details for its functionality are below
_

Notes and changes to current designs:

• Figma for the practice quiz timer
• All strings required should already be in commonCoreStrings, commonCoachStrings, or commonLearnStrings
• <PracticeQuizTimer> should live in the <PracticeQuizRenderer>
• Quiz duration (a.k.a. "Suggested time") is optional and is hidden if not provided. This information is from metadata that comes in from Studio
• Timer starts when learner enters the quiz page
• Timer pauses when the learner leaves the quiz or browser tab (please note that this may not be testable for this component, but that it is something to be mindful of when planning the component)
  • Storybook could be used to prepare a PR with styles and a props driven timer component and reference it as part of this issue
• Time spent will be shown in quiz reports
• Learner’s timer will increment by minutes, not seconds
• Time spent will be used in other components, like the <ReportsPracticeQuizLearnerPage>

Criteria for success:

Please copy these into your PR for "Steps for Testing"!

This issue is done when the checkboxes below work

• Quiz duration (a.k.a. "Suggested time") is optional and is hidden if not provided.
• Timer starts when learner enters the quiz page
• Time spent is shown in quiz reports
• Learner’s timer increments by minutes, not seconds
• "Time spent" is saved for use in other components, like the <ReportsPracticeQuizLearnerPage>

[bjester]

Hey team! Please add your planning poker estimate with ZenHub @jamalex @jredrejo @marcellamaki @MisRob @nucleogenesis @rtibbles @sairina

[rtibbles]

Noting that three of the action items should be handled outside the scope of this component:

Timer starts when learner enters the quiz page
Time spent is shown in quiz reports
"Time spent" is saved for use in other components, like the

These three should all be handled by using the startTrackingProgress action and stopTrackingProgress action from the core actions. https://github.com/learningequality/kolibri/blob/release-v0.15.x/kolibri/core/assets/src/state/modules/core/actions.js#L563

[rtibbles]

Fixed in #8645