eat-js-sdk 0.0.8 → 0.0.10

package/dist/eat-prompt-builder.mjs

@@ -562,7 +562,7 @@
     }
     component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
   }
-  function init(component, options, instance6, create_fragment7, not_equal, props, append_styles2 = null, dirty = [-1]) {
+  function init(component, options, instance7, create_fragment11, not_equal, props, append_styles2 = null, dirty = [-1]) {
     const parent_component = current_component;
     set_current_component(component);
     const $$ = component.$$ = {
@@ -588,7 +588,7 @@
     };
     append_styles2 && append_styles2($$.root);
     let ready = false;
-    $$.ctx = instance6 ? instance6(component, options.props || {}, (i, ret, ...rest) => {
+    $$.ctx = instance7 ? instance7(component, options.props || {}, (i, ret, ...rest) => {
       const value = rest.length ? rest[0] : ret;
       if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
         if (!$$.skip_bound && $$.bound[i])
@@ -601,7 +601,7 @@
     $$.update();
     ready = true;
     run_all($$.before_update);
-    $$.fragment = create_fragment7 ? create_fragment7($$.ctx) : false;
+    $$.fragment = create_fragment11 ? create_fragment11($$.ctx) : false;
     if (options.target) {
       if (options.hydrate) {
         start_hydrating();
@@ -1244,6 +1244,389 @@
   customElements.define("prompt-body", create_custom_element(PromptBody, { "rubric": {}, "prompt": {} }, ["default"], [], true));
   var PromptBody_default = PromptBody;
 
+  // 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, {});
+    }
+  };
+  create_custom_element(SuccessSolid, {}, [], [], true);
+  var SuccessSolid_default = SuccessSolid;
+
+  // 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 div0;
+    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 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() {
+        div0 = element("div");
+        span0 = element("span");
+        if_block.c();
+        t0 = space();
+        span3 = element("span");
+        span1 = element("span");
+        t1 = text(
+          /*resultFeedbackTitle*/
+          ctx[1]
+        );
+        t2 = space();
+        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);
+        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(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);
+        }
+        if_blocks[current_block_type_index].d();
+      }
+    };
+  }
+  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() {
+        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_fragment4(ctx) {
+    let if_block_anchor;
+    let current;
+    let if_block = (
+      /*resultFeedback*/
+      ctx[0] && create_if_block2(ctx)
+    );
+    return {
+      c() {
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
+      },
+      m(target, anchor) {
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
+        current = true;
+      },
+      p(ctx2, [dirty]) {
+        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();
+        }
+      },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(if_block_anchor);
+        }
+        if (if_block)
+          if_block.d(detaching);
+      }
+    };
+  }
+  function instance2($$self, $$props, $$invalidate) {
+    let { resultFeedback = null } = $$props;
+    let { resultFeedbackTitle = null } = $$props;
+    let { isResultCorrect: isResultCorrect2 = true } = $$props;
+    $$self.$$set = ($$props2) => {
+      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 [resultFeedback, resultFeedbackTitle, isResultCorrect2];
+  }
+  var PromptResultFeedback = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, instance2, create_fragment4, safe_not_equal, {
+        resultFeedback: 0,
+        resultFeedbackTitle: 1,
+        isResultCorrect: 2
+      });
+    }
+    get resultFeedback() {
+      return this.$$.ctx[0];
+    }
+    set resultFeedback(resultFeedback) {
+      this.$$set({ resultFeedback });
+      flush();
+    }
+    get resultFeedbackTitle() {
+      return this.$$.ctx[1];
+    }
+    set resultFeedbackTitle(resultFeedbackTitle) {
+      this.$$set({ resultFeedbackTitle });
+      flush();
+    }
+    get isResultCorrect() {
+      return this.$$.ctx[2];
+    }
+    set isResultCorrect(isResultCorrect2) {
+      this.$$set({ isResultCorrect: isResultCorrect2 });
+      flush();
+    }
+  };
+  customElements.define("prompt-result-feedback", create_custom_element(PromptResultFeedback, { "resultFeedback": {}, "resultFeedbackTitle": {}, "isResultCorrect": { "type": "Boolean" } }, [], [], true));
+  var PromptResultFeedback_default = PromptResultFeedback;
+
   // src/lib/composables/useMCQ.ts
   var useAlphabetEquivalent = (index) => {
     const alphabetArr = [
@@ -1278,27 +1661,72 @@
   };
   var useMCQ_default = useAlphabetEquivalent;
 
+  // src/lib/assets/img/messaging/ErrorSolid.svelte
+  function create_fragment5(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 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");
+      },
+      m(target, anchor) {
+        insert(target, svg, anchor);
+        append(svg, path);
+      },
+      p: noop,
+      i: noop,
+      o: noop,
+      d(detaching) {
+        if (detaching) {
+          detach(svg);
+        }
+      }
+    };
+  }
+  var ErrorSolid = class extends SvelteComponent {
+    constructor(options) {
+      super();
+      init(this, options, null, create_fragment5, safe_not_equal, {});
+    }
+  };
+  create_custom_element(ErrorSolid, {}, [], [], true);
+  var ErrorSolid_default = ErrorSolid;
+
   // 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;
