eat-js-sdk 2.4.3 → 2.5.1

package/dist/interaction-builder.mjs

@@ -5453,6 +5453,23 @@ async function typesetMathJax(element) {
     el.setAttribute("tabindex", "-1");
   });
 }
+async function getMathJaxSpeechText(html2) {
+  const staging = document.createElement("div");
+  staging.style.cssText = "position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden";
+  staging.innerHTML = html2;
+  document.body.appendChild(staging);
+  try {
+    await typesetMathJax(staging);
+    staging.querySelectorAll("mjx-container").forEach((container) => {
+      const assistive = container.querySelector("mjx-assistive-mml");
+      const text2 = assistive?.textContent?.trim() ?? "";
+      container.replaceWith(document.createTextNode(text2));
+    });
+    return staging.textContent?.trim() ?? "";
+  } finally {
+    if (staging.parentNode) staging.remove();
+  }
+}
 var root_1$o = /* @__PURE__ */ from_html(`<div><!></div>`);
 function CommonStringToHtml($$anchor, $$props) {
   push($$props, true);
@@ -6982,12 +6999,12 @@ function useImageModalSize() {
   };
 }
 var root_4$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_5$9 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_5$a = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
 var root_7$7 = /* @__PURE__ */ from_html(`<span class="sr-only"><!></span>`);
-var root_6$5 = /* @__PURE__ */ from_html(`<div><!> <span aria-hidden="true"><!></span></div>`);
+var root_6$4 = /* @__PURE__ */ from_html(`<div><!> <span aria-hidden="true"><!></span></div>`);
 var root_10$3 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_11$2 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
