Product issue: A coach can create and manage any number of quiz sections

[marcellamaki]

Overview

Kolibri's new quiz architecture will now give Coaches the tools needed to create longer and better organized quizzes. Here we will build the first step of the updated quiz editing experience by allowing the coach to create sections, selection separate resource pools for each to draw from, and then sort them and provide additional context to the Learner in the end.

Description and outcomes

Section navigation & adding a section

The Create new quiz page will be the primary interface where coaches can create any number of quiz sections.

The page will present a horizontal series of tabs, one for each section. The sections' titles will label their respective tabs. Each tab will have a clickable icon which the user can use to begin editing a section in a separate workflow.

The coach may click an + ADD SECTION button which will create a new tab at the end of the tabs navigation. When there are too many tabs to show on the screen at once, the last item should be a dropdown that will list the remaining tabs, each will have the same icon allowing them to be clicked to enter editing.

If ever a tab, or a section's button in the dropdown, is clicked then the user will select that section for preview which is displayed under the section tab navigation.

Editing a section

When a section is created it will have a default name like "Section #" where the "#" can just be an ongoing counter of sections made in this quiz. In any case, the coach will certainly want to add resources to the question pool and change the name!

So any section that has no questions in it will present the coach with a button to begin the editing workflow - alternatively, the coach may click the edit settings button universally available as noted above.

The settings will pop out in a side panel presenting a simple form:

• Title
• Description (optional)
• Number of questions
• Fixed or randomly ordered questions

Beneath this form will be an area with a button allowing resource selection, which is covered in more depth in #10967, which is in turn followed by a Section order area. Here, the sections in the quiz are all laid out and the currently selected section indicates as such. Each section will have drag handles allowing the coach to reorder all of the sections.

A coach can then decide to save the settings or delete the section altogether with the buttons at the bottom of the side panel.

Accessibility requirements

Tab navigation

• The coach should be able to use keyboard navigation to flow through all tabs and the possible dropdown.
• When focusing a tab, each tab will then have a separate button so we must be sure to label these icons according to their expected behavior
• A user's focus ought to go from the section tab title which can be clicked to select that section for preview -- and the respective icon button for that tab and then on to the next tab.

Resources

• Epic
• Relevant Figmas

[rtibbles]

Worth checking that we address the ux concerns detailed here #4766 and hopefully close it.