+    child_ctx[15] = list[i][0];
+    child_ctx[16] = list[i][1];
+    child_ctx[18] = i;
     return child_ctx;
   }
-  function create_if_block2(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[4]
+      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() {
         div1 = element("div");
@@ -1320,35 +1748,54 @@
             each_blocks[i].m(div1, null);
           }
         }
+        current = true;
       },
       p(ctx2, dirty) {
-        if (dirty & /*isDataSaving*/
+        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, handleOptionClick*/
-        50) {
+        if (dirty & /*selectedOption, Object, options, isFinished, isResultCorrect, handleOptionClick*/
+        398) {
           each_value = ensure_array_like(Object.entries(
             /*options*/
-            ctx2[4]
+            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);
             }
           }
-          for (; i < each_blocks.length; i += 1) {
-            each_blocks[i].d(1);
+          group_outros();
+          for (i = each_value.length; i < each_blocks.length; i += 1) {
+            out(i);
           }
-          each_blocks.length = each_value.length;
+          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;
       },
       d(detaching) {
         if (detaching) {
@@ -1358,86 +1805,276 @@
       }
     };
   }
+  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;
+    }
+    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() {
+        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, 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;
+      },
+      d(detaching) {
+        if (detaching) {
+          detach(span);
+        }
+        if_blocks[current_block_type_index].d();
+      }
+    };
+  }
+  function create_else_block2(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_3(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_each_block(ctx) {
     let button;
-    let span;
+    let span1;
+    let span0;
     let t1;
     let t2_value = (
       /*option*/
-      ctx[12].answer + ""
+      ctx[16].answer + ""
     );
     let t2;
     let t3;
+    let t4;
     let button_aria_label_value;
     let button_class_value;
+    let current;
     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[7](
+        ctx[10](
           /*option*/
-          ctx[12]
+          ctx[16]
         )
       );
     }
     return {
       c() {
         button = element("button");
-        span = element("span");
-        span.textContent = `${useMCQ_default(
+        span1 = element("span");
+        span0 = element("span");
+        span0.textContent = `${useMCQ_default(
           /*index*/
-          ctx[14]
+          ctx[18]
         )}`;
         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]");
+        if (if_block)
+          if_block.c();
+        t4 = space();
+        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[1] === /*option*/
-        ctx[12].id ? "Selected option" : "Option"} ${useMCQ_default(
+        ctx[3] === /*option*/
+        ctx[16].id ? "Selected option" : "Option"} ${useMCQ_default(
           /*index*/
-          ctx[14]
+          ctx[18]
         )}: ${/*option*/
-        ctx[12].answer}`);
+        ctx[16].answer}`);
         attr(button, "class", button_class_value = "btn-mcq-option group text-left " + /*selectedOption*/
-        (ctx[1] === /*option*/
-        ctx[12].id ? "selected" : ""));
+        (ctx[3] === /*option*/
+        ctx[16].id ? "selected" : "") + " " + (!/*isFinished*/
+        ctx[1] ? "" : (
+          /*isResultCorrect*/
+          ctx[2] ? "correct" : "incorrect"
+        )));
       },
       m(target, anchor) {
         insert(target, button, anchor);
-        append(button, span);
-        append(button, t1);
-        append(button, t2);
+        append(button, span1);
+        append(span1, span0);
+        append(span1, t1);
+        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(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(
+      },
+      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_block, 1, 1, () => {
+            if_block = null;
+          });
+          check_outros();
+        }
+        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[14]
+          ctx[18]
         )}: ${/*option*/
-        ctx[12].answer}`)) {
+        ctx[16].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" : ""))) {
+        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) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
+      },
       d(detaching) {
         if (detaching) {
           detach(button);
         }
+        if (if_block)
+          if_block.d();
         mounted = false;
         dispose();
       }
