eat-js-sdk 2.1.0 → 2.1.2

package/dist/interaction-builder.mjs

@@ -5430,10 +5430,10 @@ const interactionUtils = {
     return "standard";
   }
 };
-var root_1$p = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root_1$o = /* @__PURE__ */ from_html(`<div><!></div>`);
 function CommonStringToHtml($$anchor, $$props) {
   push($$props, true);
-  let htmlString = prop($$props, "htmlString", 7, ""), otherClass = prop($$props, "otherClass", 7, ""), ariaHidden = prop($$props, "ariaHidden", 7, false), htmlHeading = prop($$props, "htmlHeading", 7, "");
+  let htmlString = prop($$props, "htmlString", 7, ""), otherClass = prop($$props, "otherClass", 7, ""), ariaHidden = prop($$props, "ariaHidden", 7, false), htmlHeading = prop($$props, "htmlHeading", 7, ""), dataTestId = prop($$props, "dataTestId", 7);
   let processedHtml = /* @__PURE__ */ user_derived(() => processHtmlString(htmlString(), htmlHeading()));
   function processHtmlString(html2, heading) {
     if (html2 == null) return "";
@@ -5479,19 +5479,27 @@ function CommonStringToHtml($$anchor, $$props) {
     set htmlHeading($$value = "") {
       htmlHeading($$value);
       flushSync();
+    },
+    get dataTestId() {
+      return dataTestId();
+    },
+    set dataTestId($$value) {
+      dataTestId($$value);
+      flushSync();
     }
   };
   var fragment = comment();
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_1$p();
+      var div = root_1$o();
       var node_1 = child(div);
       html(node_1, () => get$1(processedHtml));
       reset(div);
       template_effect(() => {
         set_class(div, 1, clsx(otherClass()));
         set_attribute(div, "aria-hidden", ariaHidden());
+        set_attribute(div, "data-testid", dataTestId());
       });
       append($$anchor2, div);
     };
@@ -5508,7 +5516,8 @@ create_custom_element(
     htmlString: {},
     otherClass: {},
     ariaHidden: {},
-    htmlHeading: {}
+    htmlHeading: {},
+    dataTestId: {}
   },
   [],
   [],
@@ -5662,11 +5671,11 @@ const svgIconRegistry = {
     pathFill: "currentColor"
   }
 };
