Scaffolding of the new Quiz Creation Vue Component

[thanksameeelian]

Overview

In order to support upcoming work, we need to create a Quiz Creation component that mirrors the Figma designs provided and is temporarily populated by dummy data. We can incorporate some of our existing components and patterns as-is into this new component.

Before we build out all of the code that supports quiz creation behind the scenes, we will scaffold out this new component. This task involves visually creating the component and temporarily filling it with dummy data. We want the scaffolding to include the basic layout of the component as shown in the Figma, the strings the component requires, and the buttons & icons it uses. The buttons and icons do not need to be hooked up to actual quiz creation functionality, but should be implemented to work as laid out in the Figma (e.g. the Jump to question button is a dropdown - in this issue, we would like to see Jump to question opening as a dropdown, but the content within it should just be dummy data/filler - no expectation of displaying actual questions).

Expected appearance

The component should visually match the Figma designs as closely as reasonable, but does not need to include the central table containing the list of questions. The table of drag-and-droppable accordion item questions will be accomplished in a separate PR. Therefore, the expected UI outcome of this issue should be similar to:

Acceptance Criteria

• Create new immersive page to be shown on the quiz creation route (an ImmersivePage within a KPageContainer)
• KPageContainer holding main content
• KTextbox containing quiz title
• KTab* component to display sections
• "functional" context menu connected to each "section" tab - three dots icon should appear & open on click, but the context menu can contain only the strings "Settings" & "Delete section" without setting up their underlying functionality beyond a simple pass-through
• Add Section KButton in line with KTabs
• Edit Section and Jump to question KButtons
• BottomAppBar with a KButton to save the quiz
• Stub out <div/> where the accordion list of questions will go
• Add appropriate strings throughout the page, mirroring the proposed design (see "Expected Appearance" for an example of what we expect the scaffolded component to contain)

Note: No need to wire up data, but wherever you would expect to get data, you should put a FIXME or TODO comment indicating what should be expected there. The aim is to have this issue completely fairly quickly, so while the goal is to replicate the design as closely as possible, there's no need to be pixel-perfect at this stage.

Once this PR is ready, it would be ideal to conduct an a11y review to identify any open a11y-related issues found in this scaffolding, to be applied to follow-up issues.