❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Complexity: Medium
Target branch: unstable

Context

The Assessment Editor currently uses a plain VCard-based layout where questions are stacked with minimal visual hierarchy. Each question card exposes its controls (response type selector, question editor, answers, hints) without a clear header structure, making it harder to scan and navigate multi-question exercises.

This task sets the visual and structural foundation for the upcoming QTI editor in Studio.

Current state:

No Vuetify-to-KDS component migration is required as part of this task. However, if straightforward Vuetify → KDS substitutions are encountered along the way, they are welcome.

The Change

This task updates the layout and visual structure of the Assessment Editor to match the new design. The target state is shown below:

EditView.vue
The Questions tab container should use palette.grey.v_100 as its background color only when the Questions tab is selected.

AssessmentEditor.vue

• Replace the current VCard-per-question layout with KPageContainer for each question card.
• Each card should have a header row with:
  • Left: "Question X of Y" title
  • Right: move-up arrow, move-down arrow, and an options/overflow menu button
• Questions should have a minimum of 16px vertical separation between them, regardless of whether the editor/viewer is open or closed.
• The "Show answers" checkbox should also be wrapped in a KPageContainer.
• The "New question" button remains.

AssessmentItemEditor.vue

• Add a "Type" label above the response type select. Migrate the response type to KSelect.
• Decrease the default minimum height of the question TipTapEditor to match the design specs.
• Add a divider line before the Hints section.

AssessmentItemPreview.vue

• Update the preview to mirror the editor's card structure using KPageContainer.
• The card header should read "Question X of Y — [Question type]" (e.g. "Question 1 of 3 — Single choice").

How to Get There

1. Open a channel in the Studio channel editor.
2. Select or create an Exercise node.
3. In the edit panel, navigate to the Questions tab.
4. The Assessment Editor is rendered there — add or open a question to see both the preview and editor states.

Out of Scope

• Changes to AnswersEditor.vue and HintsEditor.vue — these will be addressed in separate issues.
• Full Vuetify-to-KDS component migration — only straightforward substitutions encountered naturally are welcome.

Acceptance Criteria

• The Questions tab container background uses palette.grey.v_100 only when the Questions tab is active.
• Each question card is rendered using KPageContainer.
• Each question card has a header with "Question X of Y" on the left and move-up, move-down, and options menu controls on the right.
• Questions have a minimum of 16px vertical separation between them, regardless of whether the editor or preview is open.
• The "Show answers" checkbox is wrapped in a KPageContainer.
• AssessmentItemEditor displays a "Type" label above the response type selector.
• The question TipTapEditor default minimum height is decreased to match the design spec.
• A divider line appears before the Hints section in AssessmentItemEditor.
• AssessmentItemPreview uses the same KPageContainer card structure as the editor.
• The preview card header reads "Question X of Y — [Question type]" (e.g. "Question 1 of 3 — Single choice").
• The "Question X of Y" and "Question X of Y — [Question type]" strings are translatable.

References

• Figma design spec
• KPageContainer — Kolibri Design System

AI usage

I instructed Claude to produce an initial draft of this issue from my description and design specs, then reviewed and refined the content myself.