eat-js-sdk 0.0.19 → 0.0.21

package/dist/eat-prompt-builder.mjs

@@ -1248,42 +1248,112 @@
   function create_if_block2(ctx) {
     let div0;
     let t0;
-    let div0_class_value;
+    let span;
     let t1;
+    let div0_class_value;
+    let t2;
     let div1;
+    let if_block = (
+      /*resultFeedbackTitle*/
+      ctx[1] && create_if_block_12(ctx)
+    );
     return {
       c() {
         div0 = element("div");
-        t0 = text(
-          /*feedback*/
-          ctx[2]
+        if (if_block)
+          if_block.c();
+        t0 = space();
+        span = element("span");
+        t1 = text(
+          /*resultFeedback*/
+          ctx[0]
         );
-        t1 = space();
+        t2 = space();
         div1 = element("div");
         attr(div0, "aria-description", "Answer feedback:");
         attr(div0, "class", div0_class_value = "my-6 p-4 border-l-[6px] text-charcoal text-base " + /*isResultCorrect*/
-        (ctx[1] ? "border-green-800 bg-green-300" : "border-red-800 bg-red-300"));
+        (ctx[2] ? "border-green-800 bg-green-300" : "border-red-800 bg-red-300"));
         attr(div1, "class", "divider my-6");
       },
       m(target, anchor) {
         insert(target, div0, anchor);
+        if (if_block)
+          if_block.m(div0, null);
         append(div0, t0);
-        insert(target, t1, anchor);
+        append(div0, span);
+        append(span, t1);
+        insert(target, t2, anchor);
         insert(target, div1, anchor);
       },
       p(ctx2, dirty) {
+        if (
+          /*resultFeedbackTitle*/
+          ctx2[1]
+        ) {
+          if (if_block) {
+            if_block.p(ctx2, dirty);
+          } else {
+            if_block = create_if_block_12(ctx2);
+            if_block.c();
+            if_block.m(div0, t0);
+          }
+        } else if (if_block) {
+          if_block.d(1);
+          if_block = null;
+        }
+        if (dirty & /*resultFeedback*/
+        1)
+          set_data(
+            t1,
+            /*resultFeedback*/
+            ctx2[0]
+          );
         if (dirty & /*isResultCorrect*/
-        2 && div0_class_value !== (div0_class_value = "my-6 p-4 border-l-[6px] text-charcoal text-base " + /*isResultCorrect*/
-        (ctx2[1] ? "border-green-800 bg-green-300" : "border-red-800 bg-red-300"))) {
+        4 && div0_class_value !== (div0_class_value = "my-6 p-4 border-l-[6px] text-charcoal text-base " + /*isResultCorrect*/
+        (ctx2[2] ? "border-green-800 bg-green-300" : "border-red-800 bg-red-300"))) {
           attr(div0, "class", div0_class_value);
         }
       },
       d(detaching) {
         if (detaching) {
           detach(div0);
-          detach(t1);
+          detach(t2);
           detach(div1);
         }
+        if (if_block)
+          if_block.d();
+      }
+    };
+  }
+  function create_if_block_12(ctx) {
+    let span;
+    let t2;
+    return {
+      c() {
+        span = element("span");
+        t2 = text(
+          /*resultFeedbackTitle*/
+          ctx[1]
+        );
+        attr(span, "class", "block mb-1 font-semibold");
+      },
+      m(target, anchor) {
+        insert(target, span, anchor);
+        append(span, t2);
+      },
+      p(ctx2, dirty) {
+        if (dirty & /*resultFeedbackTitle*/
+        2)
+          set_data(
+            t2,
+            /*resultFeedbackTitle*/
+            ctx2[1]
+          );
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
       }
     };
   }
@@ -1336,24 +1406,23 @@
     let { resultFeedback = null } = $$props;
     let { resultFeedbackTitle = null } = $$props;
     let { isResultCorrect = true } = $$props;
