eat-js-sdk 2.0.45 → 2.0.46

package/dist/interaction-builder.mjs

@@ -5121,7 +5121,11 @@ const DROPDOWN_POSITION = {
 };
 const DROPDOWN_INTERACTION = {
   KEY_PRESS_TIMEOUT: 1e3,
-  PAGE_NAVIGATION_STEP: 10
+  PAGE_NAVIGATION_STEP: 10,
+  PLACEHOLDER: "Select Answer",
+  SAVE_DEBOUNCE_DELAY: 500,
+  RESIZE_DEBOUNCE_DELAY: 150,
+  EMPTY_CHOICE: ""
 };
 const INTERACTION_TYPE_MAP = {
   [INTERACTION_TYPES.MCQ]: "mcq",
@@ -5776,7 +5780,7 @@ function ResultIcon($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(ResultIcon, { isCorrect: {}, iconType: {}, parentProps: {} }, [], [], true);
-var root_3$a = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
+var root_3$b = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. &nbsp;</span>`);
 var root_1$n = /* @__PURE__ */ from_html(`<div><!> <div><!> <span><!></span></div></div>`);
 function FeedbackAlert($$anchor, $$props) {
   push($$props, true);
@@ -5869,7 +5873,7 @@ function FeedbackAlert($$anchor, $$props) {
       var node_2 = child(div_1);
       {
         var consequent_1 = ($$anchor3) => {
-          var span = root_3$a();
+          var span = root_3$b();
           append($$anchor3, span);
         };
         if_block(node_2, ($$render) => {
@@ -6881,9 +6885,9 @@ function useImageModalSize() {
     calculateStimulusImageLayout
   };
 }
-var root_3$9 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_3$a = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
 var root_4$6 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_5$7 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
+var root_5$6 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
 var root_8$4 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_9$2 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_2$e = /* @__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>`);
@@ -7109,7 +7113,7 @@ function MCQImageModal($$anchor, $$props) {
               },
               onclick: navigatePrevious,
               children: ($$anchor4, $$slotProps2) => {
-                var span = root_3$9();
+                var span = root_3$a();
                 var node_2 = child(span);
                 SvgLoader(node_2, {
                   svgName: "smallChevronLeft",
@@ -7164,7 +7168,7 @@ function MCQImageModal($$anchor, $$props) {
                 return get$1(fullAnswerText);
               },
               children: ($$anchor4, $$slotProps2) => {
-                var div_6 = root_5$7();
+                var div_6 = root_5$6();
                 var span_2 = child(div_6);
                 var node_6 = child(span_2);
                 {
@@ -7467,7 +7471,7 @@ function InteractionSection($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(InteractionSection, { children: {} }, [], [], true);
-var root_5$6 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_5$5 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_4$5 = /* @__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"> </div> <!>`, 1);
 var root_7$4 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_2$d = /* @__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 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>`);
@@ -7639,7 +7643,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_3 = sibling(div_5, 2);
               {
                 var consequent = ($$anchor5) => {
-                  var div_6 = root_5$6();
+                  var div_6 = root_5$5();
                   template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_6);
                 };
@@ -8081,7 +8085,7 @@ 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$4 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4"> </p>`);
-var root_5$5 = /* @__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"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content"><!></div></div>`);
+var root_5$4 = /* @__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"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content"><!></div></div>`);
 var root_2$c = /* @__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 loading="lazy"/> <!></div> <!></div></div> <!>`, 1);
 var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
 function CommonMedia($$anchor, $$props) {
@@ -8213,7 +8217,7 @@ function CommonMedia($$anchor, $$props) {
           var node_4 = sibling(div_1, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_4 = root_5$5();
+              var div_4 = root_5$4();
               var button = child(div_4);
               button.__click = toggleLongDescription;
               button.__keydown = handleKeyDown;
@@ -8297,12 +8301,12 @@ create_custom_element(
   [],
   true
 );
-var root_3$8 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root_3$9 = /* @__PURE__ */ from_html(`<div><!></div>`);
 var root_4$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
 var root_2$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_6$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
 var root_7$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_5$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!></div>`);
 function StimulusSection($$anchor, $$props) {
   push($$props, true);
@@ -8373,7 +8377,7 @@ function StimulusSection($$anchor, $$props) {
           var node_2 = first_child(fragment_1);
           {
             var consequent = ($$anchor4) => {
-              var div_1 = root_3$8();
+              var div_1 = root_3$9();
               var node_3 = child(div_1);
               CommonStringToHtml(node_3, {
                 get htmlString() {
@@ -8427,7 +8431,7 @@ function StimulusSection($$anchor, $$props) {
           append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var fragment_2 = root_5$4();
+          var fragment_2 = root_5$3();
           var node_6 = first_child(fragment_2);
           {
             var consequent_3 = ($$anchor4) => {
@@ -8512,10 +8516,10 @@ create_custom_element(
   true
 );
 var root_8$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
-var root_13$1 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
-var root_15$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
+var root_13 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
+var root_15 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
 var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
-var root_16 = /* @__PURE__ */ from_html(`<div><!></div>`);
+var root_16$1 = /* @__PURE__ */ from_html(`<div><!></div>`);
 var root$e = /* @__PURE__ */ from_html(`<div class="prompt-container"><div><div></div> <!></div></div> <!>`, 1);
 function PromptContainer($$anchor, $$props) {
   push($$props, true);
@@ -8706,7 +8710,7 @@ function PromptContainer($$anchor, $$props) {
                         var node_6 = first_child(fragment_10);
                         {
                           var consequent_5 = ($$anchor8) => {
-                            var div_5 = root_13$1();
+                            var div_5 = root_13();
                             append($$anchor8, div_5);
                           };
                           var alternate = ($$anchor8) => {
@@ -8714,7 +8718,7 @@ function PromptContainer($$anchor, $$props) {
                             var node_7 = first_child(fragment_11);
                             {
                               var consequent_6 = ($$anchor9) => {
-                                var div_6 = root_15$1();
+                                var div_6 = root_15();
                                 var node_8 = child(div_6);
                                 snippet(node_8, () => feedback() ?? noop);
                                 reset(div_6);
@@ -8807,7 +8811,7 @@ function PromptContainer($$anchor, $$props) {
   var node_9 = sibling(div_2, 2);
   {
     var consequent_7 = ($$anchor2) => {
-      var div_7 = root_16();
+      var div_7 = root_16$1();
       var node_10 = child(div_7);
       StimulusSection(node_10, {
         get stimulusData() {
@@ -8894,9 +8898,9 @@ create_custom_element(
 );
 var root_1$g = /* @__PURE__ */ from_html(`<p class="text-charcoal text-sm leading-[19.2px] mb-2"> </p>`);
 var root_2$a = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5"> </span>`);
-var root_3$7 = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5">Missing answer:</span>`);
+var root_3$8 = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5">Missing answer:</span>`);
 var root_4$2 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="text-green-900 mr-1"><!></span>`);
-var root_5$3 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
+var root_5$2 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
 var root_9$1 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
 var root_8$2 = /* @__PURE__ */ from_html(`<span><!></span>`);
 var root_10$1 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" loading="lazy"/></div>`);
@@ -9028,7 +9032,7 @@ function MCQOption($$anchor, $$props) {
   var node_2 = sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var span_6 = root_3$7();
+      var span_6 = root_3$8();
       append($$anchor2, span_6);
     };
     if_block(node_2, ($$render) => {
@@ -9061,7 +9065,7 @@ function MCQOption($$anchor, $$props) {
   var node_6 = sibling(node_4, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var span_9 = root_5$3();
+      var span_9 = root_5$2();
       var node_7 = child(span_9);
       {
         var consequent_4 = ($$anchor3) => {
@@ -9308,7 +9312,7 @@ create_custom_element(
   [],
   true
 );
-var root_3$6 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
+var root_3$7 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
 var root$c = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 function MCQComponent($$anchor, $$props) {
   push($$props, true);
@@ -9446,7 +9450,7 @@ function MCQComponent($$anchor, $$props) {
       var node_1 = first_child(fragment_2);
       {
         var consequent = ($$anchor3) => {
-          var div = root_3$6();
+          var div = root_3$7();
           var node_2 = child(div);
           MCQFeedback(node_2, {
             get feedbackState() {
@@ -10297,7 +10301,7 @@ action.update = n.update;
 action.destroy = n.destroy;
 var root_1$c = /* @__PURE__ */ from_html(`<label aria-hidden="true"><span></span> <span> </span></label>`);
 var root_2$6 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
-var root_3$5 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
 var root_4 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-[calc(50%+0.375rem)] -translate-y-1/2 flex items-center justify-center"><!></span>`);
 var root$9 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
 function AnswerDisplay($$anchor, $$props) {
@@ -10478,7 +10482,7 @@ function AnswerDisplay($$anchor, $$props) {
       append($$anchor2, div_1);
     };
     var alternate = ($$anchor2) => {
-      var textarea = root_3$5();
+      var textarea = root_3$6();
       remove_textarea_child(textarea);
       action$1(textarea, ($$node) => action?.($$node));
       template_effect(() => {
@@ -10971,7 +10975,7 @@ create_custom_element(
   [],
   true
 );
-var root_3$4 = /* @__PURE__ */ from_html(`<p></p>`);
+var root_3$5 = /* @__PURE__ */ from_html(`<p></p>`);
 var root_8$1 = /* @__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>`);
 function TypeInComponent($$anchor, $$props) {
@@ -11175,7 +11179,7 @@ function TypeInComponent($$anchor, $$props) {
           var div = root_2$4();
           var node_1 = child(div);
           each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
-            var p = root_3$4();
+            var p = root_3$5();
             each(p, 21, () => get$1(segment).parts, index, ($$anchor5, part, partIndex) => {
               var fragment_2 = comment();
               var node_2 = first_child(fragment_2);
@@ -13842,8 +13846,8 @@ function isInt(value) {
   })(parseFloat(value));
 }
 var root_1$9 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
-var root_3$3 = /* @__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_3$4 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
+var root_5$1 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
 var root_7$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
 var root$6 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
 function CategoriseItem($$anchor, $$props) {
@@ -14136,7 +14140,7 @@ function CategoriseItem($$anchor, $$props) {
       var node_3 = first_child(fragment);
       {
         var consequent_1 = ($$anchor3) => {
-          var span_4 = root_3$3();
+          var span_4 = root_3$4();
           var node_4 = child(span_4);
           SvgLoader(node_4, { svgName: "errorSolid", className: "incorrect-icon" });
           reset(span_4);
@@ -14147,7 +14151,7 @@ function CategoriseItem($$anchor, $$props) {
           var node_5 = first_child(fragment_1);
           {
             var consequent_2 = ($$anchor4) => {
-              var span_5 = root_5$2();
+              var span_5 = root_5$1();
               var node_6 = child(span_5);
               SvgLoader(node_6, { svgName: "success", className: "missing-correct-icon" });
               reset(span_5);
@@ -14653,7 +14657,7 @@ create_custom_element(
   true
 );
 var root_2$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`);
-var root_3$2 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
+var root_3$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
 var root_1$7 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55"><span class="mx-0.5"> </span> <span class="w-4 h-4 text-inherit flex items-center justify-center"><!></span></button>`);
 var root$4 = /* @__PURE__ */ from_html(`<div role="group"><div><!> <!></div> <!></div>`);
 function CategoriseCategory($$anchor, $$props) {
@@ -14920,7 +14924,7 @@ function CategoriseCategory($$anchor, $$props) {
           append($$anchor3, svg);
         };
         var alternate = ($$anchor3) => {
-          var svg_1 = root_3$2();
+          var svg_1 = root_3$3();
           append($$anchor3, svg_1);
         };
         if_block(node_2, ($$render) => {
@@ -15056,7 +15060,7 @@ create_custom_element(
 var root_1$6 = /* @__PURE__ */ from_html(`<div role="group" tabindex="-1" class="text-base leading-4 text-gray-800 p-5 border border-gray-400 rounded-lg border-dashed
         absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">Word Bin is empty</div>`);
 var root_2$2 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden" aria-label="Left"><span class="w-6 h-6 text-inherit flex items-center justify-center"><!></span></button>`);
-var root_3$1 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden" aria-label="Right"><span class="w-6 h-6 text-inherit flex items-center justify-center ml-[3px]"><!></span></button>`);
+var root_3$2 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring p-2 text-blue-1000 rounded-md w-11 h-11 mt-9 td:hover:bg-black-50 active:bg-black-60 disabled:text-gray-40 disabled:hover:bg-white md:hidden" aria-label="Right"><span class="w-6 h-6 text-inherit flex items-center justify-center ml-[3px]"><!></span></button>`);
 var root$3 = /* @__PURE__ */ from_html(`<div role="group"><div><span class="text-base leading-5 !text-gray-900 font-semibold md:mb-2 md:item-heading">Word Bin&nbsp;</span> <span class="text-base leading-5 !text-gray-900 md:item-heading"> </span></div> <div class="flex items-center justify-between px-4 min-h-[133px] md:min-h-0 md:block md:px-0 md:justify-normal"><!> <!> <!> <!></div></div>`);
 function CategoriseWordBin($$anchor, $$props) {
   push($$props, true);
@@ -15369,7 +15373,7 @@ function CategoriseWordBin($$anchor, $$props) {
   var node_4 = sibling(node_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var button_1 = root_3$1();
+      var button_1 = root_3$2();
       button_1.__click = () => handleNavigate("right");
       button_1.__keydown = (e2) => {
         if (e2.key === "Enter" || e2.key === " ") {
@@ -16953,83 +16957,144 @@ function createDropdownState(initialValue) {
     searchString: ""
   };
 }
-const isAllAnswered$1 = (selections) => {
-  return selections.every((item) => item.choice !== "" && item.choice !== "Select Answer");
+const hasRenderedIds = (ids) => {
+  return !!ids && ids.length > 0;
+};
+const createSelectionMap = (selections) => {
+  return new Map(selections.map((s) => [s.id, s]));
+};
+const isAllAnswered$1 = (selections, renderedIds) => {
+  if (hasRenderedIds(renderedIds)) {
+    const selectionMap = createSelectionMap(selections);
+    return renderedIds.every((id) => {
+      const selection = selectionMap.get(id);
+      return selection && selection.choice !== DROPDOWN_INTERACTION.EMPTY_CHOICE && selection.choice !== DROPDOWN_INTERACTION.PLACEHOLDER;
+    });
+  }
+  return selections.every(
+    (item) => item.choice !== DROPDOWN_INTERACTION.EMPTY_CHOICE && item.choice !== DROPDOWN_INTERACTION.PLACEHOLDER
+  );
 };
-const isAllSkipped = (selections) => {
-  return selections.every((item) => item.choice === "");
+const isAllSkipped = (selections, renderedIds) => {
+  if (hasRenderedIds(renderedIds)) {
+    const selectionMap = createSelectionMap(selections);
+    return renderedIds.every((id) => {
+      const selection = selectionMap.get(id);
+      return !selection || selection.choice === DROPDOWN_INTERACTION.EMPTY_CHOICE;
+    });
+  }
+  return selections.every((item) => item.choice === DROPDOWN_INTERACTION.EMPTY_CHOICE);
 };
-const calculateAnswerResults = (config, selections) => {
+const calculateAnswerResults = (config, selections, renderedIds) => {
+  const selectionMap = createSelectionMap(selections);
+  if (hasRenderedIds(renderedIds)) {
+    return renderedIds.map((id) => {
+      const selection = selectionMap.get(id);
+      if (!selection) return false;
+      const correctAnswers = config.correctAnswer[id] || [];
+      if (correctAnswers.length === 0) return false;
+      return correctAnswers.includes(selection.choice);
+    });
+  }
   return selections.map((item) => {
     const correctAnswers = config.correctAnswer[item.id] || [];
     if (correctAnswers.length === 0) return false;
     return correctAnswers.includes(item.choice);
   });
 };
-const getCorrectAnswersForDisplay = (config, selections, answerResults) => {
+const getCorrectAnswersForDisplay = (config, selections, answerResults, renderedIds) => {
+  const selectionMap = createSelectionMap(selections);
+  if (hasRenderedIds(renderedIds)) {
+    return renderedIds.map((id, index2) => {
+      const selection = selectionMap.get(id);
+      const correctAnswersList = config.correctAnswer[id] || [];
+      const firstCorrectAnswer = correctAnswersList[0] || DROPDOWN_INTERACTION.EMPTY_CHOICE;
+      const isDropdownCorrect = answerResults[index2];
+      if (correctAnswersList.length === 0) return DROPDOWN_INTERACTION.EMPTY_CHOICE;
+      return isDropdownCorrect && selection ? selection.choice : firstCorrectAnswer;
+    });
+  }
   return selections.map((item, index2) => {
     const correctAnswersList = config.correctAnswer[item.id] || [];
-    const firstCorrectAnswer = correctAnswersList[0] || "";
-    const isCorrect = answerResults[index2];
-    if (correctAnswersList.length === 0) return "";
-    return isCorrect ? item.choice : firstCorrectAnswer;
+    const firstCorrectAnswer = correctAnswersList[0] || DROPDOWN_INTERACTION.EMPTY_CHOICE;
+    const isDropdownCorrect = answerResults[index2];
+    if (correctAnswersList.length === 0) return DROPDOWN_INTERACTION.EMPTY_CHOICE;
+    return isDropdownCorrect ? item.choice : firstCorrectAnswer;
   });
 };
-const getSessionAnswersForDisplay = (selections) => {
+const getSessionAnswersForDisplay = (selections, renderedIds) => {
+  const selectionMap = createSelectionMap(selections);
+  if (hasRenderedIds(renderedIds)) {
+    return renderedIds.map((id) => {
+      const selection = selectionMap.get(id);
+      const answer = selection?.choice || DROPDOWN_INTERACTION.EMPTY_CHOICE;
+      return answer === DROPDOWN_INTERACTION.PLACEHOLDER || answer === DROPDOWN_INTERACTION.EMPTY_CHOICE ? DROPDOWN_INTERACTION.EMPTY_CHOICE : answer;
+    });
+  }
   return selections.map((item) => {
-    const answer = item.choice || "";
-    return answer === "Select Answer" || answer === "" ? "" : answer;
+    const answer = item.choice || DROPDOWN_INTERACTION.EMPTY_CHOICE;
+    return answer === DROPDOWN_INTERACTION.PLACEHOLDER || answer === DROPDOWN_INTERACTION.EMPTY_CHOICE ? DROPDOWN_INTERACTION.EMPTY_CHOICE : answer;
   });
 };
-function calculateDropdownFeedback(state2, config, validateFn) {
+function calculateDropdownFeedback(state2, config, validateFn, renderedDropdownIds) {
   if (config.mode === MODES.PREVIEW) {
     return {
       showFeedback: true,
       isAllCorrect: true,
       isSkipped: false,
       isAllAnswered: true,
-      resultFeedback: "",
+      resultFeedback: DROPDOWN_INTERACTION.EMPTY_CHOICE,
       answerResults: [],
       correctAnswers: [],
       sessionAnswer: []
     };
   }
   const selections = state2.data.selected;
-  const allAnswered = isAllAnswered$1(selections);
+  const allAnswered = isAllAnswered$1(selections, renderedDropdownIds);
   if (config.mode === MODES.SESSION && !config.isFinished) {
     return {
       showFeedback: false,
       isAllCorrect: false,
       isSkipped: false,
       isAllAnswered: allAnswered,
-      resultFeedback: "",
+      resultFeedback: DROPDOWN_INTERACTION.EMPTY_CHOICE,
       answerResults: [],
       correctAnswers: [],
-      sessionAnswer: getSessionAnswersForDisplay(selections)
+      sessionAnswer: getSessionAnswersForDisplay(selections, renderedDropdownIds)
     };
   }
-  const isSkipped = isAllSkipped(selections);
+  const isSkipped = isAllSkipped(selections, renderedDropdownIds);
+  const answerResults = calculateAnswerResults(config, selections, renderedDropdownIds);
   let validationResult = {
     isValid: false,
-    feedback: ""
+    score: 0,
+    maxScore: hasRenderedIds(renderedDropdownIds) ? renderedDropdownIds.length : Object.keys(config.options).length,
+    feedback: DROPDOWN_INTERACTION.EMPTY_CHOICE
   };
   if (allAnswered) {
+    const selectionsToValidate = hasRenderedIds(renderedDropdownIds) ? selections.filter((sel) => renderedDropdownIds.includes(sel.id)) : selections;
     validationResult = validateFn({
-      answer: selections,
+      answer: selectionsToValidate,
       timestamp: state2.lastModified
     });
+    if (hasRenderedIds(renderedDropdownIds)) {
+      const renderedCorrectCount = answerResults.filter(Boolean).length;
+      validationResult.score = renderedCorrectCount;
+      validationResult.maxScore = renderedDropdownIds.length;
+      validationResult.isValid = renderedCorrectCount === renderedDropdownIds.length;
+      validationResult.feedback = renderedCorrectCount === renderedDropdownIds.length ? config.feedback.correct : config.feedback.incorrect;
+    }
   } else if (config.mode === MODES.SESSION && config.isFinished && !allAnswered) {
     validationResult = {
       isValid: false,
       score: 0,
-      maxScore: Object.keys(config.options).length,
+      maxScore: hasRenderedIds(renderedDropdownIds) ? renderedDropdownIds.length : Object.keys(config.options).length,
       feedback: config.feedback.incorrect
     };
   }
-  const isAllCorrect = validationResult.isValid;
-  const answerResults = calculateAnswerResults(config, selections);
-  const correctAnswers = getCorrectAnswersForDisplay(config, selections, answerResults);
-  const sessionAnswer = getSessionAnswersForDisplay(selections);
+  const areAllDropdownsCorrect = validationResult.isValid;
+  const correctAnswers = getCorrectAnswersForDisplay(config, selections, answerResults, renderedDropdownIds);
+  const sessionAnswer = getSessionAnswersForDisplay(selections, renderedDropdownIds);
   let showFeedback = false;
   if (config.mode === MODES.INTERACTIVE) {
     showFeedback = allAnswered;
@@ -17039,10 +17104,10 @@ function calculateDropdownFeedback(state2, config, validateFn) {
   }
   return {
     showFeedback,
-    isAllCorrect,
+    isAllCorrect: areAllDropdownsCorrect,
     isSkipped,
     isAllAnswered: allAnswered,
-    resultFeedback: validationResult.feedback || "",
+    resultFeedback: validationResult.feedback || DROPDOWN_INTERACTION.EMPTY_CHOICE,
     answerResults,
     correctAnswers,
     sessionAnswer
@@ -17072,20 +17137,21 @@ function useDropdownPosition(config) {
   };
 }
 var root_1$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-10"></div>`);
-var root_2 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
-var root_5$1 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
-var root_6 = /* @__PURE__ */ from_html(`<span class="text-red-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Incorrect</span></span>`);
-var root_7 = /* @__PURE__ */ from_html(`<span class="flex items-center justify-center text-blue-1000"><span aria-hidden="true"><!></span> <span class="sr-only">Close dropdown</span></span>`);
-var root_8 = /* @__PURE__ */ from_html(`<span class="flex items-center justify-center text-blue-1000"><span aria-hidden="true"><!></span> <span class="sr-only">Open dropdown</span></span>`);
-var root_11 = /* @__PURE__ */ from_html(`<span class="flex items-center text-green-900" aria-hidden="true"><!></span>`);
-var root_13 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
-var root_15 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
-var root_10 = /* @__PURE__ */ from_html(`<li role="option" tabindex="-1"><div class="p-0.5 flex justify-between w-full text-base whitespace-normal"><!> <!></div></li>`);
-var root_9 = /* @__PURE__ */ from_html(`<ul class="dropdown-menu block" role="listbox" tabindex="-1"></ul>`);
-var root$1 = /* @__PURE__ */ from_html(`<span class="dropdown inline-block relative align-middle"><span class="sr-only"> </span> <!> <button type="button" aria-haspopup="listbox"><div class="bg-black bg-opacity-5 h-full flex flex-none justify-center items-center"><div class="font-semibold text-base leading-[19px] text-charcoal px-3 flex items-center"> </div></div> <div class="px-4 flex flex-1 min-w-0 align-middle truncate items-center justify-between w-full"><span><!></span> <div class="flex items-center"><!> <!></div></div></button> <!></span>`);
+var root_2 = /* @__PURE__ */ from_html(`<div class="bg-black bg-opacity-5 h-full flex flex-none justify-center items-center"><div class="font-semibold text-base leading-[19px] text-charcoal px-3 flex items-center"> </div></div>`);
+var root_3$1 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
+var root_6 = /* @__PURE__ */ from_html(`<span class="text-green-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Correct</span></span>`);
+var root_7 = /* @__PURE__ */ from_html(`<span class="text-red-900 mr-2"><span aria-hidden="true"><!></span> <span class="sr-only">Incorrect</span></span>`);
+var root_8 = /* @__PURE__ */ from_html(`<span class="flex items-center justify-center text-blue-1000"><span aria-hidden="true"><!></span> <span class="sr-only">Close dropdown</span></span>`);
+var root_9 = /* @__PURE__ */ from_html(`<span class="flex items-center justify-center text-blue-1000"><span aria-hidden="true"><!></span> <span class="sr-only">Open dropdown</span></span>`);
+var root_12 = /* @__PURE__ */ from_html(`<span class="flex items-center text-green-900" aria-hidden="true"><!></span>`);
+var root_14 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
+var root_16 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
+var root_11 = /* @__PURE__ */ from_html(`<li role="option" tabindex="-1"><div class="p-0.5 flex justify-between w-full text-base whitespace-normal"><!> <!></div></li>`);
+var root_10 = /* @__PURE__ */ from_html(`<ul class="dropdown-menu block" role="listbox" tabindex="-1"></ul>`);
+var root$1 = /* @__PURE__ */ from_html(`<span class="dropdown inline-block relative align-middle"><span class="sr-only"> </span> <!> <button type="button" aria-haspopup="listbox"><!> <div class="px-4 flex flex-1 min-w-0 align-middle truncate items-center justify-between w-full"><span><!></span> <div class="flex items-center"><!> <!></div></div></button> <!></span>`);
 function DropdownContainer($$anchor, $$props) {
   push($$props, true);
-  let dropdownId = prop($$props, "dropdownId", 7), dropdownNumber = prop($$props, "dropdownNumber", 7), options = prop($$props, "options", 7), selected = prop($$props, "selected", 7), correctAnswers = prop($$props, "correctAnswers", 23, () => []), isCorrect = prop($$props, "isCorrect", 7, false), isFinished = prop($$props, "isFinished", 7, false), isLocked = prop($$props, "isLocked", 7, false), isDataSaving = prop($$props, "isDataSaving", 7, false), mode = prop($$props, "mode", 7), showFeedback = prop($$props, "showFeedback", 7, false), onselect = prop($$props, "onselect", 7), viewportBuffer = prop($$props, "viewportBuffer", 7, 60);
+  let dropdownId = prop($$props, "dropdownId", 7), dropdownNumber = prop($$props, "dropdownNumber", 7), options = prop($$props, "options", 7), selected = prop($$props, "selected", 7), correctAnswers = prop($$props, "correctAnswers", 23, () => []), isCorrect = prop($$props, "isCorrect", 7, false), isFinished = prop($$props, "isFinished", 7, false), isLocked = prop($$props, "isLocked", 7, false), isDataSaving = prop($$props, "isDataSaving", 7, false), mode = prop($$props, "mode", 7), showFeedback = prop($$props, "showFeedback", 7, false), showNumbering = prop($$props, "showNumbering", 7, true), onselect = prop($$props, "onselect", 7), viewportBuffer = prop($$props, "viewportBuffer", 7, 60);
   const dropdownActions = useDropdownState();
   const dropdownPosition = useDropdownPosition();
   let initializedOptions = /* @__PURE__ */ user_derived(() => {
@@ -17106,7 +17172,7 @@ function DropdownContainer($$anchor, $$props) {
   });
   const canInteract = /* @__PURE__ */ user_derived(() => !isDataSaving() && mode() !== MODES.PREVIEW && !(mode() === MODES.SESSION && isFinished()));
   const canToggleAccordion = /* @__PURE__ */ user_derived(() => !isDataSaving());
-  const isMissing = /* @__PURE__ */ user_derived(() => mode() === MODES.SESSION && isFinished() && (selected() === "Select Answer" || selected() === ""));
+  const isMissing = /* @__PURE__ */ user_derived(() => mode() === MODES.SESSION && isFinished() && (selected() === DROPDOWN_INTERACTION.PLACEHOLDER || selected() === ""));
   const getOptionIcon = (option) => {
     const isCorrectAnswer = correctAnswers().includes(option);
     const isSelected = option === get$1(state$1).selected;
@@ -17166,7 +17232,7 @@ function DropdownContainer($$anchor, $$props) {
     set(isKeyboardNavigation, false);
     set(isFirstNavigation, true);
     await tick();
-    if (selected() && selected() !== "Select Answer" && selected() !== "") {
+    if (selected() && selected() !== DROPDOWN_INTERACTION.PLACEHOLDER && selected() !== "") {
       const currentIndex = get$1(initializedOptions).indexOf(selected());
       get$1(state$1).activeIndex = currentIndex >= 0 ? currentIndex : null;
     } else {
@@ -17286,7 +17352,7 @@ function DropdownContainer($$anchor, $$props) {
         }
         resizeTimeout = null;
       },
-      150
+      DROPDOWN_INTERACTION.RESIZE_DEBOUNCE_DELAY
     );
   };
   onMount(() => {
@@ -17323,24 +17389,35 @@ function DropdownContainer($$anchor, $$props) {
     return classes.join(" ");
   });
   const ariaLabel = /* @__PURE__ */ user_derived(() => {
+    const cleanSelected = useRemoveRichTextHtmlTags(get$1(state$1).selected);
     if (mode() === MODES.PREVIEW) {
-      return `Correct answer, Item number ${dropdownNumber()}`;
+      const parts2 = ["Correct answer"];
+      if (showNumbering()) parts2.push(`Item number ${dropdownNumber()}`);
+      parts2.push(cleanSelected);
+      return parts2.filter(Boolean).join(", ");
     }
     if (mode() === MODES.SESSION && isFinished()) {
       const correctness = isCorrect() ? "Correct" : "Incorrect";
-      return `Student's answer (${correctness}), Item number ${dropdownNumber()}, ${get$1(state$1).selected}`;
+      const parts2 = [`Student's answer (${correctness})`];
+      if (showNumbering()) parts2.push(`Item number ${dropdownNumber()}`);
+      parts2.push(cleanSelected);
+      return parts2.filter(Boolean).join(", ");
     }
-    return `Item number ${dropdownNumber()}, ${get$1(state$1).selected}`;
+    const parts = [];
+    if (showNumbering()) parts.push(`Item number ${dropdownNumber()}`);
+    parts.push(cleanSelected);
+    return parts.filter(Boolean).join(", ");
   });
   const getOptionAriaLabel = (option, index2) => {
     const optionNum = index2 + 1;
     const isSelected = option === get$1(state$1).selected;
+    const cleanOption = useRemoveRichTextHtmlTags(option);
     if (showFeedback()) {
       const isCorrectAnswer = correctAnswers().includes(option);
       const correctness = isCorrectAnswer ? "correct" : "incorrect";
-      return isSelected ? `Selected option ${option} ${correctness}` : `Option ${optionNum} ${option} ${correctness}`;
+      return isSelected ? `Selected option ${cleanOption} ${correctness}` : `Option ${optionNum} ${cleanOption} ${correctness}`;
     }
-    return isSelected ? `Selected option ${option}` : `Option ${optionNum} ${option}`;
+    return isSelected ? `Selected option ${cleanOption}` : `Option ${optionNum} ${cleanOption}`;
   };
   const isCurrentOption = (index2) => {
     return get$1(state$1).isOpen && get$1(isKeyboardNavigation) && get$1(state$1).activeIndex === index2;
@@ -17426,6 +17503,13 @@ function DropdownContainer($$anchor, $$props) {
       showFeedback($$value);
       flushSync();
     },
+    get showNumbering() {
+      return showNumbering();
+    },
+    set showNumbering($$value = true) {
+      showNumbering($$value);
+      flushSync();
+    },
     get onselect() {
       return onselect();
     },
@@ -17462,24 +17546,34 @@ function DropdownContainer($$anchor, $$props) {
     get$1(state$1).isOpen ? handleCloseMenu() : handleOpenMenu();
   };
   button.__focusout = handleFocusOut;
-  var div_1 = child(button);
-  var div_2 = child(div_1);
-  var text_1 = child(div_2, true);
-  reset(div_2);
-  reset(div_1);
-  var div_3 = sibling(div_1, 2);
+  var node_1 = child(button);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_1 = root_2();
+      var div_2 = child(div_1);
+      var text_1 = child(div_2, true);
+      reset(div_2);
+      reset(div_1);
+      template_effect(() => set_text(text_1, dropdownNumber()));
+      append($$anchor2, div_1);
+    };
+    if_block(node_1, ($$render) => {
+      if (showNumbering()) $$render(consequent_1);
+    });
+  }
+  var div_3 = sibling(node_1, 2);
   var span_2 = child(div_3);
-  var node_1 = child(span_2);
-  html(node_1, () => get$1(state$1).selected === "" ? "Select Answer" : get$1(state$1).selected);
+  var node_2 = child(span_2);
+  html(node_2, () => get$1(state$1).selected === "" ? DROPDOWN_INTERACTION.PLACEHOLDER : get$1(state$1).selected);
   reset(span_2);
   var div_4 = sibling(span_2, 2);
-  var node_2 = child(div_4);
+  var node_3 = child(div_4);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_3 = root_2();
+    var consequent_2 = ($$anchor2) => {
+      var span_3 = root_3$1();
       var span_4 = child(span_3);
-      var node_3 = child(span_4);
-      SvgLoader(node_3, { svgName: "successSolid", className: "correct-icon" });
+      var node_4 = child(span_4);
+      SvgLoader(node_4, { svgName: "successSolid", className: "correct-icon" });
       reset(span_4);
       next$1(2);
       reset(span_3);
@@ -17487,61 +17581,61 @@ function DropdownContainer($$anchor, $$props) {
     };
     var alternate_1 = ($$anchor2) => {
       var fragment = comment();
-      var node_4 = first_child(fragment);
+      var node_5 = first_child(fragment);
       {
-        var consequent_3 = ($$anchor3) => {
+        var consequent_4 = ($$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$1();
+            var consequent_3 = ($$anchor4) => {
+              var span_5 = root_6();
               var span_6 = child(span_5);
-              var node_6 = child(span_6);
-              SvgLoader(node_6, { svgName: "successSolid", className: "correct-icon" });
+              var node_7 = child(span_6);
+              SvgLoader(node_7, { svgName: "successSolid", className: "correct-icon" });
               reset(span_6);
               next$1(2);
               reset(span_5);
               append($$anchor4, span_5);
             };
             var alternate = ($$anchor4) => {
-              var span_7 = root_6();
+              var span_7 = root_7();
               var span_8 = child(span_7);
-              var node_7 = child(span_8);
-              SvgLoader(node_7, { svgName: "errorSolid", className: "incorrect-icon" });
+              var node_8 = child(span_8);
+              SvgLoader(node_8, { svgName: "errorSolid", className: "incorrect-icon" });
               reset(span_8);
               next$1(2);
               reset(span_7);
               append($$anchor4, span_7);
             };
-            if_block(node_5, ($$render) => {
-              if (isCorrect()) $$render(consequent_2);
+            if_block(node_6, ($$render) => {
+              if (isCorrect()) $$render(consequent_3);
               else $$render(alternate, false);
             });
           }
           append($$anchor3, fragment_1);
         };
         if_block(
-          node_4,
+          node_5,
           ($$render) => {
-            if (showFeedback() && !get$1(isMissing)) $$render(consequent_3);
+            if (showFeedback() && !get$1(isMissing)) $$render(consequent_4);
           },
           true
         );
       }
       append($$anchor2, fragment);
     };
-    if_block(node_2, ($$render) => {
-      if (mode() === MODES.PREVIEW) $$render(consequent_1);
+    if_block(node_3, ($$render) => {
+      if (mode() === MODES.PREVIEW) $$render(consequent_2);
       else $$render(alternate_1, false);
     });
   }
-  var node_8 = sibling(node_2, 2);
+  var node_9 = sibling(node_3, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var span_9 = root_7();
+    var consequent_5 = ($$anchor2) => {
+      var span_9 = root_8();
       var span_10 = child(span_9);
-      var node_9 = child(span_10);
-      SvgLoader(node_9, {
+      var node_10 = child(span_10);
+      SvgLoader(node_10, {
         svgName: "smallChevronUp",
         className: "collapse-icon",
         width: 12,
@@ -17553,10 +17647,10 @@ function DropdownContainer($$anchor, $$props) {
       append($$anchor2, span_9);
     };
     var alternate_2 = ($$anchor2) => {
-      var span_11 = root_8();
+      var span_11 = root_9();
       var span_12 = child(span_11);
-      var node_10 = child(span_12);
-      SvgLoader(node_10, {
+      var node_11 = child(span_12);
+      SvgLoader(node_11, {
         svgName: "smallChevronDown",
         className: "expand-icon",
         width: 12,
@@ -17567,8 +17661,8 @@ function DropdownContainer($$anchor, $$props) {
       reset(span_11);
       append($$anchor2, span_11);
     };
-    if_block(node_8, ($$render) => {
-      if (get$1(state$1).isOpen) $$render(consequent_4);
+    if_block(node_9, ($$render) => {
+      if (get$1(state$1).isOpen) $$render(consequent_5);
       else $$render(alternate_2, false);
     });
   }
@@ -17576,16 +17670,16 @@ function DropdownContainer($$anchor, $$props) {
   reset(div_3);
   reset(button);
   bind_this(button, ($$value) => set(buttonRef, $$value), () => get$1(buttonRef));
-  var node_11 = sibling(button, 2);
+  var node_12 = sibling(button, 2);
   {
-    var consequent_8 = ($$anchor2) => {
-      var ul = root_9();
+    var consequent_9 = ($$anchor2) => {
+      var ul = root_10();
       each(ul, 21, () => get$1(initializedOptions), index, ($$anchor3, option, index2) => {
         const iconType = /* @__PURE__ */ user_derived(() => getOptionIcon(get$1(option)));
         const showCurrentOption = /* @__PURE__ */ user_derived(() => isCurrentOption(index2));
         const showHoverOption = /* @__PURE__ */ user_derived(() => shouldShowHover(index2));
         const optionAriaLabel = /* @__PURE__ */ user_derived(() => getOptionAriaLabel(get$1(option), index2));
-        var li = root_10();
+        var li = root_11();
         li.__mousedown = (e2) => e2.preventDefault();
         li.__click = async (e2) => {
           e2.preventDefault();
@@ -17593,11 +17687,11 @@ function DropdownContainer($$anchor, $$props) {
           await handleSelect(get$1(option));
         };
         var div_5 = child(li);
-        var node_12 = child(div_5);
+        var node_13 = child(div_5);
         {
           let $0 = /* @__PURE__ */ user_derived(() => get$1(showHoverOption) && get$1(canInteract) ? "hover-option" : "");
           let $1 = /* @__PURE__ */ user_derived(() => get$1(showCurrentOption) ? "current-option" : "");
-          CommonStringToHtml(node_12, {
+          CommonStringToHtml(node_13, {
             get htmlString() {
               return get$1(option);
             },
@@ -17608,41 +17702,41 @@ function DropdownContainer($$anchor, $$props) {
             }
           });
         }
-        var node_13 = sibling(node_12, 2);
+        var node_14 = sibling(node_13, 2);
         {
-          var consequent_5 = ($$anchor4) => {
-            var span_13 = root_11();
-            var node_14 = child(span_13);
-            SvgLoader(node_14, { svgName: "successSolid", className: "correct-icon" });
+          var consequent_6 = ($$anchor4) => {
+            var span_13 = root_12();
+            var node_15 = child(span_13);
+            SvgLoader(node_15, { svgName: "successSolid", className: "correct-icon" });
             reset(span_13);
             append($$anchor4, span_13);
           };
           var alternate_4 = ($$anchor4) => {
             var fragment_2 = comment();
-            var node_15 = first_child(fragment_2);
+            var node_16 = first_child(fragment_2);
             {
-              var consequent_6 = ($$anchor5) => {
-                var span_14 = root_13();
-                var node_16 = child(span_14);
-                SvgLoader(node_16, { svgName: "errorSolid", className: "incorrect-icon" });
+              var consequent_7 = ($$anchor5) => {
+                var span_14 = root_14();
+                var node_17 = child(span_14);
+                SvgLoader(node_17, { svgName: "errorSolid", className: "incorrect-icon" });
                 reset(span_14);
                 append($$anchor5, span_14);
               };
               var alternate_3 = ($$anchor5) => {
                 var fragment_3 = comment();
-                var node_17 = first_child(fragment_3);
+                var node_18 = first_child(fragment_3);
                 {
-                  var consequent_7 = ($$anchor6) => {
-                    var span_15 = root_15();
-                    var node_18 = child(span_15);
-                    SvgLoader(node_18, { svgName: "successSolid", className: "correct-icon" });
+                  var consequent_8 = ($$anchor6) => {
+                    var span_15 = root_16();
+                    var node_19 = child(span_15);
+                    SvgLoader(node_19, { svgName: "successSolid", className: "correct-icon" });
                     reset(span_15);
                     append($$anchor6, span_15);
                   };
                   if_block(
-                    node_17,
+                    node_18,
                     ($$render) => {
-                      if (get$1(iconType) === "selected") $$render(consequent_7);
+                      if (get$1(iconType) === "selected") $$render(consequent_8);
                     },
                     true
                   );
@@ -17650,9 +17744,9 @@ function DropdownContainer($$anchor, $$props) {
                 append($$anchor5, fragment_3);
               };
               if_block(
-                node_15,
+                node_16,
                 ($$render) => {
-                  if (get$1(iconType) === "incorrect") $$render(consequent_6);
+                  if (get$1(iconType) === "incorrect") $$render(consequent_7);
                   else $$render(alternate_3, false);
                 },
                 true
@@ -17660,8 +17754,8 @@ function DropdownContainer($$anchor, $$props) {
             }
             append($$anchor4, fragment_2);
           };
-          if_block(node_13, ($$render) => {
-            if (get$1(iconType) === "correct") $$render(consequent_5);
+          if_block(node_14, ($$render) => {
+            if (get$1(iconType) === "correct") $$render(consequent_6);
             else $$render(alternate_4, false);
           });
         }
@@ -17686,8 +17780,8 @@ function DropdownContainer($$anchor, $$props) {
       });
       append($$anchor2, ul);
     };
-    if_block(node_11, ($$render) => {
-      if (get$1(state$1).isOpen && get$1(initializedOptions).length > 0) $$render(consequent_8);
+    if_block(node_12, ($$render) => {
+      if (get$1(state$1).isOpen && get$1(initializedOptions).length > 0) $$render(consequent_9);
     });
   }
   reset(span);
@@ -17701,8 +17795,7 @@ function DropdownContainer($$anchor, $$props) {
     set_attribute(button, "aria-labelledby", labelId);
     set_attribute(button, "aria-controls", listId);
     set_attribute(button, "aria-activedescendant", get$1(state$1).activeIndex !== null ? `${listId}-option-${get$1(state$1).activeIndex}` : void 0);
-    set_text(text_1, dropdownNumber());
-    set_class(span_2, 1, `truncate mr-2 text-base ${get$1(state$1).selected === "Select Answer" || get$1(state$1).selected === "" ? "text-gray-860" : "text-charcoal"}`);
+    set_class(span_2, 1, `truncate mr-2 text-base ${get$1(state$1).selected === DROPDOWN_INTERACTION.PLACEHOLDER || get$1(state$1).selected === "" ? "text-gray-860" : "text-charcoal"}`);
   });
   append($$anchor, span);
   return pop($$exports);
@@ -17722,6 +17815,7 @@ create_custom_element(
     isDataSaving: {},
     mode: {},
     showFeedback: {},
+    showNumbering: {},
     onselect: {},
     viewportBuffer: {}
   },
@@ -17741,14 +17835,31 @@ function DropdownInteractionContent($$anchor, $$props) {
     const pTags = config().text.prompt.match(pTagRegex);
     return pTags && pTags.length > 0 ? pTags : [config().text.prompt];
   });
+  const renderedDropdownIds = /* @__PURE__ */ user_derived(() => {
+    const ids = [];
+    get$1(promptLines).forEach((line) => {
+      const parts = dropdownParser.parseText(line);
+      parts.forEach((part) => {
+        if (part.type === "dropdown" && part.id) {
+          ids.push(part.id);
+        }
+      });
+    });
+    return ids;
+  });
+  const shouldShowNumbering = /* @__PURE__ */ user_derived(() => get$1(renderedDropdownIds).length > 1);
   const previewSelections = /* @__PURE__ */ user_derived(() => config().mode === MODES.PREVIEW ? getDropdownPreviewSelections(config()) : []);
   const shuffledOptionsCache = /* @__PURE__ */ new Map();
   const getShuffledOptions = (dropdownId, options) => {
     if (shuffledOptionsCache.has(dropdownId)) {
       return shuffledOptionsCache.get(dropdownId);
     }
+    if (config().mode === MODES.PREVIEW) {
+      shuffledOptionsCache.set(dropdownId, [...options]);
+      return [...options];
+    }
     const selectedValue = getSelectedValue(dropdownId);
-    if (config().mode === MODES.PREVIEW || selectedValue !== "Select Answer" && selectedValue !== "") {
+    if (selectedValue !== DROPDOWN_INTERACTION.PLACEHOLDER && selectedValue !== "") {
       shuffledOptionsCache.set(dropdownId, [...options]);
       return [...options];
     }
@@ -17768,11 +17879,11 @@ function DropdownInteractionContent($$anchor, $$props) {
   const getSelectedValue = (dropdownId) => {
     if (config().mode === MODES.PREVIEW) {
       const previewItem = get$1(previewSelections).find((item) => item.id === dropdownId);
-      return previewItem?.choice || config().correctAnswer[dropdownId]?.[0] || "Select Answer";
+      return previewItem?.choice || config().correctAnswer[dropdownId]?.[0] || DROPDOWN_INTERACTION.PLACEHOLDER;
     }
     const selection = state2().data.selected.find((item) => item.id === dropdownId);
     const value = selection?.choice || "";
-    return value === "" ? "Select Answer" : value;
+    return value === "" ? DROPDOWN_INTERACTION.PLACEHOLDER : value;
   };
   const getCorrectAnswers = (dropdownId) => {
     return config().correctAnswer[dropdownId] || [];
@@ -17784,7 +17895,7 @@ function DropdownInteractionContent($$anchor, $$props) {
   };
   const isDropdownCorrect = (dropdownId) => {
     const selectedValue = getSelectedValue(dropdownId);
-    if (selectedValue === "Select Answer" || selectedValue === "") return false;
+    if (selectedValue === DROPDOWN_INTERACTION.PLACEHOLDER || selectedValue === "") return false;
     const correctAnswers = getCorrectAnswers(dropdownId);
     return correctAnswers.length > 0 && correctAnswers.includes(selectedValue);
   };
@@ -17877,6 +17988,9 @@ function DropdownInteractionContent($$anchor, $$props) {
               get showFeedback() {
                 return showFeedback();
               },
+              get showNumbering() {
+                return get$1(shouldShowNumbering);
+              },
               onselect: (value) => handleSelect(get$1(part).id, value)
             });
           }
@@ -18022,11 +18136,26 @@ function DropdownComponent($$anchor, $$props) {
     throw new Error("Failed to initialize Dropdown state");
   }
   let interactionState = /* @__PURE__ */ state(proxy(initialState));
-  let feedbackState = /* @__PURE__ */ user_derived(() => calculateDropdownFeedback(get$1(interactionState), config(), api().validate || (() => ({ isValid: false }))));
+  const dropdownParser = useDropdown(config().text.prompt, config().options);
+  const pTagRegex = /<p[^>]*>.*?<\/p>/gi;
+  const renderedDropdownIds = /* @__PURE__ */ user_derived(() => {
+    const pTags = config().text.prompt.match(pTagRegex);
+    const promptLines = pTags && pTags.length > 0 ? pTags : [config().text.prompt];
+    const ids = [];
+    promptLines.forEach((line) => {
+      const parts = dropdownParser.parseText(line);
+      parts.forEach((part) => {
+        if (part.type === "dropdown" && part.id) {
+          ids.push(part.id);
+        }
+      });
+    });
+    return ids;
+  });
+  let feedbackState = /* @__PURE__ */ user_derived(() => calculateDropdownFeedback(get$1(interactionState), config(), api().validate || (() => ({ isValid: false })), get$1(renderedDropdownIds)));
   let isInteractiveMode2 = /* @__PURE__ */ user_derived(() => config().mode === MODES.INTERACTIVE);
   let isSessionNotFinished = /* @__PURE__ */ user_derived(() => config().mode === MODES.SESSION && !config().isFinished);
   let saveTimer = null;
-  const SAVE_DELAY = 500;
   const handleSelection = async (event2) => {
     try {
       const { id, value } = event2.detail;
@@ -18038,6 +18167,9 @@ function DropdownComponent($$anchor, $$props) {
         return;
       }
       set(interactionState, result.newState, true);
+      if (get$1(isInteractiveMode2)) {
+        handleInteractiveModeInteraction();
+      }
       api().onStateChange?.(get$1(interactionState));
       onstateChange()?.(new CustomEvent("stateChange", {
         detail: {
@@ -18045,13 +18177,14 @@ function DropdownComponent($$anchor, $$props) {
           serialized: api().serialize?.(get$1(interactionState))
         }
       }));
-      if (get$1(isInteractiveMode2)) {
-        handleInteractiveModeInteraction();
-      }
       if (get$1(isSessionNotFinished)) {
         if (saveTimer) {
           clearTimeout(saveTimer);
         }
+        const hasValidSelection = get$1(interactionState).data.selected.some((item) => item.choice !== "" && item.choice !== DROPDOWN_INTERACTION.PLACEHOLDER);
+        if (!hasValidSelection) {
+          return;
+        }
         saveTimer = setTimeout(
           async () => {
             try {
@@ -18064,18 +18197,25 @@ function DropdownComponent($$anchor, $$props) {
               saveTimer = null;
             }
           },
-          SAVE_DELAY
+          DROPDOWN_INTERACTION.SAVE_DEBOUNCE_DELAY
         );
       }
     } catch (error) {
     }
   };
   const handleInteractiveModeInteraction = () => {
-    set(interactionState, interactionUtils.updateState(get$1(interactionState), { interactiveHasAnswered: true }), true);
-    const allAnswered = get$1(interactionState).data.selected.every((item) => item.choice !== "" && item.choice !== "Select Answer");
-    if (allAnswered) {
-      set(interactionState, interactionUtils.updateState(get$1(interactionState), { showFeedback: true }), true);
-    }
+    const allRenderedAnswered = get$1(renderedDropdownIds).every((id) => {
+      const selection = get$1(interactionState).data.selected.find((item) => item.id === id);
+      return selection && selection.choice !== "" && selection.choice !== DROPDOWN_INTERACTION.PLACEHOLDER;
+    });
+    set(
+      interactionState,
+      interactionUtils.updateState(get$1(interactionState), {
+        interactiveHasAnswered: allRenderedAnswered,
+        showFeedback: allRenderedAnswered
+      }),
+      true
+    );
   };
   onMount(() => {
     return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.0.45",
+  "version": "2.0.46",
   "change version": "2.0.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [