feat(QTI): add Gap Match interaction viewer

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

@@ -44,10 +44,20 @@
       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',
     },
+    gapMatch: {
+      message: 'Choose a response, then choose a gap.',
+      context:
+        'Tells the learner how to fill each blank in a gap match question: pick a response from the pool, then pick the gap in the passage to put it in',
+    },
   });
 
   export default {

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

@@ -38,6 +38,14 @@
   import InlineChoiceInteraction from './interactions/InlineChoiceInteraction.vue';
   import InlineChoice from './interactions/InlineChoice.vue';
   import CustomInteraction from './interactions/CustomInteraction.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';
+  import GapMatchInteraction from './interactions/GapMatchInteraction.vue';
+  import Gap from './interactions/Gap.vue';
+  import GapText from './interactions/GapText.vue';
+  import GapImg from './interactions/GapImg.vue';
 
   const $themeTokens = themeTokens();
 
@@ -50,6 +58,14 @@
     [InlineChoiceInteraction.tag]: InlineChoiceInteraction,
     [InlineChoice.tag]: InlineChoice,
     [CustomInteraction.tag]: CustomInteraction,
+    [AssociateInteraction.tag]: AssociateInteraction,
+    [SimpleAssociableChoice.tag]: SimpleAssociableChoice,
+    [MatchInteraction.tag]: MatchInteraction,
+    [SimpleMatchSet.tag]: SimpleMatchSet,
+    [GapMatchInteraction.tag]: GapMatchInteraction,
+    [Gap.tag]: Gap,
+    [GapText.tag]: GapText,
+    [GapImg.tag]: GapImg,
   });
 
   /** @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: [
@@ -387,6 +404,10 @@ export default [
         identifier: 'q6-gap-match-interaction-sv-4',
         title: 'Gap Match - Gap Widths',
       },
+      {
+        identifier: 'gap-match-distractor-pools',
+        title: 'Gap Match - Answer Specific Pools',
+      },
     ],
   },
   {