eat-js-sdk 0.0.25 → 0.0.26

package/dist/eat-prompt-builder.mjs

@@ -1573,8 +1573,7 @@
   // src/lib/components/prompt/mcq/PromptMCQ.svelte
   function get_each_context(ctx, list, i) {
     const child_ctx = ctx.slice();
-    child_ctx[16] = list[i][0];
-    child_ctx[17] = list[i][1];
+    child_ctx[17] = list[i];
     child_ctx[19] = i;
     return child_ctx;
   }
@@ -1584,7 +1583,7 @@
     let div0_class_value;
     let t2;
     let current;
-    let each_value = ensure_array_like(Object.entries(
+    let each_value = ensure_array_like(Object.values(
       /*options*/
       ctx[7]
     ));
@@ -1626,7 +1625,7 @@
         }
         if (dirty & /*selectedOption, Object, options, isFinished, isResultCorrect, handleOptionClick*/
         398) {
-          each_value = ensure_array_like(Object.entries(
+          each_value = ensure_array_like(Object.values(
             /*options*/
             ctx2[7]
           ));
@@ -1851,7 +1850,7 @@
     function click_handler() {
       return (
         /*click_handler*/
-        ctx[10](
+        ctx[11](
           /*option*/
           ctx[17]
         )
@@ -2210,10 +2209,10 @@
     let { isDataSaving } = $$props;
     let { isFinished = false } = $$props;
     let { isResultCorrect = false } = $$props;
+    let { isPreviewModeInteractive = false } = $$props;
     const { rubric, interaction, metadata, scoringMetadata } = sessionData;
     const { prompt, options } = interaction;
     let selectedOption = null;
-    let resultFeedbackTitle = null;
     let resultFeedback = null;
     const dispatch = createEventDispatcher();
     if (metadata) {
@@ -2222,23 +2221,34 @@
       const { answer_id: answerChoiceId } = currentOption;
       selectedOption = answerChoiceId[0];
     }
+    const getFeedback = () => {
+      if (!options || !selectedOption)
+        return;
+      const feedbackData = Object.values(options).filter((option) => option.id === selectedOption);
+      $$invalidate(4, resultFeedback = feedbackData[0].feedback || resultFeedback);
+    };
     if (isFinished) {
-      if (options && selectedOption) {
-        const feedbackData = Object.values(options).filter((option) => option.id === selectedOption);
-        resultFeedbackTitle = isResultCorrect ? "Well done!" : "Nice try!";
-        resultFeedback = feedbackData[0].feedback || resultFeedback;
-      }
+      getFeedback();
       const { answerId, hasAnswer } = scoringMetadata;
       selectedOption = answerId && hasAnswer ? answerId : selectedOption;
     }
     const handleOptionClick = (optionId, option) => {
-      if (isDataSaving || optionId === selectedOption || isFinished)
+      if (isDataSaving || optionId === selectedOption || isFinished && !isPreviewModeInteractive)
         return;
       $$invalidate(3, selectedOption = optionId);
       dispatch("saveOption", {
         answer_id: [optionId],
         answer_choice: [option]
       });
+      if (isPreviewModeInteractive) {
+        setTimeout(
+          () => {
+            $$invalidate(4, resultFeedback = null);
+            getFeedback();
+          },
+          50
+        );
+      }
     };
     const click_handler = (option) => handleOptionClick(option.id, option.answer);
     $$self.$$set = ($$props2) => {
@@ -2250,6 +2260,8 @@
         $$invalidate(1, isFinished = $$props2.isFinished);
       if ("isResultCorrect" in $$props2)
         $$invalidate(2, isResultCorrect = $$props2.isResultCorrect);
+      if ("isPreviewModeInteractive" in $$props2)
+        $$invalidate(10, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
     return [
       isDataSaving,
@@ -2262,6 +2274,7 @@
       options,
       handleOptionClick,
       sessionData,
+      isPreviewModeInteractive,
       click_handler
     ];
   }
@@ -2272,7 +2285,8 @@
         sessionData: 9,
         isDataSaving: 0,
         isFinished: 1,
-        isResultCorrect: 2
+        isResultCorrect: 2,
+        isPreviewModeInteractive: 10
       });
     }
     get sessionData() {
@@ -2303,8 +2317,15 @@
       this.$$set({ isResultCorrect });
       flush();
     }
+    get isPreviewModeInteractive() {
+      return this.$$.ctx[10];
+    }
+    set isPreviewModeInteractive(isPreviewModeInteractive) {
+      this.$$set({ isPreviewModeInteractive });
+      flush();
+    }
   };
-  customElements.define("prompt-mcq", create_custom_element(PromptMCQ, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-mcq", create_custom_element(PromptMCQ, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" }, "isPreviewModeInteractive": { "type": "Boolean" } }, [], [], true));
   var PromptMCQ_default = PromptMCQ;
 
   // node_modules/autosize/dist/autosize.esm.js
@@ -2416,8 +2437,8 @@
         textarea.disabled = /*isDataSaving*/
         ctx[0];
         attr(textarea, "autocomplete", "off");
-        textarea.readOnly = /*isFinished*/
-        ctx[1];
+        textarea.readOnly = /*isReadonlyText*/
+        ctx[11];
       },
       m(target, anchor) {
         insert(target, textarea, anchor);
@@ -2432,38 +2453,38 @@
               textarea,
               "input",
               /*textarea_input_handler*/
-              ctx[20]
+              ctx[22]
             ),
             listen(
               textarea,
               "mousedown",
               /*mousedown_handler*/
-              ctx[21]
+              ctx[23]
             ),
             listen(
               textarea,
               "touchstart",
               /*touchstart_handler*/
-              ctx[22],
+              ctx[24],
               { passive: true }
             ),
             listen(
               textarea,
               "focus",
               /*focus_handler*/
-              ctx[23]
+              ctx[25]
             ),
             listen(
               textarea,
               "focusout",
               /*focusout_handler_1*/
-              ctx[24]
+              ctx[26]
             ),
             listen(
               textarea,
               "keydown",
               /*keydown_handler_1*/
-              ctx[25]
+              ctx[27]
             ),
             action_destroyer(autosize_action = svelte_autosize_default.call(null, textarea))
           ];
@@ -2502,11 +2523,6 @@
           textarea.disabled = /*isDataSaving*/
           ctx2[0];
         }
-        if (dirty[0] & /*isFinished*/
-        2) {
-          textarea.readOnly = /*isFinished*/
-          ctx2[1];
-        }
         if (dirty[0] & /*typeinAnswer*/
         8) {
           set_input_value(
@@ -2555,8 +2571,8 @@
         input.disabled = /*isDataSaving*/
         ctx[0];
         attr(input, "autocomplete", "off");
-        input.readOnly = /*isFinished*/
-        ctx[1];
+        input.readOnly = /*isReadonlyText*/
+        ctx[11];
       },
       m(target, anchor) {
         insert(target, input, anchor);
@@ -2571,19 +2587,19 @@
               input,
               "input",
               /*input_input_handler*/
-              ctx[17]
+              ctx[19]
             ),
             listen(
               input,
               "focusout",
               /*focusout_handler*/
-              ctx[18]
+              ctx[20]
             ),
             listen(
               input,
               "keydown",
               /*keydown_handler*/
-              ctx[19]
+              ctx[21]
             )
           ];
           mounted = true;
@@ -2621,11 +2637,6 @@
           input.disabled = /*isDataSaving*/
           ctx2[0];
         }
-        if (dirty[0] & /*isFinished*/
-        2) {
-          input.readOnly = /*isFinished*/
-          ctx2[1];
-        }
         if (dirty[0] & /*typeinAnswer*/
         8 && input.value !== /*typeinAnswer*/
         ctx2[3]) {
@@ -2905,7 +2916,7 @@
         const promptbody_changes = {};
         if (dirty[0] & /*textAriaLabel, placeholder, isFinished, isResultCorrect, isDataSaving, typeinAnswer*/
         175 | dirty[1] & /*$$scope*/
-        2) {
+        32) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -2963,6 +2974,7 @@
     let { isFinished = false } = $$props;
     let { isResultCorrect = false } = $$props;
     let { isPreviewMode = false } = $$props;
+    let { isPreviewModeInteractive = false } = $$props;
     const dispatch = createEventDispatcher();
     let typeinAnswer;
     let latestAnswer = "";
@@ -2977,15 +2989,22 @@
       latestAnswer = typeinAnswer = events.answer[0];
     }
     let textAriaLabel = !latestAnswer ? "Answer input: Please type your response" : "Your response is";
