eat-js-sdk 0.0.9 → 0.0.10

package/dist/eat-prompt-builder.mjs

@@ -1244,210 +1244,284 @@
   customElements.define("prompt-body", create_custom_element(PromptBody, { "rubric": {}, "prompt": {} }, ["default"], [], true));
   var PromptBody_default = PromptBody;
 
-  // src/lib/composables/useMCQ.ts
-  var useAlphabetEquivalent = (index) => {
-    const alphabetArr = [
-      "A",
-      "B",
-      "C",
-      "D",
-      "E",
-      "F",
-      "G",
-      "H",
-      "I",
-      "J",
-      "K",
-      "L",
-      "M",
-      "N",
-      "O",
-      "P",
-      "Q",
-      "R",
-      "S",
-      "T",
-      "U",
-      "V",
-      "W",
-      "X",
-      "Y",
-      "Z"
-    ];
-    return alphabetArr[index];
+  // src/lib/assets/img/messaging/SuccessSolid.svelte
+  function create_fragment2(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM14.7284 6.79289C14.3378 6.40237 13.7047 6.40237 13.3141 6.79289L8.02125 12.0858L6.20711 10.2716C5.81658 9.88112 5.18342 9.88112 4.79289 10.2716C4.40237 10.6622 4.40237 11.2953 4.79289 11.6859L7.31414 14.2071C7.70467 14.5976 8.33783 14.5976 8.72836 14.2071L14.7284 8.20711C15.1189 7.81658 15.1189 7.18342 14.7284 6.79289Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "20");
+        attr(svg, "height", "20");
+        attr(svg, "viewBox", "0 0 20 20");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var SuccessSolid = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment2, safe_not_equal, {});
+    }
   };
-  var useMCQ_default = useAlphabetEquivalent;
+  create_custom_element(SuccessSolid, {}, [], [], true);
+  var SuccessSolid_default = SuccessSolid;
 
