feat(QTI): add associate and match interaction viewers by habibayman · Pull Request #15151 · learningequality/kolibri

habibayman · 2026-08-05T09:30:48Z

Summary

This PR adds qti-associate-interaction and qti-match-interaction to the QTI viewer, along with some shared slot-keyboard and choice-reading utilities both of them needed

$\color{rgba(0, 128, 0)}{\textsf{Associate work}}$

AssociateInteraction.vue renders qti-associate-interaction as a response pool plus a list of two-slot pair rows; SimpleAssociableChoice.vue backs qti-simple-associable-choice (also used by match). Both registered in AssessmentItem.vue.
useAssociateSlots owns the pair state: slots are normalised on read from max-associations, the pool is whatever is not in a slot, and a placement displaces whatever it lands on. The response is written back as directed pairs.
Placement works three ways — click a response then a slot, drag with the kolibri-common draggable components, or step a slot with the arrow keys. Matched pool chips are disabled rather than removed so the pool does not reflow, and text selection is off on chips so dragging does not select.
New sandbox items under an Associate section: Capital Cities, fixed choice, and images.
Covered by AssociateInteraction.spec.js and useAssociateSlots.spec.js.

$\color{rgba(255, 165, 0)}{\textsf{Refactoring work}}$

utils/choices.js collects the vnode reading each choice-based interaction was doing for itself: getComponentTag, isFixed, choiceText/vnodeToText, and orderChoices (seeded shuffle that keeps fixed choices in place). ChoiceInteraction, InlineChoiceInteraction and OrderInteraction now use it instead of their own copies. vnodeToText also falls back to alt text, so an image-only choice still has an accessible name.
useSlotListbox was extracted out of associate and is now shared with match. A slot is a role="listbox" with aria-activedescendant over visually hidden options, stepped with up/down rather than opened, with a leading "No response" option so clearing an answer is just another step. Tab reaches the slots and skips the pool. The up/down affordance (.qti-slot-stepper) is revealed on keyboard focus only, via KDS's body[modality=keyboard].
Draggable chip and list-item rendering was unified across the two interactions.
AnswerGuide gains a chooseThenTarget instruction for both interaction types.

$\color{rgba(0, 128, 0)}{\textsf{Match work}}$

MatchInteraction.vue renders qti-match-interaction from its two qti-simple-match-set sets — the first set becomes the rows, the second the response pool. [SimpleMatchSet.vue] exists so DOMPurify keeps the element and its choices; it is never mounted on its own.
useMatchRows holds the row state and every limit in one place: per-choice match-max on both sides, the interaction's max-associations total, and PROBLEM codes returned on refusal so the explanation a learner sees cannot drift from the rule that produced it.
Same three placement paths as associate, with highlight logic on the answer fields, refusal explanations surfaced to the learner, and the max-associations warning shown as soon as the cap is reached rather than on the next attempt.
Covered by MatchInteraction.spec.js and useMatchRows.spec.js.

References

Reviewer guidance

Navigate to http://localhost:8000/en/learn/#/qti_sandbox and try all the associate and match interaction examples
Note that tabular match is not supported
Visuals:
Associate Interaction using all 3 possible patterns to pick a choice

qti-associate.webm

Match Interaction using all 3 possible patterns to pick a choice

qti-match.webm

AI usage

All unit tests are written with claude in addition to some of the styles and the entire warnings showing feature for match

learning-equality-bot · 2026-08-05T09:31:34Z

👋 Hi @habibayman, thanks for contributing!

For the review process to begin, please verify that the following is satisfied:

Contribution is aligned with our contributing guidelines
Pull request description has correctly filled AI usage section & follows our AI guidance:
AI guidance

State explicitly whether you didn't use or used AI & how.

If you used it, ensure that the PR is aligned with Using AI as well as our DEEP framework. DEEP asks you:
- Disclose — Be open about when you've used AI for support.
- Engage critically — Question what is generated. Review code for correctness and unnecessary complexity.
- Edit — Review and refine AI output. Remove unnecessary code and verify it still works after your edits.
- Process sharing — Explain how you used the AI so others can learn.
Examples of good disclosures:

"I used Claude Code to implement the component, prompting it to follow the pattern in ComponentX. I reviewed the generated code, removed unnecessary error handling, and verified the tests pass."

"I brainstormed the approach with Gemini, then had it write failing tests for the feature. After reviewing the tests, I used Claude Code to generate the implementation. I refactored the output to reduce verbosity and ran the full test suite."

Also check that issue requirements are satisfied & you ran pre-commit locally.

Pull requests that don't follow the guidelines will be closed.

Reviewer assignment can take up to 2 weeks.

