Add the QTI associate interaction plugin

[rtibblesbot]

Summary

"Connect pairs" questions could not be authored: an item whose body is <qti-associate-interaction> had no plugin, so its header read "Unknown type" and its body was uneditable. This adds the plugin end to end — the flat choice pool parses into correct pairs plus distractors, serializes back to a cardinality="multiple" base-type="pair" declaration, validates, and renders in an editor.

References

Fixes #6101.

Reviewer guidance

JS tests pass on CI. Beyond those, on the QTI demo page (/channels/<id>/#/qti-demo, question 7):

1. Edit the item, add a pair, and type into both cards — the header stays "Connect pairs" and the correct-response <qti-value> gains a matching space-separated id couple.
2. Clear the question, blank one card of a pair, and give a pair the same text on both sides — three distinct messages appear, one per rule.
3. Close the editor and reopen it — pair order and within-pair order survive the round trip.
4. Narrow the window below the small breakpoint — each pair stacks with its number and delete control on one row.

Worth questioning:

• buildXML collapses two choices with equal text into one pool entry and bumps its match-max, so an author who deliberately wants two visually identical options gets one. Blank content is exempt, otherwise a freshly added pair could not round-trip.
• A distractor is derived from match-max minus the choice's appearances in the correct response, so hand-written XML with a match-max larger than intended silently gains distractors on import.

Screenshots

State	Screenshot
Edit mode
View mode, answers hidden
View mode, answers shown
Validation
Small screen

axe-core (WCAG 2 AA) on the demo page reports one violation: colour contrast on AddListItemButton's label. It reproduces on the unchanged ordering editor, which uses the same shared component.

AI usage

Used Claude Code to implement the plugin test-first against a written plan, following the ordering interaction as the reference. Verified with the Jest suite, pre-commit, manual QA on the QTI demo page, and an axe-core audit.

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

• Ran pre-flight CI checks (lint, format, tests) and verified all pass
• Rebased onto the target branch and resolved any conflicts
• Reorganized commit history into clean, logical commits
• Audited the diff to ensure only issue-relevant files are changed
• Built PR body from the repository's PR template with evidence blocks

🟡 Waiting for feedback Last updated: 2026-08-31 16:54 UTC

[AlexVelezLl]

@rtibblesbot, from the screenshots, I can see that the padding of the chips is not the same as in the specs, and the colors of the pair rows are not the same as in the specs. Take a closer look at the images in the issue and check that everything is correctly aligned.