-var root_1$o = /* @__PURE__ */ from_svg(`<path></path>`);
+var root_1$n = /* @__PURE__ */ from_svg(`<path></path>`);
 var root$k = /* @__PURE__ */ from_svg(`<svg xmlns="http://www.w3.org/2000/svg"><!></svg>`);
 function SvgLoader($$anchor, $$props) {
   push($$props, true);
-  let width = prop($$props, "width", 7, void 0), height = prop($$props, "height", 7, void 0), svgName = prop($$props, "svgName", 7), className = prop($$props, "className", 7, void 0);
+  let width = prop($$props, "width", 7, void 0), height = prop($$props, "height", 7, void 0), svgName = prop($$props, "svgName", 7), className = prop($$props, "className", 7, void 0), dataTestId = prop($$props, "dataTestId", 7);
   let iconProps = /* @__PURE__ */ user_derived(() => {
     const defaults = svgIconRegistry[svgName()] ?? {};
     return {
@@ -5708,13 +5717,20 @@ function SvgLoader($$anchor, $$props) {
     set className($$value = void 0) {
       className($$value);
       flushSync();
+    },
+    get dataTestId() {
+      return dataTestId();
+    },
+    set dataTestId($$value) {
+      dataTestId($$value);
+      flushSync();
     }
   };
   var svg = root$k();
   var node = child(svg);
   {
     var consequent = ($$anchor2) => {
-      var path = root_1$o();
+      var path = root_1$n();
       template_effect(() => {
         set_attribute(path, "fill-rule", get$1(iconProps).fillRule);
         set_attribute(path, "clip-rule", get$1(iconProps).clipRule);
@@ -5734,17 +5750,31 @@ function SvgLoader($$anchor, $$props) {
     set_attribute(svg, "viewBox", get$1(iconProps).viewBox);
     set_attribute(svg, "fill", get$1(iconProps).fill);
     set_class(svg, 0, clsx(className() ?? svgName()));
+    set_attribute(svg, "data-testid", dataTestId());
   });
   append($$anchor, svg);
   return pop($$exports);
 }
-create_custom_element(SvgLoader, { width: {}, height: {}, svgName: {}, className: {} }, [], [], true);
+create_custom_element(
+  SvgLoader,
+  {
+    width: {},
+    height: {},
+    svgName: {},
+    className: {},
+    dataTestId: {}
+  },
+  [],
+  [],
+  true
+);
 var root$j = /* @__PURE__ */ from_html(`<span><!></span>`);
 function ResultIcon($$anchor, $$props) {
   push($$props, true);
   let isCorrect = prop($$props, "isCorrect", 7), iconType = prop($$props, "iconType", 7, "result"), parentProps = prop($$props, "parentProps", 7);
   let svgName = /* @__PURE__ */ user_derived(() => iconType() === "info" ? "infoSolid" : isCorrect() ? "successSolid" : "errorSolid");
   let className = /* @__PURE__ */ user_derived(() => iconType() === "info" ? "info-icon" : isCorrect() ? "correct-icon" : "incorrect-icon");
+  let testId = /* @__PURE__ */ user_derived(() => iconType() === "info" ? "icon-alt-info" : isCorrect() ? "icon-correct" : "icon-incorrect");
   var $$exports = {
     get isCorrect() {
       return isCorrect();
@@ -5776,6 +5806,9 @@ function ResultIcon($$anchor, $$props) {
     },
     get className() {
       return get$1(className);
+    },
+    get dataTestId() {
+      return get$1(testId);
     }
   });
   reset(span);
@@ -5785,7 +5818,7 @@ function ResultIcon($$anchor, $$props) {
 }
 create_custom_element(ResultIcon, { isCorrect: {}, iconType: {}, parentProps: {} }, [], [], true);
 var root_3$c = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
-var root_1$n = /* @__PURE__ */ from_html(`<div><!> <div><!> <span><!></span></div></div>`);
+var root_1$m = /* @__PURE__ */ from_html(`<div data-testid="feedback-alt"><!> <div><!> <span><!></span></div></div>`);
 function FeedbackAlert($$anchor, $$props) {
   push($$props, true);
   let type = prop($$props, "type", 7, "incorrect"), message = prop($$props, "message", 7, ""), showIcon = prop($$props, "showIcon", 7, false), iconType = prop($$props, "iconType", 7, "result"), isAlert = prop($$props, "isAlert", 7, true), iconProps = prop($$props, "iconProps", 7, "");
@@ -5849,7 +5882,7 @@ function FeedbackAlert($$anchor, $$props) {
   var node = first_child(fragment);
   {
     var consequent_2 = ($$anchor2) => {
-      var div = root_1$n();
+      var div = root_1$m();
       var node_1 = child(div);
       {
         var consequent = ($$anchor3) => {
@@ -5895,7 +5928,7 @@ function FeedbackAlert($$anchor, $$props) {
       reset(div_1);
       reset(div);
       template_effect(() => {
-        set_class(div, 1, clsx(get$1(alertClasses)));
+        set_class(div, 1, `feedback-alt ${get$1(alertClasses) ?? ""}`);
         set_attribute(div, "role", isAlert() ? "alert" : null);
       });
       append($$anchor2, div);
@@ -6215,7 +6248,7 @@ const useFocusTrap = () => {
 var root$i = /* @__PURE__ */ from_html(`<dialog aria-modal="true" class="bg-transparent max-w-none max-h-none w-screen h-screen"><div role="button" aria-hidden="true"></div> <!></dialog>`);
 function CommonModal($$anchor, $$props) {
   push($$props, true);
-  let modalData = prop($$props, "modalData", 23, () => ({ modalAriaLabel: "", isModalOpen: false })), modalClass = prop($$props, "modalClass", 7, ""), onupdateModalSettings = prop($$props, "onupdateModalSettings", 7), onclose = prop($$props, "onclose", 7), children = prop($$props, "children", 7);
+  let modalData = prop($$props, "modalData", 23, () => ({ modalAriaLabel: "", isModalOpen: false })), modalClass = prop($$props, "modalClass", 7, ""), onupdateModalSettings = prop($$props, "onupdateModalSettings", 7), onclose = prop($$props, "onclose", 7), children = prop($$props, "children", 7), dataTestId = prop($$props, "dataTestId", 7);
   let modalAriaLabel = /* @__PURE__ */ user_derived(() => modalData()?.modalAriaLabel ?? "");
   let isModalOpen = /* @__PURE__ */ user_derived(() => modalData()?.isModalOpen ?? false);
   let dialogModal = /* @__PURE__ */ state(null);
@@ -6287,6 +6320,13 @@ function CommonModal($$anchor, $$props) {
     set children($$value) {
       children($$value);
       flushSync();
+    },
+    get dataTestId() {
+      return dataTestId();
+    },
+    set dataTestId($$value) {
+      dataTestId($$value);
+      flushSync();
     }
   };
   var dialog = root$i();
@@ -6299,6 +6339,7 @@ function CommonModal($$anchor, $$props) {
   bind_this(dialog, ($$value) => set(dialogModal, $$value), () => get$1(dialogModal));
   template_effect(() => {
     set_attribute(dialog, "aria-label", get$1(modalAriaLabel));
+    set_attribute(dialog, "data-testid", dataTestId());
     set_class(div, 1, `blanket-overlay ${modalClass() ?? ""}`);
   });
   event("close", dialog, () => {
@@ -6320,7 +6361,8 @@ create_custom_element(
     modalClass: {},
     onupdateModalSettings: {},
     onclose: {},
-    children: {}
+    children: {},
+    dataTestId: {}
   },
   [],
   [],
@@ -6336,7 +6378,7 @@ function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
     css: (t2) => `opacity: ${t2 * o2}`
   };
 }
-var root_1$m = /* @__PURE__ */ from_html(`<div><div role="tooltip"> <span aria-hidden="true"></span></div></div>`);
+var root_1$l = /* @__PURE__ */ from_html(`<div><div role="tooltip" data-testid="img-viewer-tt"> <span aria-hidden="true"></span></div></div>`);
 var root$h = /* @__PURE__ */ from_html(`<div class="relative inline-block"><!> <!></div>`);
 function CommonTooltip($$anchor, $$props) {
   push($$props, true);
@@ -6529,7 +6571,7 @@ function CommonTooltip($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_1$m();
+      var div_1 = root_1$l();
       var div_2 = child(div_1);
       var text_1 = child(div_2);
       var span = sibling(text_1);
@@ -6539,7 +6581,7 @@ function CommonTooltip($$anchor, $$props) {
       template_effect(() => {
         set_class(div_1, 1, `absolute z-50 pointer-events-none select-none ${get$1(containerPosClass) ?? ""}`);
         set_attribute(div_2, "aria-hidden", !get$1(isOpen));
-        set_class(div_2, 1, `rounded-md bg-gray-900 text-white p-3 font-normal text-sm leading-[150%] max-w-[300px] break-words ${tooltipClass() ?? ""}`);
+        set_class(div_2, 1, `img-viewer-tt rounded-md bg-gray-900 text-white p-3 font-normal text-sm leading-[150%] max-w-[300px] break-words ${tooltipClass() ?? ""}`);
         set_text(text_1, `${text() ?? ""} `);
         set_class(span, 1, `tooltip-arrow absolute w-2 h-2 bg-gray-900 ${get$1(arrowPosClass) ?? ""}`);
       });
@@ -6581,11 +6623,11 @@ create_custom_element(
   ["show", "hide"],
   true
 );
-var root_1$l = /* @__PURE__ */ from_html(`<span><!></span>`);
+var root_1$k = /* @__PURE__ */ from_html(`<span><!></span>`);
 var root$g = /* @__PURE__ */ from_html(`<button><!></button>`);
 function CommonButton($$anchor, $$props) {
   push($$props, true);
-  let ariaLabel = prop($$props, "ariaLabel", 7, ""), ariaHaspopup = prop($$props, "ariaHaspopup", 7), className = prop($$props, "className", 7, ""), disabled = prop($$props, "disabled", 7, false), pressed = prop($$props, "pressed", 7, false), transparent = prop($$props, "transparent", 7, false), variant = prop($$props, "variant", 7, "standard"), type = prop($$props, "type", 7, "button"), tabindex = prop($$props, "tabindex", 7, 0), onclick = prop($$props, "onclick", 7), children = prop($$props, "children", 7);
+  let ariaLabel = prop($$props, "ariaLabel", 7, ""), ariaHaspopup = prop($$props, "ariaHaspopup", 7), className = prop($$props, "className", 7, ""), disabled = prop($$props, "disabled", 7, false), pressed = prop($$props, "pressed", 7, false), transparent = prop($$props, "transparent", 7, false), variant = prop($$props, "variant", 7, "standard"), type = prop($$props, "type", 7, "button"), tabindex = prop($$props, "tabindex", 7, 0), onclick = prop($$props, "onclick", 7), children = prop($$props, "children", 7), dataTestId = prop($$props, "dataTestId", 7);
   let buttonClasses = /* @__PURE__ */ user_derived(() => () => {
     switch (variant()) {
       case "touch-target":
@@ -6672,6 +6714,13 @@ function CommonButton($$anchor, $$props) {
     set children($$value) {
       children($$value);
       flushSync();
+    },
+    get dataTestId() {
+      return dataTestId();
+    },
+    set dataTestId($$value) {
+      dataTestId($$value);
+      flushSync();
     }
   };
   var button = root$g();
@@ -6682,7 +6731,7 @@ function CommonButton($$anchor, $$props) {
   var node = child(button);
   {
     var consequent = ($$anchor2) => {
-      var span = root_1$l();
+      var span = root_1$k();
       var node_1 = child(span);
       snippet(node_1, () => children() ?? noop);
       reset(span);
@@ -6709,6 +6758,7 @@ function CommonButton($$anchor, $$props) {
       set_attribute(button, "aria-label", ariaLabel());
       set_attribute(button, "aria-haspopup", ariaHaspopup());
       button.disabled = disabled();
+      set_attribute(button, "data-testid", dataTestId());
     },
     [() => clsx(get$1(buttonClasses)())]
   );
@@ -6729,7 +6779,8 @@ create_custom_element(
     type: {},
     tabindex: {},
     onclick: {},
-    children: {}
+    children: {},
+    dataTestId: {}
   },
   [],
   [],
@@ -7111,10 +7162,11 @@ function MCQImageModal($$anchor, $$props) {
               variant: "standard",
               transparent: true,
               ariaLabel: "Previous",
-              className: "hidden md:flex absolute left-6 lg:left-16 top-1/2 -translate-y-1/2",
+              className: "img-viewer-prev hidden md:flex absolute left-6 lg:left-16 top-1/2 -translate-y-1/2",
               get pressed() {
                 return get$1(isLeftPressed);
               },
+              dataTestId: "img-viewer-prev",
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
                 var span = root_3$b();
@@ -7138,10 +7190,11 @@ function MCQImageModal($$anchor, $$props) {
             variant: "standard",
             transparent: true,
             ariaLabel: "Next",
-            className: "hidden md:flex absolute right-6 lg:right-16 top-1/2 -translate-y-1/2",
+            className: "img-viewer-next hidden md:flex absolute right-6 lg:right-16 top-1/2 -translate-y-1/2",
             get pressed() {
               return get$1(isRightPressed);
             },
+            dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
               var span_1 = root_4$7();
@@ -7201,6 +7254,7 @@ function MCQImageModal($$anchor, $$props) {
             variant: "standard",
             ariaLabel: "Close",
             className: "flex-shrink-0 hidden md:flex",
+            dataTestId: "img-close-btn",
             onclick: closeModal,
             children: ($$anchor4, $$slotProps2) => {
               SvgLoader($$anchor4, {
@@ -7215,6 +7269,7 @@ function MCQImageModal($$anchor, $$props) {
             variant: "touch-target",
             ariaLabel: "Close",
             className: "flex-shrink-0 md:hidden -mr-2.5",
+            dataTestId: "img-close-btn",
             onclick: closeModal,
             children: ($$anchor4, $$slotProps2) => {
               SvgLoader($$anchor4, {
@@ -7240,6 +7295,8 @@ function MCQImageModal($$anchor, $$props) {
               get pressed() {
                 return get$1(isLeftPressed);
               },
+              className: "img-viewer-prev",
+              dataTestId: "img-viewer-prev",
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
                 var span_3 = root_8$5();
@@ -7265,6 +7322,8 @@ function MCQImageModal($$anchor, $$props) {
             get pressed() {
               return get$1(isRightPressed);
             },
+            className: "img-viewer-next",
+            dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
               var span_4 = root_9$3();
@@ -7322,6 +7381,8 @@ function RubricSection($$anchor, $$props) {
   push($$props, true);
   let rubric = prop($$props, "rubric", 7);
   let headerElement = /* @__PURE__ */ user_derived(() => get(promptRubricElem));
+  const NON_BREAKING_TEXT_REGEX = /(&#39;|&#34;|&quot;)(-[\w]+|[\w]+-)\1|\b(?:[A-Z]\.)+[A-Z]\.?(?:-(?:[A-Z]\.)+[A-Z]\.?)*\b|\b[\w]+-[\w]+(?:-[\w]+)*\b/gi;
+  let processedRubric = /* @__PURE__ */ user_derived(() => rubric() ? rubric().replace(NON_BREAKING_TEXT_REGEX, '<span class="whitespace-nowrap">$&</span>') : rubric());
   var $$exports = {
     get rubric() {
       return rubric();
@@ -7337,16 +7398,17 @@ function RubricSection($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       CommonStringToHtml($$anchor2, {
         get htmlString() {
-          return rubric();
+          return get$1(processedRubric);
         },
         otherClass: "item-heading mb-4 w-full",
         get htmlHeading() {
           return get$1(headerElement);
-        }
+        },
+        dataTestId: "qn-rubric-txt"
       });
     };
     if_block(node, ($$render) => {
-      if (rubric()) $$render(consequent);
+      if (get$1(processedRubric)) $$render(consequent);
     });
   }
   append($$anchor, fragment);
@@ -7417,7 +7479,6 @@ function getStimulusTextMaxHeight(fileAlignment, stimulusTextAlignment, hasMedia
 function configureHtmlString(htmlString, maxHeight = "") {
   return htmlString.replace(/<table>/g, `<div class="table-container ${maxHeight}" tabindex="0"><table>`).replace(/<\/table>/g, "</table></div>");
 }
-var root_1$k = /* @__PURE__ */ from_html(`<h1><!></h1>`);
 function PromptSection($$anchor, $$props) {
   push($$props, true);
   let prompt = prop($$props, "prompt", 7);
@@ -7435,16 +7496,13 @@ function PromptSection($$anchor, $$props) {
   var node = first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var h1 = root_1$k();
-      var node_1 = child(h1);
-      CommonStringToHtml(node_1, {
+      CommonStringToHtml($$anchor2, {
         get htmlString() {
           return get$1(configuredPrompt);
         },
-        otherClass: "item-heading prompt"
+        otherClass: "item-heading prompt",
+        dataTestId: "qn-prompt-txt"
       });
-      reset(h1);
-      append($$anchor2, h1);
     };
     if_block(node, ($$render) => {
       if (prompt()) $$render(consequent);
@@ -7609,6 +7667,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
           return get$1(modalData);
         },
         modalClass: "bg-charcoal/80 backdrop-blur-md",
+        dataTestId: "img-viewer-modal",
         onupdateModalSettings: updateModalSettings,
         children: ($$anchor3, $$slotProps) => {
           var div = root_2$c();
@@ -7625,7 +7684,8 @@ function PromptStimulusImageModal($$anchor, $$props) {
             variant: "standard",
             ariaLabel: "Close",
             transparent: true,
-            className: "absolute top-1.5 right-1.5",
+            className: "img-close-btn absolute top-1.5 right-1.5",
+            dataTestId: "img-close-btn",
             onclick: closeModal,
             children: ($$anchor4, $$slotProps2) => {
               SvgLoader($$anchor4, {
@@ -8199,7 +8259,8 @@ function CommonMedia($$anchor, $$props) {
             variant: "standard",
             ariaLabel: "Expand image",
             ariaHaspopup: "dialog",
-            className: "absolute bottom-1.5 right-1.5 bg-white/80",
+            className: "img-exp-btn absolute bottom-1.5 right-1.5 bg-white/80",
+            dataTestId: "img-exp-btn",
             onclick: handleExpandClick,
             children: ($$anchor4, $$slotProps) => {
               SvgLoader($$anchor4, {
@@ -8237,7 +8298,8 @@ function CommonMedia($$anchor, $$props) {
               var node_5 = child(div_5);
               {
                 let $0 = /* @__PURE__ */ user_derived(() => get$1(isLongDescOpened) ? "smallChevronUp" : "smallChevronDown");
-                let $1 = /* @__PURE__ */ user_derived(() => get$1(isLongDescOpened) ? "collapse-icon" : "expand-icon");
+                let $1 = /* @__PURE__ */ user_derived(() => get$1(isLongDescOpened) ? "img-desc-coll collapse-icon" : "img-desc-ex expand-icon");
+                let $2 = /* @__PURE__ */ user_derived(() => get$1(isLongDescOpened) ? "img-desc-coll" : "img-desc-ex");
                 SvgLoader(node_5, {
                   get svgName() {
                     return get$1($0);
@@ -8245,6 +8307,9 @@ function CommonMedia($$anchor, $$props) {
                   get className() {
                     return get$1($1);
                   },
+                  get dataTestId() {
+                    return get$1($2);
+                  },
                   width: 12,
                   height: 7
                 });
@@ -8312,11 +8377,11 @@ create_custom_element(
   [],
   true
 );
-var root_4$4 = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root_4$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
 var root_3$a = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_7$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root_8$4 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root_7$3 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_8$4 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
 var root_6$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!> <div><!></div></div>`);
 function StimulusSection($$anchor, $$props) {
@@ -8421,7 +8486,7 @@ function StimulusSection($$anchor, $$props) {
                 }
               });
               reset(div_2);
-              template_effect(() => set_class(div_2, 1, clsx(get$1(textContainerClass))));
+              template_effect(() => set_class(div_2, 1, `stimulus-txt-ctr ${get$1(textContainerClass) ?? ""}`));
               append($$anchor4, div_2);
             };
             if_block(node_3, ($$render) => {
@@ -8456,7 +8521,7 @@ function StimulusSection($$anchor, $$props) {
                 }
               });
               reset(div_3);
-              template_effect(() => classes_2 = set_class(div_3, 1, clsx(get$1(mediaContainerClass)), null, classes_2, { hidden: !get$1(shouldShowMedia) }));
+              template_effect(() => classes_2 = set_class(div_3, 1, `stimulus-img-ctr ${get$1(mediaContainerClass) ?? ""}`, null, classes_2, { hidden: !get$1(shouldShowMedia) }));
               append($$anchor4, div_3);
             };
             if_block(node_5, ($$render) => {
@@ -8495,7 +8560,7 @@ function StimulusSection($$anchor, $$props) {
                 }
               });
               reset(div_4);
-              template_effect(() => classes_3 = set_class(div_4, 1, clsx(get$1(mediaContainerClass)), null, classes_3, { hidden: !get$1(shouldShowMedia) }));
+              template_effect(() => classes_3 = set_class(div_4, 1, `stimulus-img-ctr ${get$1(mediaContainerClass) ?? ""}`, null, classes_3, { hidden: !get$1(shouldShowMedia) }));
               append($$anchor4, div_4);
             };
             if_block(node_7, ($$render) => {
@@ -8516,7 +8581,7 @@ function StimulusSection($$anchor, $$props) {
                 }
               });
               reset(div_5);
-              template_effect(() => set_class(div_5, 1, clsx(get$1(textContainerClass))));
+              template_effect(() => set_class(div_5, 1, `stimulus-txt-ctr ${get$1(textContainerClass) ?? ""}`));
               append($$anchor4, div_5);
             };
             if_block(node_9, ($$render) => {
@@ -8949,7 +9014,7 @@ var root_4$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="text-g
 var root_5$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
 var root_9$2 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
 var root_8$2 = /* @__PURE__ */ from_html(`<span><!></span>`);
-var root_10$2 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" loading="lazy"/></div>`);
+var root_10$2 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="mcq-opt-img min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" data-testid="mcq-opt-img" loading="lazy"/></div>`);
 var root$d = /* @__PURE__ */ from_html(`<!> <div class="relative"><button><span><span class="flex items-center justify-between w-full"><span class="flex items-center"><span> </span> <span class="flex flex-col px-3 text-left"><!> <!> <!></span></span> <span class="flex items-center"><!> <!> <!></span></span></span> <!></button> <!></div>`, 1);
 function MCQOption($$anchor, $$props) {
   push($$props, true);
@@ -9100,7 +9165,11 @@ function MCQOption($$anchor, $$props) {
     var consequent_3 = ($$anchor2) => {
       var span_8 = root_4$3();
       var node_5 = child(span_8);
-      SvgLoader(node_5, { svgName: "success", className: "missing-correct-icon" });
+      SvgLoader(node_5, {
+        svgName: "success",
+        className: "missing-correct-icon",
+        dataTestId: "icon-miss-corr"
+      });
       reset(span_8);
       append($$anchor2, span_8);
     };
@@ -9115,10 +9184,18 @@ function MCQOption($$anchor, $$props) {
       var node_7 = child(span_9);
       {
         var consequent_4 = ($$anchor3) => {
-          SvgLoader($$anchor3, { svgName: "successSolid", className: "correct-icon" });
+          SvgLoader($$anchor3, {
+            svgName: "successSolid",
+            className: "correct-icon",
+            dataTestId: "icon-correct"
+          });
         };
         var alternate = ($$anchor3) => {
-          SvgLoader($$anchor3, { svgName: "errorSolid", className: "incorrect-icon" });
+          SvgLoader($$anchor3, {
+            svgName: "errorSolid",
+            className: "incorrect-icon",
+            dataTestId: "icon-incorrect"
+          });
         };
         if_block(node_7, ($$render) => {
           if (get$1(correctAnswerIds).includes(option().id) || get$1(isPreviewMode2) && !get$1(isInteractiveMode2)) $$render(consequent_4);
@@ -9144,7 +9221,11 @@ function MCQOption($$anchor, $$props) {
         var consequent_6 = ($$anchor3) => {
           var span_11 = root_9$2();
           var node_10 = child(span_11);
-          SvgLoader(node_10, { svgName: "successRounded", className: "selected-icon" });
+          SvgLoader(node_10, {
+            svgName: "successRounded",
+            className: "selected-icon",
+            dataTestId: "icon-check-selected"
+          });
           reset(span_11);
           append($$anchor3, span_11);
         };
@@ -9212,7 +9293,8 @@ function MCQOption($$anchor, $$props) {
       set_attribute(button, "aria-checked", get$1(totalCorrectAnswers) > 1 ? get$1(optionState)?.isSelected : null);
       set_attribute(button, "aria-disabled", get$1(optionState)?.isFinished && !get$1(isInteractiveMode2) ? "true" : null);
       set_attribute(button, "aria-label", get$1(ariaLabel));
-      set_class(button, 1, clsx(get$1(optionState)?.buttonClasses || "group btn-mcq-option"));
+      set_class(button, 1, `${get$1(totalCorrectAnswers) > 1 ? "mcq-opt-chk" : "mcq-opt-btn"} ${(get$1(optionState)?.buttonClasses || "group btn-mcq-option") ?? ""}`);
+      set_attribute(button, "data-testid", get$1(totalCorrectAnswers) > 1 ? "mcq-opt-chk" : "mcq-opt-btn");
       set_class(span, 1, `btn-mcq-text ${optionHasMedia() ? "min-h-[44px]" : ""}`);
       set_class(span_3, 1, `choice ${optionHasMedia() ? "my-1.5" : ""}`);
       set_text(text_1, $0);
@@ -9955,9 +10037,9 @@ function shouldSaveTextAnswer(currentAnswer, latestAnswer, isDataSaving) {
   const hasChanged = currentAnswer !== latestAnswer;
   return !isDataSaving && hasChanged;
 }
-var root_1$e = /* @__PURE__ */ from_html(`<label class="absolute left-0 top-0 bottom-0" aria-hidden="true"><span class="absolute inset-0 bg-black opacity-5 rounded-l-lg w-8.5 h-10.5 top-1"></span> <span class="absolute font-semibold text-base leading-[19px] text-charcoal px-3 inline-block pt-[15px]"> </span></label>`);
+var root_1$e = /* @__PURE__ */ from_html(`<label class="inline-txb-lbl absolute left-0 top-0 bottom-0" data-testid="inline-txb-lbl" aria-hidden="true"><span class="absolute inset-0 bg-black opacity-5 rounded-l-lg w-8.5 h-10.5 top-1"></span> <span class="absolute font-semibold text-base leading-[19px] text-charcoal px-3 inline-block pt-[15px]"> </span></label>`);
 var root_2$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-3.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root$b = /* @__PURE__ */ from_html(`<span><!> <input placeholder="Type your answer here" autocomplete="off"/> <!></span>`);
+var root$b = /* @__PURE__ */ from_html(`<span><!> <input data-testid="input-inline-txb" placeholder="Type your answer here" autocomplete="off"/> <!></span>`);
 function TypeInInlineField($$anchor, $$props) {
   push($$props, true);
   let index2 = prop($$props, "index", 7), value = prop($$props, "value", 15), readonly = prop($$props, "readonly", 7, false), showStatus = prop($$props, "showStatus", 7, false), isCorrect = prop($$props, "isCorrect", 7, null), isMultiple = prop($$props, "isMultiple", 7, false), marginClass = prop($$props, "marginClass", 7, ""), onBlur = prop($$props, "onBlur", 7);
@@ -10107,7 +10189,7 @@ function TypeInInlineField($$anchor, $$props) {
   template_effect(() => {
     set_class(span, 1, `relative inline-block h-fit my-2 ${marginClass() ?? ""}`);
     set_attribute(input, "id", `inline-${index2() ?? ""}`);
-    set_class(input, 1, clsx(get$1(inputClasses)));
+    set_class(input, 1, `input-inline-txb ${get$1(inputClasses) ?? ""}`);
     set_attribute(input, "aria-label", get$1(ariaLabel));
     input.readOnly = readonly();
   });
@@ -10135,9 +10217,9 @@ create_custom_element(
 );
 var root_1$d = /* @__PURE__ */ from_html(`<p class="p2 text-red-400 mb-3">Student's answer</p>`);
 var root_3$7 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" placeholder="Type your answer here" autocomplete="off" rows="3"></textarea> <!></div>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="relative"><textarea id="answerText" data-testid="input-long-txa" placeholder="Type your answer here" autocomplete="off" rows="3"></textarea> <!></div>`);
 var root_5$2 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
-var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input autocomplete="off" placeholder="Type your answer here"/> <!></div>`);
+var root_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input data-testid="input-short-txb" autocomplete="off" placeholder="Type your answer here"/> <!></div>`);
 var root$a = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
 function TypeInTextField($$anchor, $$props) {
   push($$props, true);
@@ -10266,7 +10348,7 @@ function TypeInTextField($$anchor, $$props) {
       }
       reset(div_1);
       template_effect(() => {
-        set_class(textarea, 1, `typein-textbox resize-none ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
+        set_class(textarea, 1, `input-long-txa typein-textbox resize-none ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
         set_attribute(textarea, "aria-label", get$1(ariaLabel));
         textarea.readOnly = readonly();
         textarea.disabled = disabled();
@@ -10309,7 +10391,7 @@ function TypeInTextField($$anchor, $$props) {
       }
       reset(div_2);
       template_effect(() => {
-        set_class(input, 1, `typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
+        set_class(input, 1, `input-short-txb typein-textbox typein-input ${showStatus() && !isSkipped() && isCorrect() === true ? "border-2 border-green-700 bg-green-400" : ""} ${showStatus() && !isSkipped() && isCorrect() === false ? "border-2 border-red-850" : ""}`);
         set_attribute(input, "aria-label", get$1(ariaLabel));
         input.readOnly = readonly();
         input.disabled = disabled();
@@ -10410,7 +10492,7 @@ const action = (node) => {
 };
 action.update = n.update;
 action.destroy = n.destroy;
-var root_1$c = /* @__PURE__ */ from_html(`<label aria-hidden="true"><span></span> <span> </span></label>`);
+var root_1$c = /* @__PURE__ */ from_html(`<label data-testid="qn-number-txt" aria-hidden="true"><span></span> <span> </span></label>`);
 var root_2$6 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
 var root_3$6 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
 var root_4 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-[calc(50%+0.375rem)] -translate-y-1/2 flex items-center justify-center"><!></span>`);
@@ -10554,7 +10636,7 @@ function AnswerDisplay($$anchor, $$props) {
       reset(label);
       template_effect(() => {
         set_attribute(label, "for", `${type() ?? ""}-${comparison().id ?? ""}-${questionNumber() - 1}`);
-        set_class(label, 1, clsx(get$1(labelClasses)));
+        set_class(label, 1, `qn-number-txt ${get$1(labelClasses) ?? ""}`);
         set_class(span, 1, clsx(get$1(backgroundSpanClasses)));
         set_class(span_1, 1, clsx(get$1(numberSpanClasses)));
         set_text(text, questionNumber());
@@ -10582,7 +10664,8 @@ function AnswerDisplay($$anchor, $$props) {
           set_attribute(div_1, "aria-label", $0);
           set_attribute(div_1, "aria-labelledby", `textbox-${comparison().id ?? ""}-${questionNumber() - 1}`);
           set_attribute(div_1, "aria-describedby", `textbox-value-${comparison().id ?? ""}-${questionNumber() - 1}`);
-          set_class(div_1, 1, clsx(get$1(textareaClasses)));
+          set_class(div_1, 1, `${type() === "correct" ? "ans-sum-corr-txb" : "ans-sum-stud-txb"} ${get$1(textareaClasses) ?? ""}`);
+          set_attribute(div_1, "data-testid", type() === "correct" ? "ans-sum-corr-txb" : "ans-sum-stud-txb");
           set_attribute(div_1, "id", `${type() ?? ""}-${comparison().id ?? ""}-${questionNumber() - 1}`);
           set_attribute(div_1, "tabindex", get$1(tabIndex));
         },
@@ -10598,7 +10681,8 @@ function AnswerDisplay($$anchor, $$props) {
       action$1(textarea, ($$node) => action?.($$node));
       template_effect(() => {
         set_attribute(textarea, "aria-label", get$1(ariaLabel));
-        set_class(textarea, 1, clsx(get$1(textareaClasses)));
+        set_class(textarea, 1, `${type() === "student" ? "ans-sum-stud-txb" : "ans-sum-corr-txb"} ${get$1(textareaClasses) ?? ""}`);
+        set_attribute(textarea, "data-testid", type() === "student" ? "ans-sum-stud-txb" : "ans-sum-corr-txb");
         set_attribute(textarea, "id", `${type() ?? ""}-${comparison().id ?? ""}-${questionNumber() - 1}`);
         set_value(textarea, get$1(displayAnswer));
         set_attribute(textarea, "tabindex", get$1(tabIndex));
@@ -10654,7 +10738,7 @@ create_custom_element(
   [],
   true
 );
-var root$8 = /* @__PURE__ */ from_html(`<div class="flex flex-col md:flex-row"><div class="flex flex-col md:w-1/2 md:pr-4"><p>Student's answers:</p> <!></div> <div><p>Correct answers:</p> <!></div></div>`);
+var root$8 = /* @__PURE__ */ from_html(`<div class="flex flex-col md:flex-row"><div class="flex flex-col md:w-1/2 md:pr-4"><p data-testid="ans-sum-stud-hdr">Student's answers:</p> <!></div> <div><p data-testid="ans-sum-corr-hdr">Correct answers:</p> <!></div></div>`);
 function ComparisonRow($$anchor, $$props) {
   push($$props, true);
   let comparison = prop($$props, "comparison", 7), showHeaders = prop($$props, "showHeaders", 7, false), isMultipleAnswers = prop($$props, "isMultipleAnswers", 7, false), isFirstRow = prop($$props, "isFirstRow", 7, false), interactionType = prop($$props, "interactionType", 7);
@@ -10768,9 +10852,9 @@ function ComparisonRow($$anchor, $$props) {
   reset(div_2);
   reset(div);
   template_effect(() => {
-    set_class(p, 1, clsx(get$1(studentHeaderClasses)));
+    set_class(p, 1, `ans-sum-stud-hdr ${get$1(studentHeaderClasses) ?? ""}`);
     set_class(div_2, 1, `flex flex-col md:w-1/2 ml-8.5 md:ml-0 md:pl-4 ${comparison().isCorrect ? "hidden md:block" : ""}`);
-    set_class(p_1, 1, clsx(get$1(correctHeaderClasses)));
+    set_class(p_1, 1, `ans-sum-corr-hdr ${get$1(correctHeaderClasses) ?? ""}`);
   });
   append($$anchor, div);
   return pop($$exports);
@@ -14281,7 +14365,11 @@ function CategoriseItem($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var span_3 = root_1$9();
       var node_2 = child(span_3);
-      SvgLoader(node_2, { svgName: "successSolid", className: "correct-icon" });
+      SvgLoader(node_2, {
+        svgName: "successSolid",
+        className: "correct-icon",
+        dataTestId: "icon-correct"
+      });
       reset(span_3);
       append($$anchor2, span_3);
     };
@@ -14292,7 +14380,11 @@ function CategoriseItem($$anchor, $$props) {
         var consequent_1 = ($$anchor3) => {
           var span_4 = root_3$4();
           var node_4 = child(span_4);
-          SvgLoader(node_4, { svgName: "errorSolid", className: "incorrect-icon" });
+          SvgLoader(node_4, {
+            svgName: "errorSolid",
+            className: "incorrect-icon",
+            dataTestId: "icon-incorrect"
+          });
           reset(span_4);
           append($$anchor3, span_4);
         };
@@ -14303,12 +14395,20 @@ function CategoriseItem($$anchor, $$props) {
             var consequent_2 = ($$anchor4) => {
               var span_5 = root_5$1();
               var node_6 = child(span_5);
-              SvgLoader(node_6, { svgName: "success", className: "missing-correct-icon" });
+              SvgLoader(node_6, {
+                svgName: "success",
+                className: "missing-correct-icon",
+                dataTestId: "icon-miss-corr"
+              });
               reset(span_5);
               append($$anchor4, span_5);
             };
             var alternate = ($$anchor4) => {
-              SvgLoader($$anchor4, { svgName: "gripVertical", className: "grip-icon" });
+              SvgLoader($$anchor4, {
+                svgName: "gripVertical",
+                className: "grip-icon",
+                dataTestId: "icon-grip"
+              });
             };
             if_block(
               node_5,
@@ -14342,7 +14442,11 @@ function CategoriseItem($$anchor, $$props) {
     var consequent_3 = ($$anchor2) => {
       var span_6 = root_7$2();
       var node_8 = child(span_6);
-      SvgLoader(node_8, { svgName: "gripVertical", className: "grip-icon" });
+      SvgLoader(node_8, {
+        svgName: "gripVertical",
+        className: "grip-icon",
+        dataTestId: "icon-grip"
+      });
       reset(span_6);
       append($$anchor2, span_6);
     };
@@ -14354,19 +14458,21 @@ function CategoriseItem($$anchor, $$props) {
   reset(div);
   reset(button);
   template_effect(
-    ($0, $1, $2, $3, $4, $5) => {
+    ($0, $1, $2, $3, $4, $5, $6) => {
       set_attribute(button, "id", itemId());
       set_attribute(button, "aria-label", $0);
       set_class(button, 1, $1);
-      set_attribute(button, "tabindex", $2);
+      set_attribute(button, "data-testid", $2);
+      set_attribute(button, "tabindex", $3);
       button.disabled = isLocked() && !resultType();
-      set_class(span, 1, $3);
-      set_class(div, 1, $4);
-      set_class(span_1, 1, $5);
+      set_class(span, 1, $4);
+      set_class(div, 1, $5);
+      set_class(span_1, 1, $6);
     },
     [
       () => get$1(ariaLabel)(),
       () => clsx(get$1(buttonClasses)()),
+      () => get$1(buttonClasses)().includes("cat-corr-ans-btn") ? "cat-corr-ans-btn" : get$1(buttonClasses)().includes("cat-mis-ans-btn") ? "cat-mis-ans-btn" : get$1(buttonClasses)().includes("cat-skip-ans-btn") ? "cat-skip-ans-btn" : get$1(buttonClasses)().includes("cat-stud-ans-btn") ? "cat-stud-ans-btn" : "cat-item-btn",
       () => get$1(itemTabIndex)(),
       () => clsx(get$1(textClasses)()),
       () => clsx(get$1(iconContainerClasses)()),
@@ -14867,10 +14973,10 @@ create_custom_element(
   [],
   true
 );
-var root_2$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`);
-var root_3$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
+var root_2$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-coll"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`);
+var root_3$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-exp"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
 var root_1$7 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55"><span class="mx-0.5"> </span> <span class="w-4 h-4 text-inherit flex items-center justify-center"><!></span></button>`);
-var root$4 = /* @__PURE__ */ from_html(`<div role="group"><div><!> <!></div> <!></div>`);
+var root$4 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><!> <!></div> <!></div>`);
 function CategoriseCategory($$anchor, $$props) {
   push($$props, true);
   let categoryId = prop($$props, "categoryId", 7), categoryTitle = prop($$props, "categoryTitle", 7), categoryIndex = prop($$props, "categoryIndex", 7, 1), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isCollapsed = prop($$props, "isCollapsed", 7, false), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), hasStimulus = prop($$props, "hasStimulus", 7, false), dndType = prop($$props, "dndType", 7, "categorise"), tabindex = prop($$props, "tabindex", 7, 0), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), ontogglecollapse = prop($$props, "ontogglecollapse", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), onkeydown = prop($$props, "onkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7);
@@ -15249,7 +15355,7 @@ function CategoriseCategory($$anchor, $$props) {
   template_effect(() => {
     set_attribute(div, "tabindex", get$1(adjustedTabindex));
     set_attribute(div, "aria-label", get$1(shouldShowAriaLabel) ? `Category ${categoryIndex()}: ${get$1(cleanCategoryTitle)}. ${get$1(getTotalWords)} added.` : void 0);
-    set_class(div, 1, clsx(get$1(outerClasses)));
+    set_class(div, 1, `cat-ctr ${get$1(outerClasses) ?? ""}`);
     set_class(div_1, 1, clsx(get$1(titleClasses)));
   });
   bind_element_size(div_1, "clientHeight", ($$value) => set(categoryTitleHeight, $$value));
@@ -15296,7 +15402,7 @@ var root_1$6 = /* @__PURE__ */ from_html(`<div role="group" tabindex="-1" class=
         absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">Word Bin is empty</div>`);
 var root_2$2 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden" aria-label="Left"><span class="w-6 h-6 text-inherit flex items-center justify-center"><!></span></button>`);
 var root_3$2 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden" aria-label="Right"><span class="w-6 h-6 text-inherit flex items-center justify-center ml-[3px]"><!></span></button>`);
-var root$3 = /* @__PURE__ */ from_html(`<div role="group"><div><span class="text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading" aria-hidden="true">Word Bin&nbsp;</span> <span class="text-base leading-5 !text-gray-900 md:item-heading" aria-hidden="true"> </span></div> <div class="flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal"><!> <!> <!> <!></div></div>`);
+var root$3 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-bin-grp"><div><span class="text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading" aria-hidden="true">Word Bin&nbsp;</span> <span class="text-base leading-5 !text-gray-900 md:item-heading" aria-hidden="true"> </span></div> <div class="flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal"><!> <!> <!> <!></div></div>`);
 function CategoriseWordBin($$anchor, $$props) {
   push($$props, true);
   let containerId = prop($$props, "containerId", 7), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), currentMobileIndex = prop($$props, "currentMobileIndex", 7, 0), totalItems = prop($$props, "totalItems", 7, 0), tabindex = prop($$props, "tabindex", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onnavigateitem = prop($$props, "onnavigateitem", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), onkeydown = prop($$props, "onkeydown", 7), onfocus = prop($$props, "onfocus", 7, void 0);
@@ -15590,7 +15696,12 @@ function CategoriseWordBin($$anchor, $$props) {
       };
       var span_1 = child(button);
       var node_2 = child(span_1);
-      SvgLoader(node_2, { svgName: "smallChevronLeft", width: 7, height: 12 });
+      SvgLoader(node_2, {
+        svgName: "smallChevronLeft",
+        width: 7,
+        height: 12,
+        dataTestId: "icon-chevron-prev"
+      });
       reset(span_1);
       reset(button);
       template_effect(() => button.disabled = currentMobileIndex() === 0);
@@ -15667,7 +15778,12 @@ function CategoriseWordBin($$anchor, $$props) {
       };
       var span_2 = child(button_1);
       var node_5 = child(span_2);
-      SvgLoader(node_5, { svgName: "smallChevronRight", width: 7, height: 12 });
+      SvgLoader(node_5, {
+        svgName: "smallChevronRight",
+        width: 7,
+        height: 12,
+        dataTestId: "icon-chevron-next"
+      });
       reset(span_2);
       reset(button_1);
       template_effect(() => button_1.disabled = currentMobileIndex() >= items().length - 1);
@@ -15683,7 +15799,7 @@ function CategoriseWordBin($$anchor, $$props) {
   template_effect(() => {
     set_attribute(div, "tabindex", tabindex());
     set_attribute(div, "aria-label", !get$1(hasSelectedItem) || !get$1(isNotSourceContainer) ? `Word Bin. ${get$1(itemsRemaining)} out of ${totalItems()} left.` : void 0);
-    set_class(div, 1, clsx(get$1(outerClasses)));
+    set_class(div, 1, `cat-bin-grp ${get$1(outerClasses) ?? ""}`);
     set_class(div_1, 1, clsx(get$1(titleClasses)));
     set_text(text, `${get$1(itemsRemaining) ?? ""} out of ${totalItems() ?? ""} left`);
   });
@@ -15757,7 +15873,7 @@ function CategoriseCategoryList($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(CategoriseCategoryList, { hasStimulus: {}, children: {} }, [], [], true);
-var root_1$5 = /* @__PURE__ */ from_html(`<div tabindex="-1" class="sr-only">&nbsp;</div> <div class="absolute inset-y-0 right-4 left-4 w-fit h-fit m-auto bg-white p-6 max-w-[400px] shadow-md rounded-lg focus-visible:outline-none md:inset-0"><div class="flex items-center mb-3"><span><!></span> <span class="text-xl leading-6 font-bold ml-3 grow">Reset words?</span> <button aria-label="Close" class="focus-ring text-charcoal rounded h-6 w-6 flex items-center justify-center hover:bg-black-50 active:bg-black-60" type="button"><!></button></div> <p class="text-base font-semibold mb-10">Are you sure you want to reset your answers for this question? This cannot be undone.</p> <div class="flex flex-col-reverse items-center space-y-2 space-y-reverse md:justify-between md:flex-row md:space-y-0"><button aria-label="Cancel" class="focus-ring w-full py-2 px-3 text-blue-1000 text-base leading-4 rounded-lg font-bold border-2 border-white hover:bg-black-50 active:bg-black-60 md:w-fit" type="button">Cancel</button> <button aria-label="Reset" class="focus-ring w-full py-2 px-3 text-white text-base leading-4 rounded-lg font-bold border-2 border-blue-1000 bg-soft-blue hover:bg-yellow-1000 hover:text-charcoal active:bg-yellow-1100 active:text-charcoal md:w-fit" type="button">Reset</button></div></div>`, 1);
+var root_1$5 = /* @__PURE__ */ from_html(`<div tabindex="-1" class="sr-only">&nbsp;</div> <div class="absolute inset-y-0 right-4 left-4 w-fit h-fit m-auto bg-white p-6 max-w-[400px] shadow-md rounded-lg focus-visible:outline-none md:inset-0"><div class="flex items-center mb-3"><span><!></span> <span class="text-xl leading-6 font-bold ml-3 grow">Reset words?</span> <button aria-label="Close" class="cat-reset-close-btn focus-ring text-charcoal rounded h-6 w-6 flex items-center justify-center hover:bg-black-50 active:bg-black-60" data-testid="cat-reset-close-btn" type="button"><!></button></div> <p class="text-base font-semibold mb-10">Are you sure you want to reset your answers for this question? This cannot be undone.</p> <div class="flex flex-col-reverse items-center space-y-2 space-y-reverse md:justify-between md:flex-row md:space-y-0"><button aria-label="Cancel" class="cat-reset-cancel-btn focus-ring w-full py-2 px-3 text-blue-1000 text-base leading-4 rounded-lg font-bold border-2 border-white hover:bg-black-50 active:bg-black-60 md:w-fit" data-testid="cat-reset-cancel-btn" type="button">Cancel</button> <button aria-label="Reset" class="cat-reset-confirm-btn focus-ring w-full py-2 px-3 text-white text-base leading-4 rounded-lg font-bold border-2 border-blue-1000 bg-soft-blue hover:bg-yellow-1000 hover:text-charcoal active:bg-yellow-1100 active:text-charcoal md:w-fit" data-testid="cat-reset-confirm-btn" type="button">Reset</button></div></div>`, 1);
 function CategoriseModal($$anchor, $$props) {
   push($$props, true);
   let isOpen = prop($$props, "isOpen", 7, false), onclose = prop($$props, "onclose", 7), onreset = prop($$props, "onreset", 7);
@@ -15806,7 +15922,8 @@ function CategoriseModal($$anchor, $$props) {
     get modalData() {
       return get$1(modalData);
     },
-    modalClass: "bg-charcoal/30 pointer-events-none",
+    modalClass: "cat-reset-mdl bg-charcoal/30 pointer-events-none",
+    dataTestId: "cat-reset-mdl",
     onclose: handleClose,
     children: ($$anchor2, $$slotProps) => {
       var fragment_1 = root_1$5();
@@ -15816,12 +15933,20 @@ function CategoriseModal($$anchor, $$props) {
       var div_2 = child(div_1);
       var span = child(div_2);
       var node = child(span);
-      SvgLoader(node, { svgName: "alertIcon", className: "alert-icon" });
+      SvgLoader(node, {
+        svgName: "alertIcon",
+        className: "alert-icon",
+        dataTestId: "icon-mdl-alt"
+      });
       reset(span);
       var button = sibling(span, 4);
       button.__click = handleClose;
       var node_1 = child(button);
-      SvgLoader(node_1, { svgName: "crossIcon", className: "cross-icon" });
+      SvgLoader(node_1, {
+        svgName: "crossIcon",
+        className: "cross-icon",
+        dataTestId: "icon-mdl-close"
+      });
       reset(button);
       reset(div_2);
       var div_3 = sibling(div_2, 4);
@@ -17474,7 +17599,7 @@ function useDropdownPosition(config) {
   };
 }
 var root_1$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-10"></div>`);
-var root_2 = /* @__PURE__ */ from_html(`<div class="bg-black bg-opacity-5 h-full flex flex-none justify-center items-center"><div class="font-semibold text-base leading-[19px] text-charcoal px-3 flex items-center" aria-hidden="true"> </div></div>`);
+var root_2 = /* @__PURE__ */ from_html(`<div class="bg-black bg-opacity-5 h-full flex flex-none justify-center items-center"><div class="inline-txb-lbl font-semibold text-base leading-[19px] text-charcoal px-3 flex items-center" data-testid="inline-txb-lbl" aria-hidden="true"> </div></div>`);
 var root_3$1 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
 var root_6 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
 var root_7 = /* @__PURE__ */ from_html(`<span class="text-red-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Incorrect</span></span>`);
@@ -17484,8 +17609,8 @@ var root_12 = /* @__PURE__ */ from_html(`<span class="flex items-center text-gre
 var root_14 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
 var root_16 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
 var root_11 = /* @__PURE__ */ from_html(`<li role="option" tabindex="-1"><div class="p-0.5 flex justify-between w-full text-base whitespace-normal"><!> <!></div></li>`);
-var root_10 = /* @__PURE__ */ from_html(`<ul class="dropdown-menu block" role="listbox" tabindex="-1"></ul>`);
-var root$1 = /* @__PURE__ */ from_html(`<span class="dropdown inline-block relative align-middle"><span class="sr-only"> </span> <!> <div role="combobox" aria-haspopup="listbox" tabindex="0"><!> <div class="px-4 flex flex-1 min-w-0 align-middle truncate items-center justify-between w-full"><span><!></span> <div class="flex items-center"><!> <!></div></div></div> <!></span>`);
+var root_10 = /* @__PURE__ */ from_html(`<ul class="drp-list dropdown-menu block" data-testid="drp-list" role="listbox" tabindex="-1"></ul>`);
+var root$1 = /* @__PURE__ */ from_html(`<span class="dropdown inline-block relative align-middle"><span class="sr-only"> </span> <!> <div role="combobox" data-testid="drp-cmb" aria-haspopup="listbox" tabindex="0"><!> <div class="px-4 flex flex-1 min-w-0 align-middle truncate items-center justify-between w-full"><span><!></span> <div class="flex items-center"><!> <!></div></div></div> <!></span>`);
 function DropdownContainer($$anchor, $$props) {
   push($$props, true);
   let dropdownId = prop($$props, "dropdownId", 7), dropdownNumber = prop($$props, "dropdownNumber", 7), options = prop($$props, "options", 7), selected = prop($$props, "selected", 7), correctAnswers = prop($$props, "correctAnswers", 23, () => []), isCorrect = prop($$props, "isCorrect", 7, false), isFinished = prop($$props, "isFinished", 7, false), isLocked = prop($$props, "isLocked", 7, false), isDataSaving = prop($$props, "isDataSaving", 7, false), mode = prop($$props, "mode", 7), showFeedback = prop($$props, "showFeedback", 7, false), showNumbering = prop($$props, "showNumbering", 7, true), onselect = prop($$props, "onselect", 7), viewportBuffer = prop($$props, "viewportBuffer", 7, 60);
@@ -18121,7 +18246,7 @@ function DropdownContainer($$anchor, $$props) {
     set_attribute(span_1, "id", labelId);
     set_text(text, get$1(ariaLabel));
     set_attribute(div_1, "id", comboId);
-    set_class(div_1, 1, clsx(get$1(containerClasses)));
+    set_class(div_1, 1, `drp-cmb ${get$1(containerClasses) ?? ""}`);
     set_attribute(div_1, "aria-expanded", get$1(state$1).isOpen);
     set_attribute(div_1, "aria-labelledby", labelId);
     set_attribute(div_1, "aria-controls", listId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "change version": "2.1.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [
@@ -27,6 +27,10 @@
     {
       "name": "Aimer Jay Pedrozo",
       "email": "aimer.pedrozo@cambridge.org"
+    },
+    {
+      "name": "John David De Chavez",
+      "email": "johndavid.chavez@cambridge.org"
     }
   ],
   "scripts": {