@@ -1445,9 +2082,10 @@
   }
   function create_default_slot(ctx) {
     let if_block_anchor;
+    let current;
     let if_block = (
       /*options*/
-      ctx[4] && create_if_block2(ctx)
+      ctx[7] && create_if_block_13(ctx)
     );
     return {
       c() {
@@ -1459,14 +2097,25 @@
         if (if_block)
           if_block.m(target, anchor);
         insert(target, if_block_anchor, anchor);
+        current = true;
       },
       p(ctx2, dirty) {
         if (
           /*options*/
-          ctx2[4]
+          ctx2[7]
         )
           if_block.p(ctx2, dirty);
       },
+      i(local) {
+        if (current)
+          return;
+        transition_in(if_block);
+        current = true;
+      },
+      o(local) {
+        transition_out(if_block);
+        current = false;
+      },
       d(detaching) {
         if (detaching) {
           detach(if_block_anchor);
@@ -1476,60 +2125,166 @@
       }
     };
   }
-  function create_fragment2(ctx) {
+  function create_if_block3(ctx) {
+    let promptresult;
+    let current;
+    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(promptresult.$$.fragment);
+      },
+      m(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(promptresult.$$.fragment, local);
+        current = true;
+      },
+      o(local) {
+        transition_out(promptresult.$$.fragment, local);
+        current = false;
+      },
+      d(detaching) {
+        destroy_component(promptresult, detaching);
+      }
+    };
+  }
+  function create_fragment6(ctx) {
     let promptbody;
+    let t2;
+    let if_block_anchor;
     let current;
     promptbody = new PromptBody_default({
       props: {
         rubric: (
           /*rubric*/
-          ctx[2].text
+          ctx[5].text
         ),
         prompt: (
           /*prompt*/
-          ctx[3]
+          ctx[6]
         ),
         $$slots: { default: [create_default_slot] },
         $$scope: { ctx }
       }
     });
+    let if_block = (
+      /*isFinished*/
+      ctx[1] && create_if_block3(ctx)
+    );
     return {
       c() {
         create_component(promptbody.$$.fragment);
+        t2 = space();
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
       },
       m(target, anchor) {
         mount_component(promptbody, target, anchor);
+        insert(target, t2, anchor);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
         current = true;
       },
       p(ctx2, [dirty]) {
         const promptbody_changes = {};
-        if (dirty & /*$$scope, selectedOption, isDataSaving*/
-        32771) {
+        if (dirty & /*$$scope, selectedOption, isFinished, isResultCorrect, isDataSaving*/
+        524303) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
+        if (
+          /*isFinished*/
+          ctx2[1]
+        ) {
+          if (if_block) {
+            if_block.p(ctx2, dirty);
+            if (dirty & /*isFinished*/
+            2) {
+              transition_in(if_block, 1);
+            }
+          } else {
+            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_block) {
+          group_outros();
+          transition_out(if_block, 1, 1, () => {
+            if_block = null;
+          });
+          check_outros();
+        }
       },
       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) {
+        if (detaching) {
+          detach(t2);
+          detach(if_block_anchor);
+        }
         destroy_component(promptbody, detaching);
+        if (if_block)
+          if_block.d(detaching);
       }
     };
   }
-  function instance2($$self, $$props, $$invalidate) {
+  function instance3($$self, $$props, $$invalidate) {
     let { sessionData } = $$props;
     let { isDataSaving } = $$props;
-    const { rubric, interaction, metadata } = sessionData;
+    let { isFinished: isFinished2 = false } = $$props;
+    let { isResultCorrect: isResultCorrect2 = false } = $$props;
+    const { rubric, interaction, metadata, scoringMetadata } = sessionData;
     const { prompt, options } = interaction;
-    let selectedOption;
+    let selectedOption = null;
+    let resultFeedback = null;
     const dispatch = createEventDispatcher();
     if (metadata) {
       const { events } = metadata.interactions;
@@ -1537,10 +2292,18 @@
       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)
+      if (isDataSaving || optionId === selectedOption || isFinished2)
         return;
-      $$invalidate(1, selectedOption = optionId);
+      $$invalidate(3, selectedOption = optionId);
       dispatch("saveOption", {
         answer_id: [optionId],
         answer_choice: [option]
@@ -1549,13 +2312,20 @@
     const click_handler = (option) => handleOptionClick(option.id, option.answer);
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(6, sessionData = $$props2.sessionData);
+        $$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 [
       isDataSaving,
+      isFinished2,
+      isResultCorrect2,
       selectedOption,
+      resultFeedback,
       rubric,
       prompt,
       options,
@@ -1567,10 +2337,15 @@
   var PromptMCQ = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance2, create_fragment2, safe_not_equal, { sessionData: 6, isDataSaving: 0 });
+      init(this, options, instance3, create_fragment6, safe_not_equal, {
+        sessionData: 9,
+        isDataSaving: 0,
+        isFinished: 1,
+        isResultCorrect: 2
+      });
     }
     get sessionData() {
-      return this.$$.ctx[6];
+      return this.$$.ctx[9];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -1583,8 +2358,22 @@
       this.$$set({ isDataSaving });
       flush();
     }
+    get isFinished() {
+      return this.$$.ctx[1];
+    }
+    set isFinished(isFinished2) {
+      this.$$set({ isFinished: isFinished2 });
+      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));
+  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
@@ -1659,9 +2448,15 @@
   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_block(ctx) {
+  function create_else_block_1(ctx) {
     let textarea;
+    let textarea_class_value;
     let autosize_action;
     let mounted;
     let dispose;
@@ -1669,11 +2464,13 @@
       c() {
         textarea = element("textarea");
         attr(textarea, "id", idLabel);
+        attr(textarea, "aria-label", placeholder);
         attr(textarea, "placeholder", placeholder);
         attr(textarea, "rows", "3");
-        attr(textarea, "class", "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");
       },
       m(target, anchor) {
         insert(target, textarea, anchor);
@@ -1688,19 +2485,38 @@
               textarea,
               "input",
               /*textarea_input_handler*/
-              ctx[11]
+              ctx[13]
+            ),
+            listen(
+              textarea,
+              "mousedown",
+              /*mousedown_handler*/
+              ctx[14]
+            ),
+            listen(
+              textarea,
+              "touchstart",
+              /*touchstart_handler*/
+              ctx[15],
+              { passive: true }
+            ),
+            listen(
+              textarea,
+              "focus",
+              /*focus_handler*/
+              ctx[16]
             ),
             listen(
               textarea,
               "focusout",
               /*focusout_handler_1*/
-              ctx[12]
+              ctx[17]
             ),
             listen(
               textarea,
               "keydown",
               /*keydown_handler_1*/
-              ctx[13]
+              ctx[18]
             ),
             action_destroyer(autosize_action = svelte_autosize_default.call(null, textarea))
           ];
@@ -1731,8 +2547,9 @@
       }
     };
   }
-  function create_if_block3(ctx) {
+  function create_if_block_22(ctx) {
     let input;
+    let input_class_value;
     let mounted;
     let dispose;
     return {
@@ -1740,10 +2557,12 @@
         input = element("input");
         attr(input, "type", "text");
         attr(input, "id", idLabel);
+        attr(input, "aria-label", placeholder);
         attr(input, "placeholder", placeholder);
-        attr(input, "class", "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");
       },
       m(target, anchor) {
         insert(target, input, anchor);
@@ -1758,19 +2577,19 @@
               input,
               "input",
               /*input_input_handler*/
-              ctx[8]
+              ctx[10]
             ),
             listen(
               input,
               "focusout",
               /*focusout_handler*/
-              ctx[9]
+              ctx[11]
             ),
             listen(
               input,
               "keydown",
               /*keydown_handler*/
-              ctx[10]
+              ctx[12]
             )
           ];
           mounted = true;
@@ -1806,10 +2625,10 @@
     function select_block_type(ctx2, dirty) {
       if (
         /*typeinType*/
-        ctx2[4] === "Short-Text"
+        ctx2[4] === TYPEIN_TYPE_SHORT
       )
-        return create_if_block3;
-      return create_else_block;
+        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);
@@ -1833,8 +2652,140 @@
       }
     };
   }
