@pie-element/image-cloze-association 8.0.1 → 8.2.0

package/src/index.js

@@ -15,7 +15,14 @@ export default class ImageClozeAssociation extends HTMLElement {
   }
 
   isComplete() {
-    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};
+    const {
+      autoplayAudioEnabled,
+      completeAudioEnabled,
+      completeResponses,
+      duplicateResponses,
+      maxResponsePerZone,
+      responseAreasToBeFilled,
+    } = this._model || {};
     const elementContext = this;
 
     // check audio completion if audio settings are enabled and audio actually exists
@@ -35,11 +42,41 @@ export default class ImageClozeAssociation extends HTMLElement {
       return false;
     }
 
-    if (!Array.isArray(this._session.answers)) {
+    const { answers } = this._session;
+
+    if (!Array.isArray(answers)) {
       return false;
     }
 
-    return Array.isArray(this._session.answers) && this._session.answers.length > 0;
+    // filter answers by containerIndex and count the ones with content
+    const filledResponseAreas = [...new Map(answers.map((item) => [item.containerIndex, item])).values()].length;
+    // check if an answer choice was added to at least as many response areas
+    // as the number of populated response areas in the correct answer
+    const areResponseAreasFilled = filledResponseAreas >= responseAreasToBeFilled;
+
+    if (maxResponsePerZone > 1) {
+      if (duplicateResponses) {
+        // an answer choice can be used multiple times
+        return areResponseAreasFilled;
+      }
+
+      const allAnswersValue = answers.map((answer) => answer.value);
+
+      // check if any correct answer have any unplaced answer choices
+      const requiredAnswersPlaced = completeResponses.some((response) =>
+        response.every((val) => allAnswersValue.includes(val)),
+      );
+
+      if (!requiredAnswersPlaced) {
+        // correct answer have unplaced answer choices
+        return areResponseAreasFilled;
+      }
+
+      // all choices (required for a correct response) were placed into a response area
+      return requiredAnswersPlaced;
+    }
+
+    return areResponseAreasFilled;
   }
 
   set session(s) {