-    const feedback = `${resultFeedbackTitle} ${resultFeedback}`;
     $$self.$$set = ($$props2) => {
       if ("resultFeedback" in $$props2)
         $$invalidate(0, resultFeedback = $$props2.resultFeedback);
       if ("resultFeedbackTitle" in $$props2)
-        $$invalidate(3, resultFeedbackTitle = $$props2.resultFeedbackTitle);
+        $$invalidate(1, resultFeedbackTitle = $$props2.resultFeedbackTitle);
       if ("isResultCorrect" in $$props2)
-        $$invalidate(1, isResultCorrect = $$props2.isResultCorrect);
+        $$invalidate(2, isResultCorrect = $$props2.isResultCorrect);
     };
-    return [resultFeedback, isResultCorrect, feedback, resultFeedbackTitle];
+    return [resultFeedback, resultFeedbackTitle, isResultCorrect];
   }
   var PromptResultFeedback = class extends SvelteComponent {
     constructor(options) {
       super();
       init(this, options, instance2, create_fragment2, safe_not_equal, {
         resultFeedback: 0,
-        resultFeedbackTitle: 3,
-        isResultCorrect: 1
+        resultFeedbackTitle: 1,
+        isResultCorrect: 2
       });
     }
     get resultFeedback() {
@@ -1364,14 +1433,14 @@
       flush();
     }
     get resultFeedbackTitle() {
-      return this.$$.ctx[3];
+      return this.$$.ctx[1];
     }
     set resultFeedbackTitle(resultFeedbackTitle) {
       this.$$set({ resultFeedbackTitle });
       flush();
     }
     get isResultCorrect() {
-      return this.$$.ctx[1];
+      return this.$$.ctx[2];
     }
     set isResultCorrect(isResultCorrect) {
       this.$$set({ isResultCorrect });
@@ -1509,7 +1578,7 @@
     child_ctx[19] = i;
     return child_ctx;
   }
-  function create_if_block_12(ctx) {
+  function create_if_block_13(ctx) {
     let div1;
     let div0;
     let div0_class_value;
@@ -1953,7 +2022,7 @@
     let current;
     let if_block = (
       /*options*/
-      ctx[8] && create_if_block_12(ctx)
+      ctx[8] && create_if_block_13(ctx)
     );
     return {
       c() {
@@ -2362,38 +2431,38 @@
               textarea,
               "input",
               /*textarea_input_handler*/
-              ctx[15]
+              ctx[18]
             ),
             listen(
               textarea,
               "mousedown",
               /*mousedown_handler*/
-              ctx[16]
+              ctx[19]
             ),
             listen(
               textarea,
               "touchstart",
               /*touchstart_handler*/
-              ctx[17],
+              ctx[20],
               { passive: true }
             ),
             listen(
               textarea,
               "focus",
               /*focus_handler*/
-              ctx[18]
+              ctx[21]
             ),
             listen(
               textarea,
               "focusout",
               /*focusout_handler_1*/
-              ctx[19]
+              ctx[22]
             ),
             listen(
               textarea,
               "keydown",
               /*keydown_handler_1*/
-              ctx[20]
+              ctx[23]
             ),
             action_destroyer(autosize_action = svelte_autosize_default.call(null, textarea))
           ];
@@ -2473,19 +2542,19 @@
               input,
               "input",
               /*input_input_handler*/
-              ctx[12]
+              ctx[15]
             ),
             listen(
               input,
               "focusout",
               /*focusout_handler*/
-              ctx[13]
+              ctx[16]
             ),
             listen(
               input,
               "keydown",
               /*keydown_handler*/
-              ctx[14]
+              ctx[17]
             )
           ];
           mounted = true;
@@ -2534,7 +2603,7 @@
     function select_block_type(ctx2, dirty) {
       if (
         /*typeinType*/
-        ctx2[6] === TYPEIN_TYPE_SHORT
+        ctx2[8] === TYPEIN_TYPE_SHORT
       )
         return create_if_block_22;
       return create_else_block_1;
@@ -2578,7 +2647,7 @@
     let t2;
     let promptresult;
     let current;
-    const if_block_creators = [create_if_block_13, create_else_block2];
+    const if_block_creators = [create_if_block_14, create_else_block2];
     const if_blocks = [];
     function select_block_type_1(ctx2, dirty) {
       if (
@@ -2597,10 +2666,13 @@
           ctx[2]
         ),
         resultFeedbackTitle: (
-          /*isResultCorrect*/
-          ctx[2] ? "Well done!" : "Not quite, but you\u2019re close!"
+          /*resultFeedbackTitle*/
+          ctx[4]
         ),
-        resultFeedback: null
+        resultFeedback: (
+          /*resultFeedback*/
+          ctx[5]
+        )
       }
     });
     return {
@@ -2617,7 +2689,7 @@
         (ctx[2] ? "text-green-800" : "text-red-800") + " mr-2 p-0.5");
         attr(span1, "class", "p2");
         attr(div, "class", div_class_value = "flex items-center text-charcoal " + /*typeinType*/
-        (ctx[6] === TYPEIN_TYPE_SHORT ? "mt-2" : "mt-0.5"));
+        (ctx[8] === TYPEIN_TYPE_SHORT ? "mt-2" : "mt-0.5"));
       },
       m(target, anchor) {
         insert(target, div, anchor);
@@ -2662,10 +2734,14 @@
         4)
           promptresult_changes.isResultCorrect = /*isResultCorrect*/
           ctx2[2];