-  function create_fragment3(ctx) {
+  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;
+    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,
+        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;
+      },
+      p: noop,
+      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;
+    let if_block_anchor;
     let current;
     promptbody = new PromptBody_default({
       props: {
@@ -1850,45 +2801,67 @@
         $$scope: { ctx }
       }
     });
+    let if_block = isFinished && create_if_block4(ctx);
     return {
       c() {
         create_component(promptbody.$$.fragment);
+        t2 = space();
+        if (if_block)
+          if_block.c();
+        if_block_anchor = empty();
       },
       m(target, anchor) {
         mount_component(promptbody, target, anchor);
+        insert(target, t2, anchor);
+        if (if_block)
+          if_block.m(target, anchor);
+        insert(target, if_block_anchor, anchor);
         current = true;
       },
       p(ctx2, [dirty]) {
         const promptbody_changes = {};
         if (dirty & /*$$scope, isDataSaving, typeinAnswer*/
-        262147) {
+        16777219) {
           promptbody_changes.$$scope = { dirty, ctx: ctx2 };
         }
         promptbody.$set(promptbody_changes);
+        if (isFinished)
+          if_block.p(ctx2, dirty);
       },
       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) {
+        if (detaching) {
+          detach(t2);
+          detach(if_block_anchor);
+        }
         destroy_component(promptbody, detaching);
+        if (if_block)
+          if_block.d(detaching);
       }
     };
   }
   var idLabel = "answerText";
   var placeholder = "Type your answer here";