-  // src/lib/components/prompt/mcq/PromptMCQ.svelte
-  function get_each_context(ctx, list, i) {
-    const child_ctx = ctx.slice();
-    child_ctx[11] = list[i][0];
-    child_ctx[12] = list[i][1];
-    child_ctx[14] = i;
-    return child_ctx;
+  // src/lib/assets/img/messaging/InfoSolid.svelte
+  function create_fragment3(ctx) {
+    let svg;
+    let path;
+    return {
+      c() {
+        svg = svg_element("svg");
+        path = svg_element("path");
+        attr(path, "fill-rule", "evenodd");
+        attr(path, "clip-rule", "evenodd");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 9C9.44772 9 9 9.44772 9 10V14.5C9 15.0523 9.44772 15.5 10 15.5C10.5523 15.5 11 15.0523 11 14.5V10C11 9.44772 10.5523 9 10 9ZM10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5Z");
+        attr(path, "fill", "currentColor");
+        attr(svg, "width", "20");
+        attr(svg, "height", "20");
+        attr(svg, "viewBox", "0 0 20 20");
+        attr(svg, "fill", "none");
+        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
   }
+  var InfoSolid = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment3, safe_not_equal, {});
+    }
+  };
+  create_custom_element(InfoSolid, {}, [], [], true);
+  var InfoSolid_default = InfoSolid;
+
+  // src/lib/components/prompt/template/PromptResultFeedback.svelte
   function create_if_block2(ctx) {
-    let div1;
     let div0;
-    let div0_class_value;
+    let span0;
+    let current_block_type_index;
+    let if_block;
+    let span0_class_value;
+    let t0;
+    let span3;
+    let span1;
+    let t1;
     let t2;
-    let each_value = ensure_array_like(Object.entries(
-      /*options*/
-      ctx[4]
-    ));
-    let each_blocks = [];
-    for (let i = 0; i < each_value.length; i += 1) {
-      each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    let span2;
+    let t3;
+    let div0_class_value;
+    let t4;
+    let div1;
+    let current;
+    const if_block_creators = [create_if_block_12, create_else_block];
+    const if_blocks = [];
+    function select_block_type(ctx2, dirty) {
+      if (
+        /*isResultCorrect*/
+        ctx2[2]
+      )
+        return 0;
+      return 1;
     }
+    current_block_type_index = select_block_type(ctx, -1);
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     return {
       c() {
-        div1 = element("div");
         div0 = element("div");
+        span0 = element("span");
+        if_block.c();
+        t0 = space();
+        span3 = element("span");
+        span1 = element("span");
+        t1 = text(
+          /*resultFeedbackTitle*/
+          ctx[1]
+        );
         t2 = space();
-        for (let i = 0; i < each_blocks.length; i += 1) {
-          each_blocks[i].c();
-        }
-        attr(div0, "class", div0_class_value = /*isDataSaving*/
-        ctx[0] ? "absolute inset-0 bg-transparent z-50" : "");
-        attr(div1, "class", "relative");
+        span2 = element("span");
+        t3 = text(
+          /*resultFeedback*/
+          ctx[0]
+        );
+        t4 = space();
+        div1 = element("div");
+        attr(span0, "class", span0_class_value = "mr-2 p-0.5 " + /*isResultCorrect*/
+        (ctx[2] ? "text-green-800" : "text-red-800"));
+        attr(span1, "class", "block mb-1 font-semibold");
+        attr(span3, "class", "text-base");
+        attr(div0, "class", div0_class_value = "flex items-start my-6 p-4 border-l-[6px] text-charcoal " + /*isResultCorrect*/
+        (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);
+        append(div0, span0);
+        if_blocks[current_block_type_index].m(span0, null);
+        append(div0, t0);
+        append(div0, span3);
+        append(span3, span1);
+        append(span1, t1);
+        append(span3, t2);
+        append(span3, span2);
+        append(span2, t3);
+        insert(target, t4, anchor);
         insert(target, div1, anchor);
-        append(div1, div0);
-        append(div1, t2);
-        for (let i = 0; i < each_blocks.length; i += 1) {
-          if (each_blocks[i]) {
-            each_blocks[i].m(div1, null);
-          }
-        }
+        current = true;
       },
       p(ctx2, dirty) {
-        if (dirty & /*isDataSaving*/
-        1 && div0_class_value !== (div0_class_value = /*isDataSaving*/
-        ctx2[0] ? "absolute inset-0 bg-transparent z-50" : "")) {
-          attr(div0, "class", div0_class_value);
-        }
-        if (dirty & /*selectedOption, Object, options, handleOptionClick*/
-        50) {
-          each_value = ensure_array_like(Object.entries(
-            /*options*/
-            ctx2[4]
-          ));
-          let i;
-          for (i = 0; i < each_value.length; i += 1) {
-            const child_ctx = get_each_context(ctx2, each_value, i);
-            if (each_blocks[i]) {
-              each_blocks[i].p(child_ctx, dirty);
-            } else {
-              each_blocks[i] = create_each_block(child_ctx);
-              each_blocks[i].c();
-              each_blocks[i].m(div1, null);
-            }
-          }
-          for (; i < each_blocks.length; i += 1) {
-            each_blocks[i].d(1);
+        let previous_block_index = current_block_type_index;
+        current_block_type_index = select_block_type(ctx2, dirty);
+        if (current_block_type_index !== previous_block_index) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+          if_block = if_blocks[current_block_type_index];
+          if (!if_block) {
+            if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block.c();
+          } else {
           }
-          each_blocks.length = each_value.length;
+          transition_in(if_block, 1);
+          if_block.m(span0, null);
+        }
+        if (!current || dirty & /*isResultCorrect*/
+        4 && span0_class_value !== (span0_class_value = "mr-2 p-0.5 " + /*isResultCorrect*/
+        (ctx2[2] ? "text-green-800" : "text-red-800"))) {
+          attr(span0, "class", span0_class_value);
+        }
+        if (!current || dirty & /*resultFeedbackTitle*/
+        2)
+          set_data(
+            t1,
+            /*resultFeedbackTitle*/
+            ctx2[1]
+          );
+        if (!current || dirty & /*resultFeedback*/
+        1)
+          set_data(
+            t3,
+            /*resultFeedback*/
+            ctx2[0]
+          );
+        if (!current || dirty & /*isResultCorrect*/
+        4 && div0_class_value !== (div0_class_value = "flex items-start my-6 p-4 border-l-[6px] text-charcoal " + /*isResultCorrect*/
+        (ctx2[2] ? "border-green-800 bg-green-300" : "border-red-800 bg-red-300"))) {
+          attr(div0, "class", div0_class_value);
         }
       },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
+      },
       d(detaching) {
         if (detaching) {
+          detach(div0);
+          detach(t4);
           detach(div1);
         }
-        destroy_each(each_blocks, detaching);
+        if_blocks[current_block_type_index].d();
       }
     };
   }
-  function create_each_block(ctx) {
-    let button;
-    let span;
-    let t1;
-    let t2_value = (
-      /*option*/
-      ctx[12].answer + ""
-    );
-    let t2;
-    let t3;
-    let button_aria_label_value;
-    let button_class_value;
-    let mounted;
-    let dispose;
-    function click_handler() {
-      return (
-        /*click_handler*/
-        ctx[7](
-          /*option*/
-          ctx[12]
-        )
-      );
-    }
+  function create_else_block(ctx) {
+    let infosolid;
+    let current;
+    infosolid = new InfoSolid_default({});
+    return {
+      c() {
+        create_component(infosolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(infosolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(infosolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(infosolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(infosolid, detaching);
+      }
+    };
+  }
+  function create_if_block_12(ctx) {
+    let successsolid;
+    let current;
+    successsolid = new SuccessSolid_default({});
     return {
       c() {
-        button = element("button");
-        span = element("span");
-        span.textContent = `${useMCQ_default(
-          /*index*/
-          ctx[14]
-        )}`;
-        t1 = space();
-        t2 = text(t2_value);
-        t3 = space();
-        attr(span, "class", "choice group-active:border-2 group-active:border-blue-1000 group-active:p-[7px]");
-        attr(button, "aria-label", button_aria_label_value = `${/*selectedOption*/
-        ctx[1] === /*option*/
-        ctx[12].id ? "Selected option" : "Option"} ${useMCQ_default(
-          /*index*/
-          ctx[14]
-        )}: ${/*option*/
-        ctx[12].answer}`);
-        attr(button, "class", button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
-        (ctx[1] === /*option*/
-        ctx[12].id ? "selected" : ""));
+        create_component(successsolid.$$.fragment);
       },
       m(target, anchor) {
-        insert(target, button, anchor);
-        append(button, span);
-        append(button, t1);
-        append(button, t2);
-        append(button, t3);
-        if (!mounted) {
-          dispose = listen(button, "click", click_handler);
-          mounted = true;
-        }
+        mount_component(successsolid, target, anchor);
+        current = true;
       },
-      p(new_ctx, dirty) {
-        ctx = new_ctx;
-        if (dirty & /*selectedOption*/
-        2 && button_aria_label_value !== (button_aria_label_value = `${/*selectedOption*/
-        ctx[1] === /*option*/
-        ctx[12].id ? "Selected option" : "Option"} ${useMCQ_default(
-          /*index*/
-          ctx[14]
-        )}: ${/*option*/
-        ctx[12].answer}`)) {
-          attr(button, "aria-label", button_aria_label_value);
-        }
-        if (dirty & /*selectedOption*/
-        2 && button_class_value !== (button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
-        (ctx[1] === /*option*/
-        ctx[12].id ? "selected" : ""))) {
-          attr(button, "class", button_class_value);
-        }
+      i(local) {
+        if (current)
+          return;
+        transition_in(successsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(successsolid.$$.fragment, local);
+        current = false;
       },
       d(detaching) {
-        if (detaching) {
-          detach(button);
-        }
-        mounted = false;
-        dispose();
+        destroy_component(successsolid, detaching);
       }
     };
   }
-  function create_default_slot(ctx) {
+  function create_fragment4(ctx) {
     let if_block_anchor;
+    let current;
     let if_block = (
-      /*options*/
-      ctx[4] && create_if_block2(ctx)
+      /*resultFeedback*/
+      ctx[0] && create_if_block2(ctx)
     );
     return {
       c() {
@@ -1459,208 +1533,136 @@
         if (if_block)
           if_block.m(target, anchor);
         insert(target, if_block_anchor, anchor);
-      },
-      p(ctx2, dirty) {
-        if (
-          /*options*/
-          ctx2[4]
-        )
-          if_block.p(ctx2, dirty);
-      },
-      d(detaching) {
-        if (detaching) {
-          detach(if_block_anchor);
-        }
-        if (if_block)
-          if_block.d(detaching);
-      }
-    };
-  }
-  function create_fragment2(ctx) {
-    let promptbody;
-    let current;
-    promptbody = new PromptBody_default({
-      props: {
-        rubric: (
-          /*rubric*/
-          ctx[2].text
-        ),
-        prompt: (
-          /*prompt*/
-          ctx[3]
-        ),
-        $$slots: { default: [create_default_slot] },
-        $$scope: { ctx }
-      }
-    });
-    return {
-      c() {
-        create_component(promptbody.$$.fragment);
-      },
-      m(target, anchor) {
-        mount_component(promptbody, target, anchor);
         current = true;
       },
       p(ctx2, [dirty]) {
-        const promptbody_changes = {};
-        if (dirty & /*$$scope, selectedOption, isDataSaving*/
-        32771) {
-          promptbody_changes.$$scope = { dirty, ctx: ctx2 };
+        if (
+          /*resultFeedback*/
+          ctx2[0]
+        ) {
+          if (if_block) {
+            if_block.p(ctx2, dirty);
+            if (dirty & /*resultFeedback*/
+            1) {
+              transition_in(if_block, 1);
+            }
+          } else {
+            if_block = create_if_block2(ctx2);
+            if_block.c();
+            transition_in(if_block, 1);
+            if_block.m(if_block_anchor.parentNode, if_block_anchor);
+          }
+        } else if (if_block) {
+          group_outros();
+          transition_out(if_block, 1, 1, () => {
+            if_block = null;
+          });
+          check_outros();
         }
-        promptbody.$set(promptbody_changes);
       },
       i(local) {
         if (current)
           return;
-        transition_in(promptbody.$$.fragment, local);
+        transition_in(if_block);
         current = true;
       },
       o(local) {
-        transition_out(promptbody.$$.fragment, local);
+        transition_out(if_block);
         current = false;
       },
       d(detaching) {
-        destroy_component(promptbody, detaching);
+        if (detaching) {
+          detach(if_block_anchor);
+        }
+        if (if_block)
+          if_block.d(detaching);
       }
     };
   }
   function instance2($$self, $$props, $$invalidate) {
-    let { sessionData } = $$props;
-    let { isDataSaving } = $$props;
-    const { rubric, interaction, metadata } = sessionData;
-    const { prompt, options } = interaction;
-    let selectedOption;
-    const dispatch = createEventDispatcher();
-    if (metadata) {
-      const { events } = metadata.interactions;
-      const currentOption = events.pop();
-      const { answer_id: answerChoiceId } = currentOption;
-      selectedOption = answerChoiceId[0];
-    }
-    const handleOptionClick = (optionId, option) => {
-      if (isDataSaving || optionId === selectedOption)
-        return;
-      $$invalidate(1, selectedOption = optionId);
-      dispatch("saveOption", {
-        answer_id: [optionId],
-        answer_choice: [option]
-      });
-    };
-    const click_handler = (option) => handleOptionClick(option.id, option.answer);
+    let { resultFeedback = null } = $$props;
+    let { resultFeedbackTitle = null } = $$props;
+    let { isResultCorrect: isResultCorrect2 = true } = $$props;
     $$self.$$set = ($$props2) => {
-      if ("sessionData" in $$props2)
-        $$invalidate(6, sessionData = $$props2.sessionData);
-      if ("isDataSaving" in $$props2)
-        $$invalidate(0, isDataSaving = $$props2.isDataSaving);
+      if ("resultFeedback" in $$props2)
+        $$invalidate(0, resultFeedback = $$props2.resultFeedback);
+      if ("resultFeedbackTitle" in $$props2)
+        $$invalidate(1, resultFeedbackTitle = $$props2.resultFeedbackTitle);
+      if ("isResultCorrect" in $$props2)
+        $$invalidate(2, isResultCorrect2 = $$props2.isResultCorrect);
     };
-    return [
-      isDataSaving,
-      selectedOption,
-      rubric,
-      prompt,
-      options,
-      handleOptionClick,
-      sessionData,
-      click_handler
-    ];
+    return [resultFeedback, resultFeedbackTitle, isResultCorrect2];
   }
-  var PromptMCQ = class extends SvelteComponent {
+  var PromptResultFeedback = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance2, create_fragment2, safe_not_equal, { sessionData: 6, isDataSaving: 0 });
+      init(this, options, instance2, create_fragment4, safe_not_equal, {
+        resultFeedback: 0,
+        resultFeedbackTitle: 1,
+        isResultCorrect: 2
+      });
     }
-    get sessionData() {
-      return this.$$.ctx[6];
+    get resultFeedback() {
+      return this.$$.ctx[0];
     }
-    set sessionData(sessionData) {
-      this.$$set({ sessionData });
+    set resultFeedback(resultFeedback) {
+      this.$$set({ resultFeedback });
       flush();
     }
-    get isDataSaving() {
-      return this.$$.ctx[0];
+    get resultFeedbackTitle() {
+      return this.$$.ctx[1];
     }
-    set isDataSaving(isDataSaving) {
-      this.$$set({ isDataSaving });
+    set resultFeedbackTitle(resultFeedbackTitle) {
+      this.$$set({ resultFeedbackTitle });
+      flush();
+    }
+    get isResultCorrect() {
+      return this.$$.ctx[2];
+    }
+    set isResultCorrect(isResultCorrect2) {
+      this.$$set({ isResultCorrect: isResultCorrect2 });
       flush();
     }
   };
-  customElements.define("prompt-mcq", create_custom_element(PromptMCQ, { "sessionData": {}, "isDataSaving": {} }, [], [], true));
-  var PromptMCQ_default = PromptMCQ;
-
-  // node_modules/autosize/dist/autosize.esm.js
-  var e = /* @__PURE__ */ new Map();
-  function t(t2) {
-    var o2 = e.get(t2);
-    o2 && o2.destroy();
-  }
-  function o(t2) {
-    var o2 = e.get(t2);
-    o2 && o2.update();
-  }
-  var r = null;
-  "undefined" == typeof window ? ((r = function(e2) {
-    return e2;
-  }).destroy = function(e2) {
-    return e2;
-  }, r.update = function(e2) {
-    return e2;
-  }) : ((r = function(t2, o2) {
-    return t2 && Array.prototype.forEach.call(t2.length ? t2 : [t2], function(t3) {
-      return function(t4) {
-        if (t4 && t4.nodeName && "TEXTAREA" === t4.nodeName && !e.has(t4)) {
-          var o3, r2 = null, n2 = window.getComputedStyle(t4), i = (o3 = t4.value, function() {
-            a({ testForHeightReduction: "" === o3 || !t4.value.startsWith(o3), restoreTextAlign: null }), o3 = t4.value;
-          }), l = function(o4) {
-            t4.removeEventListener("autosize:destroy", l), t4.removeEventListener("autosize:update", s), t4.removeEventListener("input", i), window.removeEventListener("resize", s), Object.keys(o4).forEach(function(e2) {
-              return t4.style[e2] = o4[e2];
-            }), e.delete(t4);
-          }.bind(t4, { height: t4.style.height, resize: t4.style.resize, textAlign: t4.style.textAlign, overflowY: t4.style.overflowY, overflowX: t4.style.overflowX, wordWrap: t4.style.wordWrap });
-          t4.addEventListener("autosize:destroy", l), t4.addEventListener("autosize:update", s), t4.addEventListener("input", i), window.addEventListener("resize", s), t4.style.overflowX = "hidden", t4.style.wordWrap = "break-word", e.set(t4, { destroy: l, update: s }), s();
-        }
-        function a(e2) {
-          var o4, i2, l2 = e2.restoreTextAlign, s2 = void 0 === l2 ? null : l2, d = e2.testForHeightReduction, u = void 0 === d || d, c = n2.overflowY;
-          if (0 !== t4.scrollHeight && ("vertical" === n2.resize ? t4.style.resize = "none" : "both" === n2.resize && (t4.style.resize = "horizontal"), u && (o4 = function(e3) {
-            for (var t5 = []; e3 && e3.parentNode && e3.parentNode instanceof Element; )
-              e3.parentNode.scrollTop && t5.push([e3.parentNode, e3.parentNode.scrollTop]), e3 = e3.parentNode;
-            return function() {
-              return t5.forEach(function(e4) {
-                var t6 = e4[0], o5 = e4[1];
-                t6.style.scrollBehavior = "auto", t6.scrollTop = o5, t6.style.scrollBehavior = null;
-              });
-            };
-          }(t4), t4.style.height = ""), i2 = "content-box" === n2.boxSizing ? t4.scrollHeight - (parseFloat(n2.paddingTop) + parseFloat(n2.paddingBottom)) : t4.scrollHeight + parseFloat(n2.borderTopWidth) + parseFloat(n2.borderBottomWidth), "none" !== n2.maxHeight && i2 > parseFloat(n2.maxHeight) ? ("hidden" === n2.overflowY && (t4.style.overflow = "scroll"), i2 = parseFloat(n2.maxHeight)) : "hidden" !== n2.overflowY && (t4.style.overflow = "hidden"), t4.style.height = i2 + "px", s2 && (t4.style.textAlign = s2), o4 && o4(), r2 !== i2 && (t4.dispatchEvent(new Event("autosize:resized", { bubbles: true })), r2 = i2), c !== n2.overflow && !s2)) {
-            var v = n2.textAlign;
-            "hidden" === n2.overflow && (t4.style.textAlign = "start" === v ? "end" : "start"), a({ restoreTextAlign: v, testForHeightReduction: true });
-          }
-        }
-        function s() {
-          a({ testForHeightReduction: true, restoreTextAlign: null });
-        }
-      }(t3);
-    }), t2;
-  }).destroy = function(e2) {
-    return e2 && Array.prototype.forEach.call(e2.length ? e2 : [e2], t), e2;
-  }, r.update = function(e2) {
-    return e2 && Array.prototype.forEach.call(e2.length ? e2 : [e2], o), e2;
-  });
-  var n = r;
-  var autosize_esm_default = n;
+  customElements.define("prompt-result-feedback", create_custom_element(PromptResultFeedback, { "resultFeedback": {}, "resultFeedbackTitle": {}, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
+  var PromptResultFeedback_default = PromptResultFeedback;
 
-  // node_modules/svelte-autosize/index.js
-  var action = (node) => {
-    autosize_esm_default(node);
-    return {
-      destroy() {
-        autosize_esm_default.destroy(node);
-      }
-    };
+  // src/lib/composables/useMCQ.ts
+  var useAlphabetEquivalent = (index) => {
+    const alphabetArr = [
+      "A",
+      "B",
+      "C",
+      "D",
+      "E",
+      "F",
+      "G",
+      "H",
+      "I",
+      "J",
+      "K",
+      "L",
+      "M",
+      "N",
+      "O",
+      "P",
+      "Q",
+      "R",
+      "S",
+      "T",
+      "U",
+      "V",
+      "W",
+      "X",
+      "Y",
+      "Z"
+    ];
+    return alphabetArr[index];
   };
-  action.update = autosize_esm_default.update;
-  action.destroy = autosize_esm_default.destroy;
-  var svelte_autosize_default = action;
+  var useMCQ_default = useAlphabetEquivalent;
 
-  // src/lib/assets/img/messaging/SuccessSolid.svelte
-  function create_fragment3(ctx) {
+  // src/lib/assets/img/messaging/ErrorSolid.svelte
+  function create_fragment5(ctx) {
     let svg;
     let path;
     return {
@@ -1669,7 +1671,7 @@
         path = svg_element("path");
         attr(path, "fill-rule", "evenodd");
         attr(path, "clip-rule", "evenodd");
-        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM14.7284 6.79289C14.3378 6.40237 13.7047 6.40237 13.3141 6.79289L8.02125 12.0858L6.20711 10.2716C5.81658 9.88112 5.18342 9.88112 4.79289 10.2716C4.40237 10.6622 4.40237 11.2953 4.79289 11.6859L7.31414 14.2071C7.70467 14.5976 8.33783 14.5976 8.72836 14.2071L14.7284 8.20711C15.1189 7.81658 15.1189 7.18342 14.7284 6.79289Z");
+        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM7.70711 6.29289C7.31658 5.90237 6.68342 5.90237 6.29289 6.29289C5.90237 6.68342 5.90237 7.31658 6.29289 7.70711L8.585 10L6.29289 12.2929C5.93241 12.6534 5.90468 13.2206 6.2097 13.6129L6.29289 13.7071C6.68342 14.0976 7.31658 14.0976 7.70711 13.7071L10 11.415L12.2929 13.7071C12.6534 14.0676 13.2206 14.0953 13.6129 13.7903L13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L11.415 10L13.7071 7.70711C14.0676 7.34662 14.0953 6.77939 13.7903 6.3871L13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289L10 8.585L7.70711 6.29289Z");
         attr(path, "fill", "currentColor");
         attr(svg, "width", "20");
         attr(svg, "height", "20");
@@ -1691,99 +1693,191 @@
       }
     };
   }
-  var SuccessSolid = class extends SvelteComponent {
+  var ErrorSolid = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment3, safe_not_equal, {});
+      init(this, options, null, create_fragment5, safe_not_equal, {});
     }
   };
-  create_custom_element(SuccessSolid, {}, [], [], true);
-  var SuccessSolid_default = SuccessSolid;
+  create_custom_element(ErrorSolid, {}, [], [], true);
+  var ErrorSolid_default = ErrorSolid;
 
-  // src/lib/assets/img/messaging/ErrorSolid.svelte
-  function create_fragment4(ctx) {
-    let svg;
-    let path;
+  // src/lib/components/prompt/mcq/PromptMCQ.svelte
+  function get_each_context(ctx, list, i) {
+    const child_ctx = ctx.slice();
+    child_ctx[15] = list[i][0];
+    child_ctx[16] = list[i][1];
+    child_ctx[18] = i;
+    return child_ctx;
+  }
+  function create_if_block_13(ctx) {
+    let div1;
+    let div0;
+    let div0_class_value;
+    let t2;
+    let current;
+    let each_value = ensure_array_like(Object.entries(
+      /*options*/
+      ctx[7]
+    ));
+    let each_blocks = [];
+    for (let i = 0; i < each_value.length; i += 1) {
+      each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+    }
+    const out = (i) => transition_out(each_blocks[i], 1, 1, () => {
+      each_blocks[i] = null;
+    });
     return {
       c() {
-        svg = svg_element("svg");
-        path = svg_element("path");
-        attr(path, "fill-rule", "evenodd");
-        attr(path, "clip-rule", "evenodd");
-        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM7.70711 6.29289C7.31658 5.90237 6.68342 5.90237 6.29289 6.29289C5.90237 6.68342 5.90237 7.31658 6.29289 7.70711L8.585 10L6.29289 12.2929C5.93241 12.6534 5.90468 13.2206 6.2097 13.6129L6.29289 13.7071C6.68342 14.0976 7.31658 14.0976 7.70711 13.7071L10 11.415L12.2929 13.7071C12.6534 14.0676 13.2206 14.0953 13.6129 13.7903L13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L11.415 10L13.7071 7.70711C14.0676 7.34662 14.0953 6.77939 13.7903 6.3871L13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289L10 8.585L7.70711 6.29289Z");
-        attr(path, "fill", "currentColor");
-        attr(svg, "width", "20");
-        attr(svg, "height", "20");
-        attr(svg, "viewBox", "0 0 20 20");
-        attr(svg, "fill", "none");
-        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+        div1 = element("div");
+        div0 = element("div");
+        t2 = space();
+        for (let i = 0; i < each_blocks.length; i += 1) {
+          each_blocks[i].c();
+        }
+        attr(div0, "class", div0_class_value = /*isDataSaving*/
+        ctx[0] ? "absolute inset-0 bg-transparent z-50" : "");
+        attr(div1, "class", "relative");
       },
       m(target, anchor) {
-        insert(target, svg, anchor);
-        append(svg, path);
+        insert(target, div1, anchor);
+        append(div1, div0);
+        append(div1, t2);
+        for (let i = 0; i < each_blocks.length; i += 1) {
+          if (each_blocks[i]) {
+            each_blocks[i].m(div1, null);
+          }
+        }
+        current = true;
+      },
+      p(ctx2, dirty) {
+        if (!current || dirty & /*isDataSaving*/
+        1 && div0_class_value !== (div0_class_value = /*isDataSaving*/
+        ctx2[0] ? "absolute inset-0 bg-transparent z-50" : "")) {
+          attr(div0, "class", div0_class_value);
+        }
+        if (dirty & /*selectedOption, Object, options, isFinished, isResultCorrect, handleOptionClick*/
+        398) {
+          each_value = ensure_array_like(Object.entries(
+            /*options*/
+            ctx2[7]
+          ));
+          let i;
+          for (i = 0; i < each_value.length; i += 1) {
+            const child_ctx = get_each_context(ctx2, each_value, i);
+            if (each_blocks[i]) {
+              each_blocks[i].p(child_ctx, dirty);
+              transition_in(each_blocks[i], 1);
+            } else {
+              each_blocks[i] = create_each_block(child_ctx);
+              each_blocks[i].c();
+              transition_in(each_blocks[i], 1);
+              each_blocks[i].m(div1, null);
+            }
+          }
+          group_outros();
+          for (i = each_value.length; i < each_blocks.length; i += 1) {
+            out(i);
+          }
+          check_outros();
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        for (let i = 0; i < each_value.length; i += 1) {
+          transition_in(each_blocks[i]);
+        }
+        current = true;
+      },
+      o(local) {
+        each_blocks = each_blocks.filter(Boolean);
+        for (let i = 0; i < each_blocks.length; i += 1) {
+          transition_out(each_blocks[i]);
+        }
+        current = false;
       },
-      p: noop,
-      i: noop,
-      o: noop,
       d(detaching) {
         if (detaching) {
-          detach(svg);
+          detach(div1);
         }
+        destroy_each(each_blocks, detaching);
       }
     };
   }
-  var ErrorSolid = class extends SvelteComponent {
-    constructor(options) {
-      super();
-      init(this, options, null, create_fragment4, safe_not_equal, {});
+  function create_if_block_2(ctx) {
+    let span;
+    let current_block_type_index;
+    let if_block;
+    let span_class_value;
+    let current;
+    const if_block_creators = [create_if_block_3, create_else_block2];
+    const if_blocks = [];
+    function select_block_type(ctx2, dirty) {
+      if (
+        /*isResultCorrect*/
+        ctx2[2]
+      )
+        return 0;
+      return 1;
     }
-  };
-  create_custom_element(ErrorSolid, {}, [], [], true);
-  var ErrorSolid_default = ErrorSolid;
-
-  // src/lib/assets/img/messaging/InfoSolid.svelte
-  function create_fragment5(ctx) {
-    let svg;
-    let path;
+    current_block_type_index = select_block_type(ctx, -1);
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     return {
       c() {
-        svg = svg_element("svg");
-        path = svg_element("path");
-        attr(path, "fill-rule", "evenodd");
-        attr(path, "clip-rule", "evenodd");
-        attr(path, "d", "M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 9C9.44772 9 9 9.44772 9 10V14.5C9 15.0523 9.44772 15.5 10 15.5C10.5523 15.5 11 15.0523 11 14.5V10C11 9.44772 10.5523 9 10 9ZM10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5Z");
-        attr(path, "fill", "currentColor");
-        attr(svg, "width", "20");
-        attr(svg, "height", "20");
-        attr(svg, "viewBox", "0 0 20 20");
-        attr(svg, "fill", "none");
-        attr(svg, "xmlns", "http://www.w3.org/2000/svg");
+        span = element("span");
+        if_block.c();
+        attr(span, "class", span_class_value = /*isResultCorrect*/
+        (ctx[2] ? "text-green-800" : "text-red-800") + " p-0.5");
       },
       m(target, anchor) {
-        insert(target, svg, anchor);
-        append(svg, path);
+        insert(target, span, anchor);
+        if_blocks[current_block_type_index].m(span, null);
+        current = true;
+      },
+      p(ctx2, dirty) {
+        let previous_block_index = current_block_type_index;
+        current_block_type_index = select_block_type(ctx2, dirty);
+        if (current_block_type_index !== previous_block_index) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+          if_block = if_blocks[current_block_type_index];
+          if (!if_block) {
+            if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block.c();
+          } else {
+          }
+          transition_in(if_block, 1);
+          if_block.m(span, null);
+        }
+        if (!current || dirty & /*isResultCorrect*/
+        4 && span_class_value !== (span_class_value = /*isResultCorrect*/
+        (ctx2[2] ? "text-green-800" : "text-red-800") + " p-0.5")) {
+          attr(span, "class", span_class_value);
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
       },
-      p: noop,
-      i: noop,
-      o: noop,
       d(detaching) {
         if (detaching) {
-          detach(svg);
+          detach(span);
         }
+        if_blocks[current_block_type_index].d();
       }
     };
   }
-  var InfoSolid = class extends SvelteComponent {
-    constructor(options) {
-      super();
-      init(this, options, null, create_fragment5, safe_not_equal, {});
-    }
-  };
-  create_custom_element(InfoSolid, {}, [], [], true);
-  var InfoSolid_default = InfoSolid;
-
-  // src/lib/components/prompt/template/PromptResult.svelte
-  function create_else_block_1(ctx) {
+  function create_else_block2(ctx) {
     let errorsolid;
     let current;
     errorsolid = new ErrorSolid_default({});
@@ -1810,7 +1904,7 @@
       }
     };
   }
-  function create_if_block_2(ctx) {
+  function create_if_block_3(ctx) {
     let successsolid;
     let current;
     successsolid = new SuccessSolid_default({});
@@ -1837,119 +1931,132 @@
       }
     };
   }
-  function create_if_block3(ctx) {
-    let div0;
-    let span0;
-    let current_block_type_index;
-    let if_block;
-    let span0_class_value;
-    let t0;
-    let span3;
+  function create_each_block(ctx) {
+    let button;
     let span1;
+    let span0;
     let t1;
+    let t2_value = (
+      /*option*/
+      ctx[16].answer + ""
+    );
     let t2;
-    let span2;
     let t3;
-    let div0_class_value;
     let t4;
-    let div1;
+    let button_aria_label_value;
+    let button_class_value;
     let current;
-    const if_block_creators = [create_if_block_12, create_else_block];
-    const if_blocks = [];
-    function select_block_type_1(ctx2, dirty) {
-      if (
-        /*isResultCorrect*/
-        ctx2[2]
-      )
-        return 0;
-      return 1;
+    let mounted;
+    let dispose;
+    let if_block = (
+      /*selectedOption*/
+      ctx[3] === /*option*/
+      ctx[16].id && /*isFinished*/
+      ctx[1] && create_if_block_2(ctx)
+    );
+    function click_handler() {
+      return (
+        /*click_handler*/
+        ctx[10](
+          /*option*/
+          ctx[16]
+        )
+      );
     }
-    current_block_type_index = select_block_type_1(ctx, -1);
-    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
     return {
       c() {
-        div0 = element("div");
-        span0 = element("span");
-        if_block.c();
-        t0 = space();
-        span3 = element("span");
+        button = element("button");
         span1 = element("span");
-        t1 = text(
-          /*feedbackTitle*/
-          ctx[3]
-        );
-        t2 = space();
-        span2 = element("span");
-        t3 = text(
-          /*resultFeedback*/
-          ctx[1]
-        );
+        span0 = element("span");
+        span0.textContent = `${useMCQ_default(
+          /*index*/
+          ctx[18]
+        )}`;
+        t1 = space();
+        t2 = text(t2_value);
+        t3 = space();
+        if (if_block)
+          if_block.c();
         t4 = space();
-        div1 = element("div");
-        attr(span0, "class", span0_class_value = `${/*spanIconClass*/
-        ctx[5]} mr-2 p-0.5`);
-        attr(span1, "class", "block mb-1 font-semibold");
-        attr(span3, "class", "text-base");
-        attr(div0, "class", div0_class_value = `${/*mainDivClass*/
-        ctx[4]} flex items-start my-6 p-4 border-l-[6px] text-charcoal`);
-        attr(div1, "class", "divider my-6");
+        attr(span0, "class", "choice group-active:border-2 group-active:border-blue-1000 group-active:p-[7px]");
+        attr(span1, "class", "grow flex items-center");
+        attr(button, "aria-label", button_aria_label_value = `${/*selectedOption*/
+        ctx[3] === /*option*/
+        ctx[16].id ? "Selected option" : "Option"} ${useMCQ_default(
+          /*index*/
+          ctx[18]
+        )}: ${/*option*/
+        ctx[16].answer}`);
+        attr(button, "class", button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
+        (ctx[3] === /*option*/
+        ctx[16].id ? "selected" : "") + " " + (!/*isFinished*/
+        ctx[1] ? "" : (
+          /*isResultCorrect*/
+          ctx[2] ? "correct" : "incorrect"
+        )));
       },
       m(target, anchor) {
-        insert(target, div0, anchor);
-        append(div0, span0);
-        if_blocks[current_block_type_index].m(span0, null);
-        append(div0, t0);
-        append(div0, span3);
-        append(span3, span1);
+        insert(target, button, anchor);
+        append(button, span1);
+        append(span1, span0);
         append(span1, t1);
-        append(span3, t2);
-        append(span3, span2);
-        append(span2, t3);
-        insert(target, t4, anchor);
-        insert(target, div1, anchor);
+        append(span1, t2);
+        append(button, t3);
+        if (if_block)
+          if_block.m(button, null);
+        append(button, t4);
         current = true;
+        if (!mounted) {
+          dispose = listen(button, "click", click_handler);
+          mounted = true;
+        }
       },
-      p(ctx2, dirty) {
-        let previous_block_index = current_block_type_index;
-        current_block_type_index = select_block_type_1(ctx2, dirty);
-        if (current_block_type_index !== previous_block_index) {
+      p(new_ctx, dirty) {
+        ctx = new_ctx;
+        if (
+          /*selectedOption*/
+          ctx[3] === /*option*/
+          ctx[16].id && /*isFinished*/
+          ctx[1]
+        ) {
+          if (if_block) {
+            if_block.p(ctx, dirty);
+            if (dirty & /*selectedOption, isFinished*/
+            10) {
+              transition_in(if_block, 1);
+            }
+          } else {
+            if_block = create_if_block_2(ctx);
+            if_block.c();
+            transition_in(if_block, 1);
+            if_block.m(button, t4);
+          }
+        } else if (if_block) {
           group_outros();
-          transition_out(if_blocks[previous_block_index], 1, 1, () => {
-            if_blocks[previous_block_index] = null;
+          transition_out(if_block, 1, 1, () => {
+            if_block = null;
           });
           check_outros();
-          if_block = if_blocks[current_block_type_index];
-          if (!if_block) {
-            if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
-            if_block.c();
-          } else {
-          }
-          transition_in(if_block, 1);
-          if_block.m(span0, null);
         }
-        if (!current || dirty & /*spanIconClass*/
-        32 && span0_class_value !== (span0_class_value = `${/*spanIconClass*/
-        ctx2[5]} mr-2 p-0.5`)) {
-          attr(span0, "class", span0_class_value);
+        if (!current || dirty & /*selectedOption*/
+        8 && button_aria_label_value !== (button_aria_label_value = `${/*selectedOption*/
+        ctx[3] === /*option*/
+        ctx[16].id ? "Selected option" : "Option"} ${useMCQ_default(
+          /*index*/
+          ctx[18]
+        )}: ${/*option*/
+        ctx[16].answer}`)) {
+          attr(button, "aria-label", button_aria_label_value);
         }
-        if (!current || dirty & /*feedbackTitle*/
-        8)
-          set_data(
-            t1,
-            /*feedbackTitle*/
-            ctx2[3]
-          );
-        if (!current || dirty & /*resultFeedback*/
-        2)
-          set_data(
-            t3,
-            /*resultFeedback*/
-            ctx2[1]
-          );
-        if (!current || dirty & /*mainDivClass*/
-        16 && div0_class_value !== (div0_class_value = `${/*mainDivClass*/
-        ctx2[4]} flex items-start my-6 p-4 border-l-[6px] text-charcoal`)) {
-          attr(div0, "class", div0_class_value);
+        if (!current || dirty & /*selectedOption, isFinished, isResultCorrect*/
+        14 && button_class_value !== (button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
+        (ctx[3] === /*option*/
+        ctx[16].id ? "selected" : "") + " " + (!/*isFinished*/
+        ctx[1] ? "" : (
+          /*isResultCorrect*/
+          ctx[2] ? "correct" : "incorrect"
+        )))) {
+          attr(button, "class", button_class_value);
         }
       },
       i(local) {
@@ -1964,179 +2071,184 @@
       },
       d(detaching) {
         if (detaching) {
-          detach(div0);
-          detach(t4);
-          detach(div1);
+          detach(button);
         }
-        if_blocks[current_block_type_index].d();
+        if (if_block)
+          if_block.d();
+        mounted = false;
+        dispose();
       }
     };
   }
-  function create_else_block(ctx) {
-    let infosolid;
+  function create_default_slot(ctx) {
+    let if_block_anchor;
     let current;
-    infosolid = new InfoSolid_default({});
+    let if_block = (
+      /*options*/
+      ctx[7] && create_if_block_13(ctx)
+    );
     return {
       c() {
-        create_component(infosolid.$$.fragment);
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
       },
       m(target, anchor) {
-        mount_component(infosolid, target, anchor);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
         current = true;
       },
+      p(ctx2, dirty) {
+        if (
+          /*options*/
+          ctx2[7]
+        )
+          if_block.p(ctx2, dirty);
+      },
       i(local) {
         if (current)
           return;
-        transition_in(infosolid.$$.fragment, local);
+        transition_in(if_block);
         current = true;
       },
       o(local) {
-        transition_out(infosolid.$$.fragment, local);
+        transition_out(if_block);
         current = false;
       },
       d(detaching) {
-        destroy_component(infosolid, detaching);
+        if (detaching) {
+          detach(if_block_anchor);
+        }
+        if (if_block)
+          if_block.d(detaching);
       }
     };
   }
-  function create_if_block_12(ctx) {
-    let successsolid;
+  function create_if_block3(ctx) {
+    let promptresult;
     let current;
-    successsolid = new SuccessSolid_default({});
+    promptresult = new PromptResultFeedback_default({
+      props: {
+        isResultCorrect: (
+          /*isResultCorrect*/
+          ctx[2]
+        ),
+        resultFeedbackTitle: (
+          /*isResultCorrect*/
+          ctx[2] ? "Well done!" : "Nice try!"
+        ),
+        resultFeedback: (
+          /*resultFeedback*/
+          ctx[4]
+        )
+      }
+    });
     return {
       c() {
-        create_component(successsolid.$$.fragment);
+        create_component(promptresult.$$.fragment);
       },
       m(target, anchor) {
-        mount_component(successsolid, target, anchor);
+        mount_component(promptresult, target, anchor);
         current = true;
       },
+      p(ctx2, dirty) {
+        const promptresult_changes = {};
+        if (dirty & /*isResultCorrect*/
+        4)
+          promptresult_changes.isResultCorrect = /*isResultCorrect*/
+          ctx2[2];
+        if (dirty & /*isResultCorrect*/
+        4)
+          promptresult_changes.resultFeedbackTitle = /*isResultCorrect*/
+          ctx2[2] ? "Well done!" : "Nice try!";
+        if (dirty & /*resultFeedback*/
+        16)
+          promptresult_changes.resultFeedback = /*resultFeedback*/
+          ctx2[4];
+        promptresult.$set(promptresult_changes);
+      },
       i(local) {
         if (current)
           return;
-        transition_in(successsolid.$$.fragment, local);
+        transition_in(promptresult.$$.fragment, local);
         current = true;
       },
       o(local) {
-        transition_out(successsolid.$$.fragment, local);
+        transition_out(promptresult.$$.fragment, local);
         current = false;
       },
       d(detaching) {
-        destroy_component(successsolid, detaching);
+        destroy_component(promptresult, detaching);
       }
     };
   }
   function create_fragment6(ctx) {
-    let div;
-    let span0;
-    let current_block_type_index;
-    let if_block0;
-    let span0_class_value;
-    let t0;
-    let span1;
-    let t1;
+    let promptbody;
     let t2;
-    let if_block1_anchor;
+    let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block_2, create_else_block_1];
-    const if_blocks = [];
-    function select_block_type(ctx2, dirty) {
-      if (
-        /*isResultCorrect*/
-        ctx2[2]
-      )
-        return 0;
-      return 1;
-    }
-    current_block_type_index = select_block_type(ctx, -1);
-    if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-    let if_block1 = (
-      /*resultFeedback*/
+    promptbody = new PromptBody_default({
+      props: {
+        rubric: (
+          /*rubric*/
+          ctx[5].text
+        ),
+        prompt: (
+          /*prompt*/
+          ctx[6]
+        ),
+        $$slots: { default: [create_default_slot] },
+        $$scope: { ctx }
+      }
+    });
+    let if_block = (
+      /*isFinished*/
       ctx[1] && create_if_block3(ctx)
     );
     return {
       c() {
-        div = element("div");
-        span0 = element("span");
-        if_block0.c();
-        t0 = space();
-        span1 = element("span");
-        t1 = text(
-          /*resultMessage*/
-          ctx[0]
-        );
+        create_component(promptbody.$$.fragment);
         t2 = space();
-        if (if_block1)
-          if_block1.c();
-        if_block1_anchor = empty();
-        attr(span0, "class", span0_class_value = `${/*spanIconClass*/
-        ctx[5]} mr-2 p-0.5`);
-        attr(span1, "class", "p2");
-        attr(div, "class", "flex items-center mt-2 text-charcoal");
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
       },
       m(target, anchor) {
-        insert(target, div, anchor);
-        append(div, span0);
-        if_blocks[current_block_type_index].m(span0, null);
-        append(div, t0);
-        append(div, span1);
-        append(span1, t1);
+        mount_component(promptbody, target, anchor);
         insert(target, t2, anchor);
-        if (if_block1)
-          if_block1.m(target, anchor);
-        insert(target, if_block1_anchor, anchor);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
         current = true;
       },
       p(ctx2, [dirty]) {
-        let previous_block_index = current_block_type_index;
-        current_block_type_index = select_block_type(ctx2, dirty);
-        if (current_block_type_index !== previous_block_index) {
-          group_outros();
-          transition_out(if_blocks[previous_block_index], 1, 1, () => {
-            if_blocks[previous_block_index] = null;
-          });
-          check_outros();
-          if_block0 = if_blocks[current_block_type_index];
-          if (!if_block0) {
-            if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
-            if_block0.c();
-          } else {
-          }
-          transition_in(if_block0, 1);
-          if_block0.m(span0, null);
-        }
-        if (!current || dirty & /*spanIconClass*/
-        32 && span0_class_value !== (span0_class_value = `${/*spanIconClass*/
-        ctx2[5]} mr-2 p-0.5`)) {
-          attr(span0, "class", span0_class_value);
+        const promptbody_changes = {};
+        if (dirty & /*$$scope, selectedOption, isFinished, isResultCorrect, isDataSaving*/
+        524303) {
+          promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
-        if (!current || dirty & /*resultMessage*/
-        1)
-          set_data(
-            t1,
-            /*resultMessage*/
-            ctx2[0]
-          );
+        promptbody.$set(promptbody_changes);
         if (
-          /*resultFeedback*/
+          /*isFinished*/
           ctx2[1]
         ) {
-          if (if_block1) {
-            if_block1.p(ctx2, dirty);
-            if (dirty & /*resultFeedback*/
+          if (if_block) {
+            if_block.p(ctx2, dirty);
+            if (dirty & /*isFinished*/
             2) {
-              transition_in(if_block1, 1);
+              transition_in(if_block, 1);
             }
           } else {
-            if_block1 = create_if_block3(ctx2);
-            if_block1.c();
-            transition_in(if_block1, 1);
-            if_block1.m(if_block1_anchor.parentNode, if_block1_anchor);
+            if_block = create_if_block3(ctx2);
+            if_block.c();
+            transition_in(if_block, 1);
+            if_block.m(if_block_anchor.parentNode, if_block_anchor);
           }
-        } else if (if_block1) {
+        } else if (if_block) {
           group_outros();
-          transition_out(if_block1, 1, 1, () => {
-            if_block1 = null;
+          transition_out(if_block, 1, 1, () => {
+            if_block = null;
           });
           check_outros();
         }
@@ -2144,77 +2256,113 @@
       i(local) {
         if (current)
           return;
-        transition_in(if_block0);
-        transition_in(if_block1);
+        transition_in(promptbody.$$.fragment, local);
+        transition_in(if_block);
         current = true;
       },
       o(local) {
-        transition_out(if_block0);
-        transition_out(if_block1);
+        transition_out(promptbody.$$.fragment, local);
+        transition_out(if_block);
         current = false;
       },
       d(detaching) {
         if (detaching) {
-          detach(div);
           detach(t2);
-          detach(if_block1_anchor);
-        }
-        if_blocks[current_block_type_index].d();
-        if (if_block1)
-          if_block1.d(detaching);
+          detach(if_block_anchor);
+        }
+        destroy_component(promptbody, detaching);
+        if (if_block)
+          if_block.d(detaching);
       }
     };
   }
   function instance3($$self, $$props, $$invalidate) {
-    let { resultMessage = "" } = $$props;
-    let { resultFeedback = null } = $$props;
-    let { isResultCorrect: isResultCorrect2 = true } = $$props;
-    let feedbackTitle = "Well done!";
-    let mainDivClass = "border-green-800 bg-green-300";
-    let spanIconClass = "text-green-800";
-    if (!isResultCorrect2) {
-      feedbackTitle = "Not quite, but you\u2019re close!";
-      mainDivClass = "border-red-800 bg-red-300";
-      spanIconClass = "text-red-800";
+    let { sessionData } = $$props;
+    let { isDataSaving } = $$props;
+    let { isFinished: isFinished2 = false } = $$props;
+    let { isResultCorrect: isResultCorrect2 = false } = $$props;
+    const { rubric, interaction, metadata, scoringMetadata } = sessionData;
+    const { prompt, options } = interaction;
+    let selectedOption = null;
+    let resultFeedback = null;
+    const dispatch = createEventDispatcher();
+    if (metadata) {
+      const { events } = metadata.interactions;
+      const currentOption = events.pop();
+      const { answer_id: answerChoiceId } = currentOption;
+      selectedOption = answerChoiceId[0];
+    }
+    if (isFinished2) {
+      if (options && selectedOption) {
+        const feedbackData = Object.values(options).filter((option) => option.id === selectedOption);
+        resultFeedback = feedbackData[0].feedback || resultFeedback;
+      }
+      const { answerId, has_answer } = scoringMetadata;
+      selectedOption = answerId && has_answer ? answerId : selectedOption;
     }
+    const handleOptionClick = (optionId, option) => {
+      if (isDataSaving || optionId === selectedOption || isFinished2)
+        return;
+      $$invalidate(3, selectedOption = optionId);
+      dispatch("saveOption", {
+        answer_id: [optionId],
+        answer_choice: [option]
+      });
+    };
+    const click_handler = (option) => handleOptionClick(option.id, option.answer);
     $$self.$$set = ($$props2) => {
-      if ("resultMessage" in $$props2)
-        $$invalidate(0, resultMessage = $$props2.resultMessage);
-      if ("resultFeedback" in $$props2)
-        $$invalidate(1, resultFeedback = $$props2.resultFeedback);
+      if ("sessionData" in $$props2)
+        $$invalidate(9, sessionData = $$props2.sessionData);
+      if ("isDataSaving" in $$props2)
+        $$invalidate(0, isDataSaving = $$props2.isDataSaving);
+      if ("isFinished" in $$props2)
+        $$invalidate(1, isFinished2 = $$props2.isFinished);
       if ("isResultCorrect" in $$props2)
         $$invalidate(2, isResultCorrect2 = $$props2.isResultCorrect);
     };
     return [
-      resultMessage,
-      resultFeedback,
+      isDataSaving,
+      isFinished2,
       isResultCorrect2,
-      feedbackTitle,
-      mainDivClass,
-      spanIconClass
+      selectedOption,
+      resultFeedback,
+      rubric,
+      prompt,
+      options,
+      handleOptionClick,
+      sessionData,
+      click_handler
     ];
   }
-  var PromptResult = class extends SvelteComponent {
+  var PromptMCQ = class extends SvelteComponent {
     constructor(options) {
       super();
       init(this, options, instance3, create_fragment6, safe_not_equal, {
-        resultMessage: 0,
-        resultFeedback: 1,
+        sessionData: 9,
+        isDataSaving: 0,
+        isFinished: 1,
         isResultCorrect: 2
       });
     }
-    get resultMessage() {
+    get sessionData() {
+      return this.$$.ctx[9];
+    }
+    set sessionData(sessionData) {
+      this.$$set({ sessionData });
+      flush();
+    }
+    get isDataSaving() {
       return this.$$.ctx[0];
     }
-    set resultMessage(resultMessage) {
-      this.$$set({ resultMessage });
+    set isDataSaving(isDataSaving) {
+      this.$$set({ isDataSaving });
       flush();
     }
-    get resultFeedback() {
+    get isFinished() {
       return this.$$.ctx[1];
     }
-    set resultFeedback(resultFeedback) {
-      this.$$set({ resultFeedback });
+    set isFinished(isFinished2) {
+      this.$$set({ isFinished: isFinished2 });
       flush();
     }
     get isResultCorrect() {
@@ -2225,11 +2373,88 @@
       flush();
     }
   };
-  customElements.define("prompt-result", create_custom_element(PromptResult, { "resultMessage": {}, "resultFeedback": {}, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
-  var PromptResult_default = PromptResult;
+  customElements.define("prompt-mcq", create_custom_element(PromptMCQ, { "sessionData": {}, "isDataSaving": {}, "isFinished": { "type": "Boolean" }, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
+  var PromptMCQ_default = PromptMCQ;
+
+  // node_modules/autosize/dist/autosize.esm.js
+  var e = /* @__PURE__ */ new Map();
+  function t(t2) {
+    var o2 = e.get(t2);
+    o2 && o2.destroy();
+  }
+  function o(t2) {
+    var o2 = e.get(t2);
+    o2 && o2.update();
+  }
+  var r = null;
+  "undefined" == typeof window ? ((r = function(e2) {
+    return e2;
+  }).destroy = function(e2) {
+    return e2;
+  }, r.update = function(e2) {
+    return e2;
+  }) : ((r = function(t2, o2) {
+    return t2 && Array.prototype.forEach.call(t2.length ? t2 : [t2], function(t3) {
+      return function(t4) {
+        if (t4 && t4.nodeName && "TEXTAREA" === t4.nodeName && !e.has(t4)) {
+          var o3, r2 = null, n2 = window.getComputedStyle(t4), i = (o3 = t4.value, function() {
+            a({ testForHeightReduction: "" === o3 || !t4.value.startsWith(o3), restoreTextAlign: null }), o3 = t4.value;
+          }), l = function(o4) {
+            t4.removeEventListener("autosize:destroy", l), t4.removeEventListener("autosize:update", s), t4.removeEventListener("input", i), window.removeEventListener("resize", s), Object.keys(o4).forEach(function(e2) {
+              return t4.style[e2] = o4[e2];
+            }), e.delete(t4);
+          }.bind(t4, { height: t4.style.height, resize: t4.style.resize, textAlign: t4.style.textAlign, overflowY: t4.style.overflowY, overflowX: t4.style.overflowX, wordWrap: t4.style.wordWrap });
+          t4.addEventListener("autosize:destroy", l), t4.addEventListener("autosize:update", s), t4.addEventListener("input", i), window.addEventListener("resize", s), t4.style.overflowX = "hidden", t4.style.wordWrap = "break-word", e.set(t4, { destroy: l, update: s }), s();
+        }
+        function a(e2) {
+          var o4, i2, l2 = e2.restoreTextAlign, s2 = void 0 === l2 ? null : l2, d = e2.testForHeightReduction, u = void 0 === d || d, c = n2.overflowY;
+          if (0 !== t4.scrollHeight && ("vertical" === n2.resize ? t4.style.resize = "none" : "both" === n2.resize && (t4.style.resize = "horizontal"), u && (o4 = function(e3) {
+            for (var t5 = []; e3 && e3.parentNode && e3.parentNode instanceof Element; )
+              e3.parentNode.scrollTop && t5.push([e3.parentNode, e3.parentNode.scrollTop]), e3 = e3.parentNode;
+            return function() {
+              return t5.forEach(function(e4) {
+                var t6 = e4[0], o5 = e4[1];
+                t6.style.scrollBehavior = "auto", t6.scrollTop = o5, t6.style.scrollBehavior = null;
+              });
+            };
+          }(t4), t4.style.height = ""), i2 = "content-box" === n2.boxSizing ? t4.scrollHeight - (parseFloat(n2.paddingTop) + parseFloat(n2.paddingBottom)) : t4.scrollHeight + parseFloat(n2.borderTopWidth) + parseFloat(n2.borderBottomWidth), "none" !== n2.maxHeight && i2 > parseFloat(n2.maxHeight) ? ("hidden" === n2.overflowY && (t4.style.overflow = "scroll"), i2 = parseFloat(n2.maxHeight)) : "hidden" !== n2.overflowY && (t4.style.overflow = "hidden"), t4.style.height = i2 + "px", s2 && (t4.style.textAlign = s2), o4 && o4(), r2 !== i2 && (t4.dispatchEvent(new Event("autosize:resized", { bubbles: true })), r2 = i2), c !== n2.overflow && !s2)) {
+            var v = n2.textAlign;
+            "hidden" === n2.overflow && (t4.style.textAlign = "start" === v ? "end" : "start"), a({ restoreTextAlign: v, testForHeightReduction: true });
+          }
+        }
+        function s() {
+          a({ testForHeightReduction: true, restoreTextAlign: null });
+        }
+      }(t3);
+    }), t2;
+  }).destroy = function(e2) {
+    return e2 && Array.prototype.forEach.call(e2.length ? e2 : [e2], t), e2;
+  }, r.update = function(e2) {
+    return e2 && Array.prototype.forEach.call(e2.length ? e2 : [e2], o), e2;
+  });
+  var n = r;
+  var autosize_esm_default = n;
+
+  // node_modules/svelte-autosize/index.js
+  var action = (node) => {
+    autosize_esm_default(node);
+    return {
+      destroy() {
+        autosize_esm_default.destroy(node);
+      }
+    };
+  };
+  action.update = autosize_esm_default.update;
+  action.destroy = autosize_esm_default.destroy;
+  var svelte_autosize_default = action;
+
+  // src/lib/constants/index.ts
+  var INTERACTION_TYPE_MCQ = "multipleChoiceInteraction";
+  var INTERACTION_TYPE_TYPEIN = "typeInInteraction";
+  var TYPEIN_TYPE_SHORT = "Short-Text";
 
   // src/lib/components/prompt/typein/PromptTypeIn.svelte
-  function create_else_block2(ctx) {
+  function create_else_block_1(ctx) {
     let textarea;
     let textarea_class_value;
     let autosize_action;
@@ -2239,10 +2464,10 @@
       c() {
         textarea = element("textarea");
         attr(textarea, "id", idLabel);
+        attr(textarea, "aria-label", placeholder);
         attr(textarea, "placeholder", placeholder);
         attr(textarea, "rows", "3");
-        attr(textarea, "class", textarea_class_value = `${/*inputBorderClass*/
-        ctx[2]} typein-textbox overflow-hidden`);
+        attr(textarea, "class", textarea_class_value = "typein-textbox overflow-hidden " + (!isFinished ? "" : isResultCorrect ? "border-2 border-green-800" : "border-2 border-red-800"));
         textarea.disabled = /*isDataSaving*/
         ctx[0];
         attr(textarea, "autocomplete", "off");
@@ -2260,38 +2485,38 @@
               textarea,
               "input",
               /*textarea_input_handler*/
-              ctx[14]
+              ctx[13]
             ),
             listen(
               textarea,
               "mousedown",
               /*mousedown_handler*/
-              ctx[15]
+              ctx[14]
             ),
             listen(
               textarea,
               "touchstart",
               /*touchstart_handler*/
-              ctx[16],
+              ctx[15],
               { passive: true }
             ),
             listen(
               textarea,
               "focus",
               /*focus_handler*/
-              ctx[17]
+              ctx[16]
             ),
             listen(
               textarea,
               "focusout",
               /*focusout_handler_1*/
-              ctx[18]
+              ctx[17]
             ),
             listen(
               textarea,
               "keydown",
               /*keydown_handler_1*/
-              ctx[19]
+              ctx[18]
             ),
             action_destroyer(autosize_action = svelte_autosize_default.call(null, textarea))
           ];
@@ -2322,7 +2547,7 @@
       }
     };
   }
-  function create_if_block_13(ctx) {
+  function create_if_block_22(ctx) {
     let input;
     let input_class_value;
     let mounted;
@@ -2332,9 +2557,9 @@
         input = element("input");
         attr(input, "type", "text");
         attr(input, "id", idLabel);
+        attr(input, "aria-label", placeholder);
         attr(input, "placeholder", placeholder);
-        attr(input, "class", input_class_value = `${/*inputBorderClass*/
-        ctx[2]} typein-textbox`);
+        attr(input, "class", input_class_value = "typein-textbox " + (!isFinished ? "" : isResultCorrect ? "border-2 border-green-800" : "border-2 border-red-800"));
         input.disabled = /*isDataSaving*/
         ctx[0];
         attr(input, "autocomplete", "off");
@@ -2352,19 +2577,19 @@
               input,
               "input",
               /*input_input_handler*/
-              ctx[11]
+              ctx[10]
             ),
             listen(
               input,
               "focusout",
               /*focusout_handler*/
-              ctx[12]
+              ctx[11]
             ),
             listen(
               input,
               "keydown",
               /*keydown_handler*/
-              ctx[13]
+              ctx[12]
             )
           ];
           mounted = true;
@@ -2400,10 +2625,10 @@
     function select_block_type(ctx2, dirty) {
       if (
         /*typeinType*/
-        ctx2[5] === "Short-Text"
+        ctx2[4] === TYPEIN_TYPE_SHORT
       )
-        return create_if_block_13;
-      return create_else_block2;
+        return create_if_block_22;
+      return create_else_block_1;
     }
     let current_block_type = select_block_type(ctx, -1);
     let if_block = current_block_type(ctx);
@@ -2428,20 +2653,55 @@
     };
   }
   function create_if_block4(ctx) {
+    let div;
+    let span0;
+    let current_block_type_index;
+    let if_block;
+    let span0_class_value;
+    let t0;
+    let span1;
+    let div_class_value;
+    let t2;
     let promptresult;
     let current;
-    promptresult = new PromptResult_default({
+    const if_block_creators = [create_if_block_14, create_else_block3];
+    const if_blocks = [];
+    function select_block_type_1(ctx2, dirty) {
+      if (isResultCorrect)
+        return 0;
+      return 1;
+    }
+    current_block_type_index = select_block_type_1(ctx, -1);
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    promptresult = new PromptResultFeedback_default({
       props: {
         isResultCorrect,
-        resultMessage: "[Generic \u201Ccorrect\u201D message]",
+        resultFeedbackTitle: isResultCorrect ? "Well done!" : "Not quite, but you\u2019re close!",
         resultFeedback: "You applied the principles of [specific theory] perfectly in your response."
       }
     });
     return {
       c() {
+        div = element("div");
+        span0 = element("span");
+        if_block.c();
+        t0 = space();
+        span1 = element("span");
+        span1.textContent = `${isResultCorrect ? "[Generic \u201Ccorrect\u201D message]" : "[Generic \u201Cincorrect\u201D message]"}`;
+        t2 = space();
         create_component(promptresult.$$.fragment);
+        attr(span0, "class", span0_class_value = (isResultCorrect ? "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[4] === TYPEIN_TYPE_SHORT ? "mt-2" : "mt-0.5"));
       },
       m(target, anchor) {
+        insert(target, div, anchor);
+        append(div, span0);
+        if_blocks[current_block_type_index].m(span0, null);
+        append(div, t0);
+        append(div, span1);
+        insert(target, t2, anchor);
         mount_component(promptresult, target, anchor);
         current = true;
       },
@@ -2449,18 +2709,79 @@
       i(local) {
         if (current)
           return;
+        transition_in(if_block);
         transition_in(promptresult.$$.fragment, local);
         current = true;
       },
       o(local) {
+        transition_out(if_block);
         transition_out(promptresult.$$.fragment, local);
         current = false;
       },
       d(detaching) {
+        if (detaching) {
+          detach(div);
+          detach(t2);
+        }
+        if_blocks[current_block_type_index].d();
         destroy_component(promptresult, detaching);
       }
     };
   }
+  function create_else_block3(ctx) {
+    let errorsolid;
+    let current;
+    errorsolid = new ErrorSolid_default({});
+    return {
+      c() {
+        create_component(errorsolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(errorsolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(errorsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(errorsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(errorsolid, detaching);
+      }
+    };
+  }
+  function create_if_block_14(ctx) {
+    let successsolid;
+    let current;
+    successsolid = new SuccessSolid_default({});
+    return {
+      c() {
+        create_component(successsolid.$$.fragment);
+      },
+      m(target, anchor) {
+        mount_component(successsolid, target, anchor);
+        current = true;
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(successsolid.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(successsolid.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(successsolid, detaching);
+      }
+    };
+  }
   function create_fragment7(ctx) {
     let promptbody;
     let t2;
@@ -2470,11 +2791,11 @@
       props: {
         rubric: (
           /*rubric*/
-          ctx[3].text
+          ctx[2].text
         ),
         prompt: (
           /*prompt*/
-          ctx[4]
+          ctx[3]
         ),
         $$slots: { default: [create_default_slot2] },
         $$scope: { ctx }
@@ -2500,7 +2821,7 @@
       p(ctx2, [dirty]) {
         const promptbody_changes = {};
         if (dirty & /*$$scope, isDataSaving, typeinAnswer*/
-        33554435) {
+        16777219) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
@@ -2533,7 +2854,7 @@
   var idLabel = "answerText";
   var placeholder = "Type your answer here";
   var isFinished = false;
-  var isResultCorrect = true;
+  var isResultCorrect = false;
   function instance4($$self, $$props, $$invalidate) {
     let { sessionData } = $$props;
     let { isDataSaving } = $$props;
@@ -2541,7 +2862,6 @@
     let typeinAnswer;
     let latestAnswer = "";
     let focusOrigin = "tab";
-    const inputBorderClass = !isFinished ? "" : isResultCorrect ? "border-2 border-green-800" : "border-2 border-red-800";
     const { rubric, interaction, metadata } = sessionData;
     const { prompt, typein_type: typeinType } = interaction;
     if (metadata) {
@@ -2588,14 +2908,13 @@
     const keydown_handler_1 = (event) => saveOnEnter(event);
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(10, sessionData = $$props2.sessionData);
+        $$invalidate(9, sessionData = $$props2.sessionData);
       if ("isDataSaving" in $$props2)
         $$invalidate(0, isDataSaving = $$props2.isDataSaving);
     };
     return [
       isDataSaving,
       typeinAnswer,
-      inputBorderClass,
       rubric,
       prompt,
       typeinType,
@@ -2618,10 +2937,10 @@
   var PromptTypeIn = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance4, create_fragment7, safe_not_equal, { sessionData: 10, isDataSaving: 0 });
+      init(this, options, instance4, create_fragment7, safe_not_equal, { sessionData: 9, isDataSaving: 0 });
     }
     get sessionData() {
-      return this.$$.ctx[10];
+      return this.$$.ctx[9];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -2729,7 +3048,7 @@
 
   // src/lib/components/prompt/PromptBuilder.svelte
   function add_css(target) {
-    append_styles(target, "svelte-12rerkj", '*,: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-12rerkj-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-12rerkj-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;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>.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>.choice{border-color:rgb(8 38 99/var(--tw-border-opacity));border-width:2px}.btn-mcq-option.selected>.choice{--tw-border-opacity:1}.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-2{margin-top:0.5rem}.block{display:block}.flex{display:flex}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.items-start{align-items:flex-start}.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}.font-semibold{font-weight:600}.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))}.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-14zs2vw", '*,: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-14zs2vw-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-14zs2vw-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-start{align-items:flex-start}.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}.font-semibold{font-weight:600}.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;
@@ -2759,22 +3078,22 @@
       }
     };
   }
-  function create_if_block_14(ctx) {
+  function create_if_block_15(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block_22, create_if_block_3, create_else_block3];
+    const if_block_creators = [create_if_block_23, create_if_block_32, create_else_block4];
     const if_blocks = [];
     function select_block_type_1(ctx2, dirty) {
       if (
         /*interactionType*/
-        ctx2[3] === "multipleChoiceInteraction"
+        ctx2[3] === INTERACTION_TYPE_MCQ
       )
         return 0;
       if (
         /*interactionType*/
-        ctx2[3] === "typeInInteraction"
+        ctx2[3] === INTERACTION_TYPE_TYPEIN
       )
         return 1;
       return 2;
@@ -2859,7 +3178,7 @@
       }
     };
   }
-  function create_else_block3(ctx) {
+  function create_else_block4(ctx) {
     let invalidbanner;
     let current;
     invalidbanner = new InvalidBanner_default({ props: { bannerLabel } });
@@ -2887,7 +3206,7 @@
       }
     };
   }
-  function create_if_block_3(ctx) {
+  function create_if_block_32(ctx) {
     let prompttypein;
     let current;
     prompttypein = new PromptTypeIn_default({
@@ -2905,7 +3224,7 @@
     prompttypein.$on(
       "saveAnswer",
       /*saveEvent*/
-      ctx[4]
+      ctx[6]
     );
     return {
       c() {
@@ -2942,7 +3261,7 @@
       }
     };
   }
-  function create_if_block_22(ctx) {
+  function create_if_block_23(ctx) {
     let promptmcq;
     let current;
     promptmcq = new PromptMCQ_default({
@@ -2954,13 +3273,21 @@
         isDataSaving: (
           /*isDataSaving*/
           ctx[2]
+        ),
+        isFinished: (
+          /*isFinished*/
+          ctx[4]
+        ),
+        isResultCorrect: (
+          /*isResultCorrect*/
+          ctx[5]
         )
       }
     });
     promptmcq.$on(
       "saveOption",
       /*saveEvent*/
-      ctx[4]
+      ctx[6]
     );
     return {
       c() {
@@ -2980,6 +3307,14 @@
         4)
           promptmcq_changes.isDataSaving = /*isDataSaving*/
           ctx2[2];
+        if (dirty & /*isFinished*/
+        16)
+          promptmcq_changes.isFinished = /*isFinished*/
+          ctx2[4];
+        if (dirty & /*isResultCorrect*/
+        32)
+          promptmcq_changes.isResultCorrect = /*isResultCorrect*/
+          ctx2[5];
         promptmcq.$set(promptmcq_changes);
       },
       i(local) {
@@ -3002,7 +3337,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 (
@@ -3077,11 +3412,16 @@
     let isDataFetching = true;
     let isDataSaving = false;
     let interactionType = null;
+    let isFinished2 = false;
+    let isLocked = false;
+    let isResultCorrect2 = false;
     const skipUserValidationStr = get_store_value(skipUserValidation) ? "?skip_user_validation=true" : "";
     const getSessionData = async (sessionId2) => {
       try {
         const { data } = await useGet(`sessions/${sessionId2}${skipUserValidationStr}`);
-        const { item_id: itemId, metadata } = data;
+        const { item_id: itemId, metadata, is_finished: isSessionFinished, is_locked: isSessionLocked } = data;
+        isLocked = isSessionLocked;
+        $$invalidate(4, isFinished2 = isSessionFinished);
         if (itemId) {
           await getItemData(itemId, metadata);
         }
@@ -3091,9 +3431,13 @@
     };
     const getItemData = async (itemId, metadata) => {
       try {
-        const { data } = await useGet(`items/${itemId}`);
+        const includeAnswer = isFinished2 && isLocked ? "?include=[correct_answer]" : "";
+        const { data } = await useGet(`items/${itemId}${includeAnswer}`);
         $$invalidate(3, interactionType = getInteractionType(data));
         $$invalidate(0, sessionData = { ...data, metadata });
+        if (isFinished2 && isLocked) {
+          await getSessionScore();
+        }
       } catch (error) {
       } finally {
         $$invalidate(1, isDataFetching = false);
@@ -3110,7 +3454,27 @@
       }
       return interactionType2;
     };
+    const getSessionScore = async () => {
+      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]
+          };
+          $$invalidate(0, sessionData = { ...sessionData, scoringMetadata });
+          $$invalidate(5, isResultCorrect2 = scoring.score_earned);
+        }
+      } catch (error) {
+      } finally {
+        $$invalidate(1, isDataFetching = false);
+      }
+    };
     const saveEvent = async ({ detail }) => {
+      if (isLocked || isFinished2)
+        return;
       try {
         $$invalidate(2, isDataSaving = true);
         await usePatch(`sessions/${sessionId}${skipUserValidationStr}`, detail);
@@ -3124,10 +3488,18 @@
       getSessionData(sessionId);
     }
     $$self.$$set = ($$new_props) => {
-      $$invalidate(10, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+      $$invalidate(14, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
     };
     $$props = exclude_internal_props($$props);
-    return [sessionData, isDataFetching, isDataSaving, interactionType, saveEvent];
+    return [
+      sessionData,
+      isDataFetching,
+      isDataSaving,
+      interactionType,
+      isFinished2,
+      isResultCorrect2,
+      saveEvent
+    ];
   }
   var PromptBuilder = class extends SvelteComponent {
     constructor(options) {