+    const isReadonlyText = isFinished && !isPreviewModeInteractive;
+    const getFeedback = () => {
+      const { correct: correctFeeback, incorrect: incorrectFeedback } = interaction.feedback;
+      $$invalidate(4, resultFeedback = isResultCorrect ? correctFeeback : incorrectFeedback);
+    };
+    const getResultMessage = () => {
+      $$invalidate(6, resultLabel = isResultCorrect ? "Correct" : "Incorrect");
+      $$invalidate(7, textAriaLabel = `Submitted response is ${resultLabel.toLocaleLowerCase()}`);
+      $$invalidate(5, placeholder = isResultCorrect ? placeholder : "No answer provided");
+    };
     if (isFinished) {
       const { answer, hasAnswer } = scoringMetadata;
       typeinAnswer = answer && hasAnswer ? answer : typeinAnswer;
-      resultLabel = isResultCorrect ? "Correct" : "Incorrect";
-      textAriaLabel = `Submitted response is ${resultLabel.toLocaleLowerCase()}`;
-      placeholder = isResultCorrect ? placeholder : "No answer provided";
-      if (!isPreviewMode) {
-        const { correct: correctFeeback, incorrect: incorrectFeedback } = interaction.feedback;
-        resultFeedback = isResultCorrect ? correctFeeback : incorrectFeedback;
+      getResultMessage();
+      if (!isPreviewMode || isPreviewModeInteractive) {
+        getFeedback();
       }
     }
     const saveAnswer = () => {
@@ -2994,6 +3013,18 @@
         return;
       latestAnswer = typeinAnswer;
       dispatch("saveAnswer", { answer: [typeinAnswer || ""] });
+      if (isPreviewModeInteractive) {
+        setTimeout(
+          () => {
+            $$invalidate(6, resultLabel = "");
+            $$invalidate(7, textAriaLabel = "");
+            $$invalidate(5, placeholder = "");
+            getResultMessage();
+            getFeedback();
+          },
+          50
+        );
+      }
     };
     const saveOnEnter = (event) => {
       if (event.key === "Enter") {
@@ -3028,7 +3059,7 @@
     const keydown_handler_1 = (event) => saveOnEnter(event);
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(15, sessionData = $$props2.sessionData);
+        $$invalidate(16, sessionData = $$props2.sessionData);
       if ("isDataSaving" in $$props2)
         $$invalidate(0, isDataSaving = $$props2.isDataSaving);
       if ("isFinished" in $$props2)
@@ -3036,7 +3067,9 @@
       if ("isResultCorrect" in $$props2)
         $$invalidate(2, isResultCorrect = $$props2.isResultCorrect);
       if ("isPreviewMode" in $$props2)
-        $$invalidate(16, isPreviewMode = $$props2.isPreviewMode);
+        $$invalidate(17, isPreviewMode = $$props2.isPreviewMode);
+      if ("isPreviewModeInteractive" in $$props2)
+        $$invalidate(18, isPreviewModeInteractive = $$props2.isPreviewModeInteractive);
     };
     return [
       isDataSaving,
@@ -3050,12 +3083,14 @@
       rubric,
       prompt,
       typeinType,
+      isReadonlyText,
       saveAnswer,
       saveOnEnter,
       handleFocus,
       handleClick,
       sessionData,
       isPreviewMode,
+      isPreviewModeInteractive,
       input_input_handler,
       focusout_handler,
       keydown_handler,
@@ -3077,18 +3112,19 @@
         create_fragment6,
         safe_not_equal,
         {
-          sessionData: 15,
+          sessionData: 16,
           isDataSaving: 0,
           isFinished: 1,
           isResultCorrect: 2,
-          isPreviewMode: 16
+          isPreviewMode: 17,
+          isPreviewModeInteractive: 18
         },
         null,
         [-1, -1]
       );
     }
     get sessionData() {
-      return this.$$.ctx[15];
+      return this.$$.ctx[16];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -3116,14 +3152,21 @@
       flush();
     }
     get isPreviewMode() {
-      return this.$$.ctx[16];
+      return this.$$.ctx[17];
     }
     set isPreviewMode(isPreviewMode) {
       this.$$set({ isPreviewMode });
       flush();
     }
+    get isPreviewModeInteractive() {
+      return this.$$.ctx[18];
+    }
+    set isPreviewModeInteractive(isPreviewModeInteractive) {
+      this.$$set({ isPreviewModeInteractive });
+      flush();
+    }
   };