-  function instance3($$self, $$props, $$invalidate) {
+  var isFinished = false;
+  var isResultCorrect = false;
+  function instance4($$self, $$props, $$invalidate) {
     let { sessionData } = $$props;
     let { isDataSaving } = $$props;
     const dispatch = createEventDispatcher();
     let typeinAnswer;
     let latestAnswer = "";
+    let focusOrigin = "tab";
     const { rubric, interaction, metadata } = sessionData;
     const { prompt, typein_type: typeinType } = interaction;
     if (metadata) {
@@ -1896,6 +2869,7 @@
       latestAnswer = typeinAnswer = events.answer;
     }
     const saveAnswer = () => {
+      focusOrigin = "tab";
       if (isDataSaving || typeinAnswer === latestAnswer || !typeinAnswer && !latestAnswer)
         return;
       latestAnswer = typeinAnswer;
@@ -1907,6 +2881,16 @@
         saveAnswer();
       }
     };
+    const handleFocus = (event) => {
+      if (focusOrigin !== "click") {
+        const textarea = event.target;
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+      }
+    };
+    const handleClick = () => {
+      focusOrigin = "click";
+    };
     function input_input_handler() {
       typeinAnswer = this.value;
       $$invalidate(1, typeinAnswer);
@@ -1917,11 +2901,14 @@
       typeinAnswer = this.value;
       $$invalidate(1, typeinAnswer);
     }
+    const mousedown_handler = () => handleClick();
+    const touchstart_handler = () => handleClick();
+    const focus_handler = (event) => handleFocus(event);
     const focusout_handler_1 = () => saveAnswer();
     const keydown_handler_1 = (event) => saveOnEnter(event);
     $$self.$$set = ($$props2) => {
       if ("sessionData" in $$props2)
-        $$invalidate(7, sessionData = $$props2.sessionData);
+        $$invalidate(9, sessionData = $$props2.sessionData);
       if ("isDataSaving" in $$props2)
         $$invalidate(0, isDataSaving = $$props2.isDataSaving);
     };
@@ -1933,11 +2920,16 @@
       typeinType,
       saveAnswer,
       saveOnEnter,
+      handleFocus,
+      handleClick,
       sessionData,
       input_input_handler,
       focusout_handler,
       keydown_handler,
       textarea_input_handler,
+      mousedown_handler,
+      touchstart_handler,
+      focus_handler,
       focusout_handler_1,
       keydown_handler_1
     ];
@@ -1945,10 +2937,10 @@
   var PromptTypeIn = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance3, create_fragment3, safe_not_equal, { sessionData: 7, isDataSaving: 0 });
