Product issue: A learner sees sections and section descriptions on their quizzes

[marcellamaki]

Overview

With the addition of quiz sections, the learner will now see each section separated by a heading showing the section's title. Along with this are some minor layout tweaks of the quiz UI.

Description and outcomes

Quiz questions menu

For each section in the quiz we will present a full width heading showing the section's title. Under each section heading will be the list of questions within that section, followed by the next section.

Each section heading may also be expanded upon click to display description text if there is any for that section. If there is, then the heading will include a toggling up/down chevron icon. Note that the list of questions is not hidden by section headings being collapse -- only the description text which is displayed in the same distinct visual area as the title of the section.

UI Updates

The bottom bar now will have the <- PREVIOUS button left-justified and the NEXT -> right-justified (this is flipped in RTL of course).

The "M of N answered" text will now live in the middle of the bottom bar between these buttons.

Unlike the related updates this project will introduce to Coach, the mobile experience here is critical. Fortunately, this should not require much additional effort based on the Figma, but be sure to test all screen sizes here.

Resources

Epic

Relevant Figmas

Accessibility requirements

The primary concern here is managing flow and focus for keyboard and screen reader users such that they can collapse/expand the section title heading area to see/hear the description text.

Make reference to the W3C Accordion guidelines as the aria-* guidance in particular there can help us be sure we provide the most accessible experience. Of course, use discretion and remember that "No aria is better than bad aria".

The order in which the <- PREVIOUS and NEXT -> buttons are read to the user should likely remain the same as it is now as it appears that the "M of N answered" would be read off before getting into the buttons. The new design, as it flows, would read "Previous", "M of N answered", "Next" which is less ideal.