eat-js-sdk 2.3.10 → 2.4.1

package/dist/interaction-builder.mjs

@@ -2265,10 +2265,10 @@ function child(node, is_text) {
   if (child2 === null) {
     child2 = hydrate_node.appendChild(create_text());
   } else if (is_text && child2.nodeType !== TEXT_NODE) {
-    var text = create_text();
-    child2?.before(text);
-    set_hydrate_node(text);
-    return text;
+    var text2 = create_text();
+    child2?.before(text2);
+    set_hydrate_node(text2);
+    return text2;
   }
   set_hydrate_node(child2);
   return child2;
@@ -2286,10 +2286,10 @@ function first_child(fragment, is_text = false) {
     return first;
   }
   if (is_text && hydrate_node?.nodeType !== TEXT_NODE) {
-    var text = create_text();
-    hydrate_node?.before(text);
-    set_hydrate_node(text);
-    return text;
+    var text2 = create_text();
+    hydrate_node?.before(text2);
+    set_hydrate_node(text2);
+    return text2;
   }
   return hydrate_node;
 }
@@ -2305,14 +2305,14 @@ function sibling(node, count = 1, is_text = false) {
     return next_sibling;
   }
   if (is_text && next_sibling?.nodeType !== TEXT_NODE) {
-    var text = create_text();
+    var text2 = create_text();
     if (next_sibling === null) {
-      last_sibling?.after(text);
+      last_sibling?.after(text2);
     } else {
-      next_sibling.before(text);
+      next_sibling.before(text2);
     }
-    set_hydrate_node(text);
-    return text;
+    set_hydrate_node(text2);
+    return text2;
   }
   set_hydrate_node(next_sibling);
   return (
@@ -3349,6 +3349,20 @@ function from_namespace(content, flags2, ns = "svg") {
 function from_svg(content, flags2) {
   return /* @__PURE__ */ from_namespace(content, flags2, "svg");
 }
+function text(value = "") {
+  if (!hydrating) {
+    var t2 = create_text(value + "");
+    assign_nodes(t2, t2);
+    return t2;
+  }
+  var node = hydrate_node;
+  if (node.nodeType !== TEXT_NODE) {
+    node.before(node = create_text());
+    set_hydrate_node(node);
+  }
+  assign_nodes(node, node);
+  return node;
+}
 function comment() {
   if (hydrating) {
     assign_nodes(hydrate_node, null);
@@ -3386,11 +3400,11 @@ function is_passive_event(name) {
   return PASSIVE_EVENTS.includes(name);
 }
 let should_intro = true;
-function set_text(text, value) {
+function set_text(text2, value) {
   var str = value == null ? "" : typeof value === "object" ? value + "" : value;
-  if (str !== (text.__t ?? (text.__t = text.nodeValue))) {
-    text.__t = str;
-    text.nodeValue = str + "";
+  if (str !== (text2.__t ?? (text2.__t = text2.nodeValue))) {
+    text2.__t = str;
+    text2.nodeValue = str + "";
   }
 }
 function mount(component2, options) {
@@ -5353,23 +5367,23 @@ function InvalidBanner($$anchor, $$props) {
     }
   };
   var p = root$m();
-  var text = child(p, true);
+  var text2 = child(p, true);
   reset(p);
-  template_effect(() => set_text(text, bannerLabel()));
+  template_effect(() => set_text(text2, bannerLabel()));
   append($$anchor, p);
   return pop($$exports);
 }
 create_custom_element(InvalidBanner, { bannerLabel: {} }, [], [], true);
 const interactionUtils = {
   // Text processing utilities
-  normalizeText: (text) => {
-    return text.trim().toLowerCase().replace(/\s+/g, " ");
+  normalizeText: (text2) => {
+    return text2.trim().toLowerCase().replace(/\s+/g, " ");
   },
-  removeDiacritics: (text) => {
-    return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+  removeDiacritics: (text2) => {
+    return text2.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
   },
-  removePunctuation: (text) => {
-    return text.replace(/[^\w\s]/gi, "");
+  removePunctuation: (text2) => {
+    return text2.replace(/[^\w\s]/gi, "");
   },
   // Accessibility helpers
   announceToScreenReader: (message) => {
@@ -5435,6 +5449,9 @@ async function typesetMathJax(element) {
   } else if (typeof mathJax.typeset === "function") {
     mathJax.typeset([element]);
   }
+  element.querySelectorAll("mjx-container").forEach((el) => {
+    el.setAttribute("tabindex", "-1");
+  });
 }
 var root_1$o = /* @__PURE__ */ from_html(`<div><!></div>`);
 function CommonStringToHtml($$anchor, $$props) {
@@ -5835,7 +5852,7 @@ function ResultIcon($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(ResultIcon, { isCorrect: {}, iconType: {}, parentProps: {} }, [], [], true);
-var root_3$d = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
+var root_3$c = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
 var root_1$m = /* @__PURE__ */ from_html(`<div data-testid="feedback-alt"><!> <div><!> <span><!></span></div></div>`);
 function FeedbackAlert($$anchor, $$props) {
   push($$props, true);
@@ -5928,7 +5945,7 @@ function FeedbackAlert($$anchor, $$props) {
       var node_2 = child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
-          var span = root_3$d();
+          var span = root_3$c();
           append($$anchor3, span);
         };
         if_block(node_2, ($$render) => {
@@ -6398,11 +6415,11 @@ function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
     css: (t2) => `opacity: ${t2 * o2}`
   };
 }
-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_1$l = /* @__PURE__ */ from_html(`<div><div role="tooltip" data-testid="img-viewer-tt"><!> <span aria-hidden="true"></span></div></div>`);
 var root$i = /* @__PURE__ */ from_html(`<div class="relative inline-block"><!> <!></div>`);
 function CommonTooltip($$anchor, $$props) {
   push($$props, true);
-  let text = prop($$props, "text", 7), placement = prop($$props, "placement", 7, "bottom"), open = prop($$props, "open", 7, void 0), disabled = prop($$props, "disabled", 7, false), trigger = prop($$props, "trigger", 7, "hover"), tooltipClass = prop($$props, "tooltipClass", 7, ""), showDelay = prop($$props, "showDelay", 7, 80), hideDelay = prop($$props, "hideDelay", 7, 120), children = prop($$props, "children", 7);
+  let text2 = prop($$props, "text", 7), placement = prop($$props, "placement", 7, "bottom"), open = prop($$props, "open", 7, void 0), disabled = prop($$props, "disabled", 7, false), trigger = prop($$props, "trigger", 7, "hover"), tooltipClass = prop($$props, "tooltipClass", 7, ""), showDelay = prop($$props, "showDelay", 7, 80), hideDelay = prop($$props, "hideDelay", 7, 120), children = prop($$props, "children", 7);
   let internalOpen = /* @__PURE__ */ state(false);
   let showTimer = /* @__PURE__ */ state(null);
   let hideTimer = /* @__PURE__ */ state(null);
@@ -6514,10 +6531,10 @@ function CommonTooltip($$anchor, $$props) {
     show,
     hide,
     get text() {
-      return text();
+      return text2();
     },
     set text($$value) {
-      text($$value);
+      text2($$value);
       flushSync();
     },
     get placement() {
@@ -6593,8 +6610,13 @@ function CommonTooltip($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var div_1 = root_1$l();
       var div_2 = child(div_1);
-      var text_1 = child(div_2);
-      var span = sibling(text_1);
+      var node_2 = child(div_2);
+      CommonStringToHtml(node_2, {
+        get htmlString() {
+          return text2();
+        }
+      });
+      var span = sibling(node_2, 2);
       reset(div_2);
       bind_this(div_2, ($$value) => set(bubbleEl, $$value), () => get$1(bubbleEl));
       reset(div_1);
@@ -6602,7 +6624,6 @@ function CommonTooltip($$anchor, $$props) {
         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, `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) ?? ""}`);
       });
       transition(3, div_1, () => fade, () => ({ duration: 40 }));
@@ -6960,12 +6981,13 @@ function useImageModalSize() {
     calculateStimulusImageLayout
   };
 }
-var root_3$c = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_4$7 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_5$9 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
-var root_8$6 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
-var root_9$4 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
-var root_2$d = /* @__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_4$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_5$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_7$5 = /* @__PURE__ */ from_html(`<span class="sr-only"><!></span>`);
+var root_6$5 = /* @__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$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);
@@ -6979,7 +7001,8 @@ function MCQImageModal($$anchor, $$props) {
   let containerMaxWidth = /* @__PURE__ */ state("100%");
   let textElement = /* @__PURE__ */ state(null);
   let isTextTruncated = /* @__PURE__ */ state(false);
-  let navigationAnnouncement = /* @__PURE__ */ state("");
+  let navigationAnswerRaw = /* @__PURE__ */ state("");
+  let navigationAltText = /* @__PURE__ */ state("");
   let leftButtonDesktopEl = /* @__PURE__ */ state(null);
   let leftButtonMobileEl = /* @__PURE__ */ state(null);
   let isLeftPressed = /* @__PURE__ */ state(false);
@@ -7036,21 +7059,20 @@ function MCQImageModal($$anchor, $$props) {
       tick().then(checkTextTruncation);
     }
   });
-  const createNavigationAnnouncement = (option) => {
-    const answerText = option?.answer ? useRemoveRichTextHtmlTags(option.answer) : "";
-    const altText = option?.media?.alternative_text || "";
-    return `${answerText} , ${altText}`;
+  const updateNavigationAnnouncement = (option) => {
+    set(navigationAnswerRaw, option?.answer ?? "", true);
+    set(navigationAltText, option?.media?.alternative_text ?? "", true);
   };
   const navigatePrevious = () => {
     if (!options() || options().length === 0) return;
     const newIndex = (currentIndex() - 1 + options().length) % options().length;
-    set(navigationAnnouncement, createNavigationAnnouncement(options()[newIndex]), true);
+    updateNavigationAnnouncement(options()[newIndex]);
     onnavigate()?.({ index: newIndex });
   };
   const navigateNext = () => {
     if (!options() || options().length === 0) return;
     const newIndex = (currentIndex() + 1) % options().length;
-    set(navigationAnnouncement, createNavigationAnnouncement(options()[newIndex]), true);
+    updateNavigationAnnouncement(options()[newIndex]);
     onnavigate()?.({ index: newIndex });
   };
   const closeModal = () => {
@@ -7085,7 +7107,7 @@ function MCQImageModal($$anchor, $$props) {
   };
   user_effect(() => {
     if (isOpen() && get$1(currentOption)) {
-      set(navigationAnnouncement, createNavigationAnnouncement(get$1(currentOption)), true);
+      updateNavigationAnnouncement(get$1(currentOption));
     }
   });
   user_effect(() => {
@@ -7161,7 +7183,7 @@ function MCQImageModal($$anchor, $$props) {
   var fragment = comment();
   var node = first_child(fragment);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_2 = ($$anchor2) => {
       CommonModal($$anchor2, {
         get modalData() {
           return get$1(imageModalData);
@@ -7171,15 +7193,31 @@ 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$d();
+          var div = root_2$f();
           var div_1 = child(div);
           var div_2 = child(div_1);
-          var text = child(div_2, true);
+          var node_1 = child(div_2);
+          CommonStringToHtml(node_1, {
+            get htmlString() {
+              return get$1(navigationAnswerRaw);
+            }
+          });
+          var node_2 = sibling(node_1, 2);
+          {
+            var consequent = ($$anchor4) => {
+              var text$1 = text();
+              template_effect(() => set_text(text$1, `, ${get$1(navigationAltText) ?? ""}`));
+              append($$anchor4, text$1);
+            };
+            if_block(node_2, ($$render) => {
+              if (get$1(navigationAltText)) $$render(consequent);
+            });
+          }
           reset(div_2);
           var div_3 = sibling(div_2, 2);
-          var node_1 = sibling(child(div_3), 2);
+          var node_3 = sibling(child(div_3), 2);
           bind_this(
-            CommonButton(node_1, {
+            CommonButton(node_3, {
               variant: "standard",
               transparent: true,
               ariaLabel: "Previous",
@@ -7190,9 +7228,9 @@ function MCQImageModal($$anchor, $$props) {
               dataTestId: "img-viewer-prev",
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
-                var span = root_3$c();
-                var node_2 = child(span);
-                SvgLoader(node_2, {
+                var span = root_4$8();
+                var node_4 = child(span);
+                SvgLoader(node_4, {
                   svgName: "smallChevronLeft",
                   className: "text-primary-emphasis",
                   width: 12,
@@ -7206,8 +7244,8 @@ function MCQImageModal($$anchor, $$props) {
             ($$value) => set(leftButtonDesktopEl, $$value, true),
             () => get$1(leftButtonDesktopEl)
           );
-          var node_3 = sibling(node_1, 2);
-          CommonButton(node_3, {
+          var node_5 = sibling(node_3, 2);
+          CommonButton(node_5, {
             variant: "standard",
             transparent: true,
             ariaLabel: "Next",
@@ -7218,9 +7256,9 @@ function MCQImageModal($$anchor, $$props) {
             dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
-              var span_1 = root_4$7();
-              var node_4 = child(span_1);
-              SvgLoader(node_4, {
+              var span_1 = root_5$8();
+              var node_6 = child(span_1);
+              SvgLoader(node_6, {
                 svgName: "smallChevronRight",
                 className: "text-primary-emphasis",
                 width: 12,
@@ -7231,12 +7269,12 @@ function MCQImageModal($$anchor, $$props) {
             },
             $$slots: { default: true }
           });
-          var div_4 = sibling(node_3, 2);
+          var div_4 = sibling(node_5, 2);
           var div_5 = child(div_4);
-          var node_5 = child(div_5);
+          var node_7 = child(div_5);
           {
             let $0 = /* @__PURE__ */ user_derived(() => !get$1(isTextTruncated));
-            CommonTooltip(node_5, {
+            CommonTooltip(node_7, {
               placement: "bottom",
               trigger: "hover",
               get disabled() {
@@ -7246,24 +7284,43 @@ function MCQImageModal($$anchor, $$props) {
                 return get$1(fullAnswerText);
               },
               children: ($$anchor4, $$slotProps2) => {
-                var div_6 = root_5$9();
-                var span_2 = child(div_6);
-                var node_6 = child(span_2);
+                var div_6 = root_6$5();
+                var node_8 = child(div_6);
+                {
+                  var consequent_1 = ($$anchor5) => {
+                    var span_2 = root_7$5();
+                    var node_9 = child(span_2);
+                    {
+                      let $02 = /* @__PURE__ */ user_derived(() => get$1(currentOption)?.answer);
+                      CommonStringToHtml(node_9, {
+                        get htmlString() {
+                          return get$1($02);
+                        }
+                      });
+                    }
+                    reset(span_2);
+                    append($$anchor5, span_2);
+                  };
+                  if_block(node_8, ($$render) => {
+                    if (get$1(isTextTruncated)) $$render(consequent_1);
+                  });
+                }
+                var span_3 = sibling(node_8, 2);
+                var node_10 = child(span_3);
                 {
                   let $02 = /* @__PURE__ */ user_derived(() => get$1(currentOption)?.answer);
-                  CommonStringToHtml(node_6, {
+                  CommonStringToHtml(node_10, {
                     get htmlString() {
                       return get$1($02);
                     },
                     dataTestId: "mcq-img-viewer-lbl"
                   });
                 }
-                reset(span_2);
+                reset(span_3);
                 reset(div_6);
                 bind_this(div_6, ($$value) => set(textElement, $$value), () => get$1(textElement));
                 template_effect(() => {
                   set_attribute(div_6, "tabindex", get$1(isTextTruncated) ? 0 : void 0);
-                  set_attribute(div_6, "aria-label", get$1(isTextTruncated) ? get$1(fullAnswerText) : void 0);
                   set_class(div_6, 1, `break-all text-sm md:text-lg font-semibold text-primary-emphasis ${get$1(isTextTruncated) ? "hover:text-charcoal hover:underline hover:decoration-2 hover:underline-offset-[25%] focus-visible:bg-yellow-900 focus-visible:outline-none focus-visible:underline focus-visible:decoration-2 focus-visible:underline-offset-[25%] focus-visible:text-charcoal coarse:active:bg-yellow-900" : ""} select-none line-clamp-1`);
                 });
                 append($$anchor4, div_6);
@@ -7271,8 +7328,8 @@ function MCQImageModal($$anchor, $$props) {
               $$slots: { default: true }
             });
           }
-          var node_7 = sibling(node_5, 2);
-          CommonButton(node_7, {
+          var node_11 = sibling(node_7, 2);
+          CommonButton(node_11, {
             variant: "standard",
             ariaLabel: "Close",
             className: "flex-shrink-0 hidden md:flex",
@@ -7286,8 +7343,8 @@ function MCQImageModal($$anchor, $$props) {
             },
             $$slots: { default: true }
           });
-          var node_8 = sibling(node_7, 2);
-          CommonButton(node_8, {
+          var node_12 = sibling(node_11, 2);
+          CommonButton(node_12, {
             variant: "touch-target",
             ariaLabel: "Close",
             className: "flex-shrink-0 md:hidden -mr-2.5",
@@ -7308,9 +7365,9 @@ function MCQImageModal($$anchor, $$props) {
           reset(div_7);
           reset(div_4);
           var div_8 = sibling(div_4, 2);
-          var node_9 = child(div_8);
+          var node_13 = child(div_8);
           bind_this(
-            CommonButton(node_9, {
+            CommonButton(node_13, {
               variant: "touch-target",
               transparent: true,
               ariaLabel: "Previous",
@@ -7321,23 +7378,23 @@ function MCQImageModal($$anchor, $$props) {
               dataTestId: "img-viewer-prev",
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
-                var span_3 = root_8$6();
-                var node_10 = child(span_3);
-                SvgLoader(node_10, {
+                var span_4 = root_10$3();
+                var node_14 = child(span_4);
+                SvgLoader(node_14, {
                   svgName: "smallChevronLeft",
                   className: "text-primary-emphasis",
                   height: 7.43
                 });
-                reset(span_3);
-                append($$anchor4, span_3);
+                reset(span_4);
+                append($$anchor4, span_4);
               },
               $$slots: { default: true }
             }),
             ($$value) => set(leftButtonMobileEl, $$value, true),
             () => get$1(leftButtonMobileEl)
           );
-          var node_11 = sibling(node_9, 2);
-          CommonButton(node_11, {
+          var node_15 = sibling(node_13, 2);
+          CommonButton(node_15, {
             variant: "touch-target",
             transparent: true,
             ariaLabel: "Next",
@@ -7348,15 +7405,15 @@ function MCQImageModal($$anchor, $$props) {
             dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
-              var span_4 = root_9$4();
-              var node_12 = child(span_4);
-              SvgLoader(node_12, {
+              var span_5 = root_11$2();
+              var node_16 = child(span_5);
+              SvgLoader(node_16, {
                 svgName: "smallChevronRight",
                 className: "text-primary-emphasis",
                 height: 7.43
               });
-              reset(span_4);
-              append($$anchor4, span_4);
+              reset(span_5);
+              append($$anchor4, span_5);
             },
             $$slots: { default: true }
           });
@@ -7365,7 +7422,6 @@ function MCQImageModal($$anchor, $$props) {
           reset(div_1);
           reset(div);
           template_effect(() => {
-            set_text(text, get$1(navigationAnnouncement));
             set_class(div_4, 1, `bg-white rounded-lg flex flex-col max-w-full md:max-w-[calc(100vw-164px)] lg:max-w-[calc(100vw-248px)] max-h-[calc(100vh-168px)] md:max-h-[calc(100vh-128px)] lg:max-h-[calc(100vh-192px)] ${get$1(isImageLoaded) ? "" : "opacity-0"}`);
             set_style(div_4, `max-width: ${get$1(containerMaxWidth) ?? ""};`);
             set_attribute(img, "src", get$1(currentImageUrl));
@@ -7379,7 +7435,7 @@ function MCQImageModal($$anchor, $$props) {
       });
     };
     if_block(node, ($$render) => {
-      if (isOpen()) $$render(consequent);
+      if (isOpen()) $$render(consequent_2);
     });
   }
   append($$anchor, fragment);
@@ -7559,10 +7615,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_4$6 = /* @__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$5 = /* @__PURE__ */ from_html(`<div></div>`);
-var root_2$c = /* @__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_5$7 = /* @__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$4 = /* @__PURE__ */ from_html(`<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);
@@ -7696,10 +7752,10 @@ function PromptStimulusImageModal($$anchor, $$props) {
         dataTestId: "img-viewer-mdl",
         onupdateModalSettings: updateModalSettings,
         children: ($$anchor3, $$slotProps) => {
-          var div = root_2$c();
+          var div = root_2$e();
           var div_1 = child(div);
           var div_2 = child(div_1);
-          var text = child(div_2, true);
+          var text2 = child(div_2, true);
           reset(div_2);
           var div_3 = sibling(div_2, 2);
           var div_4 = child(div_3);
@@ -7725,7 +7781,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
           var node_2 = sibling(div_4, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var fragment_3 = root_4$6();
+              var fragment_3 = root_4$7();
               var div_5 = first_child(fragment_3);
               var text_1 = child(div_5, true);
               reset(div_5);
@@ -7733,7 +7789,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$7();
                   template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_6);
                 };
@@ -7752,7 +7808,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_4 = first_child(fragment_4);
               {
                 var consequent_2 = ($$anchor5) => {
-                  var div_7 = root_7$5();
+                  var div_7 = root_7$4();
                   template_effect(() => set_style(div_7, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_7);
                 };
@@ -7775,7 +7831,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
           reset(div_1);
           reset(div);
           template_effect(() => {
-            set_text(text, get$1(modalAnnouncement));
+            set_text(text2, get$1(modalAnnouncement));
             set_style(div_3, `max-height:${get$1(scrollMaxHeight) ?? ""}`);
             set_style(div_4, get$1(containerStyle));
             set_attribute(img, "src", imageUrl());
@@ -8215,9 +8271,9 @@ const getViewTemplate = (context) => templates.find((template) => template.match
 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$5 = /* @__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$b = /* @__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_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$6 = /* @__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);
@@ -8309,7 +8365,7 @@ function CommonMedia($$anchor, $$props) {
       var node_1 = child(div);
       {
         var consequent_2 = ($$anchor3) => {
-          var fragment_1 = root_2$b();
+          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);
@@ -8334,10 +8390,10 @@ function CommonMedia($$anchor, $$props) {
           var node_3 = sibling(div_3, 2);
           {
             var consequent = ($$anchor4) => {
-              var p = root_4$5();
-              var text = child(p, true);
+              var p = root_4$6();
+              var text2 = child(p, true);
               reset(p);
-              template_effect(() => set_text(text, fileCaption()));
+              template_effect(() => set_text(text2, fileCaption()));
               append($$anchor4, p);
             };
             if_block(node_3, ($$render) => {
@@ -8349,7 +8405,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$6();
               var button = child(div_4);
               button.__click = toggleLongDescription;
               button.__keydown = handleKeyDown;
@@ -8437,12 +8493,12 @@ create_custom_element(
   [],
   true
 );
-var root_4$4 = /* @__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_4$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
+var root_5$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
 var root_3$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_7$4 = /* @__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$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_7$3 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_8$7 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
+var root_6$4 = /* @__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);
@@ -8535,7 +8591,7 @@ function StimulusSection($$anchor, $$props) {
           var node_3 = first_child(fragment_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_2 = root_4$4();
+              var div_2 = root_4$5();
               var node_4 = child(div_2);
               CommonStringToHtml(node_4, {
                 get htmlString() {
@@ -8556,7 +8612,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$5();
               let classes_2;
               var node_6 = child(div_3);
               CommonMedia(node_6, {
@@ -8591,11 +8647,11 @@ function StimulusSection($$anchor, $$props) {
           append($$anchor3, fragment_2);
         };
         var alternate = ($$anchor3) => {
-          var fragment_3 = root_6$3();
+          var fragment_3 = root_6$4();
           var node_7 = first_child(fragment_3);
           {
             var consequent_4 = ($$anchor4) => {
-              var div_4 = root_7$4();
+              var div_4 = root_7$3();
               let classes_3;
               var node_8 = child(div_4);
               CommonMedia(node_8, {
@@ -8630,7 +8686,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$7();
               var node_10 = child(div_5);
               CommonStringToHtml(node_10, {
                 get htmlString() {
@@ -8679,8 +8735,8 @@ create_custom_element(
   [],
   true
 );
-var root_8$4 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
-var root_13$2 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
+var root_8$6 = /* @__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>`);
 var root_16$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
@@ -8858,7 +8914,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$6();
                     append($$anchor6, div_4);
                   };
                   var alternate_2 = ($$anchor6) => {
@@ -8881,7 +8937,7 @@ function PromptContainer($$anchor, $$props) {
                         var node_6 = first_child(fragment_10);
                         {
                           var consequent_5 = ($$anchor8) => {
-                            var div_5 = root_13$2();
+                            var div_5 = root_13$3();
                             append($$anchor8, div_5);
                           };
                           var alternate = ($$anchor8) => {
@@ -9067,15 +9123,18 @@ create_custom_element(
   [],
   true
 );
-var root_1$g = /* @__PURE__ */ from_html(`<span> </span>`);
-var root_2$a = /* @__PURE__ */ from_html(`<span>Missing answer</span>`);
-var root_3$a = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
-var root_4$3 = /* @__PURE__ */ from_html(`<p class="text-red-400 text-sm font-semibold leading-[1.3] pr-2.5 hidden md:block"> </p>`);
-var root_5$5 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
-var root_9$3 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
-var root_8$3 = /* @__PURE__ */ from_html(`<span><!></span>`);
-var root_10$3 = /* @__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$e = /* @__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>`);
+var root_1$g = /* @__PURE__ */ from_html(`<div class="sr-only" tabindex="-1"><!></div>`);
+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$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_6$3 = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
+var root_7$2 = /* @__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$5 = /* @__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>`);
+var root$e = /* @__PURE__ */ from_html(`<div class="relative"><!> <button><span><span class="flex items-center justify-between w-full"><span class="flex items-center"><span aria-hidden="true"> </span> <span class="flex flex-col px-3 text-left"><!> <!> <!> <!> <!></span></span> <span class="flex items-center"><!> <!> <!> <!></span></span></span> <!></button> <!></div>`);
 function MCQOption($$anchor, $$props) {
   push($$props, true);
   let option = prop($$props, "option", 7), index2 = prop($$props, "index", 7), config = prop($$props, "config", 7), state2 = prop($$props, "state", 7), optionHasMedia = prop($$props, "optionHasMedia", 7, false), onOptionClick = prop($$props, "onOptionClick", 7), onExpandImage = prop($$props, "onExpandImage", 7);
@@ -9086,10 +9145,27 @@ function MCQOption($$anchor, $$props) {
   let mode = /* @__PURE__ */ user_derived(() => get$1(sharedState).mode);
   let isPreviewMode2 = /* @__PURE__ */ user_derived(() => get$1(mode) === MODES.PREVIEW);
   let isInteractiveMode2 = /* @__PURE__ */ user_derived(() => get$1(mode) === MODES.INTERACTIVE);
-  const getAriaLabel = () => {
-    if (!get$1(optionState)) {
-      return `Option ${useAlphabetEquivalent(index2())}: ${useRemoveRichTextHtmlTags(option().answer)}`;
+  let optionHasMath = /* @__PURE__ */ user_derived(() => hasMathJax(option().answer));
+  let labelPrefix = /* @__PURE__ */ user_derived(() => (() => {
+    const isSelected = (!get$1(optionState)?.isFinished || get$1(isInteractiveMode2)) && (get$1(optionState)?.isSelected ?? false);
+    return `${isSelected ? "Selected " : ""}Option ${useAlphabetEquivalent(index2())}: `;
+  })());
+  let labelSuffix = /* @__PURE__ */ user_derived(() => (() => {
+    if (!get$1(optionState)) return "";
+    const selectedOptions = state2().data.selectedOptions ?? [];
+    if (get$1(optionState).isFinished && !get$1(isPreviewMode2) && !get$1(isInteractiveMode2)) {
+      if (get$1(optionState).isCorrect) return get$1(optionState).isSelected ? "(Correct answer)" : "(Missing Answer)";
+      if (get$1(optionState).isSelected) return "(Incorrect answer)";
+    } else if (get$1(isPreviewMode2) && !get$1(isInteractiveMode2)) {
+      if (get$1(optionState).isCorrect) return "(Correct answer)";
+    } else if (get$1(isInteractiveMode2) && selectedOptions.length === get$1(totalCorrectAnswers)) {
+      if (get$1(optionState).isSelected) return get$1(optionState).isCorrect ? "(Correct answer)" : "(Incorrect answer)";
+      if (get$1(optionState).isCorrect) return "(Missing Answer)";
     }
+    return "";
+  })());
+  function getAriaLabel() {
+    if (!get$1(optionState)) return `Option ${useAlphabetEquivalent(index2())}: ${useRemoveRichTextHtmlTags(option().answer)}`;
     const selectedOptions = state2().data.selectedOptions ?? [];
     let label = `${(!get$1(optionState).isFinished || get$1(isInteractiveMode2)) && get$1(optionState).isSelected ? "Selected " : ""}Option ${useAlphabetEquivalent(index2())}: ${useRemoveRichTextHtmlTags(option().answer)}`;
     if (get$1(optionState).isFinished && !get$1(isPreviewMode2) && !get$1(isInteractiveMode2)) {
@@ -9110,8 +9186,11 @@ function MCQOption($$anchor, $$props) {
       }
     }
     return label;
-  };
-  let ariaLabel = /* @__PURE__ */ user_derived(() => get$1(optionState) ? getAriaLabel() : `Option ${useAlphabetEquivalent(index2())}: ${useRemoveRichTextHtmlTags(option().answer)}`);
+  }
+  let ariaLabel = /* @__PURE__ */ user_derived(() => get$1(optionHasMath) ? null : getAriaLabel());
+  let mathLabelId = `mcq-opt-math-label-${index2()}`;
+  let mathAriaLabelledBy = /* @__PURE__ */ user_derived(() => get$1(optionHasMath) && get$1(optionState)?.isSelected ? mathLabelId : null);
+  let mathLabelString = /* @__PURE__ */ user_derived(() => `${get$1(labelPrefix)}${option().answer}${get$1(labelSuffix) ? " " + get$1(labelSuffix) : ""}`);
   var $$exports = {
     get option() {
       return option();
@@ -9164,19 +9243,37 @@ function MCQOption($$anchor, $$props) {
     }
   };
   var div = root$e();
-  var button = child(div);
+  var node = child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var div_1 = root_1$g();
+      var node_1 = child(div_1);
+      CommonStringToHtml(node_1, {
+        get htmlString() {
+          return get$1(mathLabelString);
+        }
+      });
+      reset(div_1);
+      template_effect(() => set_attribute(div_1, "id", mathLabelId));
+      append($$anchor2, div_1);
+    };
+    if_block(node, ($$render) => {
+      if (get$1(optionHasMath) && get$1(optionState)?.isSelected) $$render(consequent);
+    });
+  }
+  var button = sibling(node, 2);
   button.__click = () => onOptionClick()(option().id, option().answer);
   var span = child(button);
   var span_1 = child(span);
   var span_2 = child(span_1);
   var span_3 = child(span_2);
-  var text = child(span_3, true);
+  var text2 = child(span_3, true);
   reset(span_3);
   var span_4 = sibling(span_3, 2);
-  var node = child(span_4);
+  var node_2 = child(span_4);
   {
-    var consequent = ($$anchor2) => {
-      var span_5 = root_1$g();
+    var consequent_1 = ($$anchor2) => {
+      var span_5 = root_2$c();
       var text_1 = child(span_5, true);
       reset(span_5);
       template_effect(() => {
@@ -9186,64 +9283,90 @@ function MCQOption($$anchor, $$props) {
       });
       append($$anchor2, span_5);
     };
-    if_block(node, ($$render) => {
-      if (get$1(optionState)?.showStudentLabel && !get$1(correctAnswerIds).includes(option().id)) $$render(consequent);
+    if_block(node_2, ($$render) => {
+      if (get$1(optionState)?.showStudentLabel && !get$1(correctAnswerIds).includes(option().id)) $$render(consequent_1);
     });
   }
-  var node_1 = sibling(node, 2);
+  var node_3 = sibling(node_2, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_6 = root_2$a();
+    var consequent_2 = ($$anchor2) => {
+      var span_6 = root_3$a();
       template_effect(() => set_class(span_6, 1, `text-green-750 text-sm mb-0.5 font-semibold leading-[1.3]
               ${optionHasMedia() ? "" : "md:hidden"}`));
       append($$anchor2, span_6);
     };
-    if_block(node_1, ($$render) => {
-      if (get$1(optionState)?.showMissingAnswerLabel) $$render(consequent_1);
+    if_block(node_3, ($$render) => {
+      if (get$1(optionState)?.showMissingAnswerLabel) $$render(consequent_2);
     });
   }
-  var node_2 = sibling(node_1, 2);
-  CommonStringToHtml(node_2, {
+  var node_4 = sibling(node_3, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var span_7 = root_4$4();
+      var text_2 = child(span_7, true);
+      reset(span_7);
+      template_effect(() => set_text(text_2, get$1(labelPrefix)));
+      append($$anchor2, span_7);
+    };
+    if_block(node_4, ($$render) => {
+      if (get$1(optionHasMath)) $$render(consequent_3);
+    });
+  }
+  var node_5 = sibling(node_4, 2);
+  CommonStringToHtml(node_5, {
     otherClass: "overflow-hidden text-ellipsis line-clamp-3",
     get htmlString() {
       return option().answer;
     }
   });
+  var node_6 = sibling(node_5, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var span_8 = root_5$4();
+      var text_3 = child(span_8, true);
+      reset(span_8);
+      template_effect(() => set_text(text_3, get$1(labelSuffix)));
+      append($$anchor2, span_8);
+    };
+    if_block(node_6, ($$render) => {
+      if (get$1(optionHasMath) && get$1(labelSuffix)) $$render(consequent_4);
+    });
+  }
   reset(span_4);
   reset(span_2);
-  var span_7 = sibling(span_2, 2);
-  var node_3 = child(span_7);
+  var span_9 = sibling(span_2, 2);
+  var node_7 = child(span_9);
   {
-    var consequent_2 = ($$anchor2) => {
-      var p = root_3$a();
+    var consequent_5 = ($$anchor2) => {
+      var p = root_6$3();
       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);
     };
-    if_block(node_3, ($$render) => {
-      if (get$1(optionState)?.showMissingAnswerLabel && !optionHasMedia()) $$render(consequent_2);
+    if_block(node_7, ($$render) => {
+      if (get$1(optionState)?.showMissingAnswerLabel && !optionHasMedia()) $$render(consequent_5);
     });
   }
-  var node_4 = sibling(node_3, 2);
+  var node_8 = sibling(node_7, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var p_1 = root_4$3();
-      var text_2 = child(p_1, true);
+    var consequent_6 = ($$anchor2) => {
+      var p_1 = root_7$2();
+      var text_4 = child(p_1, true);
       reset(p_1);
-      template_effect(() => set_text(text_2, get$1(isInteractiveMode2) ? "Your answer" : get$1(isPreviewMode2) ? "" : "Student's answer"));
+      template_effect(() => set_text(text_4, get$1(isInteractiveMode2) ? "Your answer" : get$1(isPreviewMode2) ? "" : "Student's answer"));
       append($$anchor2, p_1);
     };
-    if_block(node_4, ($$render) => {
-      if (get$1(optionState)?.showStudentLabel && !get$1(correctAnswerIds).includes(option().id) && !optionHasMedia()) $$render(consequent_3);
+    if_block(node_8, ($$render) => {
+      if (get$1(optionState)?.showStudentLabel && !get$1(correctAnswerIds).includes(option().id) && !optionHasMedia()) $$render(consequent_6);
     });
   }
-  var node_5 = sibling(node_4, 2);
+  var node_9 = sibling(node_8, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var span_8 = root_5$5();
-      var node_6 = child(span_8);
+    var consequent_8 = ($$anchor2) => {
+      var span_10 = root_8$5();
+      var node_10 = child(span_10);
       {
-        var consequent_4 = ($$anchor3) => {
+        var consequent_7 = ($$anchor3) => {
           SvgLoader($$anchor3, {
             svgName: "successSolid",
             className: "correct-icon",
@@ -9257,74 +9380,74 @@ function MCQOption($$anchor, $$props) {
             dataTestId: "icon-incorrect"
           });
         };
-        if_block(node_6, ($$render) => {
-          if (get$1(correctAnswerIds).includes(option().id) || get$1(isPreviewMode2) && !get$1(isInteractiveMode2)) $$render(consequent_4);
+        if_block(node_10, ($$render) => {
+          if (get$1(correctAnswerIds).includes(option().id) || get$1(isPreviewMode2) && !get$1(isInteractiveMode2)) $$render(consequent_7);
           else $$render(alternate, false);
         });
       }
-      reset(span_8);
-      template_effect(($0) => set_class(span_8, 1, `${$0 ?? ""} p-0.5`), [
+      reset(span_10);
+      template_effect(($0) => set_class(span_10, 1, `${$0 ?? ""} p-0.5`), [
         () => get$1(correctAnswerIds).includes(option().id) || get$1(isPreviewMode2) && !get$1(isInteractiveMode2) ? "text-green-700" : "text-red-850"
       ]);
-      append($$anchor2, span_8);
+      append($$anchor2, span_10);
     };
-    if_block(node_5, ($$render) => {
-      if (get$1(optionState)?.showResultIcon) $$render(consequent_5);
+    if_block(node_9, ($$render) => {
+      if (get$1(optionState)?.showResultIcon) $$render(consequent_8);
     });
   }
-  var node_7 = sibling(node_5, 2);
+  var node_11 = sibling(node_9, 2);
   {
-    var consequent_7 = ($$anchor2) => {
-      var span_9 = root_8$3();
-      var node_8 = child(span_9);
+    var consequent_10 = ($$anchor2) => {
+      var span_11 = root_11$1();
+      var node_12 = child(span_11);
       {
-        var consequent_6 = ($$anchor3) => {
-          var span_10 = root_9$3();
-          var node_9 = child(span_10);
-          SvgLoader(node_9, {
+        var consequent_9 = ($$anchor3) => {
+          var span_12 = root_12$3();
+          var node_13 = child(span_12);
+          SvgLoader(node_13, {
             svgName: "successRounded",
             className: "selected-icon",
             dataTestId: "icon-check-selected"
           });
-          reset(span_10);
-          append($$anchor3, span_10);
+          reset(span_12);
+          append($$anchor3, span_12);
         };
-        if_block(node_8, ($$render) => {
-          if (get$1(optionState)?.isSelected) $$render(consequent_6);
+        if_block(node_12, ($$render) => {
+          if (get$1(optionState)?.isSelected) $$render(consequent_9);
         });
       }
-      reset(span_9);
-      template_effect(() => set_class(span_9, 1, clsx(get$1(optionState)?.checkboxClasses || "custom-checkbox border-gray-850")));
-      append($$anchor2, span_9);
+      reset(span_11);
+      template_effect(() => set_class(span_11, 1, clsx(get$1(optionState)?.checkboxClasses || "custom-checkbox border-gray-850")));
+      append($$anchor2, span_11);
     };
-    if_block(node_7, ($$render) => {
-      if (get$1(optionState)?.showCheckbox) $$render(consequent_7);
+    if_block(node_11, ($$render) => {
+      if (get$1(optionState)?.showCheckbox) $$render(consequent_10);
     });
   }
-  reset(span_7);
+  reset(span_9);
   reset(span_1);
   reset(span);
-  var node_10 = sibling(span, 2);
+  var node_14 = sibling(span, 2);
   {
-    var consequent_8 = ($$anchor2) => {
-      var div_1 = root_10$3();
-      var img = child(div_1);
-      reset(div_1);
+    var consequent_11 = ($$anchor2) => {
+      var div_2 = root_13$2();
+      var img = child(div_2);
+      reset(div_2);
       template_effect(() => {
         set_attribute(img, "id", `img-${index2() ?? ""}`);
         set_attribute(img, "alt", `Graphic, ${(option().media?.alternative_text || "") ?? ""}`);
         set_attribute(img, "src", option().media.file.url);
       });
-      append($$anchor2, div_1);
+      append($$anchor2, div_2);
     };
-    if_block(node_10, ($$render) => {
-      if (optionHasMedia() && option().media) $$render(consequent_8);
+    if_block(node_14, ($$render) => {
+      if (optionHasMedia() && option().media) $$render(consequent_11);
     });
   }
   reset(button);
-  var node_11 = sibling(button, 2);
+  var node_15 = sibling(button, 2);
   {
-    var consequent_9 = ($$anchor2) => {
+    var consequent_12 = ($$anchor2) => {
       CommonButton($$anchor2, {
         variant: "touch-target",
         ariaLabel: "Expand image",
@@ -9345,8 +9468,8 @@ function MCQOption($$anchor, $$props) {
         $$slots: { default: true }
       });
     };
-    if_block(node_11, ($$render) => {
-      if (optionHasMedia()) $$render(consequent_9);
+    if_block(node_15, ($$render) => {
+      if (optionHasMedia()) $$render(consequent_12);
     });
   }
   reset(div);
@@ -9358,11 +9481,12 @@ 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_attribute(button, "aria-labelledby", get$1(mathAriaLabelledBy));
       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, $0);
+      set_text(text2, $0);
     },
     [() => useAlphabetEquivalent(index2())]
   );
@@ -9385,9 +9509,9 @@ create_custom_element(
   [],
   true
 );
-var root_2$9 = /* @__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$2 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-center p-4"><div class="text-gray-500">Loading...</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) {
   push($$props, true);
   let config = prop($$props, "config", 7), state2 = prop($$props, "state", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), onoptionClick = prop($$props, "onoptionClick", 7), onExpandImage = prop($$props, "onExpandImage", 7);
@@ -9445,7 +9569,7 @@ function MCQInteractionContent($$anchor, $$props) {
       var node_1 = child(div);
       {
         var consequent = ($$anchor3) => {
-          var div_1 = root_2$9();
+          var div_1 = root_2$b();
           append($$anchor3, div_1);
         };
         if_block(node_1, ($$render) => {
@@ -9481,7 +9605,7 @@ function MCQInteractionContent($$anchor, $$props) {
       append($$anchor2, div);
     };
     var alternate = ($$anchor2) => {
-      var div_3 = root_4$2();
+      var div_3 = root_4$3();
       append($$anchor2, div_3);
     };
     if_block(node, ($$render) => {
@@ -10103,7 +10227,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$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_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);
@@ -10209,12 +10333,12 @@ function TypeInInlineField($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var label = root_1$e();
       var span_1 = sibling(child(label), 2);
-      var text = child(span_1, true);
+      var text2 = child(span_1, true);
       reset(span_1);
       reset(label);
       template_effect(() => {
         set_attribute(label, "for", `inline-${index2() ?? ""}`);
-        set_text(text, get$1(blankNumber));
+        set_text(text2, get$1(blankNumber));
       });
       append($$anchor2, label);
     };
@@ -10229,7 +10353,7 @@ function TypeInInlineField($$anchor, $$props) {
   var node_1 = sibling(input, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var span_2 = root_2$8();
+      var span_2 = root_2$a();
       var node_2 = child(span_2);
       {
         let $0 = /* @__PURE__ */ user_derived(() => Boolean(isCorrect()));
@@ -10282,9 +10406,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$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$7 = /* @__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_4$1 = /* @__PURE__ */ from_html(`<div class="relative"><input autocomplete="off"/> <!></div>`);
+var root_2$9 = /* @__PURE__ */ from_html(`<div class="relative"><textarea autocomplete="off" rows="3"></textarea> <!></div>`);
+var root_5$3 = /* @__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) {
   push($$props, true);
@@ -10427,7 +10551,7 @@ function TypeInTextField($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_1 = root_2$7();
+      var div_1 = root_2$9();
       var textarea = child(div_1);
       remove_textarea_child(textarea);
       textarea.__mousedown = handleMouseDown;
@@ -10478,7 +10602,7 @@ function TypeInTextField($$anchor, $$props) {
       append($$anchor2, div_1);
     };
     var alternate = ($$anchor2) => {
-      var div_2 = root_4$1();
+      var div_2 = root_4$2();
       var input = child(div_2);
       remove_input_defaults(input);
       input.__mousedown = handleMouseDown;
@@ -10487,7 +10611,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$3();
           var node_5 = child(span_1);
           {
             let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
@@ -10621,9 +10745,9 @@ 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$6 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
-var root_4 = /* @__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_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$2 = /* @__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$a = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
 function AnswerDisplay($$anchor, $$props) {
@@ -10760,7 +10884,7 @@ function AnswerDisplay($$anchor, $$props) {
       var label = root_1$c();
       var span = child(label);
       var span_1 = sibling(span, 2);
-      var text = child(span_1, true);
+      var text2 = child(span_1, true);
       reset(span_1);
       reset(label);
       template_effect(() => {
@@ -10768,7 +10892,7 @@ function AnswerDisplay($$anchor, $$props) {
         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());
+        set_text(text2, questionNumber());
       });
       append($$anchor2, label);
     };
@@ -10779,7 +10903,7 @@ function AnswerDisplay($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_2$6();
+      var div_1 = root_2$8();
       var node_2 = child(div_1);
       CommonStringToHtml(node_2, {
         get htmlString() {
@@ -10809,7 +10933,7 @@ function AnswerDisplay($$anchor, $$props) {
       var node_3 = first_child(fragment);
       {
         var consequent_2 = ($$anchor3) => {
-          var div_2 = root_4();
+          var div_2 = root_4$1();
           var node_4 = child(div_2);
           CommonStringToHtml(node_4, {
             get htmlString() {
@@ -10827,12 +10951,12 @@ function AnswerDisplay($$anchor, $$props) {
           append($$anchor3, div_2);
         };
         var alternate = ($$anchor3) => {
-          var textarea = root_5$3();
+          var textarea = root_5$2();
           remove_textarea_child(textarea);
           action$1(textarea, ($$node) => action?.($$node));
           template_effect(() => {
             set_attribute(textarea, "aria-label", get$1(ariaLabel));
-            set_class(textarea, 1, 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));
@@ -11140,7 +11264,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$5 = /* @__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);
@@ -11251,7 +11375,7 @@ function TypeInFeedback($$anchor, $$props) {
   var node_2 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_1 = root_2$5();
+      var div_1 = root_2$7();
       var node_3 = child(div_1);
       {
         let $0 = /* @__PURE__ */ user_derived(() => feedbackState().isResultCorrect ? "correct" : feedbackState().isSkipped ? "skipped" : "incorrect");
@@ -11327,12 +11451,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$4 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
+var root_8$4 = /* @__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);
@@ -11567,7 +11691,7 @@ function TypeInComponent($$anchor, $$props) {
       var node = first_child(fragment_1);
       {
         var consequent_3 = ($$anchor3) => {
-          var div = root_2$4();
+          var div = root_2$6();
           var node_1 = child(div);
           each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
             var p_1 = root_3$7();
@@ -11641,7 +11765,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$4();
               append($$anchor4, div_1);
             };
             if_block(node_5, ($$render) => {
@@ -11653,7 +11777,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) => {
@@ -11724,7 +11848,7 @@ function TypeInComponent($$anchor, $$props) {
             });
           }
           var span = sibling(node_8, 2);
-          var text = child(span, true);
+          var text2 = child(span, true);
           reset(span);
           var node_9 = sibling(span, 2);
           {
@@ -11788,7 +11912,7 @@ function TypeInComponent($$anchor, $$props) {
               if (get$1(showMissingAnswer)) $$render(consequent_6);
             });
           }
-          template_effect(() => set_text(text, get$1(missingAnswerAnnouncement)));
+          template_effect(() => set_text(text2, get$1(missingAnswerAnnouncement)));
           append($$anchor3, fragment_6);
         };
         if_block(node, ($$render) => {
@@ -11886,8 +12010,8 @@ const createTypeInInteraction = (config, sessionData) => {
     const regexPattern = new RegExp(`^${regex}$`, "i");
     return regexPattern.test(answer.trim());
   };
-  const patternNormalizer = (text) => {
-    let s = text.toLowerCase();
+  const patternNormalizer = (text2) => {
+    let s = text2.toLowerCase();
     if (config.ignorePunctuation) {
       s = s.replace(punctuationRegex, "");
     }
@@ -14341,15 +14465,15 @@ 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="text-green-800 preview-icon"><!></span>`);
+var root_4 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
+var root_6$1 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
+var root_8$3 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
+var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><span class="sr-only"> </span> <span><!></span> <!> <div aria-hidden="true"><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);
@@ -14359,17 +14483,23 @@ 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 handleFocus = (event2) => {
     set(lastFocusTime, Date.now(), true);
@@ -14644,59 +14774,75 @@ function CategoriseItem($$anchor, $$props) {
   button.__touchend = handleTouchEnd;
   button.__keydown = handleKeyDown;
   var span = child(button);
-  var node = child(span);
+  var text2 = child(span, true);
+  reset(span);
+  var span_1 = sibling(span, 2);
+  var node = child(span_1);
   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);
+  reset(span_1);
+  var node_1 = sibling(span_1, 2);
   {
     var consequent = ($$anchor2) => {
-      var span_3 = root_1$9();
-      var node_2 = child(span_3);
-      SvgLoader(node_2, {
+      var span_2 = root_1$9();
+      var text_1 = child(span_2, true);
+      reset(span_2);
+      template_effect(($0) => set_text(text_1, $0), [() => get$1(ariaSuffix)()]);
+      append($$anchor2, span_2);
+    };
+    if_block(node_1, ($$render) => {
+      if (get$1(ariaSuffix)()) $$render(consequent);
+    });
+  }
+  var div = sibling(node_1, 2);
+  var span_3 = child(div);
+  var span_4 = sibling(span_3, 2);
+  var node_2 = child(span_4);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_5 = root_2$5();
+      var node_3 = child(span_5);
+      SvgLoader(node_3, {
         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_4 = first_child(fragment);
       {
-        var consequent_1 = ($$anchor3) => {
-          var span_4 = root_3$6();
-          var node_4 = child(span_4);
-          SvgLoader(node_4, {
+        var consequent_2 = ($$anchor3) => {
+          var span_6 = root_4();
+          var node_5 = child(span_6);
+          SvgLoader(node_5, {
             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_6 = 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_3 = ($$anchor4) => {
+              var span_7 = root_6$1();
+              var node_7 = child(span_7);
+              SvgLoader(node_7, {
                 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, {
@@ -14706,9 +14852,9 @@ function CategoriseItem($$anchor, $$props) {
               });
             };
             if_block(
-              node_5,
+              node_6,
               ($$render) => {
-                if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_2);
+                if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_3);
                 else $$render(alternate, false);
               },
               true
@@ -14717,9 +14863,9 @@ function CategoriseItem($$anchor, $$props) {
           append($$anchor3, fragment_1);
         };
         if_block(
-          node_3,
+          node_4,
           ($$render) => {
-            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_1);
+            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_2);
             else $$render(alternate_1, false);
           },
           true
@@ -14727,48 +14873,48 @@ 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_2, ($$render) => {
+      if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent_1);
       else $$render(alternate_2, false);
     });
   }
-  var node_7 = sibling(node_1, 2);
+  var node_8 = sibling(node_2, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var span_6 = root_7$3();
-      var node_8 = child(span_6);
-      SvgLoader(node_8, {
+    var consequent_4 = ($$anchor2) => {
+      var span_8 = root_8$3();
+      var node_9 = child(span_8);
+      SvgLoader(node_9, {
         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_8, ($$render) => {
+      if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(consequent_4);
     });
   }
-  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);
+      set_class(button, 1, $0);
+      set_attribute(button, "data-testid", $1);
+      set_attribute(button, "tabindex", $2);
       button.disabled = isLocked() && !resultType();
-      set_class(span, 1, $4);
+      set_text(text2, $3);
+      set_class(span_1, 1, $4);
       set_class(div, 1, $5);
-      set_class(span_1, 1, $6);
+      set_class(span_3, 1, $6);
     },
     [
-      () => get$1(ariaLabel)(),
       () => clsx(get$1(buttonClasses)()),
       () => get$1(getItemTestId)(),
       () => get$1(itemTabIndex)(),
+      () => get$1(ariaPrefix)(),
       () => clsx(get$1(textClasses)()),
       () => clsx(get$1(iconContainerClasses)()),
       () => clsx(get$1(iconBgClasses)())
@@ -14804,13 +14950,15 @@ 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_3$6 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_1$8 = /* @__PURE__ */ from_html(`<button tabindex="0"><!></button>`);
+var root_9$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
+var root_8$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, ""), 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);
@@ -14957,6 +15105,20 @@ function CategoriseDndContainer($$anchor, $$props) {
       containerLabel($$value);
       flushSync();
     },
+    get containerLabelHtml() {
+      return containerLabelHtml();
+    },
+    set containerLabelHtml($$value = "") {
+      containerLabelHtml($$value);
+      flushSync();
+    },
+    get containerIndex() {
+      return containerIndex();
+    },
+    set containerIndex($$value = 0) {
+      containerIndex($$value);
+      flushSync();
+    },
     get containerClass() {
       return containerClass();
     },
@@ -15101,17 +15263,44 @@ 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;
-      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());
-      });
+      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);
+        };
+        var alternate = ($$anchor3) => {
+          var span_1 = root_3$6();
+          var text_1 = child(span_1, true);
+          reset(span_1);
+          template_effect(() => set_text(text_1, containerLabel()));
+          append($$anchor3, span_1);
+        };
+        if_block(node_1, ($$render) => {
+          if (containerLabelHtml()) $$render(consequent);
+          else $$render(alternate, false);
+        });
+      }
+      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"}`));
       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);
@@ -15119,50 +15308,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 alternate_1 = ($$anchor2) => {
+      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_8$2();
+            var node_8 = first_child(fragment_6);
             {
-              var consequent_3 = ($$anchor5) => {
-                var div = root_7$2();
+              var consequent_4 = ($$anchor5) => {
+                var div = root_9$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;
                 },
@@ -15205,23 +15394,23 @@ 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);
-      else $$render(alternate, false);
+    if_block(node_3, ($$render) => {
+      if (get$1(isEmpty)) $$render(consequent_3);
+      else $$render(alternate_1, false);
     });
   }
   reset(section);
@@ -15243,6 +15432,8 @@ create_custom_element(
   {
     containerId: {},
     containerLabel: {},
+    containerLabelHtml: {},
+    containerIndex: {},
     containerClass: {},
     showButton: {},
     items: {},
@@ -15271,7 +15462,7 @@ create_custom_element(
 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$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$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><span class="sr-only"> </span> <!> <span class="sr-only"> </span> <!></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);
@@ -15302,7 +15493,6 @@ 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 handleToggle = () => {
     if (isMobile() && ontogglecollapse()) {
       ontogglecollapse()(categoryId());
@@ -15519,15 +15709,20 @@ function CategoriseCategory($$anchor, $$props) {
   };
   div.__click = handleContainerClick;
   var div_1 = child(div);
-  var node = child(div_1);
+  var span = child(div_1);
+  var text2 = child(span);
+  reset(span);
+  var node = sibling(span, 2);
   CommonStringToHtml(node, {
     get htmlString() {
       return categoryTitle();
     },
-    otherClass: "text-base leading-5 !text-gray-900 md:item-heading",
-    ariaHidden: true
+    otherClass: "text-base leading-5 !text-gray-900 md:item-heading"
   });
-  var node_1 = sibling(node, 2);
+  var span_1 = sibling(node, 2);
+  var text_1 = child(span_1);
+  reset(span_1);
+  var node_1 = sibling(span_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var button = root_1$7();
@@ -15537,11 +15732,11 @@ function CategoriseCategory($$anchor, $$props) {
           e2.stopPropagation();
         }
       };
-      var span = child(button);
-      var text = 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_2 = child(span_3);
       {
         var consequent = ($$anchor3) => {
           var svg = root_2$3();
@@ -15556,12 +15751,12 @@ function CategoriseCategory($$anchor, $$props) {
           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(text, get$1(getTotalWords));
+        set_text(text_2, get$1(getTotalWords));
       });
       append($$anchor2, button);
     };
@@ -15586,6 +15781,12 @@ function CategoriseCategory($$anchor, $$props) {
         get containerLabel() {
           return get$1($0);
         },
+        get containerLabelHtml() {
+          return categoryTitle();
+        },
+        get containerIndex() {
+          return categoryIndex();
+        },
         get containerClass() {
           return get$1(containerClasses);
         },
@@ -15649,9 +15850,10 @@ function CategoriseCategory($$anchor, $$props) {
   bind_this(div, ($$value) => set(categoryElement, $$value), () => get$1(categoryElement));
   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, `cat-ctr ${get$1(outerClasses) ?? ""}`);
     set_class(div_1, 1, clsx(get$1(titleClasses)));
+    set_text(text2, `Category ${categoryIndex() ?? ""}:`);
+    set_text(text_1, `. ${get$1(getTotalWords) ?? ""} added.`);
   });
   bind_element_size(div_1, "clientHeight", ($$value) => set(categoryTitleHeight, $$value));
   append($$anchor, div);
@@ -15963,7 +16165,7 @@ function CategoriseWordBin($$anchor, $$props) {
   };
   var div_1 = child(div);
   var span = sibling(child(div_1), 2);
-  var text = child(span);
+  var text2 = child(span);
   reset(span);
   reset(div_1);
   var div_2 = sibling(div_1, 2);
@@ -16096,7 +16298,7 @@ function CategoriseWordBin($$anchor, $$props) {
     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, `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`);
+    set_text(text2, `${get$1(itemsRemaining) ?? ""} out of ${totalItems() ?? ""} left`);
   });
   event("focus", div, function(...$$args) {
     (onfocus() || void 0)?.apply(this, $$args);
@@ -16341,11 +16543,14 @@ function CategoriseComponent($$anchor, $$props) {
       onstateChange()(new CustomEvent("statechange", { detail: { state: get$1(interactionState), serialized } }));
     }
   };
-  const announceToScreenReader = async (message) => {
+  const announceToScreenReader = async (message, hasMath = false) => {
     set(announcement, "");
     await tick();
     set(announcement, message, true);
     await tick();
+    if (hasMath && get$1(srDivRef)) {
+      await typesetMathJax(get$1(srDivRef));
+    }
     setTimeout(
       () => {
         set(announcement, "");
@@ -16433,11 +16638,12 @@ function CategoriseComponent($$anchor, $$props) {
     const targetCategoryIndex = config().category_groups.findIndex((c) => c.id === targetContainerId);
     const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : void 0;
     if (item) {
-      const cleanItemName = useRemoveRichTextHtmlTags(item.name);
-      const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
+      const itemName = useRemoveRichTextHtmlTags(item.name);
+      const categoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
       const itemCount = targetContainerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), targetContainerId).length;
-      const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, targetContainerId);
-      await announceToScreenReader(message);
+      const message = createItemPlacementAnnouncement(itemName, categoryName, targetCategoryIndex, itemCount, targetContainerId);
+      const containsMath = hasMathJax(message);
+      await announceToScreenReader(containsMath ? processMathJax(message) : message, containsMath);
     }
     await playDropAnimation(targetContainerId);
   };
@@ -16488,11 +16694,12 @@ function CategoriseComponent($$anchor, $$props) {
     const targetCategoryIndex = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? -1 : config().category_groups.findIndex((c) => c.id === containerId);
     const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : null;
     if (item) {
-      const cleanItemName = useRemoveRichTextHtmlTags(item.name);
-      const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
+      const itemName = useRemoveRichTextHtmlTags(item.name);
+      const categoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
       const itemCount = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), containerId).length;
-      const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, containerId);
-      await announceToScreenReader(message);
+      const message = createItemPlacementAnnouncement(itemName, categoryName, targetCategoryIndex, itemCount, containerId);
+      const containsMath = hasMathJax(message);
+      await announceToScreenReader(containsMath ? processMathJax(message) : message, containsMath);
     }
     await playDropAnimation(containerId);
     await tick();
@@ -16748,7 +16955,7 @@ 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 text = child(div_1, true);
+      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);
@@ -16955,7 +17162,7 @@ function CategoriseComponent($$anchor, $$props) {
       reset(div);
       template_effect(() => {
         set_attribute(button, "tabindex", get$1(selectedItemId) ? -1 : 0);
-        set_text(text, get$1(announcement));
+        set_text(text2, get$1(announcement));
         set_attribute(div_2, "aria-hidden", get$1(isModalOpen));
       });
       append($$anchor2, fragment_1);
@@ -17506,14 +17713,14 @@ const createCategoriseConfig = (data) => {
 };
 registerInteraction("categorise", createCategoriseInteraction, CategoriseComponent);
 function useDropdown(prompt, options) {
-  const parseText = (text) => {
+  const parseText = (text2) => {
     const regex = /<eat-contentful:([^>]+)>/g;
     const parts = [];
     let lastIndex = 0;
     let match;
-    while ((match = regex.exec(text)) !== null) {
+    while ((match = regex.exec(text2)) !== null) {
       if (match.index > lastIndex) {
-        const textBefore = text.substring(lastIndex, match.index);
+        const textBefore = text2.substring(lastIndex, match.index);
         const strippedText = textBefore.replace(/<[^>]*>/g, "").trim();
         if (strippedText) {
           parts.push({
@@ -17531,8 +17738,8 @@ function useDropdown(prompt, options) {
       });
       lastIndex = regex.lastIndex;
     }
-    if (lastIndex < text.length) {
-      const textAfter = text.substring(lastIndex);
+    if (lastIndex < text2.length) {
+      const textAfter = text2.substring(lastIndex);
       const strippedText = textAfter.replace(/<[^>]*>/g, "").trim();
       if (strippedText) {
         parts.push({
@@ -18285,7 +18492,7 @@ function DropdownContainer($$anchor, $$props) {
   };
   var span = root$2();
   var span_1 = child(span);
-  var text = child(span_1, true);
+  var text2 = child(span_1, true);
   reset(span_1);
   var node = sibling(span_1, 2);
   {
@@ -18544,7 +18751,7 @@ function DropdownContainer($$anchor, $$props) {
   bind_this(span, ($$value) => set(containerRef, $$value), () => get$1(containerRef));
   template_effect(() => {
     set_attribute(span_1, "id", labelId);
-    set_text(text, get$1(ariaLabel));
+    set_text(text2, get$1(ariaLabel));
     set_attribute(div_1, "id", comboId);
     set_class(div_1, 1, `drp-cmb ${get$1(containerClasses) ?? ""}`);
     set_attribute(div_1, "aria-expanded", get$1(state$1).isOpen);
@@ -19343,10 +19550,10 @@ const createDropdownConfig = (loadedData) => {
 };
 registerInteraction("dropdown", createDropdownInteraction, DropdownComponent);
 const htmlUtils = {
-  decodeNbsp: (text) => text.replace(/&amp;nbsp;/g, " ").replace(/&nbsp;/g, " "),
-  decodeHtmlEntities: (text) => {
-    if (!text.includes("&")) return text;
-    return text.replace(/&#(\d+);/g, (_, n2) => String.fromCharCode(Number(n2))).replace(/&#x([0-9a-f]+);/gi, (_, h) => String.fromCharCode(parseInt(h, 16))).replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&");
+  decodeNbsp: (text2) => text2.replace(/&amp;nbsp;/g, " ").replace(/&nbsp;/g, " "),
+  decodeHtmlEntities: (text2) => {
+    if (!text2.includes("&")) return text2;
+    return text2.replace(/&#(\d+);/g, (_, n2) => String.fromCharCode(Number(n2))).replace(/&#x([0-9a-f]+);/gi, (_, h) => String.fromCharCode(parseInt(h, 16))).replace(/&quot;/g, '"').replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&");
   },
   stripTags: (html2) => html2.replace(/<[^>]+>/g, ""),
   hasHtmlTags: (s) => /<[^>]/.test(s),
@@ -19465,20 +19672,20 @@ const extractHtmlWords = (htmlText) => {
 };
 const splitParagraphs = (rawText) => rawText.split(/<\/p>/i).map((p) => p.replace(/^<p>/i, "").trim()).filter(Boolean);
 const decodeAuthored = (para) => para.replace(/&lt;eat-contentful&gt;/g, "<eat-contentful>").replace(/&lt;\/eat-contentful&gt;/g, "</eat-contentful>").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&apos;/g, "'");
-const flushLeadingPunct = (text, state2) => {
-  const m = text.match(leadingPunctuationPattern);
+const flushLeadingPunct = (text2, state2) => {
+  const m = text2.match(leadingPunctuationPattern);
   const extractedLeading = m ? m[1] : "";
   const lp = state2.pendingLeadingPunct + extractedLeading;
   const leadingPunctuation = lp.length ? lp : void 0;
   state2.pendingLeadingPunct = "";
   return { leadingPunctuation, extractedLeading };
 };
-const appendTrailingOrPush = (text, state2) => {
+const appendTrailingOrPush = (text2, state2) => {
   const prev = state2.segments[state2.segments.length - 1];
   if (prev && !prev.isPunctuation && !prev.isLineBreak) {
-    prev.trailingPunctuation = (prev.trailingPunctuation ?? "") + text;
+    prev.trailingPunctuation = (prev.trailingPunctuation ?? "") + text2;
   } else {
-    state2.segments.push({ id: `${state2.globalIndex}`, text, isPunctuation: true });
+    state2.segments.push({ id: `${state2.globalIndex}`, text: text2, isPunctuation: true });
     state2.globalIndex++;
   }
 };
@@ -19538,9 +19745,9 @@ const processPlainWord = (visibleWord, state2) => {
   }
   if (!wordAfterLeading.length) return;
   const punctMatch = wordAfterLeading.match(trailingPunctuationPattern);
-  const text = decodeNbsp(punctMatch ? wordAfterLeading.slice(0, -punctMatch[1].length) : wordAfterLeading);
+  const text2 = decodeNbsp(punctMatch ? wordAfterLeading.slice(0, -punctMatch[1].length) : wordAfterLeading);
   const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
-  state2.segments.push({ id: `${state2.globalIndex}`, text, leadingPunctuation, trailingPunctuation });
+  state2.segments.push({ id: `${state2.globalIndex}`, text: text2, leadingPunctuation, trailingPunctuation });
   state2.globalIndex++;
 };
 const processContentfulToken = (match, state2) => {
@@ -19556,10 +19763,10 @@ const processContentfulToken = (match, state2) => {
   const rawText = punctMatch ? rawAfterLeading.slice(0, -punctMatch[1].length) : rawAfterLeading;
   const trailingPunctuation = punctMatch ? punctMatch[1] : void 0;
   const innerText = punctMatch ? textAfterLeading.slice(0, -punctMatch[1].length) : textAfterLeading;
-  const text = outerOpen + innerText + outerClose;
+  const text2 = outerOpen + innerText + outerClose;
   state2.segments.push({
     id: `${state2.globalIndex}`,
-    text,
+    text: text2,
     rawText,
     leadingPunctuation,
     trailingPunctuation,
@@ -19581,9 +19788,9 @@ const parseSentences = (rawText) => {
       const rawChunk = (contentfulMatch ? contentfulMatch[2] : chunk).trim();
       const displayText = decodeNbsp(rawChunk);
       if (displayText) {
-        const text = contentfulMatch ? outerOpen + displayText + outerClose : displayText;
+        const text2 = contentfulMatch ? outerOpen + displayText + outerClose : displayText;
         const rawText2 = contentfulMatch ? rawChunk : void 0;
-        segments.push({ id: String(posIndex), text, rawText: rawText2, isContentful: contentfulMatch ? true : void 0 });
+        segments.push({ id: String(posIndex), text: text2, rawText: rawText2, isContentful: contentfulMatch ? true : void 0 });
         posIndex++;
       }
     }
@@ -19638,7 +19845,7 @@ const parseWords = (rawText) => {
   }
   return state2.segments;
 };
-const parseSelectableText = (text, selectableType) => selectableType === "Sentence" ? parseSentences(text) : parseWords(text);
+const parseSelectableText = (text2, selectableType) => selectableType === "Sentence" ? parseSentences(text2) : parseWords(text2);
 function getSegmentState(segmentId, selectedIds, correctAnswerIds, isPreviewMode2, isValidating) {
   const isSegmentSelected = selectedIds.includes(segmentId);
   const isInCorrectAnswers = correctAnswerIds.includes(segmentId);
@@ -19854,7 +20061,7 @@ var root_43 = /* @__PURE__ */ from_html(`<span class="sr-only">Missing answer</s
 var root_44 = /* @__PURE__ */ from_html(`<span class="segment-trailing-punct" aria-hidden="true"><!></span>`);
 var root_31 = /* @__PURE__ */ from_html(`<span role="button"><!><span class="selectable-segment-text"><!></span><!><!><!></span><!>`, 1);
 var root_28 = /* @__PURE__ */ from_html(`<span></span>`);
-var root = /* @__PURE__ */ from_html(`<main class="selectable-text-passage" aria-describedby="passage-reader" data-testid="select-passage-ctr"><span id="passage-reader" class="sr-only"> </span> <div><!></div></main>`);
+var root = /* @__PURE__ */ from_html(`<main id="main-content" class="selectable-text-passage" aria-describedby="passage-reader" data-testid="select-passage-ctr"><span id="passage-reader" class="sr-only"> </span> <div><!></div></main>`);
 function SelectableTextInteractionContent($$anchor, $$props) {
   push($$props, true);
   let config = prop($$props, "config", 7), interactionState = prop($$props, "state", 7), isDataSaving = prop($$props, "isDataSaving", 7, false), contentfulSegmentIds = prop($$props, "contentfulSegmentIds", 23, () => []), onselection = prop($$props, "onselection", 7);
@@ -19873,8 +20080,8 @@ function SelectableTextInteractionContent($$anchor, $$props) {
     return stripTags2(s.leadingPunctuation ?? "") + decodeHtmlEntities2(stripTags2(s.text)) + stripTags2(s.trailingPunctuation ?? "");
   }).join(" ").replace(/\s+/g, " ").trim());
   const getSegmentAriaLabel = (segment, seg, segmentId) => {
-    const text = stripTags2(segment.text);
-    const parts = [`Option: ${text}`];
+    const text2 = stripTags2(segment.text);
+    const parts = [`Option: ${text2}`];
     if (seg.isCorrect) parts.push("correct");
     else if (seg.isIncorrect) parts.push("incorrect");
     else if (seg.isMissing) parts.push("missing answer");
@@ -20011,11 +20218,11 @@ function SelectableTextInteractionContent($$anchor, $$props) {
     },
     []
   );
-  const splitLastWord = (text) => {
+  const splitLastWord = (text2) => {
     const tagRe = /<[^>]+>|[^<]+/g;
     const tokens = [];
     let m;
-    while ((m = tagRe.exec(text)) !== null) {
+    while ((m = tagRe.exec(text2)) !== null) {
       tokens.push({ isTag: m[0].startsWith("<"), value: m[0] });
     }
     let splitTi = -1;
@@ -20030,7 +20237,7 @@ function SelectableTextInteractionContent($$anchor, $$props) {
         }
       }
     }
-    if (splitTi === -1) return ["", text];
+    if (splitTi === -1) return ["", text2];
     const getTagName2 = (tag) => tag.replace(/^<\/?([^\s>/]+).*$/, "$1").toLowerCase();
     const openStack = [];
     for (let i = 0; i < splitTi; i++) {
@@ -20853,12 +21060,12 @@ function SelectableTextComponent($$anchor, $$props) {
 create_custom_element(SelectableTextComponent, { api: {}, config: {}, isDataSaving: {}, onstateChange: {} }, [], [], true);
 const createSelectableTextConfig = (data) => {
   const { mode, isFinished, isLocked, getItemRubric, getItemStimulus, getItemInteraction } = useSharedState(data);
-  const { prompt, text, selectable_type, is_single_mark, correct_answers, max_selections, feedback } = getItemInteraction();
-  const contentfulCount = (text?.match(/<eat-contentful>|&lt;eat-contentful&gt;/gi) ?? []).length;
+  const { prompt, text: text2, selectable_type, is_single_mark, correct_answers, max_selections, feedback } = getItemInteraction();
+  const contentfulCount = (text2?.match(/<eat-contentful>|&lt;eat-contentful&gt;/gi) ?? []).length;
   const maxSelections = contentfulCount || max_selections;
   return {
     prompt,
-    text,
+    text: text2,
     selectable_type,
     is_single_mark,
     correct_answers,