Update AnswersEditor layout and answer option structure

[AlexVelezLl]

❌ 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 AnswersEditor currently renders answer options using VRadio for single-choice and true/false questions, and VCheckbox for multiple-selection questions. Correct/incorrect answers are indicated by a colored left-border strip. The overall layout lacks visual consistency with the new card-based design being introduced across the Assessment Editor.

This task is part of the broader QTI editor visual migration in Studio.

Current state:

No Vuetify-to-KDS component migration is required as part of this task. Straightforward substitutions encountered along the way are welcome.

The Change

This task updates the visual structure of AnswersEditor.vue to match the new design.

Answer options label
The static "Answers" label is replaced with a dynamic label based on question type:

• Single-choice and true/false: "Answer options — select one correct answer"
• Multiple-selection: "Answer options — select all correct answers"
• Numeric input: "Answer options — enter all acceptable spellings or formats"

Answer option layout

• Update answer option rows to match the new design spec layout.
• Replace VRadio with a checkbox for all question types — single-choice and true/false questions should use checkboxes instead of radio buttons.
• Correct answers are visually highlighted with a green border and green checkbox background.
• Incorrect answers use a neutral border with an unchecked checkbox.

"Add option" button

• Update the "New answer" button layout and label to match the design spec.

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. Open a question to access the answer editor.
5. Test with multiple question types (single-choice, multiple-selection, true/false, numeric input) to verify all label variants and layouts.

Out of Scope

• Shuffle answers for learners toggle
• Copy answer button
• Drag and drop reordering behavior — keep the current up/down arrow buttons instead of implementing the grab icon shown in the design spec

Acceptance Criteria

• The answers section label is dynamic based on question type
• All question types use a checkbox to indicate correct/incorrect answers (no radio buttons).
• Correct answer rows have a green border and green checkbox background.
• Incorrect answer rows use a neutral border with an unchecked checkbox.
• Answer option rows match the new design spec layout.
• The "New answer" button is updated to match the design spec style and label (e.g. + Add option).

References

• Figma design spec

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.