feat: read and edit the hints of a converted legacy question

QTI has no hint element, so the conversion carries a legacy question's hints in the
item's <qti-catalog-info> — dormant content the delivery engine never renders on its
own — as cards tagged with a Kolibri support value. Studio already writes them there on
read and reads them back out on publish; the editor in between did neither, so opening a
converted question and saving it dropped every hint it had.

Hints belong to the item rather than to any one interaction, so they come out of
parseItem beside `interactions` rather than inside them, and useQtiItem holds them next
to identifier and title — a ref the card mutates and the rawData computed reads. Cards
are matched on their support value rather than the catalog they sit in, the same way the
publish-side derivation does: a catalog id is a name, the support value is the contract.

assembleItemXml writes the catalog after the item body, which is where the schema wants
it — the one mistake this shape can make and still look right. A hint with nothing
written in it is left out, and an item whose hints are all empty carries no catalog at
all rather than an empty one, since a catalog has to hold at least one card. Two backend
tests pin the result: the document this editor emits is schema-valid, and moving the
catalog ahead of the body is not; and derive_perseus_item still recovers the hints from
it, which is what makes editing a converted question safe to publish.

Only a question that arrived with hints offers the section. That is a scope limit, not a
technical one: assembleItemXml writes the catalog for whatever hints it is handed, and
publishing derives legacy hints from the cards' support value without asking where the item
came from, so hints authored here would survive too — except on the shapes Perseus cannot
express, ordering and free response, where the QTI package would keep them and the derived
Perseus item would not. Whether to offer them everywhere waits on that. The gate is read
once from the parsed item rather than from the live list, so removing the last hint does not
take the section away while the author is still working in it.

A hint is the only thing an author can change on a question with nothing to answer, and
that turned out to be enough to lose the question. Such an item has a body and no
interaction, so no interaction editor mounts and the card held no body of its own;
reassembling from that wrote an empty <qti-item-body/> over the question's text. The body
is read from the item now and seeded whether or not an interaction was found.

HintsSection keeps the shape and styling of the HintsEditor it replaces: bordered cards
that open one at a time into a rich-text editor, and the same move/delete actions and
dashed add button, now drawn with the components the interaction editors already share.
Its header is labelled like the "Question" and "Answers" fields beside it and tints on
hover the way a flat button does, so it reads as one of the editor's own sections rather
than something bolted underneath. A card is only inviting where clicking it does
something: in view mode the reader gets no pointer and no hover tint, because there is
nothing to open.

Its heading joins the ones already in the card: the field labels the interaction
editors put above the question and the answers become headings at the same level,
so a question reads as a section with named parts rather than a run of bold text.
They set their own margins, since a heading brings the browser stylesheet's.

The header is a disclosure, built like the one the community-library modal uses: a button
that says whether what it controls is showing, inside a heading, so the hints sit under
the question in the document outline. The controlled element stays in the document and is
hidden rather than removed, so aria-controls always resolves, while what it holds is
mounted only while open — a rich-text editor per hint per question is not worth paying
for unseen.

Theme values are bound in the style block rather than assembled in JavaScript, so the
component needs no instance handle: the focus ring is :focus-visible, which distinguishes
keyboard from pointer focus the same way $coreOutline does, without asking the theme
plugin.

Hints are supplementary to the question, so a closed card keeps them out of the way until
the reader asks for answers.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: AlexVelezLl

contentcuration/contentcuration/frontend/shared/views/QTIEditor/components/HintsSection/__tests__/HintsSection.spec.js