-        if (dirty & /*isResultCorrect*/
-        4)
-          promptresult_changes.resultFeedbackTitle = /*isResultCorrect*/
-          ctx2[2] ? "Well done!" : "Not quite, but you\u2019re close!";
+        if (dirty & /*resultFeedbackTitle*/
+        16)
+          promptresult_changes.resultFeedbackTitle = /*resultFeedbackTitle*/
+          ctx2[4];
+        if (dirty & /*resultFeedback*/
+        32)
+          promptresult_changes.resultFeedback = /*resultFeedback*/
+          ctx2[5];
         promptresult.$set(promptresult_changes);
       },
       i(local) {
@@ -2717,7 +2793,7 @@
       }
     };
   }
-  function create_if_block_13(ctx) {
+  function create_if_block_14(ctx) {
     let successsolid;
     let current;
     successsolid = new SuccessSolid_default({});
@@ -2753,11 +2829,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[4].text
+          ctx[6].text
         ),
         prompt: (
           /*prompt*/
-          ctx[5]
+          ctx[7]
         ),
         $$slots: { default: [create_default_slot2] },
         $$scope: { ctx }
@@ -2786,7 +2862,7 @@
       p(ctx2, [dirty]) {
         const promptbody_changes = {};
         if (dirty & /*$$scope, isFinished, isResultCorrect, isDataSaving, typeinAnswer*/
-        67108879) {
+        1073741839) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -2844,22 +2920,35 @@
     let { isDataSaving } = $$props;
     let { isFinished = false } = $$props;
     let { isResultCorrect = false } = $$props;
+    let { isPreviewMode = false } = $$props;
     const dispatch = createEventDispatcher();
     let typeinAnswer;
     let latestAnswer = "";
+    let resultFeedbackTitle = "";
+    let resultFeedback = "";
     let focusOrigin = "tab";
-    const { rubric, interaction, metadata } = sessionData;
+    const { rubric, interaction, metadata, scoringMetadata } = sessionData;
     const { prompt, typein_type: typeinType } = interaction;
     if (metadata) {
       const events = metadata.interactions.events.pop();
-      latestAnswer = typeinAnswer = events.answer;
+      latestAnswer = typeinAnswer = events.answer[0];
+    }
+    if (isFinished) {
+      const { answer, hasAnswer } = scoringMetadata;
+      typeinAnswer = answer && hasAnswer ? answer : typeinAnswer;
+      if (!isPreviewMode) {
+        const { correct: correctFeeback, incorrect: incorrectFeedback } = interaction.feedback;
+        const { header, text: text2 } = isResultCorrect ? correctFeeback : incorrectFeedback;
+        resultFeedbackTitle = header;
+        resultFeedback = text2;
+      }
     }
     const saveAnswer = () => {
       focusOrigin = "tab";
       if (isDataSaving || typeinAnswer === latestAnswer || !typeinAnswer && !latestAnswer)
         return;
       latestAnswer = typeinAnswer;
-      dispatch("saveAnswer", { answer: typeinAnswer || "" });
+      dispatch("saveAnswer", { answer: [typeinAnswer || ""] });
     };
     const saveOnEnter = (event) => {
       if (event.key === "Enter") {
@@ -2894,19 +2983,23 @@
     const keydown_handler_1 = (event) => saveOnEnter(event);
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(11, sessionData = $$props2.sessionData);
+        $$invalidate(13, sessionData = $$props2.sessionData);
       if ("isDataSaving" in $$props2)
         $$invalidate(0, isDataSaving = $$props2.isDataSaving);
       if ("isFinished" in $$props2)
         $$invalidate(1, isFinished = $$props2.isFinished);
       if ("isResultCorrect" in $$props2)
         $$invalidate(2, isResultCorrect = $$props2.isResultCorrect);
+      if ("isPreviewMode" in $$props2)
+        $$invalidate(14, isPreviewMode = $$props2.isPreviewMode);
     };
     return [
       isDataSaving,
       isFinished,
       isResultCorrect,
       typeinAnswer,
+      resultFeedbackTitle,
+      resultFeedback,
       rubric,
       prompt,
       typeinType,
@@ -2915,6 +3008,7 @@
       handleFocus,
       handleClick,
       sessionData,
+      isPreviewMode,
       input_input_handler,
       focusout_handler,
       keydown_handler,
@@ -2930,14 +3024,15 @@
     constructor(options) {
       super();
       init(this, options, instance4, create_fragment6, safe_not_equal, {
-        sessionData: 11,
+        sessionData: 13,
         isDataSaving: 0,
         isFinished: 1,
-        isResultCorrect: 2
+        isResultCorrect: 2,
+        isPreviewMode: 14
       });
     }
     get sessionData() {
-      return this.$$.ctx[11];
+      return this.$$.ctx[13];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -2964,8 +3059,15 @@
       this.$$set({ isResultCorrect });
       flush();
     }
+    get isPreviewMode() {
+      return this.$$.ctx[14];
+    }
+    set isPreviewMode(isPreviewMode) {
+      this.$$set({ isPreviewMode });
+      flush();
+    }
   };
-  customElements.define("prompt-typein", create_custom_element(PromptTypeIn, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
+  customElements.define("prompt-typein", create_custom_element(PromptTypeIn, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" }, "isPreviewMode": { "type": "Boolean" } }, [], [], true));
   var PromptTypeIn_default = PromptTypeIn;
 
   // src/lib/components/prompt/skeleton/PromptSkeleton.svelte
@@ -3059,7 +3161,7 @@
 
   // src/lib/components/prompt/PromptBuilder.svelte
   function add_css(target) {
-    append_styles(target, "svelte-182yxcp", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(107 121 121/var(--tw-border-opacity))}@keyframes svelte-182yxcp-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-182yxcp-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;justify-content:space-between;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>span>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>span>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>span>.choice{--tw-border-opacity:1}.btn-mcq-option.selected.correct{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity));border-color:rgb(0 102 5/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity));border-color:rgb(217 12 85/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.correct>span>.choice,.btn-mcq-option.selected.incorrect>span>.choice{--tw-border-opacity:1;border-color:rgb(113 115 119/var(--tw-border-opacity));border-width:1px}.typein-textbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mr-2{margin-right:0.5rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:0.125rem}.mt-2{margin-top:0.5rem}.flex{display:flex}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.grow{flex-grow:1}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.border-2{border-width:2px}.border-l-\\[6px\\]{border-left-width:6px}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-blue-1000{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity))}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:mb-4{margin-bottom:1rem}}');
+    append_styles(target, "svelte-q5obwh", '*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Mulish, sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*{font-family:Mulish, sans-serif}input::-moz-selection,textarea::-moz-selection{background-color:hsla(0, 0%, 85%, 0.4)}input::selection,textarea::selection{background-color:hsla(0, 0%, 85%, 0.4)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.p2{font-size:0.875rem;font-weight:600;line-height:1.25rem;line-height:1.5}.item-heading{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity));font-size:1.25rem;letter-spacing:-0.025em;line-height:1.5rem}.divider{--tw-border-opacity:1;border-bottom-width:1px;border-color:rgb(107 121 121/var(--tw-border-opacity))}@keyframes svelte-q5obwh-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-q5obwh-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.btn-mcq-option{--tw-text-opacity:1;--tw-border-opacity:1;--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 250/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));display:flex;font-size:1rem;justify-content:space-between;line-height:1.5rem;margin-bottom:1rem;min-height:48px;padding:0.5rem 0.75rem 0.5rem 0.5rem;width:100%}.btn-mcq-option:active{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity));border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.btn-mcq-option:hover{--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}}.btn-mcq-option>span>.choice{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(113 115 119/var(--tw-border-opacity));border-radius:1rem;border-width:1px;color:rgb(93 99 107/var(--tw-text-opacity));display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:0.05em;line-height:1rem;margin-right:1rem;padding:0.5rem;width:2rem}.btn-mcq-option.selected{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(222 222 255/var(--tw-bg-opacity))}.btn-mcq-option.selected,.btn-mcq-option.selected>span>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>span>.choice{--tw-border-opacity:1}.btn-mcq-option.selected.correct{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity));border-color:rgb(0 102 5/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity));border-color:rgb(217 12 85/var(--tw-border-opacity));border-width:1px}.btn-mcq-option.selected.correct>span>.choice,.btn-mcq-option.selected.incorrect>span>.choice{--tw-border-opacity:1;border-color:rgb(113 115 119/var(--tw-border-opacity));border-width:1px}.typein-textbox:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));outline:2px solid transparent;outline-offset:2px;transition-duration:50ms}.typein-textbox{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(93 99 107/var(--tw-border-opacity));border-radius:0.5rem;border-width:1px;color:rgb(33 37 41/var(--tw-text-opacity));font-size:1rem;line-height:1.5rem;padding:0.75rem 1rem;width:100%}.typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(93 99 107/var(--tw-placeholder-opacity))}.typein-textbox:focus{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-border-opacity:1;border-color:rgb(84 101 251/var(--tw-border-opacity));border-width:2px;outline:2px solid transparent;outline-offset:2px}}.typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0)) !important}@media(hover: hover) and (pointer: fine){.typein-textbox:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity));--tw-ring-offset-width:4px;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));transition-duration:50ms}}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.mb-1{margin-bottom:0.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mr-2{margin-right:0.5rem}.mt-0{margin-top:0}.mt-0\\.5{margin-top:0.125rem}.mt-2{margin-top:0.5rem}.block{display:block}.flex{display:flex}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.grow{flex-grow:1}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.border-2{border-width:2px}.border-l-\\[6px\\]{border-left-width:6px}.border-green-800{--tw-border-opacity:1;border-color:rgb(0 102 5/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity:1;border-color:rgb(217 12 85/var(--tw-border-opacity))}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(241 254 241/var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgb(253 243 247/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-0\\.5{padding:0.125rem}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-left{text-align:left}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.text-blue-1000{--tw-text-opacity:1;color:rgb(8 38 99/var(--tw-text-opacity))}.text-charcoal{--tw-text-opacity:1;color:rgb(33 37 41/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(0 102 5/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(217 12 85/var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.group:active .group-active\\:border-2{border-width:2px}.group:active .group-active\\:border-blue-1000{--tw-border-opacity:1;border-color:rgb(8 38 99/var(--tw-border-opacity))}.group:active .group-active\\:p-\\[7px\\]{padding:7px}@media(min-width: 732px){.md\\:mb-4{margin-bottom:1rem}}');
   }
   function create_else_block_12(ctx) {
     let invalidbanner;
@@ -3089,7 +3191,7 @@
       }
     };
   }
-  function create_if_block_14(ctx) {
+  function create_if_block_15(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
@@ -3237,13 +3339,17 @@
         isResultCorrect: (
           /*isResultCorrect*/
           ctx[5]
+        ),
+        isPreviewMode: (
+          /*isPreviewMode*/
+          ctx[6]
         )
       }
     });
     prompttypein.$on(
       "saveAnswer",
       /*saveEvent*/
-      ctx[6]
+      ctx[7]
     );
     return {
       c() {
@@ -3314,7 +3420,7 @@
     promptmcq.$on(
       "saveOption",
       /*saveEvent*/
-      ctx[6]
+      ctx[7]
     );
     return {
       c() {
@@ -3364,7 +3470,7 @@
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block5, create_if_block_14, create_else_block_12];
+    const if_block_creators = [create_if_block5, create_if_block_15, create_else_block_12];
     const if_blocks = [];
     function select_block_type(ctx2, dirty) {
       if (
@@ -3489,12 +3595,17 @@
       try {
         const { data } = await useGet(`sessions/${sessionId}/score`);
         if (data) {
-          const { metadata, has_answer: hasAnswer, scoring } = data[0];
-          const scoringMetadata = {
-            hasAnswer: !!hasAnswer,
-            answerId: metadata.answer[0],
-            correctAnswerId: metadata.correctAnswerId[0]
-          };
+          const { metadata, scoring } = data[0];
+          const { answer, has_answer: hasAnswer } = metadata;
+          let scoringMetadata = { hasAnswer };
+          switch (interactionType) {
+            case INTERACTION_TYPE_MCQ:
+              scoringMetadata = { ...scoringMetadata, answerId: answer[0] };
+              break;
+            case INTERACTION_TYPE_TYPEIN:
+            default:
+              scoringMetadata = { ...scoringMetadata, answer: answer[0] };
+          }
           $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
           $$invalidate(5, isResultCorrect = scoring.score_earned);
         }
@@ -3507,29 +3618,21 @@
       await getItemData(itemId2, null);
     };
     const setPreviewData = (data) => {
+      let scoringMetadata;
       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);
-          const scoringMetadata = {
-            hasAnswer: true,
-            answerId: answerId[0],
-            correctAnswerId: answerId[0]
-          };
+          scoringMetadata = { hasAnswer: true, answerId: answerId[0] };
           $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
         case INTERACTION_TYPE_TYPEIN:
         default:
           const { correct_answer: correctAnswer, typein_type: typeinType } = data.interaction;
-          const metadata = {
-            interactions: {
-              events: [
-                {
-                  answer: typeinType === TYPEIN_TYPE_SHORT ? correctAnswer[0] : correctAnswer[0].answer[0]
-                }
-              ]
-            }
+          scoringMetadata = {
+            hasAnswer: true,
+            answer: typeinType === TYPEIN_TYPE_SHORT ? correctAnswer[0][0] : correctAnswer[0].answer[0]
           };
-          $$invalidate(0, sessionData = { ...sessionData, metadata });
+          $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
       }
     };
     const saveEvent = async ({ detail }) => {
@@ -3564,6 +3667,7 @@
       interactionType,
       isFinished,
       isResultCorrect,
+      isPreviewMode,
       saveEvent
     ];
   }

package/package.json

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