-var root_2$c = /* @__PURE__ */ from_html(`<div class="absolute inset-0 m-0"><div class="w-full h-full px-0 md:px-[82px] lg:px-[128px] pt-14 pb-[72px] relative lg:py-24 flex flex-col items-center justify-center"><div aria-live="polite" aria-atomic="true" class="sr-only"><!> <!></div> <div class="w-full h-full flex flex-col md:flex-row md:justify-center items-center justify-between"><div class="md:hidden"></div> <!> <!> <div><div class="flex-shrink-0 flex items-center justify-between py-1 px-2 md:px-4 border-border-minimal border rounded-t-md lg:rounded-t-lg md:gap-4 h-8.5 md:h-fit"><!> <!> <!></div> <div class="rounded-b-md"><img class="mx-auto block rounded-b-md lg:rounded-b-lg object-contain max-w-full max-h-[calc(100vh-168px-34px)] md:max-h-[calc(100vh-128px-54px)] lg:max-h-[calc(100vh-192px-54px)] pointer-events-none"/></div></div> <div class="md:hidden flex justify-center items-center gap-1 flex-shrink-0 h-6 mt-4"><!> <!></div></div></div></div>`);
+var root_2$f = /* @__PURE__ */ from_html(`<div class="absolute inset-0 m-0"><div class="w-full h-full px-0 md:px-[82px] lg:px-[128px] pt-14 pb-[72px] relative lg:py-24 flex flex-col items-center justify-center"><div aria-live="polite" aria-atomic="true" class="sr-only"><!> <!></div> <div class="w-full h-full flex flex-col md:flex-row md:justify-center items-center justify-between"><div class="md:hidden"></div> <!> <!> <div><div class="flex-shrink-0 flex items-center justify-between py-1 px-2 md:px-4 border-border-minimal border rounded-t-md lg:rounded-t-lg md:gap-4 h-8.5 md:h-fit"><!> <!> <!></div> <div class="rounded-b-md"><img class="mx-auto block rounded-b-md lg:rounded-b-lg object-contain max-w-full max-h-[calc(100vh-168px-34px)] md:max-h-[calc(100vh-128px-54px)] lg:max-h-[calc(100vh-192px-54px)] pointer-events-none"/></div></div> <div class="md:hidden flex justify-center items-center gap-1 flex-shrink-0 h-6 mt-4"><!> <!></div></div></div></div>`);
 function MCQImageModal($$anchor, $$props) {
   push($$props, true);
   let isOpen = prop($$props, "isOpen", 7, false), options = prop($$props, "options", 23, () => []), currentIndex = prop($$props, "currentIndex", 7, 0), modalAriaLabel = prop($$props, "modalAriaLabel", 7, ""), onnavigate = prop($$props, "onnavigate", 7), onclose = prop($$props, "onclose", 7);
@@ -7193,7 +7210,7 @@ function MCQImageModal($$anchor, $$props) {
         modalClass: "bg-charcoal/80 backdrop-blur-md pointer-events-none",
         dataTestId: "mcq-img-viewer-mdl",
         children: ($$anchor3, $$slotProps) => {
-          var div = root_2$c();
+          var div = root_2$f();
           var div_1 = child(div);
           var div_2 = child(div_1);
           var node_1 = child(div_2);
@@ -7256,7 +7273,7 @@ function MCQImageModal($$anchor, $$props) {
             dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
-              var span_1 = root_5$9();
+              var span_1 = root_5$a();
               var node_6 = child(span_1);
               SvgLoader(node_6, {
                 svgName: "smallChevronRight",
@@ -7284,7 +7301,7 @@ function MCQImageModal($$anchor, $$props) {
                 return get$1(fullAnswerText);
               },
               children: ($$anchor4, $$slotProps2) => {
-                var div_6 = root_6$5();
+                var div_6 = root_6$4();
                 var node_8 = child(div_6);
                 {
                   var consequent_1 = ($$anchor5) => {
@@ -7615,10 +7632,10 @@ function InteractionSection($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(InteractionSection, { children: {} }, [], [], true);
-var root_5$8 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_5$9 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_4$7 = /* @__PURE__ */ from_html(`<div class="px-4 w-full max-w-[1008px] mx-auto flex-shrink-0 text-center font-semibold text-sm md:text-lg leading-[150%] text-white" aria-hidden="true" data-testid="img-viewer-cap-txt"> </div> <!>`, 1);
 var root_7$6 = /* @__PURE__ */ from_html(`<div></div>`);
-var root_2$b = /* @__PURE__ */ from_html(`<div class="absolute inset-0"><div class="w-full h-full flex items-center justify-center pt-14 pb-[72px] lg:py-24"><div aria-live="polite" aria-atomic="true" class="sr-only"> </div> <div class="flex flex-col items-center overflow-y-auto overflow-x-hidden w-full px-0 md:px-6 lg:px-16"><div class="relative bg-white rounded-md md:rounded-lg shadow-sm overflow-hidden flex-shrink-0"><img class="block object-contain w-full h-auto max-w-full mx-auto"/> <!></div> <!></div></div></div>`);
+var root_2$e = /* @__PURE__ */ from_html(`<div class="absolute inset-0"><div class="w-full h-full flex items-center justify-center pt-14 pb-[72px] lg:py-24"><div aria-live="polite" aria-atomic="true" class="sr-only"> </div> <div class="flex flex-col items-center overflow-y-auto overflow-x-hidden w-full px-0 md:px-6 lg:px-16"><div class="relative bg-white rounded-md md:rounded-lg shadow-sm overflow-hidden flex-shrink-0"><img class="block object-contain w-full h-auto max-w-full mx-auto"/> <!></div> <!></div></div></div>`);
 function PromptStimulusImageModal($$anchor, $$props) {
   push($$props, true);
   let isOpen = prop($$props, "isOpen", 7, false), imageUrl = prop($$props, "imageUrl", 7, ""), altText = prop($$props, "altText", 7, ""), caption = prop($$props, "caption", 7, ""), onclose = prop($$props, "onclose", 7);
@@ -7752,7 +7769,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
         dataTestId: "img-viewer-mdl",
         onupdateModalSettings: updateModalSettings,
         children: ($$anchor3, $$slotProps) => {
-          var div = root_2$b();
+          var div = root_2$e();
           var div_1 = child(div);
           var div_2 = child(div_1);
           var text2 = child(div_2, true);
@@ -7789,7 +7806,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_3 = sibling(div_5, 2);
               {
                 var consequent = ($$anchor5) => {
-                  var div_6 = root_5$8();
+                  var div_6 = root_5$9();
                   template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_6);
                 };
@@ -8272,8 +8289,8 @@ const shouldRenderSection = (section) => section.condition !== false;
 const getClassString = (classes = []) => classes.join(" ");
 const getStyleString = (styles = {}) => Object.entries(styles).map(([k, v]) => `${k}:${v}`).join(";");
 var root_4$6 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4" data-testid="img-cap-txt"> </p>`);
-var root_5$7 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
-var root_2$a = /* @__PURE__ */ from_html(`<div class="flex flex-col justify-center items-center text-center"><div class="flex flex-col items-center"><div class="relative inline-block"><img/> <!></div> <!></div></div> <!>`, 1);
+var root_5$8 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
+var root_2$d = /* @__PURE__ */ from_html(`<div class="flex flex-col justify-center items-center text-center"><div class="flex flex-col items-center"><div class="relative inline-block"><img/> <!></div> <!></div></div> <!>`, 1);
 var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
 function CommonMedia($$anchor, $$props) {
   push($$props, true);
@@ -8365,7 +8382,7 @@ function CommonMedia($$anchor, $$props) {
       var node_1 = child(div);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_1 = root_2$a();
+          var fragment_1 = root_2$d();
           var div_1 = first_child(fragment_1);
           var div_2 = child(div_1);
           var div_3 = child(div_2);
@@ -8405,7 +8422,7 @@ function CommonMedia($$anchor, $$props) {
           var node_4 = sibling(div_1, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_4 = root_5$7();
+              var div_4 = root_5$8();
               var button = child(div_4);
               button.__click = toggleLongDescription;
               button.__keydown = handleKeyDown;
@@ -8494,11 +8511,11 @@ create_custom_element(
   true
 );
 var root_4$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
-var root_5$6 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_5$7 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
 var root_3$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_7$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
-var root_8$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
-var root_6$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_8$6 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
+var root_6$3 = /* @__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) {
   push($$props, true);
@@ -8612,7 +8629,7 @@ function StimulusSection($$anchor, $$props) {
           var node_5 = sibling(node_3, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_5$6();
+              var div_3 = root_5$7();
               let classes_2;
               var node_6 = child(div_3);
               CommonMedia(node_6, {
@@ -8647,7 +8664,7 @@ function StimulusSection($$anchor, $$props) {
           append($$anchor3, fragment_2);
         };
         var alternate = ($$anchor3) => {
-          var fragment_3 = root_6$4();
+          var fragment_3 = root_6$3();
           var node_7 = first_child(fragment_3);
           {
             var consequent_4 = ($$anchor4) => {
@@ -8686,7 +8703,7 @@ function StimulusSection($$anchor, $$props) {
           var node_9 = sibling(node_7, 2);
           {
             var consequent_5 = ($$anchor4) => {
-              var div_5 = root_8$5();
+              var div_5 = root_8$6();
               var node_10 = child(div_5);
               CommonStringToHtml(node_10, {
                 get htmlString() {
@@ -8735,7 +8752,7 @@ create_custom_element(
   [],
   true
 );
-var root_8$4 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
+var root_8$5 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
 var root_13$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
 var root_15$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
 var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
@@ -8914,7 +8931,7 @@ function PromptContainer($$anchor, $$props) {
                 var node_3 = first_child(fragment_6);
                 {
                   var consequent_3 = ($$anchor6) => {
-                    var div_4 = root_8$4();
+                    var div_4 = root_8$5();
                     append($$anchor6, div_4);
                   };
                   var alternate_2 = ($$anchor6) => {
@@ -9124,13 +9141,13 @@ create_custom_element(
   true
 );
 var root_1$g = /* @__PURE__ */ from_html(`<div class="sr-only" tabindex="-1"><!></div>`);
-var root_2$9 = /* @__PURE__ */ from_html(`<span> </span>`);
+var root_2$c = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_3$a = /* @__PURE__ */ from_html(`<span>Missing answer</span>`);
 var root_4$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
-var root_5$5 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
-var root_6$3 = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
+var root_5$6 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_6$2 = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
 var root_7$4 = /* @__PURE__ */ from_html(`<p class="text-red-400 text-sm font-semibold leading-[1.3] pr-2.5 hidden md:block"> </p>`);
-var root_8$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
+var root_8$4 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
 var root_12$3 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<span><!></span>`);
 var root_13$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>`);
@@ -9273,7 +9290,7 @@ function MCQOption($$anchor, $$props) {
   var node_2 = child(span_4);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_5 = root_2$9();
+      var span_5 = root_2$c();
       var text_1 = child(span_5, true);
       reset(span_5);
       template_effect(() => {
@@ -9322,7 +9339,7 @@ function MCQOption($$anchor, $$props) {
   var node_6 = sibling(node_5, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var span_8 = root_5$5();
+      var span_8 = root_5$6();
       var text_3 = child(span_8, true);
       reset(span_8);
       template_effect(() => set_text(text_3, get$1(labelSuffix)));
@@ -9338,7 +9355,7 @@ function MCQOption($$anchor, $$props) {
   var node_7 = child(span_9);
   {
     var consequent_5 = ($$anchor2) => {
-      var p = root_6$3();
+      var p = root_6$2();
       template_effect(() => set_class(p, 1, `text-green-750 text-sm font-semibold leading-[1.3] hidden md:block
               ${get$1(totalCorrectAnswers) > 1 ? "pr-2.5" : ""}`));
       append($$anchor2, p);
@@ -9363,7 +9380,7 @@ function MCQOption($$anchor, $$props) {
   var node_9 = sibling(node_8, 2);
   {
     var consequent_8 = ($$anchor2) => {
-      var span_10 = root_8$3();
+      var span_10 = root_8$4();
       var node_10 = child(span_10);
       {
         var consequent_7 = ($$anchor3) => {
@@ -9509,7 +9526,7 @@ create_custom_element(
   [],
   true
 );
-var root_2$8 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
+var root_2$b = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
 var root_1$f = /* @__PURE__ */ from_html(`<div><!> <div></div></div>`);
 var root_4$3 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-center p-4"><div class="text-gray-500">Loading...</div></div>`);
 function MCQInteractionContent($$anchor, $$props) {
@@ -9569,7 +9586,7 @@ function MCQInteractionContent($$anchor, $$props) {
       var node_1 = child(div);
       {
         var consequent = ($$anchor3) => {
-          var div_1 = root_2$8();
+          var div_1 = root_2$b();
           append($$anchor3, div_1);
         };
         if_block(node_1, ($$render) => {
@@ -10227,7 +10244,7 @@ function shouldSaveTextAnswer(currentAnswer, latestAnswer, isDataSaving) {
   return !isDataSaving && hasChanged;
 }
 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$7 = /* @__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_2$a = /* @__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$c = /* @__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);
@@ -10353,7 +10370,7 @@ function TypeInInlineField($$anchor, $$props) {
   var node_1 = sibling(input, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_2 = root_2$7();
+      var span_2 = root_2$a();
       var node_2 = child(span_2);
       {
         let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
@@ -10406,8 +10423,8 @@ 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$8 = /* @__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$6 = /* @__PURE__ */ from_html(`<div class="relative"><textarea autocomplete="off" rows="3"></textarea> <!></div>`);
-var root_5$4 = /* @__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$9 = /* @__PURE__ */ from_html(`<div class="relative"><textarea autocomplete="off" rows="3"></textarea> <!></div>`);
+var root_5$5 = /* @__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$2 = /* @__PURE__ */ from_html(`<div class="relative"><input autocomplete="off"/> <!></div>`);
 var root$b = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
 function TypeInTextField($$anchor, $$props) {
@@ -10551,7 +10568,7 @@ function TypeInTextField($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_1 = root_2$6();
+      var div_1 = root_2$9();
       var textarea = child(div_1);
       remove_textarea_child(textarea);
       textarea.__mousedown = handleMouseDown;
@@ -10611,7 +10628,7 @@ function TypeInTextField($$anchor, $$props) {
       var node_4 = sibling(input, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var span_1 = root_5$4();
+          var span_1 = root_5$5();
           var node_5 = child(span_1);
           {
             let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
@@ -10745,10 +10762,10 @@ const action = (node) => {
 action.update = n.update;
 action.destroy = n.destroy;
 var root_1$c = /* @__PURE__ */ from_html(`<label data-testid="qn-number-txt" aria-hidden="true"><span></span> <span> </span></label>`);
-var root_2$5 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
+var root_2$8 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
 var root_4$1 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true" data-testid="ans-sum-corr-txb"><!></div>`);
-var root_5$3 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
-var root_6$2 = /* @__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>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
+var root_6$1 = /* @__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>`);
 var root$a = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
 function AnswerDisplay($$anchor, $$props) {
   push($$props, true);
@@ -10903,7 +10920,7 @@ function AnswerDisplay($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_2$5();
+      var div_1 = root_2$8();
       var node_2 = child(div_1);
       CommonStringToHtml(node_2, {
         get htmlString() {
@@ -10951,7 +10968,7 @@ function AnswerDisplay($$anchor, $$props) {
           append($$anchor3, div_2);
         };
         var alternate = ($$anchor3) => {
-          var textarea = root_5$3();
+          var textarea = root_5$4();
           remove_textarea_child(textarea);
           action$1(textarea, ($$node) => action?.($$node));
           template_effect(() => {
@@ -10983,7 +11000,7 @@ function AnswerDisplay($$anchor, $$props) {
   var node_5 = sibling(node_1, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var span_2 = root_6$2();
+      var span_2 = root_6$1();
       var node_6 = child(span_2);
       {
         let $0 = /* @__PURE__ */ user_derived(() => isCorrect() ? "text-green-900" : "text-red-900");
@@ -11264,7 +11281,7 @@ create_custom_element(
   true
 );
 var root_1$a = /* @__PURE__ */ from_html(`<div aria-hidden="true" class="flex items-center text-charcoal mt-2" data-testid="info-alt-ans-txt"><!> <span class="p3">There is more than one possible correct answer for this question.</span></div>`);
-var root_2$4 = /* @__PURE__ */ from_html(`<div class="mt-4"><!></div>`);
+var root_2$7 = /* @__PURE__ */ from_html(`<div class="mt-4"><!></div>`);
 var root$8 = /* @__PURE__ */ from_html(`<!> <!> <!>`, 1);
 function TypeInFeedback($$anchor, $$props) {
   push($$props, true);
@@ -11375,7 +11392,7 @@ function TypeInFeedback($$anchor, $$props) {
   var node_2 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_2$4();
+      var div_1 = root_2$7();
       var node_3 = child(div_1);
       {
         let $0 = /* @__PURE__ */ user_derived(() => feedbackState().isResultCorrect ? "correct" : feedbackState().isSkipped ? "skipped" : "incorrect");
@@ -11451,12 +11468,12 @@ create_custom_element(
   true
 );
 var root_3$7 = /* @__PURE__ */ from_html(`<p></p>`);
-var root_8$2 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
-var root_2$3 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
+var root_8$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
+var root_2$6 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
 var root_10$2 = /* @__PURE__ */ from_html(`<div class="mb-4"><!></div>`);
 var root_13$1 = /* @__PURE__ */ from_html(`<div role="textbox" tabindex="0" aria-readonly="true" aria-labelledby="missing-answer-label" class="typein-textbox typein-textbox-missing border-2 border-green-700 py-[9px] px-4"><!></div>`);
 var root_12$2 = /* @__PURE__ */ from_html(`<div class="mt-6"><p id="missing-answer-label" class="p2 text-green-750 mb-3">Missing answer</p> <!></div>`);
-var root_9$2 = /* @__PURE__ */ from_html(`<!> <!> <span class="sr-only" aria-live="polite" aria-atomic="true"> </span> <!>`, 1);
+var root_9$3 = /* @__PURE__ */ from_html(`<!> <!> <span class="sr-only" aria-live="polite" aria-atomic="true"> </span> <!>`, 1);
 function TypeInComponent($$anchor, $$props) {
   push($$props, true);
   let api = prop($$props, "api", 7), config = prop($$props, "config", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onstateChange = prop($$props, "onstateChange", 7);
@@ -11691,7 +11708,7 @@ function TypeInComponent($$anchor, $$props) {
       var node = first_child(fragment_1);
       {
         var consequent_3 = ($$anchor3) => {
-          var div = root_2$3();
+          var div = root_2$6();
           var node_1 = child(div);
           each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
             var p_1 = root_3$7();
@@ -11765,7 +11782,7 @@ function TypeInComponent($$anchor, $$props) {
           var node_5 = sibling(node_1, 4);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_1 = root_8$2();
+              var div_1 = root_8$3();
               append($$anchor4, div_1);
             };
             if_block(node_5, ($$render) => {
@@ -11777,7 +11794,7 @@ function TypeInComponent($$anchor, $$props) {
           append($$anchor3, div);
         };
         var alternate_2 = ($$anchor3) => {
-          var fragment_6 = root_9$2();
+          var fragment_6 = root_9$3();
           var node_6 = first_child(fragment_6);
           {
             var consequent_4 = ($$anchor4) => {
@@ -14465,15 +14482,16 @@ function isInt(value) {
     return (x | 0) === x;
   })(parseFloat(value));
 }
-var root_1$9 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
-var root_3$6 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
-var root_7$3 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
-var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
+var root_1$9 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_2$5 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
+var root_5$3 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
+var root_7$3 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
+var root_9$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
+var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><!> <span><!></span> <!> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
 function CategoriseItem($$anchor, $$props) {
   push($$props, true);
   let itemId = prop($$props, "itemId", 7), itemText = prop($$props, "itemText", 7), containerId = prop($$props, "containerId", 7), mode = prop($$props, "mode", 7), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isCollapsed = prop($$props, "isCollapsed", 7, false), resultType = prop($$props, "resultType", 7, ""), isCurrentMobileItem = prop($$props, "isCurrentMobileItem", 7, true), isClonedItem = prop($$props, "isClonedItem", 7, false), isConsideredItem = prop($$props, "isConsideredItem", 7, false), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onclick = prop($$props, "onclick", 7), onfocus = prop($$props, "onfocus", 7), onblur = prop($$props, "onblur", 7), onkeydown = prop($$props, "onkeydown", 7);
-  const ariaWord = useRemoveRichTextHtmlTags(itemText());
   const isWordBin = containerId() === CATEGORISE.CONTAINER_WORD_BIN_ID;
   let touchStartX = /* @__PURE__ */ state(0);
   let touchStartY = /* @__PURE__ */ state(0);
@@ -14483,18 +14501,27 @@ function CategoriseItem($$anchor, $$props) {
   const isSelected = /* @__PURE__ */ user_derived(() => selectedItemId() === get$1(cleanItemId));
   const hasAnyItemSelected = /* @__PURE__ */ user_derived(() => !!selectedItemId());
   const canInteract = /* @__PURE__ */ user_derived(() => !isLocked() && (!resultType() || mode() === MODES.INTERACTIVE));
-  const ariaLabel = /* @__PURE__ */ user_derived(() => () => {
+  const ariaPrefix = /* @__PURE__ */ user_derived(() => {
     if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !get$1(isSelected)) {
-      return `Skipped answer: ${ariaWord}`;
+      return "Skipped answer:";
     }
     if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !get$1(isSelected)) {
-      return `Student's answer: ${ariaWord} (${resultType()})`;
+      return "Student's answer:";
     }
     if (resultType() === ANSWER_RESULTS.MISSED) {
-      return `Missing answer: ${ariaWord}`;
+      return "Missing answer:";
+    }
+    return `${get$1(isSelected) ? "Selected option" : "Option"}:`;
+  });
+  const ariaSuffix = /* @__PURE__ */ user_derived(() => {
+    if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !get$1(isSelected)) {
+      return `(${resultType()})`;
     }
-    return `${get$1(isSelected) ? "Selected option" : "Option"}: ${ariaWord}`;
+    return "";
   });
+  const itemHasMath = /* @__PURE__ */ user_derived(() => hasMathJax(itemText()));
+  const cleanItemText = /* @__PURE__ */ user_derived(() => useRemoveRichTextHtmlTags(itemText()));
+  const itemAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(itemHasMath) ? [get$1(ariaPrefix), get$1(cleanItemText), get$1(ariaSuffix)].filter(Boolean).join(" ") : void 0);
   const handleFocus = (event2) => {
     set(lastFocusTime, Date.now(), true);
     if (onfocus()) {
@@ -14561,7 +14588,7 @@ function CategoriseItem($$anchor, $$props) {
       }
     }
   };
-  const itemTabIndex = /* @__PURE__ */ user_derived(() => () => {
+  const itemTabIndex = /* @__PURE__ */ user_derived(() => {
     if (get$1(isSelected)) return 0;
     if (isCollapsed()) return -1;
     if (get$1(hasAnyItemSelected)) return -1;
@@ -14569,7 +14596,7 @@ function CategoriseItem($$anchor, $$props) {
     if (isWordBin && isCurrentMobileItem()) return 0;
     return -1;
   });
-  const buttonClasses = /* @__PURE__ */ user_derived(() => () => {
+  const buttonClasses = /* @__PURE__ */ user_derived(() => {
     const classes = [
       "focus-ring",
       "flex",
@@ -14614,24 +14641,24 @@ function CategoriseItem($$anchor, $$props) {
     }
     return classes.join(" ");
   });
-  const textClasses = /* @__PURE__ */ user_derived(() => () => {
+  const textClasses = /* @__PURE__ */ user_derived(() => {
     return `text-charcoal text-base pl-3 mr-4 ${get$1(isSelected) ? "text-white" : ""}`;
   });
-  const iconContainerClasses = /* @__PURE__ */ user_derived(() => () => {
+  const iconContainerClasses = /* @__PURE__ */ user_derived(() => {
     const base = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon";
     if (!get$1(hasAnyItemSelected) && get$1(canInteract) && !get$1(isSelected)) {
       return `${base} td:hover:cursor-grab td:hover:text-soft-blue`;
     }
     return base;
   });
-  const iconBgClasses = /* @__PURE__ */ user_derived(() => () => {
+  const iconBgClasses = /* @__PURE__ */ user_derived(() => {
     const base = "w-full h-full relative rounded-lg";
     if (!get$1(hasAnyItemSelected) && get$1(canInteract) && !get$1(isSelected)) {
       return `${base} td:group-hover:bg-black td:group-hover:opacity-5`;
     }
     return base;
   });
-  const getItemTestId = /* @__PURE__ */ user_derived(() => () => {
+  const getItemTestId = /* @__PURE__ */ user_derived(() => {
     if (mode() === MODES.SESSION || mode() === MODES.INTERACTIVE) {
       if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !get$1(isSelected)) {
         return "cat-skip-ans-btn";
@@ -14767,60 +14794,92 @@ function CategoriseItem($$anchor, $$props) {
   button.__touchmove = handleTouchMove;
   button.__touchend = handleTouchEnd;
   button.__keydown = handleKeyDown;
-  var span = child(button);
-  var node = child(span);
-  CommonStringToHtml(node, {
-    get htmlString() {
-      return itemText();
-    },
-    otherClass: "inline-block w-full"
-  });
-  reset(span);
-  var div = sibling(span, 2);
-  var span_1 = child(div);
-  var span_2 = sibling(span_1, 2);
-  var node_1 = child(span_2);
+  var node = child(button);
   {
     var consequent = ($$anchor2) => {
-      var span_3 = root_1$9();
-      var node_2 = child(span_3);
-      SvgLoader(node_2, {
+      var span = root_1$9();
+      var text2 = child(span, true);
+      reset(span);
+      template_effect(() => set_text(text2, get$1(ariaPrefix)));
+      append($$anchor2, span);
+    };
+    if_block(node, ($$render) => {
+      if (get$1(itemHasMath)) $$render(consequent);
+    });
+  }
+  var span_1 = sibling(node, 2);
+  var node_1 = child(span_1);
+  {
+    let $0 = /* @__PURE__ */ user_derived(() => !get$1(itemHasMath));
+    CommonStringToHtml(node_1, {
+      get htmlString() {
+        return itemText();
+      },
+      otherClass: "inline-block w-full",
+      get ariaHidden() {
+        return get$1($0);
+      }
+    });
+  }
+  reset(span_1);
+  var node_2 = sibling(span_1, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_2 = root_2$5();
+      var text_1 = child(span_2, true);
+      reset(span_2);
+      template_effect(() => set_text(text_1, get$1(ariaSuffix)));
+      append($$anchor2, span_2);
+    };
+    if_block(node_2, ($$render) => {
+      if (get$1(itemHasMath) && get$1(ariaSuffix)) $$render(consequent_1);
+    });
+  }
+  var div = sibling(node_2, 2);
+  var span_3 = child(div);
+  var span_4 = sibling(span_3, 2);
+  var node_3 = child(span_4);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var span_5 = root_3$6();
+      var node_4 = child(span_5);
+      SvgLoader(node_4, {
         svgName: "successSolid",
         className: "correct-icon",
         dataTestId: "icon-correct"
       });
-      reset(span_3);
-      append($$anchor2, span_3);
+      reset(span_5);
+      append($$anchor2, span_5);
     };
     var alternate_2 = ($$anchor2) => {
       var fragment = comment();
-      var node_3 = first_child(fragment);
+      var node_5 = first_child(fragment);
       {
-        var consequent_1 = ($$anchor3) => {
-          var span_4 = root_3$6();
-          var node_4 = child(span_4);
-          SvgLoader(node_4, {
+        var consequent_3 = ($$anchor3) => {
+          var span_6 = root_5$3();
+          var node_6 = child(span_6);
+          SvgLoader(node_6, {
             svgName: "errorSolid",
             className: "incorrect-icon",
             dataTestId: "icon-incorrect"
           });
-          reset(span_4);
-          append($$anchor3, span_4);
+          reset(span_6);
+          append($$anchor3, span_6);
         };
         var alternate_1 = ($$anchor3) => {
           var fragment_1 = comment();
-          var node_5 = first_child(fragment_1);
+          var node_7 = first_child(fragment_1);
           {
-            var consequent_2 = ($$anchor4) => {
-              var span_5 = root_5$2();
-              var node_6 = child(span_5);
-              SvgLoader(node_6, {
+            var consequent_4 = ($$anchor4) => {
+              var span_7 = root_7$3();
+              var node_8 = child(span_7);
+              SvgLoader(node_8, {
                 svgName: "success",
                 className: "missing-correct-icon",
                 dataTestId: "icon-miss-corr"
               });
-              reset(span_5);
-              append($$anchor4, span_5);
+              reset(span_7);
+              append($$anchor4, span_7);
             };
             var alternate = ($$anchor4) => {
               SvgLoader($$anchor4, {
@@ -14830,9 +14889,9 @@ function CategoriseItem($$anchor, $$props) {
               });
             };
             if_block(
-              node_5,
+              node_7,
               ($$render) => {
-                if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_2);
+                if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_4);
                 else $$render(alternate, false);
               },
               true
@@ -14841,9 +14900,9 @@ function CategoriseItem($$anchor, $$props) {
           append($$anchor3, fragment_1);
         };
         if_block(
-          node_3,
+          node_5,
           ($$render) => {
-            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_1);
+            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_3);
             else $$render(alternate_1, false);
           },
           true
@@ -14851,53 +14910,42 @@ function CategoriseItem($$anchor, $$props) {
       }
       append($$anchor2, fragment);
     };
-    if_block(node_1, ($$render) => {
-      if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent);
+    if_block(node_3, ($$render) => {
+      if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent_2);
       else $$render(alternate_2, false);
     });
   }
-  var node_7 = sibling(node_1, 2);
+  var node_9 = sibling(node_3, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var span_6 = root_7$3();
-      var node_8 = child(span_6);
-      SvgLoader(node_8, {
+    var consequent_5 = ($$anchor2) => {
+      var span_8 = root_9$2();
+      var node_10 = child(span_8);
+      SvgLoader(node_10, {
         svgName: "gripVertical",
         className: "grip-icon",
         dataTestId: "icon-grip"
       });
-      reset(span_6);
-      append($$anchor2, span_6);
+      reset(span_8);
+      append($$anchor2, span_8);
     };
-    if_block(node_7, ($$render) => {
-      if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(consequent_3);
+    if_block(node_9, ($$render) => {
+      if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(consequent_5);
     });
   }
-  reset(span_2);
+  reset(span_4);
   reset(div);
   reset(button);
-  template_effect(
-    ($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, "data-testid", $2);
-      set_attribute(button, "tabindex", $3);
-      button.disabled = isLocked() && !resultType();
-      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(getItemTestId)(),
-      () => get$1(itemTabIndex)(),
-      () => clsx(get$1(textClasses)()),
-      () => clsx(get$1(iconContainerClasses)()),
-      () => clsx(get$1(iconBgClasses)())
-    ]
-  );
+  template_effect(() => {
+    set_attribute(button, "id", itemId());
+    set_class(button, 1, clsx(get$1(buttonClasses)));
+    set_attribute(button, "data-testid", get$1(getItemTestId));
+    set_attribute(button, "tabindex", get$1(itemTabIndex));
+    button.disabled = isLocked() && !resultType();
+    set_attribute(button, "aria-label", get$1(itemAriaLabel));
+    set_class(span_1, 1, clsx(get$1(textClasses)));
+    set_class(div, 1, clsx(get$1(iconContainerClasses)));
+    set_class(span_3, 1, clsx(get$1(iconBgClasses)));
+  });
   event("focus", button, handleFocus);
   event("blur", button, handleBlur);
   append($$anchor, button);
@@ -14928,13 +14976,14 @@ create_custom_element(
   [],
   true
 );
-var root_1$8 = /* @__PURE__ */ from_html(`<button tabindex="0"></button>`);
-var root_7$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
-var root_6$1 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_2$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span> <!>`, 1);
+var root_1$8 = /* @__PURE__ */ from_html(`<button tabindex="0"><!></button>`);
+var root_8$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
+var root_7$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root$6 = /* @__PURE__ */ from_html(`<!>   <section><!></section>`, 1);
 function CategoriseDndContainer($$anchor, $$props) {
   push($$props, true);
-  let containerId = prop($$props, "containerId", 7), containerLabel = prop($$props, "containerLabel", 7, ""), containerClass = prop($$props, "containerClass", 7, ""), showButton = prop($$props, "showButton", 7, true), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isMobile = prop($$props, "isMobile", 7, false), mode = prop($$props, "mode", 7), paddingTop = prop($$props, "paddingTop", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), isCollapsed = prop($$props, "isCollapsed", 7, false), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 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), children = prop($$props, "children", 7);
+  let containerId = prop($$props, "containerId", 7), containerLabel = prop($$props, "containerLabel", 7, ""), containerLabelHtml = prop($$props, "containerLabelHtml", 7, ""), containerHasMath = prop($$props, "containerHasMath", 7, false), containerIndex = prop($$props, "containerIndex", 7, 0), containerClass = prop($$props, "containerClass", 7, ""), showButton = prop($$props, "showButton", 7, true), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isMobile = prop($$props, "isMobile", 7, false), mode = prop($$props, "mode", 7), paddingTop = prop($$props, "paddingTop", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), isCollapsed = prop($$props, "isCollapsed", 7, false), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 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), children = prop($$props, "children", 7);
   let considerItemId = /* @__PURE__ */ state(void 0);
   let isHoveringDrag = /* @__PURE__ */ state(false);
   let dragCounter = /* @__PURE__ */ state(0);
@@ -15081,6 +15130,27 @@ function CategoriseDndContainer($$anchor, $$props) {
       containerLabel($$value);
       flushSync();
     },
+    get containerLabelHtml() {
+      return containerLabelHtml();
+    },
+    set containerLabelHtml($$value = "") {
+      containerLabelHtml($$value);
+      flushSync();
+    },
+    get containerHasMath() {
+      return containerHasMath();
+    },
+    set containerHasMath($$value = false) {
+      containerHasMath($$value);
+      flushSync();
+    },
+    get containerIndex() {
+      return containerIndex();
+    },
+    set containerIndex($$value = 0) {
+      containerIndex($$value);
+      flushSync();
+    },
     get containerClass() {
       return containerClass();
     },
@@ -15225,17 +15295,39 @@ function CategoriseDndContainer($$anchor, $$props) {
   var fragment = root$6();
   var node = first_child(fragment);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var button = root_1$8();
       button.__click = handleContainerClick;
+      var node_1 = child(button);
+      {
+        var consequent = ($$anchor3) => {
+          var fragment_1 = root_2$4();
+          var span = first_child(fragment_1);
+          var text2 = child(span);
+          reset(span);
+          var node_2 = sibling(span, 2);
+          CommonStringToHtml(node_2, {
+            get htmlString() {
+              return containerLabelHtml();
+            },
+            otherClass: "sr-only"
+          });
+          template_effect(() => set_text(text2, `Category ${containerIndex() ?? ""}:`));
+          append($$anchor3, fragment_1);
+        };
+        if_block(node_1, ($$render) => {
+          if (containerHasMath()) $$render(consequent);
+        });
+      }
+      reset(button);
       template_effect(() => {
         set_class(button, 1, `focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto focus-visible:border ${containerId() === "container-word-bin" ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"}`);
-        set_attribute(button, "aria-label", containerLabel());
+        set_attribute(button, "aria-label", !containerHasMath() ? containerLabel() : void 0);
       });
       append($$anchor2, button);
     };
     if_block(node, ($$render) => {
-      if (!isLocked() && selectedItemId() && !get$1(isSourceContainer)()) $$render(consequent);
+      if (!isLocked() && selectedItemId() && !get$1(isSourceContainer)()) $$render(consequent_1);
     });
   }
   var section = sibling(node, 2);
@@ -15243,50 +15335,50 @@ function CategoriseDndContainer($$anchor, $$props) {
   section.__touchstart = handleSectionTouchStart;
   section.__touchmove = handleSectionTouchMove;
   set_attribute(section, "tabindex", -1);
-  var node_1 = child(section);
+  var node_3 = child(section);
   {
-    var consequent_2 = ($$anchor2) => {
-      var fragment_1 = comment();
-      var node_2 = first_child(fragment_1);
+    var consequent_3 = ($$anchor2) => {
+      var fragment_2 = comment();
+      var node_4 = first_child(fragment_2);
       {
-        var consequent_1 = ($$anchor3) => {
-          var fragment_2 = comment();
-          var node_3 = first_child(fragment_2);
-          snippet(node_3, children, () => ({ empty: () => {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_3 = comment();
+          var node_5 = first_child(fragment_3);
+          snippet(node_5, children, () => ({ empty: () => {
           } }));
-          append($$anchor3, fragment_2);
+          append($$anchor3, fragment_3);
         };
-        if_block(node_2, ($$render) => {
-          if (children()) $$render(consequent_1);
+        if_block(node_4, ($$render) => {
+          if (children()) $$render(consequent_2);
         });
       }
-      append($$anchor2, fragment_1);
+      append($$anchor2, fragment_2);
     };
     var alternate = ($$anchor2) => {
-      var fragment_3 = comment();
-      var node_4 = first_child(fragment_3);
+      var fragment_4 = comment();
+      var node_6 = first_child(fragment_4);
       {
-        var consequent_4 = ($$anchor3) => {
-          var fragment_4 = comment();
-          var node_5 = first_child(fragment_4);
-          each(node_5, 19, () => get$1(localItems), (item) => `${item.id}-${get$1(dragCounter)}`, ($$anchor4, item, index2) => {
+        var consequent_5 = ($$anchor3) => {
+          var fragment_5 = comment();
+          var node_7 = first_child(fragment_5);
+          each(node_7, 19, () => get$1(localItems), (item) => `${item.id}-${get$1(dragCounter)}`, ($$anchor4, item, index2) => {
             const itemResultType = /* @__PURE__ */ user_derived(() => getItemResultType(get$1(item).isClonedItem && get$1(item).cloneId ? get$1(item).cloneId : get$1(item).id));
-            var fragment_5 = root_6$1();
-            var node_6 = first_child(fragment_5);
+            var fragment_6 = root_7$2();
+            var node_8 = first_child(fragment_6);
             {
-              var consequent_3 = ($$anchor5) => {
-                var div = root_7$2();
+              var consequent_4 = ($$anchor5) => {
+                var div = root_8$2();
                 append($$anchor5, div);
               };
-              if_block(node_6, ($$render) => {
-                if (get$1(itemResultType) === ANSWER_RESULTS.MISSED && get$1(index2) === get$1(localItems).findIndex((i) => getItemResultType(i.id) === ANSWER_RESULTS.MISSED)) $$render(consequent_3);
+              if_block(node_8, ($$render) => {
+                if (get$1(itemResultType) === ANSWER_RESULTS.MISSED && get$1(index2) === get$1(localItems).findIndex((i) => getItemResultType(i.id) === ANSWER_RESULTS.MISSED)) $$render(consequent_4);
               });
             }
-            var node_7 = sibling(node_6, 2);
+            var node_9 = sibling(node_8, 2);
             {
               let $0 = /* @__PURE__ */ user_derived(() => get$1(item).itemText || "");
               let $1 = /* @__PURE__ */ user_derived(() => get$1(considerItemId) === get$1(item).id);
-              CategoriseItem(node_7, {
+              CategoriseItem(node_9, {
                 get itemId() {
                   return get$1(item).id;
                 },
@@ -15329,22 +15421,22 @@ function CategoriseDndContainer($$anchor, $$props) {
                 onkeydown: (e2) => onitemkeydown()?.(e2, get$1(item).id, get$1(index2))
               });
             }
-            append($$anchor4, fragment_5);
+            append($$anchor4, fragment_6);
           });
-          append($$anchor3, fragment_4);
+          append($$anchor3, fragment_5);
         };
         if_block(
-          node_4,
+          node_6,
           ($$render) => {
-            if (showButton()) $$render(consequent_4);
+            if (showButton()) $$render(consequent_5);
           },
           true
         );
       }
-      append($$anchor2, fragment_3);
+      append($$anchor2, fragment_4);
     };
-    if_block(node_1, ($$render) => {
-      if (get$1(isEmpty)) $$render(consequent_2);
+    if_block(node_3, ($$render) => {
+      if (get$1(isEmpty)) $$render(consequent_3);
       else $$render(alternate, false);
     });
   }
@@ -15367,6 +15459,9 @@ create_custom_element(
   {
     containerId: {},
     containerLabel: {},
+    containerLabelHtml: {},
+    containerHasMath: {},
+    containerIndex: {},
     containerClass: {},
     showButton: {},
     items: {},
@@ -15392,10 +15487,12 @@ create_custom_element(
   [],
   true
 );
-var root_2$2 = /* @__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$5 = /* @__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$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><!> <!></div> <!></div>`);
+var root_1$7 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_2$3 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_4 = /* @__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_5$2 = /* @__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_3$5 = /* @__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$5 = /* @__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);
@@ -15426,7 +15523,8 @@ function CategoriseCategory($$anchor, $$props) {
     ${get$1(effectiveIsCollapsed) && isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100 md:!bg-white" : ""}
     ${get$1(effectiveIsCollapsed) && isMobile() ? "rounded-b-lg md:rounded-b-none" : ""}`);
   const adjustedTabindex = /* @__PURE__ */ user_derived(tabindex);
-  const shouldShowAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(hasSelectedItem) || !get$1(isNotSourceContainer));
+  const categoryHasMath = /* @__PURE__ */ user_derived(() => hasMathJax(categoryTitle()));
+  const shouldShowAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(categoryHasMath) && (!get$1(hasSelectedItem) || !get$1(isNotSourceContainer)));
   const handleToggle = () => {
     if (isMobile() && ontogglecollapse()) {
       ontogglecollapse()(categoryId());
@@ -15644,59 +15742,87 @@ function CategoriseCategory($$anchor, $$props) {
   div.__click = handleContainerClick;
   var div_1 = child(div);
   var node = child(div_1);
-  CommonStringToHtml(node, {
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_1$7();
+      var text2 = child(span);
+      reset(span);
+      template_effect(() => set_text(text2, `Category ${categoryIndex() ?? ""}:`));
+      append($$anchor2, span);
+    };
+    if_block(node, ($$render) => {
+      if (get$1(categoryHasMath)) $$render(consequent);
+    });
+  }
+  var node_1 = sibling(node, 2);
+  CommonStringToHtml(node_1, {
     get htmlString() {
       return categoryTitle();
     },
     otherClass: "text-base leading-5 !text-gray-900 md:item-heading",
-    ariaHidden: true
+    get ariaHidden() {
+      return get$1(shouldShowAriaLabel);
+    }
   });
-  var node_1 = sibling(node, 2);
+  var node_2 = sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var button = root_1$7();
+      var span_1 = root_2$3();
+      var text_1 = child(span_1);
+      reset(span_1);
+      template_effect(() => set_text(text_1, `. ${get$1(getTotalWords) ?? ""} added.`));
+      append($$anchor2, span_1);
+    };
+    if_block(node_2, ($$render) => {
+      if (get$1(categoryHasMath)) $$render(consequent_1);
+    });
+  }
+  var node_3 = sibling(node_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var button = root_3$5();
       button.__click = handleToggle;
       button.__keydown = (e2) => {
         if (e2.key === "Enter" || e2.key === " ") {
           e2.stopPropagation();
         }
       };
-      var span = child(button);
-      var text2 = child(span, true);
-      reset(span);
-      var span_1 = sibling(span, 2);
-      var node_2 = child(span_1);
+      var span_2 = child(button);
+      var text_2 = child(span_2, true);
+      reset(span_2);
+      var span_3 = sibling(span_2, 2);
+      var node_4 = child(span_3);
       {
-        var consequent = ($$anchor3) => {
-          var svg = root_2$2();
+        var consequent_2 = ($$anchor3) => {
+          var svg = root_4();
           append($$anchor3, svg);
         };
         var alternate = ($$anchor3) => {
-          var svg_1 = root_3$5();
+          var svg_1 = root_5$2();
           append($$anchor3, svg_1);
         };
-        if_block(node_2, ($$render) => {
-          if (get$1(effectiveIsCollapsed)) $$render(consequent);
+        if_block(node_4, ($$render) => {
+          if (get$1(effectiveIsCollapsed)) $$render(consequent_2);
           else $$render(alternate, false);
         });
       }
-      reset(span_1);
+      reset(span_3);
       reset(button);
       template_effect(() => {
         set_attribute(button, "aria-label", get$1(getTotalWords));
         set_attribute(button, "tabindex", selectedItemId() ? -1 : 0);
-        set_text(text2, get$1(getTotalWords));
+        set_text(text_2, get$1(getTotalWords));
       });
       append($$anchor2, button);
     };
-    if_block(node_1, ($$render) => {
-      if (isMobile()) $$render(consequent_1);
+    if_block(node_3, ($$render) => {
+      if (isMobile()) $$render(consequent_3);
     });
   }
   reset(div_1);
   bind_this(div_1, ($$value) => set(titleElement, $$value), () => get$1(titleElement));
-  var node_3 = sibling(div_1, 2);
-  key(node_3, () => `${categoryId()}-${get$1(effectiveIsCollapsed)}-${isMobile()}`, ($$anchor2) => {
+  var node_5 = sibling(div_1, 2);
+  key(node_5, () => `${categoryId()}-${get$1(effectiveIsCollapsed)}-${isMobile()}`, ($$anchor2) => {
     {
       const children = ($$anchor3) => {
       };
@@ -15710,6 +15836,15 @@ function CategoriseCategory($$anchor, $$props) {
         get containerLabel() {
           return get$1($0);
         },
+        get containerLabelHtml() {
+          return categoryTitle();
+        },
+        get containerHasMath() {
+          return get$1(categoryHasMath);
+        },
+        get containerIndex() {
+          return categoryIndex();
+        },
         get containerClass() {
           return get$1(containerClasses);
         },
@@ -15819,7 +15954,7 @@ create_custom_element(
 );
 var root_1$6 = /* @__PURE__ */ from_html(`<div role="group" tabindex="-1" class="text-base leading-4 text-gray-800 p-5 border border-gray-400 rounded-lg border-dashed
         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$1 = /* @__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_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$4 = /* @__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$4 = /* @__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) {
@@ -16106,7 +16241,7 @@ function CategoriseWordBin($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var button = root_2$1();
+      var button = root_2$2();
       button.__click = () => handleNavigate("left");
       button.__keydown = (e2) => {
         if (e2.key === "Enter" || e2.key === " ") {
@@ -16383,11 +16518,11 @@ function CategoriseModal($$anchor, $$props) {
 }
 delegate(["click"]);
 create_custom_element(CategoriseModal, { isOpen: {}, onclose: {}, onreset: {} }, [], [], true);
-var root_4 = /* @__PURE__ */ from_html(`<button aria-label="Reset words" class="group focus-ring flex items-center rounded-lg border-2 border-soft-blue
+var root_2$1 = /* @__PURE__ */ from_html(`<button aria-label="Reset words" class="group focus-ring flex items-center rounded-lg border-2 border-soft-blue
               text-blue-1000 px-3 py-2 absolute right-0 -top-2.5 hover:bg-blue-100" data-testid="cat-reset-btn"><span class="h-6 w-6 flex items-center justify-center"><!></span> <span class="text-base leading-4 font-bold ml-1 group-hover:underline">Reset <span class="hidden md:inline-block">words</span></span></button>`);
 var root_1$4 = /* @__PURE__ */ from_html(
   `<button type="button" aria-label="Skip to Word Bin" class="flex items-center text-charcoal border-l-6 border-charcoal bg-yellow-1000 py-1.5 pr-3 pl-4 focus-visible:border-charcoal
-        left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div class="sr-only" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"><!></div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <!> <!> <!></div>`,
+        left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div role="status" class="sr-only" tabindex="-1"> </div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <!> <!> <!></div>`,
   1
 );
 function CategoriseComponent($$anchor, $$props) {
@@ -16406,7 +16541,6 @@ function CategoriseComponent($$anchor, $$props) {
   let dragHoverContainerId = /* @__PURE__ */ state(null);
   let dragSourceContainerId = /* @__PURE__ */ state(null);
   let announcement = /* @__PURE__ */ state("");
-  let announcementIsHtml = /* @__PURE__ */ state(false);
   let srDivRef = /* @__PURE__ */ state(void 0);
   let skipToWordBinRef = /* @__PURE__ */ state(void 0);
   let wordBinRef = /* @__PURE__ */ state(void 0);
@@ -16466,17 +16600,15 @@ function CategoriseComponent($$anchor, $$props) {
       onstateChange()(new CustomEvent("statechange", { detail: { state: get$1(interactionState), serialized } }));
     }
   };
-  const announceToScreenReader = async (message, isHtml = false) => {
+  const announceToScreenReader = async (message) => {
+    const containsMath = hasMathJax(message);
+    const speechText = containsMath ? await getMathJaxSpeechText(processMathJax(message)) : message;
     set(announcement, "");
-    set(announcementIsHtml, false);
-    await tick();
-    set(announcement, message, true);
-    set(announcementIsHtml, isHtml, true);
     await tick();
+    set(announcement, speechText, true);
     setTimeout(
       () => {
         set(announcement, "");
-        set(announcementIsHtml, false);
       },
       ANNOUNCEMENT_TIMEOUT_MS
     );
@@ -16876,35 +17008,18 @@ function CategoriseComponent($$anchor, $$props) {
       bind_this(button, ($$value) => set(skipToWordBinRef, $$value), () => get$1(skipToWordBinRef));
       var div = sibling(button, 2);
       var div_1 = child(div);
-      var node_1 = child(div_1);
-      {
-        var consequent = ($$anchor3) => {
-          var fragment_2 = comment();
-          var node_2 = first_child(fragment_2);
-          html(node_2, () => get$1(announcement));
-          append($$anchor3, fragment_2);
-        };
-        var alternate = ($$anchor3) => {
-          var text$1 = text();
-          template_effect(() => set_text(text$1, get$1(announcement)));
-          append($$anchor3, text$1);
-        };
-        if_block(node_1, ($$render) => {
-          if (get$1(announcementIsHtml)) $$render(consequent);
-          else $$render(alternate, false);
-        });
-      }
+      var text2 = child(div_1, true);
       reset(div_1);
       bind_this(div_1, ($$value) => set(srDivRef, $$value), () => get$1(srDivRef));
       var div_2 = sibling(div_1, 2);
-      var node_3 = sibling(child(div_2), 2);
+      var node_1 = sibling(child(div_2), 2);
       {
-        var consequent_1 = ($$anchor3) => {
-          var button_1 = root_4();
+        var consequent = ($$anchor3) => {
+          var button_1 = root_2$1();
           button_1.__click = handleOpenResetModal;
           var span_1 = child(button_1);
-          var node_4 = child(span_1);
-          SvgLoader(node_4, {
+          var node_2 = child(span_1);
+          SvgLoader(node_2, {
             svgName: "switch",
             className: "switch-icon",
             dataTestId: "icon-switch"
@@ -16915,22 +17030,22 @@ function CategoriseComponent($$anchor, $$props) {
           template_effect(() => set_attribute(button_1, "tabindex", get$1(categoryTabIndex)));
           append($$anchor3, button_1);
         };
-        if_block(node_3, ($$render) => {
-          if (!get$1(isCompleted) && !get$1(isLocked) && get$1(totalPlacedItems) > 0) $$render(consequent_1);
+        if_block(node_1, ($$render) => {
+          if (!get$1(isCompleted) && !get$1(isLocked) && get$1(totalPlacedItems) > 0) $$render(consequent);
         });
       }
       reset(div_2);
-      var node_5 = sibling(div_2, 2);
+      var node_3 = sibling(div_2, 2);
       {
         let $02 = /* @__PURE__ */ user_derived(() => !!config().stimulus);
-        CategoriseCategoryList(node_5, {
+        CategoriseCategoryList(node_3, {
           get hasStimulus() {
             return get$1($02);
           },
           children: ($$anchor3, $$slotProps) => {
-            var fragment_4 = comment();
-            var node_6 = first_child(fragment_4);
-            each(node_6, 19, () => config().category_groups, (category) => category.id, ($$anchor4, category, categoryIndex) => {
+            var fragment_2 = comment();
+            var node_4 = first_child(fragment_2);
+            each(node_4, 19, () => config().category_groups, (category) => category.id, ($$anchor4, category, categoryIndex) => {
               const categoryItems = /* @__PURE__ */ user_derived(() => getCategoryItemsData(get$1(category).id));
               const isCollapsed = /* @__PURE__ */ user_derived(() => !api().isCategoryOpen(get$1(interactionState), get$1(category).id));
               {
@@ -17015,12 +17130,12 @@ function CategoriseComponent($$anchor, $$props) {
                 );
               }
             });
-            append($$anchor3, fragment_4);
+            append($$anchor3, fragment_2);
           },
           $$slots: { default: true }
         });
       }
-      var node_7 = sibling(node_5, 2);
+      var node_5 = sibling(node_3, 2);
       {
         let $02 = /* @__PURE__ */ user_derived(() => get$1(selectedItemId) || void 0);
         let $12 = /* @__PURE__ */ user_derived(() => get$1(dragHoverContainerId) === CONTAINER_WORD_BIN_ID2);
@@ -17028,7 +17143,7 @@ function CategoriseComponent($$anchor, $$props) {
         let $3 = /* @__PURE__ */ user_derived(() => get$1(dragSourceContainerId) || void 0);
         let $4 = /* @__PURE__ */ user_derived(() => get$1(activeContainerForKeyboard) || void 0);
         bind_this(
-          CategoriseWordBin(node_7, {
+          CategoriseWordBin(node_5, {
             get containerId() {
               return CONTAINER_WORD_BIN_ID2;
             },
@@ -17089,8 +17204,8 @@ function CategoriseComponent($$anchor, $$props) {
           () => get$1(wordBinRef)
         );
       }
-      var node_8 = sibling(node_7, 2);
-      CategoriseModal(node_8, {
+      var node_6 = sibling(node_5, 2);
+      CategoriseModal(node_6, {
         get isOpen() {
           return get$1(isModalOpen);
         },
@@ -17100,6 +17215,7 @@ function CategoriseComponent($$anchor, $$props) {
       reset(div);
       template_effect(() => {
         set_attribute(button, "tabindex", get$1(selectedItemId) ? -1 : 0);
+        set_text(text2, get$1(announcement));
         set_attribute(div_2, "aria-hidden", get$1(isModalOpen));
       });
       append($$anchor2, fragment_1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.4.3",
-  "change version": "2.4.0",
+  "version": "2.5.1",
+  "change version": "2.5.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [
     {