@@ -0,0 +1,160 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import HintsSection from '../index.vue';
+import { qtiEditorStrings } from '../../../qtiEditorStrings';
+
+jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor');
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => {
+  const { ref } = require('vue');
+  return {
+    __esModule: true,
+    default: () => ({ windowIsSmall: ref(false) }),
+  };
+});
+
+const {
+  hintsLabel$,
+  noHintsPlaceholder$,
+  hintPlaceholder$,
+  editHintLabel$,
+  addHintBtn$,
+  deleteHintBtn$,
+  moveHintUpBtn$,
+  moveHintDownBtn$,
+} = qtiEditorStrings;
+
+const HINTS = [
+  { id: 'hint_a', content: '<p>test</p>' },
+  { id: 'hint_b', content: '<p>test2 2</p>' },
+  { id: 'hint_c', content: '<p>test3 3</p>' },
+];
+
+const renderComponent = (props = {}) =>
+  render(HintsSection, {
+    props: { hints: HINTS, mode: 'edit', ...props },
+    routes: new VueRouter(),
+  });
+
+const expand = async () => {
+  await fireEvent.click(screen.getByRole('button', { name: hintsLabel$() }));
+};
+
+describe('HintsSection', () => {
+  it('starts collapsed, showing only the header', () => {
+    renderComponent();
+    expect(screen.getByText(hintsLabel$())).toBeInTheDocument();
+    expect(screen.queryAllByTestId('hint')).toHaveLength(0);
+  });
+
+  it('lists the hints once expanded', async () => {
+    renderComponent();
+    await expand();
+    expect(screen.getAllByTestId('hint')).toHaveLength(3);
+  });
+
+  it('reports the section as expanded to assistive technology', async () => {
+    renderComponent();
+    const toggle = screen.getByRole('button', { name: hintsLabel$() });
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    await expand();
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('says so when the question has no hints left', async () => {
+    renderComponent({ hints: [] });
+    await expand();
+    expect(screen.getByText(noHintsPlaceholder$())).toBeInTheDocument();
+  });
+
+  it('shows a placeholder for a hint with nothing written in it', async () => {
+    renderComponent({ hints: [{ id: 'hint_a', content: '' }] });
+    await expand();
+    expect(screen.getByText(hintPlaceholder$({ index: 1 }))).toBeInTheDocument();
+  });
+
+  describe('editing', () => {
+    it('appends an empty hint', async () => {
+      const { emitted } = renderComponent();
+      await expand();
+      await fireEvent.click(screen.getByRole('button', { name: addHintBtn$() }));
+
+      const [hints] = emitted()['update:hints'].at(-1);
+      expect(hints).toHaveLength(4);
+      expect(hints[3].content).toBe('');
+    });
+
+    it('removes the hint whose delete action was used', async () => {
+      const { emitted } = renderComponent();
+      await expand();
+      await fireEvent.click(screen.getAllByRole('button', { name: deleteHintBtn$() })[1]);
+
+      const [hints] = emitted()['update:hints'].at(-1);
+      expect(hints.map(h => h.id)).toEqual(['hint_a', 'hint_c']);
+    });
+
+    it('moves a hint up', async () => {
+      const { emitted } = renderComponent();
+      await expand();
+      await fireEvent.click(screen.getAllByRole('button', { name: moveHintUpBtn$() })[2]);
+
+      const [hints] = emitted()['update:hints'].at(-1);
+      expect(hints.map(h => h.id)).toEqual(['hint_a', 'hint_c', 'hint_b']);
+    });
+
+    it('moves a hint down', async () => {
+      const { emitted } = renderComponent();
+      await expand();
+      await fireEvent.click(screen.getAllByRole('button', { name: moveHintDownBtn$() })[0]);
+
+      const [hints] = emitted()['update:hints'].at(-1);
+      expect(hints.map(h => h.id)).toEqual(['hint_b', 'hint_a', 'hint_c']);
+    });
+
+    it('cannot move the first hint up or the last one down', async () => {
+      renderComponent();
+      await expand();
+      expect(screen.getAllByRole('button', { name: moveHintUpBtn$() })[0]).toBeDisabled();
+      expect(screen.getAllByRole('button', { name: moveHintDownBtn$() })[2]).toBeDisabled();
+    });
+  });
+
+  describe('opening a hint from the keyboard', () => {
+    it('reaches each hint through a button that names which one it is', async () => {
+      renderComponent();
+      await expand();
+      expect(
+        screen.getByRole('button', { name: editHintLabel$({ number: 2 }) }),
+      ).toBeInTheDocument();
+    });
+
+    it('opens the hint that button belongs to, and stops offering it', async () => {
+      renderComponent();
+      await expand();
+      await fireEvent.click(screen.getByRole('button', { name: editHintLabel$({ number: 2 }) }));
+      expect(
+        screen.queryByRole('button', { name: editHintLabel$({ number: 2 }) }),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: editHintLabel$({ number: 1 }) }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('view mode', () => {
+    it('offers no way to change the hints', async () => {
+      renderComponent({ mode: 'view' });
+      await expand();
+      expect(screen.getAllByTestId('hint')).toHaveLength(3);
+      expect(screen.queryByRole('button', { name: addHintBtn$() })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: deleteHintBtn$() })).not.toBeInTheDocument();
+    });
+
+    it('offers no clickable region for a hint that cannot be edited', async () => {
+      renderComponent({ mode: 'view' });
+      await expand();
+      expect(
+        screen.queryByRole('button', { name: editHintLabel$({ number: 1 }) }),
+      ).not.toBeInTheDocument();
+    });
+  });
+});