feat(QTI): add associate and match interaction viewers

kolibri/plugins/qti_viewer/frontend/components/AnswerGuide.vue

@@ -44,6 +44,11 @@
       context:
         'Tells the learner to complete the passage by choosing an option in each inline dropdown gap',
     },
+    chooseThenTarget: {
+      message: 'Choose a response, then choose a target.',
+      context:
+        'Tells the learner how to build each pair in a connect-pairs or match interaction: pick a response from the pool, then pick the answer slot to put it in',
+    },
     shortAnswer: {
       message: 'Short answer only:',
       context: 'Tells the learner to type their answer in a text entry interaction',

kolibri/plugins/qti_viewer/frontend/components/AssessmentItem.vue

@@ -38,6 +38,10 @@
   import OrderInteraction from './interactions/OrderInteraction.vue';
   import InlineChoiceInteraction from './interactions/InlineChoiceInteraction.vue';
   import InlineChoice from './interactions/InlineChoice.vue';
+  import AssociateInteraction from './interactions/AssociateInteraction.vue';
+  import SimpleAssociableChoice from './interactions/SimpleAssociableChoice.vue';
+  import MatchInteraction from './interactions/MatchInteraction.vue';
+  import SimpleMatchSet from './interactions/SimpleMatchSet.vue';
 
   const $themeTokens = themeTokens();
 
@@ -49,6 +53,10 @@
     [OrderInteraction.tag]: OrderInteraction,
     [InlineChoiceInteraction.tag]: InlineChoiceInteraction,
     [InlineChoice.tag]: InlineChoice,
+    [AssociateInteraction.tag]: AssociateInteraction,
+    [SimpleAssociableChoice.tag]: SimpleAssociableChoice,
+    [MatchInteraction.tag]: MatchInteraction,
+    [SimpleMatchSet.tag]: SimpleMatchSet,
   });
 
   /** @typedef {import('../utils/qti/values.js').QTIValue} QTIValue */

kolibri/plugins/qti_viewer/frontend/components/__fixtures__/structure.js

@@ -331,6 +331,23 @@ export default [
       },
     ],
   },
+  {
+    title: 'Associate',
+    items: [
+      {
+        identifier: 'associate-interaction-1',
+        title: 'Capital Cities',
+      },
+      {
+        identifier: 'associate-interaction-fixed',
+        title: 'Associate - Fixed Choice',
+      },
+      {
+        identifier: 'associate-interaction-images',
+        title: 'Associate - Images',
+      },
+    ],
+  },
   {
     title: 'Match',
     items: [