-  customElements.define("prompt-typein", create_custom_element(PromptTypeIn, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" }, "isPreviewMode": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-typein", create_custom_element(PromptTypeIn, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" }, "isPreviewMode": { "type": "Boolean" }, "isPreviewModeInteractive": { "type": "Boolean" } }, [], [], true));
   var PromptTypeIn_default = PromptTypeIn;
 
   // src/lib/components/prompt/skeleton/PromptSkeleton.svelte
@@ -3398,6 +3441,10 @@
         ),
         isPreviewMode: (
           /*isPreviewMode*/
+          ctx[7]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
           ctx[6]
         )
       }
@@ -3405,7 +3452,7 @@
     prompttypein.$on(
       "saveAnswer",
       /*saveEvent*/
-      ctx[7]
+      ctx[8]
     );
     return {
       c() {
@@ -3470,13 +3517,17 @@
         isResultCorrect: (
           /*isResultCorrect*/
           ctx[5]
+        ),
+        isPreviewModeInteractive: (
+          /*isPreviewModeInteractive*/
+          ctx[6]
         )
       }
     });
     promptmcq.$on(
       "saveOption",
       /*saveEvent*/
-      ctx[7]
+      ctx[8]
     );
     return {
       c() {
@@ -3595,8 +3646,11 @@
   }
   var bannerLabel = "Invalid session id.";
   function instance6($$self, $$props, $$invalidate) {
-    const { "session-id": sessionId, "preview-mode": previewMode, "item-id": itemId } = $$props;
-    const isPreviewMode = previewMode === "true" && itemId;
+    const { "session-id": sessionId, "preview-mode": previewMode, "item-id": itemId, "preview-contentful": previewContentful } = $$props;
+    const previewModeType = ["true", "interactive"];
+    const isPreviewModeInteractive = Boolean(previewMode === "interactive" && itemId);
+    const isPreviewMode = previewModeType.includes(previewMode);
+    const isPreviewContentful = previewContentful === "true" && isPreviewMode;
     useSetupAPI();
     let sessionData;
     let isDataFetching = true;
@@ -3605,6 +3659,8 @@
     let isFinished = false;
     let isLocked = false;
     let isResultCorrect = false;
+    let previewMcqCorrectAnswerId = null;
+    let previewTypeinCorrectAnswers = [];
     const skipUserValidationStr = get_store_value(skipUserValidation) ? "?skip_user_validation=true" : "";
     const getSessionData = async (sessionId2) => {
       try {
@@ -3621,7 +3677,8 @@
     };
     const getItemData = async (itemId2, metadata) => {
       try {
-        const includeAnswer = isFinished && isLocked ? "?include=[correct_answer]" : "";
+        let includeAnswer = isFinished && isLocked ? "?include=[correct_answer]" : "";
+        includeAnswer = isPreviewContentful ? "?include=[correct_answer,unpublished]&is_contentful_preview=true" : includeAnswer;
         const { data } = await useGet(`items/${itemId2}${includeAnswer}`);
         $$invalidate(3, interactionType = getInteractionType(data));
         $$invalidate(0, sessionData = { ...data, metadata });
@@ -3675,12 +3732,17 @@
     };
     const setPreviewData = (data) => {
       let scoringMetadata;
+      $$invalidate(4, isFinished = !isPreviewModeInteractive);
       switch (interactionType) {
         case INTERACTION_TYPE_MCQ:
           const { options } = data.interaction;
           const answerId = Object.values(options).filter((option) => option.correct_choice === true).map((option) => option.id);
           scoringMetadata = { hasAnswer: true, answerId: answerId[0] };
           $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
+          if (isPreviewModeInteractive) {
+            previewMcqCorrectAnswerId = answerId[0];
+          }
+          return;
         case INTERACTION_TYPE_TYPEIN:
         default:
           const { correct_answer: correctAnswer, typein_type: typeinType } = data.interaction;
@@ -3689,9 +3751,42 @@
             answer: typeinType === TYPEIN_TYPE_SHORT ? correctAnswer[0][0] : correctAnswer[0][0].answer[0]
           };
           $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
+          if (isPreviewModeInteractive) {
+            Object.values(correctAnswer).map((data2) => Object.values(data2).map((data3) => {
+              if (typeinType === TYPEIN_TYPE_SHORT) {
+                previewTypeinCorrectAnswers.push(data3);
+              } else {
+                data3.answer.map((answer) => previewTypeinCorrectAnswers.push(answer));
+              }
+            }));
+          }
+          return;
+      }
+    };
+    const updatePreviewData = (data) => {
+      const { scoringMetadata: metadata } = sessionData;
+      let scoringMetadata;
+      $$invalidate(4, isFinished = true);
+      switch (interactionType) {
+        case INTERACTION_TYPE_MCQ:
+          const { answer_id: answerId } = data;
+          scoringMetadata = { ...metadata, answerId: answerId[0] };
+          $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
+          $$invalidate(5, isResultCorrect = previewMcqCorrectAnswerId === answerId[0]);
+          return;
+        case INTERACTION_TYPE_TYPEIN:
+        default:
+          const { answer } = data;
+          scoringMetadata = { ...metadata, answer: answer[0] };
+          $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
+          $$invalidate(5, isResultCorrect = previewTypeinCorrectAnswers.includes(answer[0].toLowerCase().trim().replace(/\s+/g, " ")));
+          return;
       }
     };
     const saveEvent = async ({ detail }) => {
+      if (isPreviewModeInteractive && isPreviewMode) {
+        updatePreviewData(detail);
+      }
       if (isLocked || isFinished)
         return;
       try {
@@ -3703,6 +3798,9 @@
         $$invalidate(2, isDataSaving = false);
       }
     };
+    if (!sessionId && !itemId || !sessionId && !isPreviewMode) {
+      isDataFetching = false;
+    }
     if (isPreviewMode) {
       isFinished = true;
       isLocked = true;
@@ -3713,7 +3811,7 @@
       getSessionData(sessionId);
     }
     $$self.$$set = ($$new_props) => {
-      $$invalidate(19, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+      $$invalidate(26, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
     };
     $$props = exclude_internal_props($$props);
     return [
@@ -3723,6 +3821,7 @@
       interactionType,
       isFinished,
       isResultCorrect,
+      isPreviewModeInteractive,
       isPreviewMode,
       saveEvent
     ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "eat-js-sdk",
-	"version": "0.0.25",
+	"version": "0.0.26",
 	"description": "Authoring tool frontend SDK",
 	"contributors": [
 		{