+      init(this, options, instance4, create_fragment7, safe_not_equal, { sessionData: 9, isDataSaving: 0 });
     }
     get sessionData() {
-      return this.$$.ctx[7];
+      return this.$$.ctx[9];
     }
     set sessionData(sessionData) {
       this.$$set({ sessionData });
@@ -1966,7 +2958,7 @@
   var PromptTypeIn_default = PromptTypeIn;
 
   // src/lib/components/prompt/skeleton/PromptSkeleton.svelte
-  function create_fragment4(ctx) {
+  function create_fragment8(ctx) {
     let div3;
     return {
       c() {
@@ -1989,14 +2981,14 @@
   var PromptSkeleton = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, null, create_fragment4, safe_not_equal, {});
+      init(this, options, null, create_fragment8, safe_not_equal, {});
     }
   };
   customElements.define("prompt-skeleton", create_custom_element(PromptSkeleton, {}, [], [], true));
   var PromptSkeleton_default = PromptSkeleton;
 
   // src/lib/components/common/InvalidBanner.svelte
-  function create_fragment5(ctx) {
+  function create_fragment9(ctx) {
     let p;
     let t2;
     return {
@@ -2030,7 +3022,7 @@
       }
     };
   }
-  function instance4($$self, $$props, $$invalidate) {
+  function instance5($$self, $$props, $$invalidate) {
     let { bannerLabel: bannerLabel2 = "Invalid." } = $$props;
     $$self.$$set = ($$props2) => {
       if ("bannerLabel" in $$props2)
@@ -2041,7 +3033,7 @@
   var InvalidBanner = class extends SvelteComponent {
     constructor(options) {
       super();
-      init(this, options, instance4, create_fragment5, safe_not_equal, { bannerLabel: 0 });
+      init(this, options, instance5, create_fragment9, safe_not_equal, { bannerLabel: 0 });
     }
     get bannerLabel() {
       return this.$$.ctx[0];
@@ -2056,9 +3048,9 @@
 
   // src/lib/components/prompt/PromptBuilder.svelte
   function add_css(target) {
-    append_styles(target, "svelte-1h69jp4", '*,: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}*,: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: }.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-1h69jp4-pulse{{opacity:0.5}}.animate-skeleton{--tw-bg-opacity:1;animation:svelte-1h69jp4-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-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.h-52{height:13rem}.h-6{height:1.5rem}.w-full{width:100%}.overflow-hidden{overflow:hidden}.rounded{border-radius:0.25rem}.border-2{border-width:2px}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 202 202/var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.p-2{padding:0.5rem}.text-left{text-align:left}.font-semibold{font-weight:600}.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_1(ctx) {
+  function create_else_block_12(ctx) {
     let invalidbanner;
     let current;
     invalidbanner = new InvalidBanner_default({ props: { bannerLabel } });
@@ -2086,22 +3078,22 @@
       }
     };
   }
-  function create_if_block_12(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_2, create_if_block_3, create_else_block2];
+    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;
@@ -2158,7 +3150,7 @@
       }
     };
   }
-  function create_if_block4(ctx) {
+  function create_if_block5(ctx) {
     let promptskeleton;
     let current;
     promptskeleton = new PromptSkeleton_default({});
@@ -2186,7 +3178,7 @@
       }
     };
   }
-  function create_else_block2(ctx) {
+  function create_else_block4(ctx) {
     let invalidbanner;
     let current;
     invalidbanner = new InvalidBanner_default({ props: { bannerLabel } });
@@ -2214,7 +3206,7 @@
       }
     };
   }
-  function create_if_block_3(ctx) {
+  function create_if_block_32(ctx) {
     let prompttypein;
     let current;
     prompttypein = new PromptTypeIn_default({
@@ -2232,7 +3224,7 @@
     prompttypein.$on(
       "saveAnswer",
       /*saveEvent*/
-      ctx[4]
+      ctx[6]
     );
     return {
       c() {
@@ -2269,7 +3261,7 @@
       }
     };
   }
-  function create_if_block_2(ctx) {
+  function create_if_block_23(ctx) {
     let promptmcq;
     let current;
     promptmcq = new PromptMCQ_default({
@@ -2281,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() {
@@ -2307,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) {
@@ -2324,12 +3332,12 @@
       }
     };
   }
-  function create_fragment6(ctx) {
+  function create_fragment10(ctx) {
     let current_block_type_index;
     let if_block;
     let if_block_anchor;
     let current;
-    const if_block_creators = [create_if_block4, create_if_block_12, create_else_block_1];
+    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 (
@@ -2397,18 +3405,23 @@
     };
   }
   var bannerLabel = "Invalid session id.";
-  function instance5($$self, $$props, $$invalidate) {
+  function instance6($$self, $$props, $$invalidate) {
     const { "session-id": sessionId } = $$props;
     useSetupAPI();
     let sessionData;
     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);
         }
@@ -2418,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);
@@ -2437,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);
@@ -2451,15 +3488,23 @@
       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) {
       super();
-      init(this, options, instance5, create_fragment6, safe_not_equal, {}, add_css);
+      init(this, options, instance6, create_fragment10, safe_not_equal, {}, add_css);
     }
   };
   customElements.define("prompt-builder", create_custom_element(PromptBuilder, {}, [], [], true));