github-actions · 2026-08-05T09:48:03Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.20.0a2.dev78_ga3c8a6c16.pex
Windows Installer (EXE)	kolibri-setup-0.20.0a2.dev78+ga3c8a6c16-unsigned.exe
Debian Package	kolibri_0.20.0a2.dev78+ga3c8a6c16-0ubuntu1_all.deb
Debian Package	kolibri-server_0.20.0~a2.dev78+ga3c8a6c16-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.20.0a2.dev78+ga3c8a6c16.dmg
Android Package (APK)	kolibri-0.20.0a2.dev78+ga3c8a6c16-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.20.0a2.dev78+ga3c8a6c16.zip
TAR file	kolibri-0.20.0a2.dev78+ga3c8a6c16.tar.gz
WHL file	kolibri-0.20.0a2.dev78+ga3c8a6c16-py3-none-any.whl

Smoke test screenshot

Download screenshot

github-actions · 2026-08-12T14:06:13Z

npm Package Versions

Warning

The following packages have changed files but no version bump:

Package	Version	Changed files
kolibri	0.18.0	1

If these changes affect published code, consider bumping the version.

rtibbles

Just a quick first pass review - this seems to be going in a good direction, the main thing that surprised me was the seemingly limited code reuse between Match and Associate - I had assumed because one is essentially the "1 fixed column" form of the other that we would be sharing a lot more code with a one column 'prefilled' and not dynamic. Clearly this is not 3 instances, so there could be a good case to be made for not sharing logic, but they seemed so similar and the specs are so aligned it feels worthy of discussion.

rtibbles · 2026-08-12T20:21:08Z

+
+      // Choices are static: parse the slot vnodes once rather than on every render.
+      const allContent = (slots.default && slots.default()) || [];
+      const nonChoiceContent = allContent.filter(vnode => getComponentTag(vnode) !== CHOICE_TAG);


I am squinting my eyes and starting to see things we may be able to reuse here. Rule of three is coming into view!

rtibbles · 2026-08-12T20:21:37Z

