Update HintsEditor layout and collapse behavior #5914

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

Overview

Complexity: Low
Target branch: unstable

Context

The HintsEditor currently renders as a permanently expanded section with numbered hint rows, each containing a TipTapEditor and an AssessmentItemToolbar with up/down/delete controls. The section has no collapse behavior and is always visible when a question is open.

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 and behavior of HintsEditor.vue to match the new design.

Collapsible header

• The hints section is wrapped in a collapsible container with a "Hints (optional)" header on the left and a chevron/dropdown arrow on the right.
• The section is closed by default.
• The arrow rotates to indicate open/closed state.

Hint rows

• Each hint is rendered as a plain text input with a placeholder of "Enter hint X..." (e.g. "Enter hint 1...").
• Update the TipTapEditor min-height to match the min-height used for answers.

"Add hint" button

• The current "New hint" button is replaced with a dashed-border + Add hint button, centered and full-width.

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 — the Hints section appears at the bottom of the question card, collapsed by default.

Acceptance Criteria

• The Hints section is wrapped in a collapsible container with a "Hints (optional)" header.
• The section is collapsed by default when a question is opened.
• A chevron arrow on the right of the header rotates to indicate open/closed state.
• Each hint is rendered as a plain text input with placeholder "Enter hint X..." (e.g. "Enter hint 1...").
• The "New hint" button is replaced with a dashed-border + Add hint button, centered and full-width.
• The "Hints (optional)" string is translatable.

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.