possible to add HTML in table view, for like images

Citolab · Sep 4, 2023 · f71aceb · f71aceb
1 parent 676f451
commit f71aceb
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 2 deletions.
diff --git a/...lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.stories.ts b/...lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.stories.ts
@@ -86,3 +86,75 @@ export const Tabular = {
       ></qti-response-processing>
     </qti-assessment-item>`
 };
+
+export const Images = {
+  render: () =>
+    html`<qti-assessment-item
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xmlns="http://www.imsglobal.org/xsd/imsqtiasi_v3p0"
+      xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqtiasi_v3p0 https://purl.imsglobal.org/spec/qti/v3p0/schema/xsd/imsqti_asiv3p0_v1p0.xsd"
+      identifier="match"
+      title="Characters and Plays"
+      adaptive="false"
+      time-dependent="false"
+    >
+      <qti-response-declaration identifier="RESPONSE" cardinality="multiple" base-type="directedPair">
+        <qti-correct-response>
+          <qti-value>C R</qti-value>
+          <qti-value>D M</qti-value>
+          <qti-value>L M</qti-value>
+          <qti-value>P T</qti-value>
+        </qti-correct-response>
+        <qti-mapping default-value="0">
+          <qti-map-entry map-key="C R" mapped-value="1"></qti-map-entry>
+          <qti-map-entry map-key="D M" mapped-value="0.5"></qti-map-entry>
+          <qti-map-entry map-key="L M" mapped-value="0.5"></qti-map-entry>
+          <qti-map-entry map-key="P T" mapped-value="1"></qti-map-entry>
+        </qti-mapping>
+      </qti-response-declaration>
+      <qti-outcome-declaration identifier="SCORE" cardinality="single" base-type="float"></qti-outcome-declaration>
+      <qti-item-body>
+        <qti-match-interaction
+          @qti-interaction-response="${action(`qti-interaction-response`)}"
+          class="qti-match-tabular"
+          max-associations="4"
+          response-identifier="RSP-C"
+        >
+          <qti-simple-match-set>
+            <qti-simple-associable-choice identifier="PROD1" match-max="1"
+              ><img alt="" src="./images/Biologische kipfilet.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="PROD2" match-max="1"
+              ><img alt="" src="./images/Verantwoorde wilde zalmfilets.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="PROD3" match-max="1"
+              ><img alt="" src="./images/Duurzamer geproduceerde melk.png"
+            /></qti-simple-associable-choice>
+          </qti-simple-match-set>
+          <qti-simple-match-set>
+            <qti-simple-associable-choice identifier="BINA" match-max="2"
+              ><img alt="" src="./images/asc.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="BINB" match-max="2"
+              ><img alt="" src="./images/EU-Biologisch.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="BINC" match-max="2"
+              ><img alt="" src="./images/Rainforest Alliance.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="BIND" match-max="2"
+              ><img alt="" src="./images/MSC.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="BINE" match-max="2"
+              ><img alt="" src="./images/Planet proof.png"
+            /></qti-simple-associable-choice>
+            <qti-simple-associable-choice identifier="BINF" match-max="2"
+              ><img alt="" src="./images/Fartrade.png"
+            /></qti-simple-associable-choice>
+          </qti-simple-match-set>
+        </qti-match-interaction>
+      </qti-item-body>
+      <qti-response-processing
+        template="https://purl.imsglobal.org/spec/qti/v3p0/rptemplates/map_response.xml"
+      ></qti-response-processing>
+    </qti-assessment-item>`
+};
diff --git a/src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.ts b/src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.ts
@@ -4,6 +4,7 @@ import { DragDropInteractionMixin } from '../internal/drag-drop/drag-drop-intera
 import '../qti-simple-associable-choice';
 import { property, state } from 'lit/decorators.js';
 import { QtiSimpleAssociableChoice } from '../qti-simple-associable-choice';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 interface Column {
   id: number;
@@ -50,11 +51,11 @@ export class QtiMatchInteraction extends DragDropInteractionMixin(
       <table>
         <tr>
           <td></td>
-          ${this.cols.map((col, i) => html`<th>${col.innerHTML}</th>`)}
+          ${this.cols.map((col, i) => html`<th>${unsafeHTML(col.innerHTML)}</th>`)}
         </tr>
         ${this.rows.map(
           (row, r) => html`<tr>
-            <td>${row.innerHTML}</td>
+            <td>${unsafeHTML(row.innerHTML)}</td>
             ${this.cols.map((col, c) => {
               const value = `${row.getAttribute('identifier')} ${col.getAttribute('identifier')}`;
               return html`<td>
@@ -70,6 +71,7 @@ export class QtiMatchInteraction extends DragDropInteractionMixin(
                       this.response = this.response.filter(v => v !== value);
                     }
                     this.requestUpdate();
+                    this.saveResponse();
                   }}
                 />
               </td>`;