+
+      const rowCount = computed(() => {
+        const max = typedProps.maxAssociations.value;
+        // max-associations="0" means unlimited, so offer as many pairs as the


I guess at least it was 0 and not -1.

I think it has to be a Non-negative number as per the spec

rtibbles · 2026-08-12T20:22:49Z

      provide('isSelected', isSelected);
      provide('toggleSelection', toggleSelection);

-      const getShuffledOrder = choices => {


Reduce, reuse, recycle! Very good.

rtibbles · 2026-08-12T20:26:05Z

+
+  <span
+    class="qti-simple-associable-choice"
+    dir="auto"


Is this purely to add dir="auto"? Not objecting, just checking the motivation.

actually it was because createSafeHTML only keeps a custom tag (and its attributes) when there's a registered component declaring it, so without this the qti-simple-associable-choice elements and their identifier/match-max attributes are stripped during sanitization.

So, related to my comment below also - sometimes we just want to stop things getting stripped - although in this case, having the "span" is needed, so I think this one does earn its keep.

rtibbles · 2026-08-12T20:29:50Z

+<template>
+
+  <!--
+    Rendered indirectly: MatchInteraction reads the two sets out of its slot to


If there are multiple cases like this, it may be better simply to register "pass through" qti tags to tell DOMPurify to leave them alone.

marcellamaki · 2026-08-14T15:05:10Z

Hi @habibayman! I know this is still a work in progress, but sharing a little bit of manual QA feedback so you have it as you're working!

Screen.Recording.2026-08-14.at.10.36.15.AM.mov

I'm not sure how much of this is related to the updates to the draggable work, vs. how much of this can be managed here, but I think there are some non-blocking but worthwhile possibilities to consider for improving the UI for the mouse-drag experience (not the click and tap experience):

Can we disable text selection?
There is a tiny lag between when the card becomes actually draggable after mouse down. It's not a big deal, but I think a visual indicator of selection would be helpful. My guess is that right now the selection state (such as for click and tap experience) is on mouse up. Could we make it on mouse down, so that the user has some immediate visual feedback about what they've selected? I'm not sure how much of a difference that would make, but maybe we can try it and see how it feels.

Screen.Recording.2026-08-14.at.10.35.49.AM.mov

At the moment, I'm finding the "add the first available answer" by default behavior a bit strange, although I know it's in the spec. I think this will be greatly improved with the addition of the focus outline and the arrow keys that we had discussed already, so looking forward to seeing that update when it's ready! We can go from there if further adjustments are needed

…xtures

…rows

…sibility

…when we reach it

habibayman · 2026-08-17T09:55:47Z

Hi @marcellamaki, thank you so much for your input, that helped!

We sure can. and I did in 616e738
That is an external bug that Samson fixed here in Confine the drag press-and-hold delay to touch input #15186 and I reviewed and we merged it 🎉
I rebased this PR to include the fix and it works now, I tested it again.

I'm finding the "add the first available answer" by default behavior a bit strange

I don't quite get which part of the UI you're referring to here, we can also take this to slack if you'd like :)

The PR is now ready for another review whenever you have the time and also includes all the changes we agreed on in our latest awesome assessments work meeting.

github-actions Bot added DEV: renderers HTML5 apps, videos, exercises, etc. APP: Device Re: Device App (content import/export, facility-syncing, user permissions, etc.) APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend SIZE: very large labels Aug 5, 2026

habibayman changed the title ~~feat(QTI)~~ feat(QTI): add associate interaction viewer (connect pairs) Aug 5, 2026

habibayman force-pushed the feat/qti-associate-match branch from b82b9cc to 49c46e4 Compare August 10, 2026 11:38

habibayman marked this pull request as ready for review August 12, 2026 14:29

rtibbles reviewed Aug 12, 2026

View reviewed changes

habibayman force-pushed the feat/qti-associate-match branch from 80a5b77 to da30398 Compare August 13, 2026 20:46

habibayman changed the title ~~feat(QTI): add associate interaction viewer (connect pairs)~~ feat(QTI): add associate and match interaction viewers Aug 13, 2026

habibayman force-pushed the feat/qti-associate-match branch from da30398 to 3020bdf Compare August 13, 2026 20:49

habibayman force-pushed the feat/qti-associate-match branch 2 times, most recently from cf1fac8 to 5cb2dcc Compare August 16, 2026 15:33

habibayman added 12 commits August 17, 2026 11:25

feat(connect-pairs): add useAssociateSlots composable for pair state

1a1f339

feat(connect-pairs): add AssociateInteraction static rendering and fi…

a382988

…xtures

feat(connect-pairs): add click only placement wiring

3228a96

feat(connect-pairs): wire basic dragging functionality

d1baa70

fix(connect-pairs): disable & not remove matched items in the pool

ab97c60

fix(connect-pairs): chips stretching oversize on drag

b478c0d

feat(connect-pairs): add keyboard navigation support using up/down ar…

d76a5fb

…rows

refactor(qti): extract shared vnode/shuffle utils across interactions

00be3f3

refactor: extract useSlotListbox composable from AssociateInteraction

a751149

feat(match): add Match Interaction static rendering

9e172f7

feat(match): add click placement for MatchInteraction

21530b0

feat(match): wire drag/drop for MatchInteraction

d13085e

habibayman added 12 commits August 17, 2026 11:26

fix(qti-slot): add data-focus attribute to listbox for improved acces…

620ad69

…sibility

feat(qti-slot): add up/down affordance for stepping values in listbox

ec1a075

feat(match): wire keyboard a11y usage

8511c39

feat(match): enhance placement feedback with refusal explanations

bef6013

feat(match): update + highlight logic for answer fields

c04a778

refactor(interactions): rendering of draggable chips and list items

a956053

feat(qti-slot): enhance keyboard nav with empty select option

2b51b8b

fix: merge conflicts in qti items.js

2d8b85c

fix: merge conflicts in qti items.js

d486e5a

refactor(match): make the max-associations warning appear as soon as …

bf69507

…when we reach it

fix(qti-slots): disable text selection for response pool chips

616e738

fix: merge conflicts in itms.js to add custom interaction data

bbc866f

habibayman force-pushed the feat/qti-associate-match branch from 5cb2dcc to bbc866f Compare August 17, 2026 08:26

This was referenced Aug 18, 2026

Product Issue: Gap Match QTI Interaction #15213

Open

feat(QTI): add Gap Match interaction viewer #15214

Open

Uh oh!

Uh oh!

Conversation

habibayman commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

$\color{rgba(0, 128, 0)}{\textsf{Associate work}}$

$\color{rgba(255, 165, 0)}{\textsf{Refactoring work}}$

$\color{rgba(0, 128, 0)}{\textsf{Match work}}$

References

Reviewer guidance

AI usage

Uh oh!

learning-equality-bot Bot commented Aug 5, 2026

Uh oh!

github-actions Bot commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 12, 2026

npm Package Versions

Uh oh!

rtibbles left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marcellamaki commented Aug 14, 2026

Uh oh!

habibayman commented Aug 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

habibayman commented Aug 5, 2026 •

edited

Loading

github-actions Bot commented Aug 5, 2026 •

edited

Loading