eat-js-sdk 2.0.45 → 2.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/interaction-builder.mjs +406 -234
- package/package.json +1 -1
|
@@ -5121,7 +5121,11 @@ const DROPDOWN_POSITION = {
|
|
|
5121
5121
|
};
|
|
5122
5122
|
const DROPDOWN_INTERACTION = {
|
|
5123
5123
|
KEY_PRESS_TIMEOUT: 1e3,
|
|
5124
|
-
PAGE_NAVIGATION_STEP: 10
|
|
5124
|
+
PAGE_NAVIGATION_STEP: 10,
|
|
5125
|
+
PLACEHOLDER: "Select Answer",
|
|
5126
|
+
SAVE_DEBOUNCE_DELAY: 500,
|
|
5127
|
+
RESIZE_DEBOUNCE_DELAY: 150,
|
|
5128
|
+
EMPTY_CHOICE: ""
|
|
5125
5129
|
};
|
|
5126
5130
|
const INTERACTION_TYPE_MAP = {
|
|
5127
5131
|
[INTERACTION_TYPES.MCQ]: "mcq",
|
|
@@ -5343,13 +5347,13 @@ const useSetupAPI = () => {
|
|
|
5343
5347
|
interactionWidth.set(interactionWidthValue);
|
|
5344
5348
|
}
|
|
5345
5349
|
};
|
|
5346
|
-
var root$
|
|
5350
|
+
var root$n = /* @__PURE__ */ from_html(`<div><div class="animate-skeleton w-full h-6 mb-2 rounded md:mb-4"></div> <div class="animate-skeleton w-full h-6 mb-12 rounded"></div> <div class="animate-skeleton w-full h-52 rounded"></div></div>`);
|
|
5347
5351
|
function CommonSkeleton($$anchor) {
|
|
5348
|
-
var div = root$
|
|
5352
|
+
var div = root$n();
|
|
5349
5353
|
append($$anchor, div);
|
|
5350
5354
|
}
|
|
5351
5355
|
create_custom_element(CommonSkeleton, {}, [], [], true);
|
|
5352
|
-
var root$
|
|
5356
|
+
var root$m = /* @__PURE__ */ from_html(`<p class="p-2 border-2 border-red-600 bg-red-200 rounded"> </p>`);
|
|
5353
5357
|
function InvalidBanner($$anchor, $$props) {
|
|
5354
5358
|
push($$props, true);
|
|
5355
5359
|
let bannerLabel = prop($$props, "bannerLabel", 7, "Invalid.");
|
|
@@ -5362,7 +5366,7 @@ function InvalidBanner($$anchor, $$props) {
|
|
|
5362
5366
|
flushSync();
|
|
5363
5367
|
}
|
|
5364
5368
|
};
|
|
5365
|
-
var p = root$
|
|
5369
|
+
var p = root$m();
|
|
5366
5370
|
var text = child(p, true);
|
|
5367
5371
|
reset(p);
|
|
5368
5372
|
template_effect(() => set_text(text, bannerLabel()));
|
|
@@ -5655,7 +5659,7 @@ const svgIconRegistry = {
|
|
|
5655
5659
|
}
|
|
5656
5660
|
};
|
|
5657
5661
|
var root_1$o = /* @__PURE__ */ from_svg(`<path></path>`);
|
|
5658
|
-
var root$
|
|
5662
|
+
var root$l = /* @__PURE__ */ from_svg(`<svg xmlns="http://www.w3.org/2000/svg"><!></svg>`);
|
|
5659
5663
|
function SvgLoader($$anchor, $$props) {
|
|
5660
5664
|
push($$props, true);
|
|
5661
5665
|
let width = prop($$props, "width", 7, void 0), height = prop($$props, "height", 7, void 0), svgName = prop($$props, "svgName", 7), className = prop($$props, "className", 7, void 0);
|
|
@@ -5702,7 +5706,7 @@ function SvgLoader($$anchor, $$props) {
|
|
|
5702
5706
|
flushSync();
|
|
5703
5707
|
}
|
|
5704
5708
|
};
|
|
5705
|
-
var svg = root$
|
|
5709
|
+
var svg = root$l();
|
|
5706
5710
|
var node = child(svg);
|
|
5707
5711
|
{
|
|
5708
5712
|
var consequent = ($$anchor2) => {
|
|
@@ -5731,7 +5735,7 @@ function SvgLoader($$anchor, $$props) {
|
|
|
5731
5735
|
return pop($$exports);
|
|
5732
5736
|
}
|
|
5733
5737
|
create_custom_element(SvgLoader, { width: {}, height: {}, svgName: {}, className: {} }, [], [], true);
|
|
5734
|
-
var root$
|
|
5738
|
+
var root$k = /* @__PURE__ */ from_html(`<span><!></span>`);
|
|
5735
5739
|
function ResultIcon($$anchor, $$props) {
|
|
5736
5740
|
push($$props, true);
|
|
5737
5741
|
let isCorrect = prop($$props, "isCorrect", 7), iconType = prop($$props, "iconType", 7, "result"), parentProps = prop($$props, "parentProps", 7);
|
|
@@ -5760,7 +5764,7 @@ function ResultIcon($$anchor, $$props) {
|
|
|
5760
5764
|
flushSync();
|
|
5761
5765
|
}
|
|
5762
5766
|
};
|
|
5763
|
-
var span = root$
|
|
5767
|
+
var span = root$k();
|
|
5764
5768
|
var node = child(span);
|
|
5765
5769
|
SvgLoader(node, {
|
|
5766
5770
|
get svgName() {
|
|
@@ -5776,7 +5780,7 @@ function ResultIcon($$anchor, $$props) {
|
|
|
5776
5780
|
return pop($$exports);
|
|
5777
5781
|
}
|
|
5778
5782
|
create_custom_element(ResultIcon, { isCorrect: {}, iconType: {}, parentProps: {} }, [], [], true);
|
|
5779
|
-
var root_3$
|
|
5783
|
+
var root_3$b = /* @__PURE__ */ from_html(`<span class="sr-only">Alert. </span>`);
|
|
5780
5784
|
var root_1$n = /* @__PURE__ */ from_html(`<div><!> <div><!> <span><!></span></div></div>`);
|
|
5781
5785
|
function FeedbackAlert($$anchor, $$props) {
|
|
5782
5786
|
push($$props, true);
|
|
@@ -5869,7 +5873,7 @@ function FeedbackAlert($$anchor, $$props) {
|
|
|
5869
5873
|
var node_2 = child(div_1);
|
|
5870
5874
|
{
|
|
5871
5875
|
var consequent_1 = ($$anchor3) => {
|
|
5872
|
-
var span = root_3$
|
|
5876
|
+
var span = root_3$b();
|
|
5873
5877
|
append($$anchor3, span);
|
|
5874
5878
|
};
|
|
5875
5879
|
if_block(node_2, ($$render) => {
|
|
@@ -6204,7 +6208,7 @@ const useFocusTrap = () => {
|
|
|
6204
6208
|
handleTabKey
|
|
6205
6209
|
};
|
|
6206
6210
|
};
|
|
6207
|
-
var root$
|
|
6211
|
+
var root$j = /* @__PURE__ */ from_html(`<dialog aria-modal="true" class="bg-transparent max-w-none max-h-none w-screen h-screen"><div role="button" aria-hidden="true"></div> <!></dialog>`);
|
|
6208
6212
|
function CommonModal($$anchor, $$props) {
|
|
6209
6213
|
push($$props, true);
|
|
6210
6214
|
let modalData = prop($$props, "modalData", 23, () => ({ modalAriaLabel: "", isModalOpen: false })), modalClass = prop($$props, "modalClass", 7, ""), onupdateModalSettings = prop($$props, "onupdateModalSettings", 7), onclose = prop($$props, "onclose", 7), children = prop($$props, "children", 7);
|
|
@@ -6281,7 +6285,7 @@ function CommonModal($$anchor, $$props) {
|
|
|
6281
6285
|
flushSync();
|
|
6282
6286
|
}
|
|
6283
6287
|
};
|
|
6284
|
-
var dialog = root$
|
|
6288
|
+
var dialog = root$j();
|
|
6285
6289
|
dialog.__keydown = handleFocusTrap;
|
|
6286
6290
|
var div = child(dialog);
|
|
6287
6291
|
div.__click = clickModalBackground;
|
|
@@ -6329,7 +6333,7 @@ function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
|
|
|
6329
6333
|
};
|
|
6330
6334
|
}
|
|
6331
6335
|
var root_1$m = /* @__PURE__ */ from_html(`<div><div role="tooltip"> <span aria-hidden="true"></span></div></div>`);
|
|
6332
|
-
var root$
|
|
6336
|
+
var root$i = /* @__PURE__ */ from_html(`<div class="relative inline-block"><!> <!></div>`);
|
|
6333
6337
|
function CommonTooltip($$anchor, $$props) {
|
|
6334
6338
|
push($$props, true);
|
|
6335
6339
|
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);
|
|
@@ -6507,7 +6511,7 @@ function CommonTooltip($$anchor, $$props) {
|
|
|
6507
6511
|
flushSync();
|
|
6508
6512
|
}
|
|
6509
6513
|
};
|
|
6510
|
-
var div = root$
|
|
6514
|
+
var div = root$i();
|
|
6511
6515
|
div.__focusin = scheduleShow;
|
|
6512
6516
|
div.__focusout = scheduleHide;
|
|
6513
6517
|
div.__touchstart = handleTouchStart;
|
|
@@ -6574,7 +6578,7 @@ create_custom_element(
|
|
|
6574
6578
|
true
|
|
6575
6579
|
);
|
|
6576
6580
|
var root_1$l = /* @__PURE__ */ from_html(`<span><!></span>`);
|
|
6577
|
-
var root$
|
|
6581
|
+
var root$h = /* @__PURE__ */ from_html(`<button><!></button>`);
|
|
6578
6582
|
function CommonButton($$anchor, $$props) {
|
|
6579
6583
|
push($$props, true);
|
|
6580
6584
|
let ariaLabel = prop($$props, "ariaLabel", 7, ""), ariaHaspopup = prop($$props, "ariaHaspopup", 7), className = prop($$props, "className", 7, ""), disabled = prop($$props, "disabled", 7, false), pressed = prop($$props, "pressed", 7, false), transparent = prop($$props, "transparent", 7, false), variant = prop($$props, "variant", 7, "standard"), type = prop($$props, "type", 7, "button"), tabindex = prop($$props, "tabindex", 7, 0), onclick = prop($$props, "onclick", 7), children = prop($$props, "children", 7);
|
|
@@ -6666,7 +6670,7 @@ function CommonButton($$anchor, $$props) {
|
|
|
6666
6670
|
flushSync();
|
|
6667
6671
|
}
|
|
6668
6672
|
};
|
|
6669
|
-
var button = root$
|
|
6673
|
+
var button = root$h();
|
|
6670
6674
|
let classes;
|
|
6671
6675
|
button.__click = function(...$$args) {
|
|
6672
6676
|
onclick()?.apply(this, $$args);
|
|
@@ -6881,10 +6885,10 @@ function useImageModalSize() {
|
|
|
6881
6885
|
calculateStimulusImageLayout
|
|
6882
6886
|
};
|
|
6883
6887
|
}
|
|
6884
|
-
var root_3$
|
|
6888
|
+
var root_3$a = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
|
|
6885
6889
|
var root_4$6 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
|
|
6886
|
-
var root_5$
|
|
6887
|
-
var root_8$
|
|
6890
|
+
var root_5$6 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
|
|
6891
|
+
var root_8$5 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
|
|
6888
6892
|
var root_9$2 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
|
|
6889
6893
|
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>`);
|
|
6890
6894
|
function MCQImageModal($$anchor, $$props) {
|
|
@@ -7109,7 +7113,7 @@ function MCQImageModal($$anchor, $$props) {
|
|
|
7109
7113
|
},
|
|
7110
7114
|
onclick: navigatePrevious,
|
|
7111
7115
|
children: ($$anchor4, $$slotProps2) => {
|
|
7112
|
-
var span = root_3$
|
|
7116
|
+
var span = root_3$a();
|
|
7113
7117
|
var node_2 = child(span);
|
|
7114
7118
|
SvgLoader(node_2, {
|
|
7115
7119
|
svgName: "smallChevronLeft",
|
|
@@ -7164,7 +7168,7 @@ function MCQImageModal($$anchor, $$props) {
|
|
|
7164
7168
|
return get$1(fullAnswerText);
|
|
7165
7169
|
},
|
|
7166
7170
|
children: ($$anchor4, $$slotProps2) => {
|
|
7167
|
-
var div_6 = root_5$
|
|
7171
|
+
var div_6 = root_5$6();
|
|
7168
7172
|
var span_2 = child(div_6);
|
|
7169
7173
|
var node_6 = child(span_2);
|
|
7170
7174
|
{
|
|
@@ -7234,7 +7238,7 @@ function MCQImageModal($$anchor, $$props) {
|
|
|
7234
7238
|
},
|
|
7235
7239
|
onclick: navigatePrevious,
|
|
7236
7240
|
children: ($$anchor4, $$slotProps2) => {
|
|
7237
|
-
var span_3 = root_8$
|
|
7241
|
+
var span_3 = root_8$5();
|
|
7238
7242
|
var node_10 = child(span_3);
|
|
7239
7243
|
SvgLoader(node_10, {
|
|
7240
7244
|
svgName: "smallChevronLeft",
|
|
@@ -7446,7 +7450,7 @@ function PromptSection($$anchor, $$props) {
|
|
|
7446
7450
|
return pop($$exports);
|
|
7447
7451
|
}
|
|
7448
7452
|
create_custom_element(PromptSection, { prompt: {} }, [], [], true);
|
|
7449
|
-
var root$
|
|
7453
|
+
var root$g = /* @__PURE__ */ from_html(`<div class="interaction-section"><!></div>`);
|
|
7450
7454
|
function InteractionSection($$anchor, $$props) {
|
|
7451
7455
|
push($$props, true);
|
|
7452
7456
|
let children = prop($$props, "children", 7);
|
|
@@ -7459,7 +7463,7 @@ function InteractionSection($$anchor, $$props) {
|
|
|
7459
7463
|
flushSync();
|
|
7460
7464
|
}
|
|
7461
7465
|
};
|
|
7462
|
-
var div = root$
|
|
7466
|
+
var div = root$g();
|
|
7463
7467
|
var node = child(div);
|
|
7464
7468
|
snippet(node, () => children() ?? noop);
|
|
7465
7469
|
reset(div);
|
|
@@ -7467,10 +7471,10 @@ function InteractionSection($$anchor, $$props) {
|
|
|
7467
7471
|
return pop($$exports);
|
|
7468
7472
|
}
|
|
7469
7473
|
create_custom_element(InteractionSection, { children: {} }, [], [], true);
|
|
7470
|
-
var root_5$
|
|
7474
|
+
var root_5$5 = /* @__PURE__ */ from_html(`<div></div>`);
|
|
7471
7475
|
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);
|
|
7472
7476
|
var root_7$4 = /* @__PURE__ */ from_html(`<div></div>`);
|
|
7473
|
-
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>`);
|
|
7477
|
+
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 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>`);
|
|
7474
7478
|
function PromptStimulusImageModal($$anchor, $$props) {
|
|
7475
7479
|
push($$props, true);
|
|
7476
7480
|
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);
|
|
@@ -7639,7 +7643,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
|
|
|
7639
7643
|
var node_3 = sibling(div_5, 2);
|
|
7640
7644
|
{
|
|
7641
7645
|
var consequent = ($$anchor5) => {
|
|
7642
|
-
var div_6 = root_5$
|
|
7646
|
+
var div_6 = root_5$5();
|
|
7643
7647
|
template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
|
|
7644
7648
|
append($$anchor5, div_6);
|
|
7645
7649
|
};
|
|
@@ -8081,7 +8085,7 @@ const shouldRenderSection = (section) => section.condition !== false;
|
|
|
8081
8085
|
const getClassString = (classes = []) => classes.join(" ");
|
|
8082
8086
|
const getStyleString = (styles = {}) => Object.entries(styles).map(([k, v]) => `${k}:${v}`).join(";");
|
|
8083
8087
|
var root_4$4 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4"> </p>`);
|
|
8084
|
-
var root_5$
|
|
8088
|
+
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>`);
|
|
8085
8089
|
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);
|
|
8086
8090
|
var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
|
|
8087
8091
|
function CommonMedia($$anchor, $$props) {
|
|
@@ -8213,7 +8217,7 @@ function CommonMedia($$anchor, $$props) {
|
|
|
8213
8217
|
var node_4 = sibling(div_1, 2);
|
|
8214
8218
|
{
|
|
8215
8219
|
var consequent_1 = ($$anchor4) => {
|
|
8216
|
-
var div_4 = root_5$
|
|
8220
|
+
var div_4 = root_5$4();
|
|
8217
8221
|
var button = child(div_4);
|
|
8218
8222
|
button.__click = toggleLongDescription;
|
|
8219
8223
|
button.__keydown = handleKeyDown;
|
|
@@ -8297,24 +8301,42 @@ create_custom_element(
|
|
|
8297
8301
|
[],
|
|
8298
8302
|
true
|
|
8299
8303
|
);
|
|
8300
|
-
var
|
|
8304
|
+
var root_1$i = /* @__PURE__ */ from_html(`<img alt="" class="absolute w-0 h-0 opacity-0 pointer-events-none invisible" aria-hidden="true"/>`);
|
|
8301
8305
|
var root_4$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8302
|
-
var
|
|
8303
|
-
var
|
|
8306
|
+
var root_5$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8307
|
+
var root_3$9 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8304
8308
|
var root_7$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8305
|
-
var
|
|
8306
|
-
var
|
|
8309
|
+
var root_8$4 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8310
|
+
var root_6$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8311
|
+
var root_2$b = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!></div>`);
|
|
8312
|
+
var root$f = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8307
8313
|
function StimulusSection($$anchor, $$props) {
|
|
8308
8314
|
push($$props, true);
|
|
8309
8315
|
let stimulusData = prop($$props, "stimulusData", 7), stimulusAlignment = prop($$props, "stimulusAlignment", 7), stimulusType = prop($$props, "stimulusType", 7), onexpandImage = prop($$props, "onexpandImage", 7);
|
|
8316
|
+
let isImageLoaded = /* @__PURE__ */ state(false);
|
|
8317
|
+
user_effect(() => {
|
|
8318
|
+
if (stimulusData().fileUrl && stimulusData().hasMedia) {
|
|
8319
|
+
set(isImageLoaded, false);
|
|
8320
|
+
} else if (!stimulusData().hasMedia) {
|
|
8321
|
+
set(isImageLoaded, true);
|
|
8322
|
+
}
|
|
8323
|
+
});
|
|
8324
|
+
const handleImageLoad = () => {
|
|
8325
|
+
set(isImageLoaded, true);
|
|
8326
|
+
};
|
|
8327
|
+
const handleImageError = () => {
|
|
8328
|
+
set(isImageLoaded, true);
|
|
8329
|
+
};
|
|
8310
8330
|
const windowWidth = getReactiveWindowWidth();
|
|
8311
8331
|
let showContent = /* @__PURE__ */ user_derived(() => stimulusData().hasMedia || stimulusData().hasText);
|
|
8312
8332
|
let isInlineMedia = /* @__PURE__ */ user_derived(() => stimulusData().fileAlignment === ALIGNMENT.INLINE);
|
|
8313
8333
|
let isInlineText = /* @__PURE__ */ user_derived(() => stimulusData().stimulusTextAlignment === ALIGNMENT.INLINE);
|
|
8314
8334
|
let isTextFirst = /* @__PURE__ */ user_derived(() => stimulusData().stimulusLayoutOrder === LAYOUT_ORDER.TEXT_FIRST);
|
|
8315
8335
|
let configuredStimulusText = /* @__PURE__ */ user_derived(() => configureHtmlString(stimulusData().stimulusText, getStimulusTextMaxHeight(stimulusData().fileAlignment, stimulusData().stimulusTextAlignment, stimulusData().hasMedia, stimulusData().hasText)));
|
|
8336
|
+
let configuredLongDescription = /* @__PURE__ */ user_derived(() => configureHtmlString(stimulusData().longDescription, getStimulusTextMaxHeight(stimulusData().fileAlignment, stimulusData().stimulusTextAlignment, stimulusData().hasMedia, stimulusData().hasText)));
|
|
8316
8337
|
const shouldShowText = /* @__PURE__ */ user_derived(() => stimulusData().hasText && (stimulusData().stimulusTextAlignment === stimulusAlignment() || stimulusData().stimulusTextAlignment !== stimulusAlignment() && windowWidth.value < BREAKPOINTS.LG) && (!stimulusType() || stimulusType() === "stimulus-text"));
|
|
8317
8338
|
const shouldShowMedia = /* @__PURE__ */ user_derived(() => stimulusData().hasMedia && (stimulusData().fileAlignment === stimulusAlignment() || stimulusData().fileAlignment !== stimulusAlignment() && windowWidth.value < BREAKPOINTS.LG) && (!stimulusType() || stimulusType() === "stimulus-media"));
|
|
8339
|
+
let canRenderStimulus = /* @__PURE__ */ user_derived(() => get$1(showContent) && get$1(isImageLoaded));
|
|
8318
8340
|
let textContainerClass = /* @__PURE__ */ user_derived(() => `stimulus-text ${get$1(isInlineText) ? "inline-text" : "block-text"}`);
|
|
8319
8341
|
let textContentClass = /* @__PURE__ */ user_derived(() => {
|
|
8320
8342
|
const spacing = get$1(isInlineText) ? "py-2" : get$1(isTextFirst) || get$1(isInlineMedia) ? "pt-0" : "";
|
|
@@ -8361,21 +8383,35 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8361
8383
|
flushSync();
|
|
8362
8384
|
}
|
|
8363
8385
|
};
|
|
8364
|
-
var fragment =
|
|
8386
|
+
var fragment = root$f();
|
|
8365
8387
|
var node = first_child(fragment);
|
|
8366
8388
|
{
|
|
8367
|
-
var
|
|
8368
|
-
var
|
|
8369
|
-
|
|
8389
|
+
var consequent = ($$anchor2) => {
|
|
8390
|
+
var img = root_1$i();
|
|
8391
|
+
template_effect(() => set_attribute(img, "src", stimulusData().fileUrl));
|
|
8392
|
+
event("load", img, handleImageLoad);
|
|
8393
|
+
event("error", img, handleImageError);
|
|
8394
|
+
replay_events(img);
|
|
8395
|
+
append($$anchor2, img);
|
|
8396
|
+
};
|
|
8397
|
+
if_block(node, ($$render) => {
|
|
8398
|
+
if (get$1(showContent) && get$1(shouldShowMedia) && !get$1(isImageLoaded)) $$render(consequent);
|
|
8399
|
+
});
|
|
8400
|
+
}
|
|
8401
|
+
var node_1 = sibling(node, 2);
|
|
8402
|
+
{
|
|
8403
|
+
var consequent_6 = ($$anchor2) => {
|
|
8404
|
+
var div = root_2$b();
|
|
8405
|
+
var node_2 = child(div);
|
|
8370
8406
|
{
|
|
8371
|
-
var
|
|
8372
|
-
var fragment_1 =
|
|
8373
|
-
var
|
|
8407
|
+
var consequent_3 = ($$anchor3) => {
|
|
8408
|
+
var fragment_1 = root_3$9();
|
|
8409
|
+
var node_3 = first_child(fragment_1);
|
|
8374
8410
|
{
|
|
8375
|
-
var
|
|
8376
|
-
var div_1 =
|
|
8377
|
-
var
|
|
8378
|
-
CommonStringToHtml(
|
|
8411
|
+
var consequent_1 = ($$anchor4) => {
|
|
8412
|
+
var div_1 = root_4$3();
|
|
8413
|
+
var node_4 = child(div_1);
|
|
8414
|
+
CommonStringToHtml(node_4, {
|
|
8379
8415
|
get htmlString() {
|
|
8380
8416
|
return get$1(configuredStimulusText);
|
|
8381
8417
|
},
|
|
@@ -8387,16 +8423,16 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8387
8423
|
template_effect(() => set_class(div_1, 1, clsx(get$1(textContainerClass))));
|
|
8388
8424
|
append($$anchor4, div_1);
|
|
8389
8425
|
};
|
|
8390
|
-
if_block(
|
|
8391
|
-
if (get$1(shouldShowText)) $$render(
|
|
8426
|
+
if_block(node_3, ($$render) => {
|
|
8427
|
+
if (get$1(shouldShowText)) $$render(consequent_1);
|
|
8392
8428
|
});
|
|
8393
8429
|
}
|
|
8394
|
-
var
|
|
8430
|
+
var node_5 = sibling(node_3, 2);
|
|
8395
8431
|
{
|
|
8396
|
-
var
|
|
8397
|
-
var div_2 =
|
|
8398
|
-
var
|
|
8399
|
-
CommonMedia(
|
|
8432
|
+
var consequent_2 = ($$anchor4) => {
|
|
8433
|
+
var div_2 = root_5$3();
|
|
8434
|
+
var node_6 = child(div_2);
|
|
8435
|
+
CommonMedia(node_6, {
|
|
8400
8436
|
get fileUrl() {
|
|
8401
8437
|
return stimulusData().fileUrl;
|
|
8402
8438
|
},
|
|
@@ -8407,7 +8443,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8407
8443
|
return stimulusData().altText;
|
|
8408
8444
|
},
|
|
8409
8445
|
get longDescription() {
|
|
8410
|
-
return
|
|
8446
|
+
return get$1(configuredLongDescription);
|
|
8411
8447
|
},
|
|
8412
8448
|
get fileCaption() {
|
|
8413
8449
|
return stimulusData().caption;
|
|
@@ -8420,20 +8456,20 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8420
8456
|
template_effect(() => set_class(div_2, 1, clsx(get$1(mediaContainerClass))));
|
|
8421
8457
|
append($$anchor4, div_2);
|
|
8422
8458
|
};
|
|
8423
|
-
if_block(
|
|
8424
|
-
if (get$1(shouldShowMedia)) $$render(
|
|
8459
|
+
if_block(node_5, ($$render) => {
|
|
8460
|
+
if (get$1(shouldShowMedia)) $$render(consequent_2);
|
|
8425
8461
|
});
|
|
8426
8462
|
}
|
|
8427
8463
|
append($$anchor3, fragment_1);
|
|
8428
8464
|
};
|
|
8429
8465
|
var alternate = ($$anchor3) => {
|
|
8430
|
-
var fragment_2 =
|
|
8431
|
-
var
|
|
8466
|
+
var fragment_2 = root_6$2();
|
|
8467
|
+
var node_7 = first_child(fragment_2);
|
|
8432
8468
|
{
|
|
8433
|
-
var
|
|
8434
|
-
var div_3 =
|
|
8435
|
-
var
|
|
8436
|
-
CommonMedia(
|
|
8469
|
+
var consequent_4 = ($$anchor4) => {
|
|
8470
|
+
var div_3 = root_7$3();
|
|
8471
|
+
var node_8 = child(div_3);
|
|
8472
|
+
CommonMedia(node_8, {
|
|
8437
8473
|
get fileUrl() {
|
|
8438
8474
|
return stimulusData().fileUrl;
|
|
8439
8475
|
},
|
|
@@ -8444,7 +8480,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8444
8480
|
return stimulusData().altText;
|
|
8445
8481
|
},
|
|
8446
8482
|
get longDescription() {
|
|
8447
|
-
return
|
|
8483
|
+
return get$1(configuredLongDescription);
|
|
8448
8484
|
},
|
|
8449
8485
|
get fileCaption() {
|
|
8450
8486
|
return stimulusData().caption;
|
|
@@ -8457,16 +8493,16 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8457
8493
|
template_effect(() => set_class(div_3, 1, clsx(get$1(mediaContainerClass))));
|
|
8458
8494
|
append($$anchor4, div_3);
|
|
8459
8495
|
};
|
|
8460
|
-
if_block(
|
|
8461
|
-
if (get$1(shouldShowMedia)) $$render(
|
|
8496
|
+
if_block(node_7, ($$render) => {
|
|
8497
|
+
if (get$1(shouldShowMedia)) $$render(consequent_4);
|
|
8462
8498
|
});
|
|
8463
8499
|
}
|
|
8464
|
-
var
|
|
8500
|
+
var node_9 = sibling(node_7, 2);
|
|
8465
8501
|
{
|
|
8466
|
-
var
|
|
8467
|
-
var div_4 =
|
|
8468
|
-
var
|
|
8469
|
-
CommonStringToHtml(
|
|
8502
|
+
var consequent_5 = ($$anchor4) => {
|
|
8503
|
+
var div_4 = root_8$4();
|
|
8504
|
+
var node_10 = child(div_4);
|
|
8505
|
+
CommonStringToHtml(node_10, {
|
|
8470
8506
|
get htmlString() {
|
|
8471
8507
|
return get$1(configuredStimulusText);
|
|
8472
8508
|
},
|
|
@@ -8478,22 +8514,22 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8478
8514
|
template_effect(() => set_class(div_4, 1, clsx(get$1(textContainerClass))));
|
|
8479
8515
|
append($$anchor4, div_4);
|
|
8480
8516
|
};
|
|
8481
|
-
if_block(
|
|
8482
|
-
if (get$1(shouldShowText)) $$render(
|
|
8517
|
+
if_block(node_9, ($$render) => {
|
|
8518
|
+
if (get$1(shouldShowText)) $$render(consequent_5);
|
|
8483
8519
|
});
|
|
8484
8520
|
}
|
|
8485
8521
|
append($$anchor3, fragment_2);
|
|
8486
8522
|
};
|
|
8487
|
-
if_block(
|
|
8488
|
-
if (get$1(isTextFirst)) $$render(
|
|
8523
|
+
if_block(node_2, ($$render) => {
|
|
8524
|
+
if (get$1(isTextFirst)) $$render(consequent_3);
|
|
8489
8525
|
else $$render(alternate, false);
|
|
8490
8526
|
});
|
|
8491
8527
|
}
|
|
8492
8528
|
reset(div);
|
|
8493
8529
|
append($$anchor2, div);
|
|
8494
8530
|
};
|
|
8495
|
-
if_block(
|
|
8496
|
-
if (get$1(
|
|
8531
|
+
if_block(node_1, ($$render) => {
|
|
8532
|
+
if (get$1(canRenderStimulus)) $$render(consequent_6);
|
|
8497
8533
|
});
|
|
8498
8534
|
}
|
|
8499
8535
|
append($$anchor, fragment);
|
|
@@ -8512,10 +8548,10 @@ create_custom_element(
|
|
|
8512
8548
|
true
|
|
8513
8549
|
);
|
|
8514
8550
|
var root_8$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
|
|
8515
|
-
var root_13
|
|
8516
|
-
var root_15
|
|
8551
|
+
var root_13 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
|
|
8552
|
+
var root_15 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
|
|
8517
8553
|
var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8518
|
-
var root_16 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8554
|
+
var root_16$1 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8519
8555
|
var root$e = /* @__PURE__ */ from_html(`<div class="prompt-container"><div><div></div> <!></div></div> <!>`, 1);
|
|
8520
8556
|
function PromptContainer($$anchor, $$props) {
|
|
8521
8557
|
push($$props, true);
|
|
@@ -8706,7 +8742,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8706
8742
|
var node_6 = first_child(fragment_10);
|
|
8707
8743
|
{
|
|
8708
8744
|
var consequent_5 = ($$anchor8) => {
|
|
8709
|
-
var div_5 = root_13
|
|
8745
|
+
var div_5 = root_13();
|
|
8710
8746
|
append($$anchor8, div_5);
|
|
8711
8747
|
};
|
|
8712
8748
|
var alternate = ($$anchor8) => {
|
|
@@ -8714,7 +8750,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8714
8750
|
var node_7 = first_child(fragment_11);
|
|
8715
8751
|
{
|
|
8716
8752
|
var consequent_6 = ($$anchor9) => {
|
|
8717
|
-
var div_6 = root_15
|
|
8753
|
+
var div_6 = root_15();
|
|
8718
8754
|
var node_8 = child(div_6);
|
|
8719
8755
|
snippet(node_8, () => feedback() ?? noop);
|
|
8720
8756
|
reset(div_6);
|
|
@@ -8807,7 +8843,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8807
8843
|
var node_9 = sibling(div_2, 2);
|
|
8808
8844
|
{
|
|
8809
8845
|
var consequent_7 = ($$anchor2) => {
|
|
8810
|
-
var div_7 = root_16();
|
|
8846
|
+
var div_7 = root_16$1();
|
|
8811
8847
|
var node_10 = child(div_7);
|
|
8812
8848
|
StimulusSection(node_10, {
|
|
8813
8849
|
get stimulusData() {
|
|
@@ -8894,9 +8930,9 @@ create_custom_element(
|
|
|
8894
8930
|
);
|
|
8895
8931
|
var root_1$g = /* @__PURE__ */ from_html(`<p class="text-charcoal text-sm leading-[19.2px] mb-2"> </p>`);
|
|
8896
8932
|
var root_2$a = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5"> </span>`);
|
|
8897
|
-
var root_3$
|
|
8933
|
+
var root_3$8 = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5">Missing answer:</span>`);
|
|
8898
8934
|
var root_4$2 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="text-green-900 mr-1"><!></span>`);
|
|
8899
|
-
var root_5$
|
|
8935
|
+
var root_5$2 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
|
|
8900
8936
|
var root_9$1 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
|
|
8901
8937
|
var root_8$2 = /* @__PURE__ */ from_html(`<span><!></span>`);
|
|
8902
8938
|
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 +9064,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9028
9064
|
var node_2 = sibling(node_1, 2);
|
|
9029
9065
|
{
|
|
9030
9066
|
var consequent_2 = ($$anchor2) => {
|
|
9031
|
-
var span_6 = root_3$
|
|
9067
|
+
var span_6 = root_3$8();
|
|
9032
9068
|
append($$anchor2, span_6);
|
|
9033
9069
|
};
|
|
9034
9070
|
if_block(node_2, ($$render) => {
|
|
@@ -9061,7 +9097,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9061
9097
|
var node_6 = sibling(node_4, 2);
|
|
9062
9098
|
{
|
|
9063
9099
|
var consequent_5 = ($$anchor2) => {
|
|
9064
|
-
var span_9 = root_5$
|
|
9100
|
+
var span_9 = root_5$2();
|
|
9065
9101
|
var node_7 = child(span_9);
|
|
9066
9102
|
{
|
|
9067
9103
|
var consequent_4 = ($$anchor3) => {
|
|
@@ -9308,7 +9344,7 @@ create_custom_element(
|
|
|
9308
9344
|
[],
|
|
9309
9345
|
true
|
|
9310
9346
|
);
|
|
9311
|
-
var root_3$
|
|
9347
|
+
var root_3$7 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
|
|
9312
9348
|
var root$c = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
9313
9349
|
function MCQComponent($$anchor, $$props) {
|
|
9314
9350
|
push($$props, true);
|
|
@@ -9446,7 +9482,7 @@ function MCQComponent($$anchor, $$props) {
|
|
|
9446
9482
|
var node_1 = first_child(fragment_2);
|
|
9447
9483
|
{
|
|
9448
9484
|
var consequent = ($$anchor3) => {
|
|
9449
|
-
var div = root_3$
|
|
9485
|
+
var div = root_3$7();
|
|
9450
9486
|
var node_2 = child(div);
|
|
9451
9487
|
MCQFeedback(node_2, {
|
|
9452
9488
|
get feedbackState() {
|
|
@@ -10297,7 +10333,7 @@ action.update = n.update;
|
|
|
10297
10333
|
action.destroy = n.destroy;
|
|
10298
10334
|
var root_1$c = /* @__PURE__ */ from_html(`<label aria-hidden="true"><span></span> <span> </span></label>`);
|
|
10299
10335
|
var root_2$6 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
|
|
10300
|
-
var root_3$
|
|
10336
|
+
var root_3$6 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
|
|
10301
10337
|
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>`);
|
|
10302
10338
|
var root$9 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
|
|
10303
10339
|
function AnswerDisplay($$anchor, $$props) {
|
|
@@ -10478,7 +10514,7 @@ function AnswerDisplay($$anchor, $$props) {
|
|
|
10478
10514
|
append($$anchor2, div_1);
|
|
10479
10515
|
};
|
|
10480
10516
|
var alternate = ($$anchor2) => {
|
|
10481
|
-
var textarea = root_3$
|
|
10517
|
+
var textarea = root_3$6();
|
|
10482
10518
|
remove_textarea_child(textarea);
|
|
10483
10519
|
action$1(textarea, ($$node) => action?.($$node));
|
|
10484
10520
|
template_effect(() => {
|
|
@@ -10971,7 +11007,7 @@ create_custom_element(
|
|
|
10971
11007
|
[],
|
|
10972
11008
|
true
|
|
10973
11009
|
);
|
|
10974
|
-
var root_3$
|
|
11010
|
+
var root_3$5 = /* @__PURE__ */ from_html(`<p></p>`);
|
|
10975
11011
|
var root_8$1 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
|
|
10976
11012
|
var root_2$4 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
|
|
10977
11013
|
function TypeInComponent($$anchor, $$props) {
|
|
@@ -11175,7 +11211,7 @@ function TypeInComponent($$anchor, $$props) {
|
|
|
11175
11211
|
var div = root_2$4();
|
|
11176
11212
|
var node_1 = child(div);
|
|
11177
11213
|
each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
|
|
11178
|
-
var p = root_3$
|
|
11214
|
+
var p = root_3$5();
|
|
11179
11215
|
each(p, 21, () => get$1(segment).parts, index, ($$anchor5, part, partIndex) => {
|
|
11180
11216
|
var fragment_2 = comment();
|
|
11181
11217
|
var node_2 = first_child(fragment_2);
|
|
@@ -13842,8 +13878,8 @@ function isInt(value) {
|
|
|
13842
13878
|
})(parseFloat(value));
|
|
13843
13879
|
}
|
|
13844
13880
|
var root_1$9 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
|
|
13845
|
-
var root_3$
|
|
13846
|
-
var root_5$
|
|
13881
|
+
var root_3$4 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
|
|
13882
|
+
var root_5$1 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
|
|
13847
13883
|
var root_7$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
|
|
13848
13884
|
var root$6 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
|
|
13849
13885
|
function CategoriseItem($$anchor, $$props) {
|
|
@@ -14136,7 +14172,7 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14136
14172
|
var node_3 = first_child(fragment);
|
|
14137
14173
|
{
|
|
14138
14174
|
var consequent_1 = ($$anchor3) => {
|
|
14139
|
-
var span_4 = root_3$
|
|
14175
|
+
var span_4 = root_3$4();
|
|
14140
14176
|
var node_4 = child(span_4);
|
|
14141
14177
|
SvgLoader(node_4, { svgName: "errorSolid", className: "incorrect-icon" });
|
|
14142
14178
|
reset(span_4);
|
|
@@ -14147,7 +14183,7 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14147
14183
|
var node_5 = first_child(fragment_1);
|
|
14148
14184
|
{
|
|
14149
14185
|
var consequent_2 = ($$anchor4) => {
|
|
14150
|
-
var span_5 = root_5$
|
|
14186
|
+
var span_5 = root_5$1();
|
|
14151
14187
|
var node_6 = child(span_5);
|
|
14152
14188
|
SvgLoader(node_6, { svgName: "success", className: "missing-correct-icon" });
|
|
14153
14189
|
reset(span_5);
|
|
@@ -14653,7 +14689,7 @@ create_custom_element(
|
|
|
14653
14689
|
true
|
|
14654
14690
|
);
|
|
14655
14691
|
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>`);
|
|
14656
|
-
var root_3$
|
|
14692
|
+
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>`);
|
|
14657
14693
|
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>`);
|
|
14658
14694
|
var root$4 = /* @__PURE__ */ from_html(`<div role="group"><div><!> <!></div> <!></div>`);
|
|
14659
14695
|
function CategoriseCategory($$anchor, $$props) {
|
|
@@ -14920,7 +14956,7 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
14920
14956
|
append($$anchor3, svg);
|
|
14921
14957
|
};
|
|
14922
14958
|
var alternate = ($$anchor3) => {
|
|
14923
|
-
var svg_1 = root_3$
|
|
14959
|
+
var svg_1 = root_3$3();
|
|
14924
14960
|
append($$anchor3, svg_1);
|
|
14925
14961
|
};
|
|
14926
14962
|
if_block(node_2, ($$render) => {
|
|
@@ -15056,7 +15092,7 @@ create_custom_element(
|
|
|
15056
15092
|
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
|
|
15057
15093
|
absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">Word Bin is empty</div>`);
|
|
15058
15094
|
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>`);
|
|
15059
|
-
var root_3$
|
|
15095
|
+
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>`);
|
|
15060
15096
|
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 </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>`);
|
|
15061
15097
|
function CategoriseWordBin($$anchor, $$props) {
|
|
15062
15098
|
push($$props, true);
|
|
@@ -15369,7 +15405,7 @@ function CategoriseWordBin($$anchor, $$props) {
|
|
|
15369
15405
|
var node_4 = sibling(node_3, 2);
|
|
15370
15406
|
{
|
|
15371
15407
|
var consequent_2 = ($$anchor2) => {
|
|
15372
|
-
var button_1 = root_3$
|
|
15408
|
+
var button_1 = root_3$2();
|
|
15373
15409
|
button_1.__click = () => handleNavigate("right");
|
|
15374
15410
|
button_1.__keydown = (e2) => {
|
|
15375
15411
|
if (e2.key === "Enter" || e2.key === " ") {
|
|
@@ -16953,83 +16989,144 @@ function createDropdownState(initialValue) {
|
|
|
16953
16989
|
searchString: ""
|
|
16954
16990
|
};
|
|
16955
16991
|
}
|
|
16956
|
-
const
|
|
16957
|
-
return
|
|
16992
|
+
const hasRenderedIds = (ids) => {
|
|
16993
|
+
return !!ids && ids.length > 0;
|
|
16958
16994
|
};
|
|
16959
|
-
const
|
|
16960
|
-
return selections.
|
|
16995
|
+
const createSelectionMap = (selections) => {
|
|
16996
|
+
return new Map(selections.map((s) => [s.id, s]));
|
|
16961
16997
|
};
|
|
16962
|
-
const
|
|
16998
|
+
const isAllAnswered$1 = (selections, renderedIds) => {
|
|
16999
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17000
|
+
const selectionMap = createSelectionMap(selections);
|
|
17001
|
+
return renderedIds.every((id) => {
|
|
17002
|
+
const selection = selectionMap.get(id);
|
|
17003
|
+
return selection && selection.choice !== DROPDOWN_INTERACTION.EMPTY_CHOICE && selection.choice !== DROPDOWN_INTERACTION.PLACEHOLDER;
|
|
17004
|
+
});
|
|
17005
|
+
}
|
|
17006
|
+
return selections.every(
|
|
17007
|
+
(item) => item.choice !== DROPDOWN_INTERACTION.EMPTY_CHOICE && item.choice !== DROPDOWN_INTERACTION.PLACEHOLDER
|
|
17008
|
+
);
|
|
17009
|
+
};
|
|
17010
|
+
const isAllSkipped = (selections, renderedIds) => {
|
|
17011
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17012
|
+
const selectionMap = createSelectionMap(selections);
|
|
17013
|
+
return renderedIds.every((id) => {
|
|
17014
|
+
const selection = selectionMap.get(id);
|
|
17015
|
+
return !selection || selection.choice === DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17016
|
+
});
|
|
17017
|
+
}
|
|
17018
|
+
return selections.every((item) => item.choice === DROPDOWN_INTERACTION.EMPTY_CHOICE);
|
|
17019
|
+
};
|
|
17020
|
+
const calculateAnswerResults = (config, selections, renderedIds) => {
|
|
17021
|
+
const selectionMap = createSelectionMap(selections);
|
|
17022
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17023
|
+
return renderedIds.map((id) => {
|
|
17024
|
+
const selection = selectionMap.get(id);
|
|
17025
|
+
if (!selection) return false;
|
|
17026
|
+
const correctAnswers = config.correctAnswer[id] || [];
|
|
17027
|
+
if (correctAnswers.length === 0) return false;
|
|
17028
|
+
return correctAnswers.includes(selection.choice);
|
|
17029
|
+
});
|
|
17030
|
+
}
|
|
16963
17031
|
return selections.map((item) => {
|
|
16964
17032
|
const correctAnswers = config.correctAnswer[item.id] || [];
|
|
16965
17033
|
if (correctAnswers.length === 0) return false;
|
|
16966
17034
|
return correctAnswers.includes(item.choice);
|
|
16967
17035
|
});
|
|
16968
17036
|
};
|
|
16969
|
-
const getCorrectAnswersForDisplay = (config, selections, answerResults) => {
|
|
17037
|
+
const getCorrectAnswersForDisplay = (config, selections, answerResults, renderedIds) => {
|
|
17038
|
+
const selectionMap = createSelectionMap(selections);
|
|
17039
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17040
|
+
return renderedIds.map((id, index2) => {
|
|
17041
|
+
const selection = selectionMap.get(id);
|
|
17042
|
+
const correctAnswersList = config.correctAnswer[id] || [];
|
|
17043
|
+
const firstCorrectAnswer = correctAnswersList[0] || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17044
|
+
const isDropdownCorrect = answerResults[index2];
|
|
17045
|
+
if (correctAnswersList.length === 0) return DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17046
|
+
return isDropdownCorrect && selection ? selection.choice : firstCorrectAnswer;
|
|
17047
|
+
});
|
|
17048
|
+
}
|
|
16970
17049
|
return selections.map((item, index2) => {
|
|
16971
17050
|
const correctAnswersList = config.correctAnswer[item.id] || [];
|
|
16972
|
-
const firstCorrectAnswer = correctAnswersList[0] ||
|
|
16973
|
-
const
|
|
16974
|
-
if (correctAnswersList.length === 0) return
|
|
16975
|
-
return
|
|
17051
|
+
const firstCorrectAnswer = correctAnswersList[0] || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17052
|
+
const isDropdownCorrect = answerResults[index2];
|
|
17053
|
+
if (correctAnswersList.length === 0) return DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17054
|
+
return isDropdownCorrect ? item.choice : firstCorrectAnswer;
|
|
16976
17055
|
});
|
|
16977
17056
|
};
|
|
16978
|
-
const getSessionAnswersForDisplay = (selections) => {
|
|
17057
|
+
const getSessionAnswersForDisplay = (selections, renderedIds) => {
|
|
17058
|
+
const selectionMap = createSelectionMap(selections);
|
|
17059
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17060
|
+
return renderedIds.map((id) => {
|
|
17061
|
+
const selection = selectionMap.get(id);
|
|
17062
|
+
const answer = selection?.choice || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17063
|
+
return answer === DROPDOWN_INTERACTION.PLACEHOLDER || answer === DROPDOWN_INTERACTION.EMPTY_CHOICE ? DROPDOWN_INTERACTION.EMPTY_CHOICE : answer;
|
|
17064
|
+
});
|
|
17065
|
+
}
|
|
16979
17066
|
return selections.map((item) => {
|
|
16980
|
-
const answer = item.choice ||
|
|
16981
|
-
return answer ===
|
|
17067
|
+
const answer = item.choice || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17068
|
+
return answer === DROPDOWN_INTERACTION.PLACEHOLDER || answer === DROPDOWN_INTERACTION.EMPTY_CHOICE ? DROPDOWN_INTERACTION.EMPTY_CHOICE : answer;
|
|
16982
17069
|
});
|
|
16983
17070
|
};
|
|
16984
|
-
function calculateDropdownFeedback(state2, config, validateFn) {
|
|
17071
|
+
function calculateDropdownFeedback(state2, config, validateFn, renderedDropdownIds) {
|
|
16985
17072
|
if (config.mode === MODES.PREVIEW) {
|
|
16986
17073
|
return {
|
|
16987
17074
|
showFeedback: true,
|
|
16988
17075
|
isAllCorrect: true,
|
|
16989
17076
|
isSkipped: false,
|
|
16990
17077
|
isAllAnswered: true,
|
|
16991
|
-
resultFeedback:
|
|
17078
|
+
resultFeedback: DROPDOWN_INTERACTION.EMPTY_CHOICE,
|
|
16992
17079
|
answerResults: [],
|
|
16993
17080
|
correctAnswers: [],
|
|
16994
17081
|
sessionAnswer: []
|
|
16995
17082
|
};
|
|
16996
17083
|
}
|
|
16997
17084
|
const selections = state2.data.selected;
|
|
16998
|
-
const allAnswered = isAllAnswered$1(selections);
|
|
17085
|
+
const allAnswered = isAllAnswered$1(selections, renderedDropdownIds);
|
|
16999
17086
|
if (config.mode === MODES.SESSION && !config.isFinished) {
|
|
17000
17087
|
return {
|
|
17001
17088
|
showFeedback: false,
|
|
17002
17089
|
isAllCorrect: false,
|
|
17003
17090
|
isSkipped: false,
|
|
17004
17091
|
isAllAnswered: allAnswered,
|
|
17005
|
-
resultFeedback:
|
|
17092
|
+
resultFeedback: DROPDOWN_INTERACTION.EMPTY_CHOICE,
|
|
17006
17093
|
answerResults: [],
|
|
17007
17094
|
correctAnswers: [],
|
|
17008
|
-
sessionAnswer: getSessionAnswersForDisplay(selections)
|
|
17095
|
+
sessionAnswer: getSessionAnswersForDisplay(selections, renderedDropdownIds)
|
|
17009
17096
|
};
|
|
17010
17097
|
}
|
|
17011
|
-
const isSkipped = isAllSkipped(selections);
|
|
17098
|
+
const isSkipped = isAllSkipped(selections, renderedDropdownIds);
|
|
17099
|
+
const answerResults = calculateAnswerResults(config, selections, renderedDropdownIds);
|
|
17012
17100
|
let validationResult = {
|
|
17013
17101
|
isValid: false,
|
|
17014
|
-
|
|
17102
|
+
score: 0,
|
|
17103
|
+
maxScore: hasRenderedIds(renderedDropdownIds) ? renderedDropdownIds.length : Object.keys(config.options).length,
|
|
17104
|
+
feedback: DROPDOWN_INTERACTION.EMPTY_CHOICE
|
|
17015
17105
|
};
|
|
17016
17106
|
if (allAnswered) {
|
|
17107
|
+
const selectionsToValidate = hasRenderedIds(renderedDropdownIds) ? selections.filter((sel) => renderedDropdownIds.includes(sel.id)) : selections;
|
|
17017
17108
|
validationResult = validateFn({
|
|
17018
|
-
answer:
|
|
17109
|
+
answer: selectionsToValidate,
|
|
17019
17110
|
timestamp: state2.lastModified
|
|
17020
17111
|
});
|
|
17112
|
+
if (hasRenderedIds(renderedDropdownIds)) {
|
|
17113
|
+
const renderedCorrectCount = answerResults.filter(Boolean).length;
|
|
17114
|
+
validationResult.score = renderedCorrectCount;
|
|
17115
|
+
validationResult.maxScore = renderedDropdownIds.length;
|
|
17116
|
+
validationResult.isValid = renderedCorrectCount === renderedDropdownIds.length;
|
|
17117
|
+
validationResult.feedback = renderedCorrectCount === renderedDropdownIds.length ? config.feedback.correct : config.feedback.incorrect;
|
|
17118
|
+
}
|
|
17021
17119
|
} else if (config.mode === MODES.SESSION && config.isFinished && !allAnswered) {
|
|
17022
17120
|
validationResult = {
|
|
17023
17121
|
isValid: false,
|
|
17024
17122
|
score: 0,
|
|
17025
|
-
maxScore: Object.keys(config.options).length,
|
|
17123
|
+
maxScore: hasRenderedIds(renderedDropdownIds) ? renderedDropdownIds.length : Object.keys(config.options).length,
|
|
17026
17124
|
feedback: config.feedback.incorrect
|
|
17027
17125
|
};
|
|
17028
17126
|
}
|
|
17029
|
-
const
|
|
17030
|
-
const
|
|
17031
|
-
const
|
|
17032
|
-
const sessionAnswer = getSessionAnswersForDisplay(selections);
|
|
17127
|
+
const areAllDropdownsCorrect = validationResult.isValid;
|
|
17128
|
+
const correctAnswers = getCorrectAnswersForDisplay(config, selections, answerResults, renderedDropdownIds);
|
|
17129
|
+
const sessionAnswer = getSessionAnswersForDisplay(selections, renderedDropdownIds);
|
|
17033
17130
|
let showFeedback = false;
|
|
17034
17131
|
if (config.mode === MODES.INTERACTIVE) {
|
|
17035
17132
|
showFeedback = allAnswered;
|
|
@@ -17039,10 +17136,10 @@ function calculateDropdownFeedback(state2, config, validateFn) {
|
|
|
17039
17136
|
}
|
|
17040
17137
|
return {
|
|
17041
17138
|
showFeedback,
|
|
17042
|
-
isAllCorrect,
|
|
17139
|
+
isAllCorrect: areAllDropdownsCorrect,
|
|
17043
17140
|
isSkipped,
|
|
17044
17141
|
isAllAnswered: allAnswered,
|
|
17045
|
-
resultFeedback: validationResult.feedback ||
|
|
17142
|
+
resultFeedback: validationResult.feedback || DROPDOWN_INTERACTION.EMPTY_CHOICE,
|
|
17046
17143
|
answerResults,
|
|
17047
17144
|
correctAnswers,
|
|
17048
17145
|
sessionAnswer
|
|
@@ -17072,20 +17169,21 @@ function useDropdownPosition(config) {
|
|
|
17072
17169
|
};
|
|
17073
17170
|
}
|
|
17074
17171
|
var root_1$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-10"></div>`);
|
|
17075
|
-
var root_2 = /* @__PURE__ */ from_html(`<
|
|
17076
|
-
var
|
|
17077
|
-
var root_6 = /* @__PURE__ */ from_html(`<span class="text-
|
|
17078
|
-
var root_7 = /* @__PURE__ */ from_html(`<span class="
|
|
17079
|
-
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">
|
|
17080
|
-
var
|
|
17081
|
-
var
|
|
17082
|
-
var
|
|
17083
|
-
var
|
|
17084
|
-
var
|
|
17085
|
-
var
|
|
17172
|
+
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>`);
|
|
17173
|
+
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>`);
|
|
17174
|
+
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>`);
|
|
17175
|
+
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>`);
|
|
17176
|
+
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>`);
|
|
17177
|
+
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>`);
|
|
17178
|
+
var root_12 = /* @__PURE__ */ from_html(`<span class="flex items-center text-green-900" aria-hidden="true"><!></span>`);
|
|
17179
|
+
var root_14 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
|
|
17180
|
+
var root_16 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
|
|
17181
|
+
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>`);
|
|
17182
|
+
var root_10 = /* @__PURE__ */ from_html(`<ul class="dropdown-menu block" role="listbox" tabindex="-1"></ul>`);
|
|
17183
|
+
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>`);
|
|
17086
17184
|
function DropdownContainer($$anchor, $$props) {
|
|
17087
17185
|
push($$props, true);
|
|
17088
|
-
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);
|
|
17186
|
+
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);
|
|
17089
17187
|
const dropdownActions = useDropdownState();
|
|
17090
17188
|
const dropdownPosition = useDropdownPosition();
|
|
17091
17189
|
let initializedOptions = /* @__PURE__ */ user_derived(() => {
|
|
@@ -17106,7 +17204,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17106
17204
|
});
|
|
17107
17205
|
const canInteract = /* @__PURE__ */ user_derived(() => !isDataSaving() && mode() !== MODES.PREVIEW && !(mode() === MODES.SESSION && isFinished()));
|
|
17108
17206
|
const canToggleAccordion = /* @__PURE__ */ user_derived(() => !isDataSaving());
|
|
17109
|
-
const isMissing = /* @__PURE__ */ user_derived(() => mode() === MODES.SESSION && isFinished() && (selected() ===
|
|
17207
|
+
const isMissing = /* @__PURE__ */ user_derived(() => mode() === MODES.SESSION && isFinished() && (selected() === DROPDOWN_INTERACTION.PLACEHOLDER || selected() === ""));
|
|
17110
17208
|
const getOptionIcon = (option) => {
|
|
17111
17209
|
const isCorrectAnswer = correctAnswers().includes(option);
|
|
17112
17210
|
const isSelected = option === get$1(state$1).selected;
|
|
@@ -17166,7 +17264,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17166
17264
|
set(isKeyboardNavigation, false);
|
|
17167
17265
|
set(isFirstNavigation, true);
|
|
17168
17266
|
await tick();
|
|
17169
|
-
if (selected() && selected() !==
|
|
17267
|
+
if (selected() && selected() !== DROPDOWN_INTERACTION.PLACEHOLDER && selected() !== "") {
|
|
17170
17268
|
const currentIndex = get$1(initializedOptions).indexOf(selected());
|
|
17171
17269
|
get$1(state$1).activeIndex = currentIndex >= 0 ? currentIndex : null;
|
|
17172
17270
|
} else {
|
|
@@ -17286,7 +17384,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17286
17384
|
}
|
|
17287
17385
|
resizeTimeout = null;
|
|
17288
17386
|
},
|
|
17289
|
-
|
|
17387
|
+
DROPDOWN_INTERACTION.RESIZE_DEBOUNCE_DELAY
|
|
17290
17388
|
);
|
|
17291
17389
|
};
|
|
17292
17390
|
onMount(() => {
|
|
@@ -17323,24 +17421,35 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17323
17421
|
return classes.join(" ");
|
|
17324
17422
|
});
|
|
17325
17423
|
const ariaLabel = /* @__PURE__ */ user_derived(() => {
|
|
17424
|
+
const cleanSelected = useRemoveRichTextHtmlTags(get$1(state$1).selected);
|
|
17326
17425
|
if (mode() === MODES.PREVIEW) {
|
|
17327
|
-
|
|
17426
|
+
const parts2 = ["Correct answer"];
|
|
17427
|
+
if (showNumbering()) parts2.push(`Item number ${dropdownNumber()}`);
|
|
17428
|
+
parts2.push(cleanSelected);
|
|
17429
|
+
return parts2.filter(Boolean).join(", ");
|
|
17328
17430
|
}
|
|
17329
17431
|
if (mode() === MODES.SESSION && isFinished()) {
|
|
17330
17432
|
const correctness = isCorrect() ? "Correct" : "Incorrect";
|
|
17331
|
-
|
|
17433
|
+
const parts2 = [`Student's answer (${correctness})`];
|
|
17434
|
+
if (showNumbering()) parts2.push(`Item number ${dropdownNumber()}`);
|
|
17435
|
+
parts2.push(cleanSelected);
|
|
17436
|
+
return parts2.filter(Boolean).join(", ");
|
|
17332
17437
|
}
|
|
17333
|
-
|
|
17438
|
+
const parts = [];
|
|
17439
|
+
if (showNumbering()) parts.push(`Item number ${dropdownNumber()}`);
|
|
17440
|
+
parts.push(cleanSelected);
|
|
17441
|
+
return parts.filter(Boolean).join(", ");
|
|
17334
17442
|
});
|
|
17335
17443
|
const getOptionAriaLabel = (option, index2) => {
|
|
17336
17444
|
const optionNum = index2 + 1;
|
|
17337
17445
|
const isSelected = option === get$1(state$1).selected;
|
|
17446
|
+
const cleanOption = useRemoveRichTextHtmlTags(option);
|
|
17338
17447
|
if (showFeedback()) {
|
|
17339
17448
|
const isCorrectAnswer = correctAnswers().includes(option);
|
|
17340
17449
|
const correctness = isCorrectAnswer ? "correct" : "incorrect";
|
|
17341
|
-
return isSelected ? `Selected option ${
|
|
17450
|
+
return isSelected ? `Selected option ${cleanOption} ${correctness}` : `Option ${optionNum} ${cleanOption} ${correctness}`;
|
|
17342
17451
|
}
|
|
17343
|
-
return isSelected ? `Selected option ${
|
|
17452
|
+
return isSelected ? `Selected option ${cleanOption}` : `Option ${optionNum} ${cleanOption}`;
|
|
17344
17453
|
};
|
|
17345
17454
|
const isCurrentOption = (index2) => {
|
|
17346
17455
|
return get$1(state$1).isOpen && get$1(isKeyboardNavigation) && get$1(state$1).activeIndex === index2;
|
|
@@ -17426,6 +17535,13 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17426
17535
|
showFeedback($$value);
|
|
17427
17536
|
flushSync();
|
|
17428
17537
|
},
|
|
17538
|
+
get showNumbering() {
|
|
17539
|
+
return showNumbering();
|
|
17540
|
+
},
|
|
17541
|
+
set showNumbering($$value = true) {
|
|
17542
|
+
showNumbering($$value);
|
|
17543
|
+
flushSync();
|
|
17544
|
+
},
|
|
17429
17545
|
get onselect() {
|
|
17430
17546
|
return onselect();
|
|
17431
17547
|
},
|
|
@@ -17462,24 +17578,34 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17462
17578
|
get$1(state$1).isOpen ? handleCloseMenu() : handleOpenMenu();
|
|
17463
17579
|
};
|
|
17464
17580
|
button.__focusout = handleFocusOut;
|
|
17465
|
-
var
|
|
17466
|
-
|
|
17467
|
-
|
|
17468
|
-
|
|
17469
|
-
|
|
17470
|
-
|
|
17581
|
+
var node_1 = child(button);
|
|
17582
|
+
{
|
|
17583
|
+
var consequent_1 = ($$anchor2) => {
|
|
17584
|
+
var div_1 = root_2();
|
|
17585
|
+
var div_2 = child(div_1);
|
|
17586
|
+
var text_1 = child(div_2, true);
|
|
17587
|
+
reset(div_2);
|
|
17588
|
+
reset(div_1);
|
|
17589
|
+
template_effect(() => set_text(text_1, dropdownNumber()));
|
|
17590
|
+
append($$anchor2, div_1);
|
|
17591
|
+
};
|
|
17592
|
+
if_block(node_1, ($$render) => {
|
|
17593
|
+
if (showNumbering()) $$render(consequent_1);
|
|
17594
|
+
});
|
|
17595
|
+
}
|
|
17596
|
+
var div_3 = sibling(node_1, 2);
|
|
17471
17597
|
var span_2 = child(div_3);
|
|
17472
|
-
var
|
|
17473
|
-
html(
|
|
17598
|
+
var node_2 = child(span_2);
|
|
17599
|
+
html(node_2, () => get$1(state$1).selected === "" ? DROPDOWN_INTERACTION.PLACEHOLDER : get$1(state$1).selected);
|
|
17474
17600
|
reset(span_2);
|
|
17475
17601
|
var div_4 = sibling(span_2, 2);
|
|
17476
|
-
var
|
|
17602
|
+
var node_3 = child(div_4);
|
|
17477
17603
|
{
|
|
17478
|
-
var
|
|
17479
|
-
var span_3 =
|
|
17604
|
+
var consequent_2 = ($$anchor2) => {
|
|
17605
|
+
var span_3 = root_3$1();
|
|
17480
17606
|
var span_4 = child(span_3);
|
|
17481
|
-
var
|
|
17482
|
-
SvgLoader(
|
|
17607
|
+
var node_4 = child(span_4);
|
|
17608
|
+
SvgLoader(node_4, { svgName: "successSolid", className: "correct-icon" });
|
|
17483
17609
|
reset(span_4);
|
|
17484
17610
|
next$1(2);
|
|
17485
17611
|
reset(span_3);
|
|
@@ -17487,61 +17613,61 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17487
17613
|
};
|
|
17488
17614
|
var alternate_1 = ($$anchor2) => {
|
|
17489
17615
|
var fragment = comment();
|
|
17490
|
-
var
|
|
17616
|
+
var node_5 = first_child(fragment);
|
|
17491
17617
|
{
|
|
17492
|
-
var
|
|
17618
|
+
var consequent_4 = ($$anchor3) => {
|
|
17493
17619
|
var fragment_1 = comment();
|
|
17494
|
-
var
|
|
17620
|
+
var node_6 = first_child(fragment_1);
|
|
17495
17621
|
{
|
|
17496
|
-
var
|
|
17497
|
-
var span_5 =
|
|
17622
|
+
var consequent_3 = ($$anchor4) => {
|
|
17623
|
+
var span_5 = root_6();
|
|
17498
17624
|
var span_6 = child(span_5);
|
|
17499
|
-
var
|
|
17500
|
-
SvgLoader(
|
|
17625
|
+
var node_7 = child(span_6);
|
|
17626
|
+
SvgLoader(node_7, { svgName: "successSolid", className: "correct-icon" });
|
|
17501
17627
|
reset(span_6);
|
|
17502
17628
|
next$1(2);
|
|
17503
17629
|
reset(span_5);
|
|
17504
17630
|
append($$anchor4, span_5);
|
|
17505
17631
|
};
|
|
17506
17632
|
var alternate = ($$anchor4) => {
|
|
17507
|
-
var span_7 =
|
|
17633
|
+
var span_7 = root_7();
|
|
17508
17634
|
var span_8 = child(span_7);
|
|
17509
|
-
var
|
|
17510
|
-
SvgLoader(
|
|
17635
|
+
var node_8 = child(span_8);
|
|
17636
|
+
SvgLoader(node_8, { svgName: "errorSolid", className: "incorrect-icon" });
|
|
17511
17637
|
reset(span_8);
|
|
17512
17638
|
next$1(2);
|
|
17513
17639
|
reset(span_7);
|
|
17514
17640
|
append($$anchor4, span_7);
|
|
17515
17641
|
};
|
|
17516
|
-
if_block(
|
|
17517
|
-
if (isCorrect()) $$render(
|
|
17642
|
+
if_block(node_6, ($$render) => {
|
|
17643
|
+
if (isCorrect()) $$render(consequent_3);
|
|
17518
17644
|
else $$render(alternate, false);
|
|
17519
17645
|
});
|
|
17520
17646
|
}
|
|
17521
17647
|
append($$anchor3, fragment_1);
|
|
17522
17648
|
};
|
|
17523
17649
|
if_block(
|
|
17524
|
-
|
|
17650
|
+
node_5,
|
|
17525
17651
|
($$render) => {
|
|
17526
|
-
if (showFeedback() && !get$1(isMissing)) $$render(
|
|
17652
|
+
if (showFeedback() && !get$1(isMissing)) $$render(consequent_4);
|
|
17527
17653
|
},
|
|
17528
17654
|
true
|
|
17529
17655
|
);
|
|
17530
17656
|
}
|
|
17531
17657
|
append($$anchor2, fragment);
|
|
17532
17658
|
};
|
|
17533
|
-
if_block(
|
|
17534
|
-
if (mode() === MODES.PREVIEW) $$render(
|
|
17659
|
+
if_block(node_3, ($$render) => {
|
|
17660
|
+
if (mode() === MODES.PREVIEW) $$render(consequent_2);
|
|
17535
17661
|
else $$render(alternate_1, false);
|
|
17536
17662
|
});
|
|
17537
17663
|
}
|
|
17538
|
-
var
|
|
17664
|
+
var node_9 = sibling(node_3, 2);
|
|
17539
17665
|
{
|
|
17540
|
-
var
|
|
17541
|
-
var span_9 =
|
|
17666
|
+
var consequent_5 = ($$anchor2) => {
|
|
17667
|
+
var span_9 = root_8();
|
|
17542
17668
|
var span_10 = child(span_9);
|
|
17543
|
-
var
|
|
17544
|
-
SvgLoader(
|
|
17669
|
+
var node_10 = child(span_10);
|
|
17670
|
+
SvgLoader(node_10, {
|
|
17545
17671
|
svgName: "smallChevronUp",
|
|
17546
17672
|
className: "collapse-icon",
|
|
17547
17673
|
width: 12,
|
|
@@ -17553,10 +17679,10 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17553
17679
|
append($$anchor2, span_9);
|
|
17554
17680
|
};
|
|
17555
17681
|
var alternate_2 = ($$anchor2) => {
|
|
17556
|
-
var span_11 =
|
|
17682
|
+
var span_11 = root_9();
|
|
17557
17683
|
var span_12 = child(span_11);
|
|
17558
|
-
var
|
|
17559
|
-
SvgLoader(
|
|
17684
|
+
var node_11 = child(span_12);
|
|
17685
|
+
SvgLoader(node_11, {
|
|
17560
17686
|
svgName: "smallChevronDown",
|
|
17561
17687
|
className: "expand-icon",
|
|
17562
17688
|
width: 12,
|
|
@@ -17567,8 +17693,8 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17567
17693
|
reset(span_11);
|
|
17568
17694
|
append($$anchor2, span_11);
|
|
17569
17695
|
};
|
|
17570
|
-
if_block(
|
|
17571
|
-
if (get$1(state$1).isOpen) $$render(
|
|
17696
|
+
if_block(node_9, ($$render) => {
|
|
17697
|
+
if (get$1(state$1).isOpen) $$render(consequent_5);
|
|
17572
17698
|
else $$render(alternate_2, false);
|
|
17573
17699
|
});
|
|
17574
17700
|
}
|
|
@@ -17576,16 +17702,16 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17576
17702
|
reset(div_3);
|
|
17577
17703
|
reset(button);
|
|
17578
17704
|
bind_this(button, ($$value) => set(buttonRef, $$value), () => get$1(buttonRef));
|
|
17579
|
-
var
|
|
17705
|
+
var node_12 = sibling(button, 2);
|
|
17580
17706
|
{
|
|
17581
|
-
var
|
|
17582
|
-
var ul =
|
|
17707
|
+
var consequent_9 = ($$anchor2) => {
|
|
17708
|
+
var ul = root_10();
|
|
17583
17709
|
each(ul, 21, () => get$1(initializedOptions), index, ($$anchor3, option, index2) => {
|
|
17584
17710
|
const iconType = /* @__PURE__ */ user_derived(() => getOptionIcon(get$1(option)));
|
|
17585
17711
|
const showCurrentOption = /* @__PURE__ */ user_derived(() => isCurrentOption(index2));
|
|
17586
17712
|
const showHoverOption = /* @__PURE__ */ user_derived(() => shouldShowHover(index2));
|
|
17587
17713
|
const optionAriaLabel = /* @__PURE__ */ user_derived(() => getOptionAriaLabel(get$1(option), index2));
|
|
17588
|
-
var li =
|
|
17714
|
+
var li = root_11();
|
|
17589
17715
|
li.__mousedown = (e2) => e2.preventDefault();
|
|
17590
17716
|
li.__click = async (e2) => {
|
|
17591
17717
|
e2.preventDefault();
|
|
@@ -17593,11 +17719,11 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17593
17719
|
await handleSelect(get$1(option));
|
|
17594
17720
|
};
|
|
17595
17721
|
var div_5 = child(li);
|
|
17596
|
-
var
|
|
17722
|
+
var node_13 = child(div_5);
|
|
17597
17723
|
{
|
|
17598
17724
|
let $0 = /* @__PURE__ */ user_derived(() => get$1(showHoverOption) && get$1(canInteract) ? "hover-option" : "");
|
|
17599
17725
|
let $1 = /* @__PURE__ */ user_derived(() => get$1(showCurrentOption) ? "current-option" : "");
|
|
17600
|
-
CommonStringToHtml(
|
|
17726
|
+
CommonStringToHtml(node_13, {
|
|
17601
17727
|
get htmlString() {
|
|
17602
17728
|
return get$1(option);
|
|
17603
17729
|
},
|
|
@@ -17608,41 +17734,41 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17608
17734
|
}
|
|
17609
17735
|
});
|
|
17610
17736
|
}
|
|
17611
|
-
var
|
|
17737
|
+
var node_14 = sibling(node_13, 2);
|
|
17612
17738
|
{
|
|
17613
|
-
var
|
|
17614
|
-
var span_13 =
|
|
17615
|
-
var
|
|
17616
|
-
SvgLoader(
|
|
17739
|
+
var consequent_6 = ($$anchor4) => {
|
|
17740
|
+
var span_13 = root_12();
|
|
17741
|
+
var node_15 = child(span_13);
|
|
17742
|
+
SvgLoader(node_15, { svgName: "successSolid", className: "correct-icon" });
|
|
17617
17743
|
reset(span_13);
|
|
17618
17744
|
append($$anchor4, span_13);
|
|
17619
17745
|
};
|
|
17620
17746
|
var alternate_4 = ($$anchor4) => {
|
|
17621
17747
|
var fragment_2 = comment();
|
|
17622
|
-
var
|
|
17748
|
+
var node_16 = first_child(fragment_2);
|
|
17623
17749
|
{
|
|
17624
|
-
var
|
|
17625
|
-
var span_14 =
|
|
17626
|
-
var
|
|
17627
|
-
SvgLoader(
|
|
17750
|
+
var consequent_7 = ($$anchor5) => {
|
|
17751
|
+
var span_14 = root_14();
|
|
17752
|
+
var node_17 = child(span_14);
|
|
17753
|
+
SvgLoader(node_17, { svgName: "errorSolid", className: "incorrect-icon" });
|
|
17628
17754
|
reset(span_14);
|
|
17629
17755
|
append($$anchor5, span_14);
|
|
17630
17756
|
};
|
|
17631
17757
|
var alternate_3 = ($$anchor5) => {
|
|
17632
17758
|
var fragment_3 = comment();
|
|
17633
|
-
var
|
|
17759
|
+
var node_18 = first_child(fragment_3);
|
|
17634
17760
|
{
|
|
17635
|
-
var
|
|
17636
|
-
var span_15 =
|
|
17637
|
-
var
|
|
17638
|
-
SvgLoader(
|
|
17761
|
+
var consequent_8 = ($$anchor6) => {
|
|
17762
|
+
var span_15 = root_16();
|
|
17763
|
+
var node_19 = child(span_15);
|
|
17764
|
+
SvgLoader(node_19, { svgName: "successSolid", className: "correct-icon" });
|
|
17639
17765
|
reset(span_15);
|
|
17640
17766
|
append($$anchor6, span_15);
|
|
17641
17767
|
};
|
|
17642
17768
|
if_block(
|
|
17643
|
-
|
|
17769
|
+
node_18,
|
|
17644
17770
|
($$render) => {
|
|
17645
|
-
if (get$1(iconType) === "selected") $$render(
|
|
17771
|
+
if (get$1(iconType) === "selected") $$render(consequent_8);
|
|
17646
17772
|
},
|
|
17647
17773
|
true
|
|
17648
17774
|
);
|
|
@@ -17650,9 +17776,9 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17650
17776
|
append($$anchor5, fragment_3);
|
|
17651
17777
|
};
|
|
17652
17778
|
if_block(
|
|
17653
|
-
|
|
17779
|
+
node_16,
|
|
17654
17780
|
($$render) => {
|
|
17655
|
-
if (get$1(iconType) === "incorrect") $$render(
|
|
17781
|
+
if (get$1(iconType) === "incorrect") $$render(consequent_7);
|
|
17656
17782
|
else $$render(alternate_3, false);
|
|
17657
17783
|
},
|
|
17658
17784
|
true
|
|
@@ -17660,8 +17786,8 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17660
17786
|
}
|
|
17661
17787
|
append($$anchor4, fragment_2);
|
|
17662
17788
|
};
|
|
17663
|
-
if_block(
|
|
17664
|
-
if (get$1(iconType) === "correct") $$render(
|
|
17789
|
+
if_block(node_14, ($$render) => {
|
|
17790
|
+
if (get$1(iconType) === "correct") $$render(consequent_6);
|
|
17665
17791
|
else $$render(alternate_4, false);
|
|
17666
17792
|
});
|
|
17667
17793
|
}
|
|
@@ -17686,8 +17812,8 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17686
17812
|
});
|
|
17687
17813
|
append($$anchor2, ul);
|
|
17688
17814
|
};
|
|
17689
|
-
if_block(
|
|
17690
|
-
if (get$1(state$1).isOpen && get$1(initializedOptions).length > 0) $$render(
|
|
17815
|
+
if_block(node_12, ($$render) => {
|
|
17816
|
+
if (get$1(state$1).isOpen && get$1(initializedOptions).length > 0) $$render(consequent_9);
|
|
17691
17817
|
});
|
|
17692
17818
|
}
|
|
17693
17819
|
reset(span);
|
|
@@ -17701,8 +17827,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17701
17827
|
set_attribute(button, "aria-labelledby", labelId);
|
|
17702
17828
|
set_attribute(button, "aria-controls", listId);
|
|
17703
17829
|
set_attribute(button, "aria-activedescendant", get$1(state$1).activeIndex !== null ? `${listId}-option-${get$1(state$1).activeIndex}` : void 0);
|
|
17704
|
-
|
|
17705
|
-
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"}`);
|
|
17830
|
+
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"}`);
|
|
17706
17831
|
});
|
|
17707
17832
|
append($$anchor, span);
|
|
17708
17833
|
return pop($$exports);
|
|
@@ -17722,6 +17847,7 @@ create_custom_element(
|
|
|
17722
17847
|
isDataSaving: {},
|
|
17723
17848
|
mode: {},
|
|
17724
17849
|
showFeedback: {},
|
|
17850
|
+
showNumbering: {},
|
|
17725
17851
|
onselect: {},
|
|
17726
17852
|
viewportBuffer: {}
|
|
17727
17853
|
},
|
|
@@ -17741,14 +17867,31 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17741
17867
|
const pTags = config().text.prompt.match(pTagRegex);
|
|
17742
17868
|
return pTags && pTags.length > 0 ? pTags : [config().text.prompt];
|
|
17743
17869
|
});
|
|
17870
|
+
const renderedDropdownIds = /* @__PURE__ */ user_derived(() => {
|
|
17871
|
+
const ids = [];
|
|
17872
|
+
get$1(promptLines).forEach((line) => {
|
|
17873
|
+
const parts = dropdownParser.parseText(line);
|
|
17874
|
+
parts.forEach((part) => {
|
|
17875
|
+
if (part.type === "dropdown" && part.id) {
|
|
17876
|
+
ids.push(part.id);
|
|
17877
|
+
}
|
|
17878
|
+
});
|
|
17879
|
+
});
|
|
17880
|
+
return ids;
|
|
17881
|
+
});
|
|
17882
|
+
const shouldShowNumbering = /* @__PURE__ */ user_derived(() => get$1(renderedDropdownIds).length > 1);
|
|
17744
17883
|
const previewSelections = /* @__PURE__ */ user_derived(() => config().mode === MODES.PREVIEW ? getDropdownPreviewSelections(config()) : []);
|
|
17745
17884
|
const shuffledOptionsCache = /* @__PURE__ */ new Map();
|
|
17746
17885
|
const getShuffledOptions = (dropdownId, options) => {
|
|
17747
17886
|
if (shuffledOptionsCache.has(dropdownId)) {
|
|
17748
17887
|
return shuffledOptionsCache.get(dropdownId);
|
|
17749
17888
|
}
|
|
17889
|
+
if (config().mode === MODES.PREVIEW) {
|
|
17890
|
+
shuffledOptionsCache.set(dropdownId, [...options]);
|
|
17891
|
+
return [...options];
|
|
17892
|
+
}
|
|
17750
17893
|
const selectedValue = getSelectedValue(dropdownId);
|
|
17751
|
-
if (
|
|
17894
|
+
if (selectedValue !== DROPDOWN_INTERACTION.PLACEHOLDER && selectedValue !== "") {
|
|
17752
17895
|
shuffledOptionsCache.set(dropdownId, [...options]);
|
|
17753
17896
|
return [...options];
|
|
17754
17897
|
}
|
|
@@ -17768,11 +17911,11 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17768
17911
|
const getSelectedValue = (dropdownId) => {
|
|
17769
17912
|
if (config().mode === MODES.PREVIEW) {
|
|
17770
17913
|
const previewItem = get$1(previewSelections).find((item) => item.id === dropdownId);
|
|
17771
|
-
return previewItem?.choice || config().correctAnswer[dropdownId]?.[0] ||
|
|
17914
|
+
return previewItem?.choice || config().correctAnswer[dropdownId]?.[0] || DROPDOWN_INTERACTION.PLACEHOLDER;
|
|
17772
17915
|
}
|
|
17773
17916
|
const selection = state2().data.selected.find((item) => item.id === dropdownId);
|
|
17774
17917
|
const value = selection?.choice || "";
|
|
17775
|
-
return value === "" ?
|
|
17918
|
+
return value === "" ? DROPDOWN_INTERACTION.PLACEHOLDER : value;
|
|
17776
17919
|
};
|
|
17777
17920
|
const getCorrectAnswers = (dropdownId) => {
|
|
17778
17921
|
return config().correctAnswer[dropdownId] || [];
|
|
@@ -17784,7 +17927,7 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17784
17927
|
};
|
|
17785
17928
|
const isDropdownCorrect = (dropdownId) => {
|
|
17786
17929
|
const selectedValue = getSelectedValue(dropdownId);
|
|
17787
|
-
if (selectedValue ===
|
|
17930
|
+
if (selectedValue === DROPDOWN_INTERACTION.PLACEHOLDER || selectedValue === "") return false;
|
|
17788
17931
|
const correctAnswers = getCorrectAnswers(dropdownId);
|
|
17789
17932
|
return correctAnswers.length > 0 && correctAnswers.includes(selectedValue);
|
|
17790
17933
|
};
|
|
@@ -17877,6 +18020,9 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17877
18020
|
get showFeedback() {
|
|
17878
18021
|
return showFeedback();
|
|
17879
18022
|
},
|
|
18023
|
+
get showNumbering() {
|
|
18024
|
+
return get$1(shouldShowNumbering);
|
|
18025
|
+
},
|
|
17880
18026
|
onselect: (value) => handleSelect(get$1(part).id, value)
|
|
17881
18027
|
});
|
|
17882
18028
|
}
|
|
@@ -18022,11 +18168,26 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18022
18168
|
throw new Error("Failed to initialize Dropdown state");
|
|
18023
18169
|
}
|
|
18024
18170
|
let interactionState = /* @__PURE__ */ state(proxy(initialState));
|
|
18025
|
-
|
|
18171
|
+
const dropdownParser = useDropdown(config().text.prompt, config().options);
|
|
18172
|
+
const pTagRegex = /<p[^>]*>.*?<\/p>/gi;
|
|
18173
|
+
const renderedDropdownIds = /* @__PURE__ */ user_derived(() => {
|
|
18174
|
+
const pTags = config().text.prompt.match(pTagRegex);
|
|
18175
|
+
const promptLines = pTags && pTags.length > 0 ? pTags : [config().text.prompt];
|
|
18176
|
+
const ids = [];
|
|
18177
|
+
promptLines.forEach((line) => {
|
|
18178
|
+
const parts = dropdownParser.parseText(line);
|
|
18179
|
+
parts.forEach((part) => {
|
|
18180
|
+
if (part.type === "dropdown" && part.id) {
|
|
18181
|
+
ids.push(part.id);
|
|
18182
|
+
}
|
|
18183
|
+
});
|
|
18184
|
+
});
|
|
18185
|
+
return ids;
|
|
18186
|
+
});
|
|
18187
|
+
let feedbackState = /* @__PURE__ */ user_derived(() => calculateDropdownFeedback(get$1(interactionState), config(), api().validate || (() => ({ isValid: false })), get$1(renderedDropdownIds)));
|
|
18026
18188
|
let isInteractiveMode2 = /* @__PURE__ */ user_derived(() => config().mode === MODES.INTERACTIVE);
|
|
18027
18189
|
let isSessionNotFinished = /* @__PURE__ */ user_derived(() => config().mode === MODES.SESSION && !config().isFinished);
|
|
18028
18190
|
let saveTimer = null;
|
|
18029
|
-
const SAVE_DELAY = 500;
|
|
18030
18191
|
const handleSelection = async (event2) => {
|
|
18031
18192
|
try {
|
|
18032
18193
|
const { id, value } = event2.detail;
|
|
@@ -18038,6 +18199,9 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18038
18199
|
return;
|
|
18039
18200
|
}
|
|
18040
18201
|
set(interactionState, result.newState, true);
|
|
18202
|
+
if (get$1(isInteractiveMode2)) {
|
|
18203
|
+
handleInteractiveModeInteraction();
|
|
18204
|
+
}
|
|
18041
18205
|
api().onStateChange?.(get$1(interactionState));
|
|
18042
18206
|
onstateChange()?.(new CustomEvent("stateChange", {
|
|
18043
18207
|
detail: {
|
|
@@ -18045,13 +18209,14 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18045
18209
|
serialized: api().serialize?.(get$1(interactionState))
|
|
18046
18210
|
}
|
|
18047
18211
|
}));
|
|
18048
|
-
if (get$1(isInteractiveMode2)) {
|
|
18049
|
-
handleInteractiveModeInteraction();
|
|
18050
|
-
}
|
|
18051
18212
|
if (get$1(isSessionNotFinished)) {
|
|
18052
18213
|
if (saveTimer) {
|
|
18053
18214
|
clearTimeout(saveTimer);
|
|
18054
18215
|
}
|
|
18216
|
+
const hasValidSelection = get$1(interactionState).data.selected.some((item) => item.choice !== "" && item.choice !== DROPDOWN_INTERACTION.PLACEHOLDER);
|
|
18217
|
+
if (!hasValidSelection) {
|
|
18218
|
+
return;
|
|
18219
|
+
}
|
|
18055
18220
|
saveTimer = setTimeout(
|
|
18056
18221
|
async () => {
|
|
18057
18222
|
try {
|
|
@@ -18064,18 +18229,25 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18064
18229
|
saveTimer = null;
|
|
18065
18230
|
}
|
|
18066
18231
|
},
|
|
18067
|
-
|
|
18232
|
+
DROPDOWN_INTERACTION.SAVE_DEBOUNCE_DELAY
|
|
18068
18233
|
);
|
|
18069
18234
|
}
|
|
18070
18235
|
} catch (error) {
|
|
18071
18236
|
}
|
|
18072
18237
|
};
|
|
18073
18238
|
const handleInteractiveModeInteraction = () => {
|
|
18074
|
-
|
|
18075
|
-
|
|
18076
|
-
|
|
18077
|
-
|
|
18078
|
-
|
|
18239
|
+
const allRenderedAnswered = get$1(renderedDropdownIds).every((id) => {
|
|
18240
|
+
const selection = get$1(interactionState).data.selected.find((item) => item.id === id);
|
|
18241
|
+
return selection && selection.choice !== "" && selection.choice !== DROPDOWN_INTERACTION.PLACEHOLDER;
|
|
18242
|
+
});
|
|
18243
|
+
set(
|
|
18244
|
+
interactionState,
|
|
18245
|
+
interactionUtils.updateState(get$1(interactionState), {
|
|
18246
|
+
interactiveHasAnswered: allRenderedAnswered,
|
|
18247
|
+
showFeedback: allRenderedAnswered
|
|
18248
|
+
}),
|
|
18249
|
+
true
|
|
18250
|
+
);
|
|
18079
18251
|
};
|
|
18080
18252
|
onMount(() => {
|
|
18081
18253
|
return () => {
|
|
@@ -18449,7 +18621,7 @@ registerInteraction("dropdown", createDropdownInteraction, DropdownComponent);
|
|
|
18449
18621
|
var root_1 = /* @__PURE__ */ from_html(`<link rel="preconnect" href="https://fonts.googleapis.com" class="svelte-1dpid58"/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" class="svelte-1dpid58"/> <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet" class="svelte-1dpid58"/>`, 1);
|
|
18450
18622
|
const $$css = {
|
|
18451
18623
|
hash: "svelte-1dpid58",
|
|
18452
|
-
code: ' *, :after, :before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} *, :after, :before{border:0 solid #e5e7eb;box-sizing:border-box} :after, :before{--tw-content:""} :host, html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Mulish,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent} body{line-height:inherit;margin:0} hr{border-top-width:1px;color:inherit;height:0} abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted} h1, h2, h3, h4, h5, h6{font-size:inherit;font-weight:inherit} a{color:inherit;text-decoration:inherit} b, strong{font-weight:bolder} code, kbd, pre, samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal} small{font-size:80%} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} table{border-collapse:collapse;border-color:inherit;text-indent:0} button, input, optgroup, select, textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0} button, select{text-transform:none} button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none} :-moz-focusring{outline:auto} :-moz-ui-invalid{box-shadow:none} progress{vertical-align:baseline} ::-webkit-inner-spin-button, ::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} summary{display:list-item} blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre{margin:0} fieldset{margin:0} fieldset, legend{padding:0} menu, ol, ul{list-style:none;margin:0;padding:0} dialog{padding:0} textarea{resize:vertical} input::-moz-placeholder, textarea::-moz-placeholder{color:#9ca3af;opacity:1} input::placeholder, textarea::placeholder{color:#9ca3af;opacity:1} [role=button], button{cursor:pointer} :disabled{cursor:default} audio, canvas, embed, iframe, img, object, svg, video{display:block;vertical-align:middle} img, video{height:auto;max-width:100%} [hidden]:where(:not([hidden=until-found])){display:none} *{font-family:Mulish,sans-serif} input::-moz-selection, textarea::-moz-selection{background-color:hsla(0,0%,85%,.4)} input::selection, textarea::selection{background-color:hsla(0,0%,85%,.4)} .container{width:100%}@media (min-width:732px){ .container{max-width:732px}}@media (min-width:1196px){ .container{max-width:1196px}} .p2{font-size:.875rem;font-weight:600;line-height:1.25rem;line-height:1.5} .blanket-overlay{inset:0;position:absolute} .item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .focus-ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px} .focus-ring:focus, .raw-focus-ring{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .raw-focus-ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px} .focus-ring-by-dropdown{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:rgb(59,64,240,var(--tw-border-opacity,1));border-width:2px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047} .divider, .focus-ring-by-dropdown{--tw-border-opacity:1} .divider{border-bottom-width:1px;border-color:rgb(218,224,224,var(--tw-border-opacity,1))}@keyframes svelte-1dpid58-pulse{50%{opacity:.5}} .animate-skeleton{animation:svelte-1dpid58-pulse 2s cubic-bezier(.4,0,.6,1) infinite;--tw-bg-opacity:1;background-color:rgb(226,232,240,var(--tw-bg-opacity,1))} .btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-mcq-option{font-size:1rem;line-height:1.5rem;line-height:19.2px;margin-bottom:1rem;min-height:52px;width:100%;--tw-text-opacity:1;border-radius:.5rem;border-width:1px;box-sizing:border-box;color:rgb(33,37,41,var(--tw-text-opacity,1));--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-text{align-items:center;display:flex;padding:.375rem .75rem;width:100%}@supports (overflow-wrap:anywhere){ .btn-mcq-text{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .btn-mcq-text{word-break:break-word}} .btn-mcq-option>span>span>span>.choice{align-items:center;border-radius:1rem;border-width:1px;display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:.05em;line-height:1rem;width:2rem;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));padding:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected{border-width:2px;--tw-border-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1));border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected, .btn-mcq-option.selected:active{--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .btn-mcq-option.selected:active{background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}} .btn-mcq-option.finished{cursor:default} .btn-mcq-option.finished:active, .btn-mcq-option.finished:hover{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option.selected>span>span>.choice{--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))} .btn-mcq-option>span>span>span>.custom-checkbox{align-items:center;border-radius:.25rem;border-width:1px;display:flex;height:1.75rem;justify-content:center;pointer-events:none;width:1.75rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .btn-mcq-option:active>span>span>span>.custom-checkbox.preview-only, .btn-mcq-option:hover>span>span>span>.custom-checkbox.preview-only{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))}} .btn-mcq-option:active>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected>span>span>span>.custom-checkbox{border-width:0;pointer-events:none;--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(76,91,226,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected:active>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .btn-mcq-option.finished:active>span>span>span>.custom-checkbox, .btn-mcq-option.finished:hover>span>span>span>.custom-checkbox{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-mcq-option.missing.\\!correct, .btn-mcq-option.missing.correct{border-width:1px;--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.\\!correct.interactive:active, .btn-mcq-option.\\!correct.interactive:hover, .btn-mcq-option.correct.interactive:active, .btn-mcq-option.correct.interactive:hover, .btn-mcq-option.incorrect.interactive:active, .btn-mcq-option.incorrect.interactive:hover, .btn-mcq-option.missing.interactive:active, .btn-mcq-option.missing.interactive:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct{background-color:rgb(240,253,244,var(--tw-bg-opacity,1));border-color:rgb(21,128,61,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct, .btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected.incorrect{background-color:rgb(253,242,248,var(--tw-bg-opacity,1));border-color:rgb(190,24,93,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct>span>span>span>.choice, .btn-mcq-option.selected.correct>span>span>span>.choice, .btn-mcq-option.selected.incorrect>span>span>span>.choice{border-width:1px;--tw-border-opacity:1;border-color:rgb(113,115,119,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-pressed{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-base:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-base{align-items:center;display:inline-flex;justify-content:center}@media (hover:hover) and (pointer:fine){ .btn-base:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-base:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container{align-items:center;display:flex;height:2.75rem;justify-content:center;width:2.75rem} .btn-touch-container:focus{outline:2px solid transparent;outline-offset:2px} .btn-icon-sm{align-items:center;background-color:hsla(0,0%,100%,.8);border-radius:.25rem;display:flex;height:1.5rem;justify-content:center;width:1.5rem}@media (hover:hover) and (pointer:fine){ .btn-touch-container:hover>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-touch-container:active>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container:focus-visible>.btn-icon-sm{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .typein-textbox:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .typein-textbox{border-radius:.5rem;border-width:1px;width:100%;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox:focus{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}} .typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)!important}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{transition-duration:50ms}} .typein-textbox:focus{outline-color:#212529;outline-width:2px}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{outline-color:#212529;outline-width:2px}} .typein-textbox:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1))} .inline-typein-container>p{font-size:1.25rem;font-weight:600;line-height:3rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;cursor:grabbing!important;transition-duration:50ms;--tw-border-opacity:1!important;border-color:rgb(93,99,107,var(--tw-border-opacity,1))!important;--tw-bg-opacity:1!important;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))!important} #dnd-action-dragged-el .btn-vertical-icon{cursor:grabbing!important;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el .preview-icon{display:none!important} #dnd-action-dragged-el .preview-vertical{display:block!important} .image-description, .text-stimulus{padding-bottom:1rem;padding-top:1rem} .text-stimulus p{font-size:1.25rem;line-height:1.75rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .image-description p{font-size:.875rem;line-height:1.25rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus ol, .text-stimulus ul{font-size:1rem;line-height:1.5rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .text-stimulus ol ::marker, .text-stimulus ul ::marker{color:#282c87} .text-stimulus ol::marker, .text-stimulus ul::marker{color:#282c87} .image-description ol, .image-description ul{font-size:.875rem;line-height:1.25rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .image-description ol ::marker, .image-description ul ::marker{color:#212529} .image-description ol::marker, .image-description ul::marker{color:#212529} .image-description ul, .text-stimulus ul{list-style-type:disc} .image-description ol, .text-stimulus ol{list-style-type:decimal} .image-description ul li>p, .text-stimulus ul li>p{margin-left:-.5rem} .text-stimulus ol>li>p, .text-stimulus ul>li>p{display:inline;font-size:1rem;line-height:1.5rem;padding-bottom:0;padding-top:0} .image-description ol>li>p, .image-description ul>li>p{display:inline;font-size:.875rem;line-height:1.25rem;padding-bottom:0;padding-top:0} .image-description div.table-container:focus, .text-stimulus div.table-container:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .image-description div.table-container, .text-stimulus div.table-container{border-radius:.5rem;overflow:auto;padding-left:.125rem;padding-right:.125rem} .image-description table, .text-stimulus table{margin-bottom:1rem;margin-top:.5rem;width:100%;--tw-border-spacing-x:0.75rem;--tw-border-spacing-y:0.75rem;border-radius:.5rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);overflow-x:auto;--tw-shadow:0 0 0 1px #9ca3af;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .image-description table tr, .text-stimulus table tr{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table tr:last-child, .text-stimulus table tr:last-child{border-color:transparent} .image-description table td, .image-description table th, .text-stimulus table td, .text-stimulus table th{border-left-width:1px;min-width:140px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table td:first-child, .image-description table th:first-child, .text-stimulus table td:first-child, .text-stimulus table th:first-child{border-style:none} .text-stimulus table td>p, .text-stimulus table th>p{font-size:1rem;line-height:1.5rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .image-description table td>p, .image-description table th>p{font-size:.875rem;line-height:1.25rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus table th>p{font-weight:400} .image-description table th p, .prompt p, .text-stimulus table th p{font-weight:600} .prompt p b, .prompt p b i, .prompt p b i u, .prompt p b u, .prompt p b u i, .prompt p i b, .prompt p i b u, .prompt p i u b, .prompt p u b, .prompt p u b i, .prompt p u i b, .text-stimulus table th p b, .text-stimulus table th p b i, .text-stimulus table th p b i u, .text-stimulus table th p b u, .text-stimulus table th p b u i, .text-stimulus table th p i b, .text-stimulus table th p i b u, .text-stimulus table th p i u b, .text-stimulus table th p u b, .text-stimulus table th p u b i, .text-stimulus table th p u i b{font-weight:900} .dropdown-text:not(:last-child), .dropdown:not(:last-child){margin-right:1rem} .dropdown-container{align-items:center;border-radius:.5rem;border-width:1px;display:flex;height:2.75rem;overflow:hidden;white-space:nowrap;width:15rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .dropdown-container:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .dropdown-container:active, .dropdown-container:focus{border-width:2px;box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .dropdown-container:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));outline-color:#212529;outline-width:2px}} .dropdown-menu{border-radius:.5rem;border-width:1px;margin-top:.5rem;max-height:400px;overflow-y:auto;position:absolute;z-index:10;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@supports (overflow-wrap:anywhere){ .dropdown-menu{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .dropdown-menu{word-break:break-word}} .dropdown-menu{max-width:min(500px,100vw - 2rem);min-width:240px;width:-moz-max-content;width:max-content} .dropdown-item{cursor:pointer;font-size:1rem;line-height:1.5rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem 1rem} .dropdown-itemtext{border-bottom-width:1px;border-color:transparent} .dropdown-itemtext.hover-option{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .dropdown-itemtext.current-option{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .dropdown-itemtext:active{border-bottom-width:2px} .image-description-accordion{border-bottom-width:1px;border-color:transparent;font-weight:600;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .group:focus .image-description-accordion{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px} .group:focus .image-description-accordion, .group:hover .image-description-accordion{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .group:active .image-description-accordion{border-bottom-width:2px} .sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap} .pointer-events-none{pointer-events:none} .pointer-events-auto{pointer-events:auto} .visible{visibility:visible} .invisible{visibility:hidden} .collapse{visibility:collapse} .static{position:static} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .inset-0{inset:0} .inset-y-0{bottom:0;top:0} .-top-2\\.5{top:-.625rem} .bottom-0{bottom:0} .bottom-1\\.5{bottom:.375rem} .bottom-4{bottom:1rem} .bottom-5{bottom:1.25rem} .bottom-\\[7px\\]{bottom:7px} .bottom-full{bottom:100%} .left-0{left:0} .left-1\\/2{left:50%} .left-4{left:1rem} .left-6{left:1.5rem} .left-\\[-9999px\\]{left:-9999px} .left-full{left:100%} .right-0{right:0} .right-1{right:.25rem} .right-1\\.5{right:.375rem} .right-4{right:1rem} .right-6{right:1.5rem} .right-full{right:100%} .top-0{top:0} .top-1{top:.25rem} .top-1\\.5{top:.375rem} .top-1\\/2{top:50%} .top-12{top:3rem} .top-3\\.5{top:.875rem} .top-\\[13px\\]{top:13px} .top-\\[calc\\(50\\%\\+0\\.375rem\\)\\]{top:calc(50% + .375rem)} .top-full{top:100%} .z-0{z-index:0} .z-10{z-index:10} .z-50{z-index:50} .m-0{margin:0} .m-auto{margin:auto} .mx-0\\.5{margin-left:.125rem;margin-right:.125rem} .mx-auto{margin-left:auto;margin-right:auto} .my-1\\.5{margin-bottom:.375rem;margin-top:.375rem} .my-2{margin-bottom:.5rem;margin-top:.5rem} .my-6{margin-bottom:1.5rem;margin-top:1.5rem} .-mb-1{margin-bottom:-.25rem} .-ml-1{margin-left:-.25rem} .-mr-1{margin-right:-.25rem} .-mr-2\\.5{margin-right:-.625rem} .-mt-0\\.5{margin-top:-.125rem} .-mt-1{margin-top:-.25rem} .mb-0\\.5{margin-bottom:.125rem} .mb-10{margin-bottom:2.5rem} .mb-12{margin-bottom:3rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-\\[9\\.5px\\]{margin-bottom:9.5px} .ml-1{margin-left:.25rem} .ml-2{margin-left:.5rem} .ml-2\\.5{margin-left:.625rem} .ml-3{margin-left:.75rem} .ml-8\\.5{margin-left:2.125rem} .ml-\\[3px\\]{margin-left:3px} .ml-\\[9\\.5px\\]{margin-left:9.5px} .mr-1{margin-right:.25rem} .mr-2{margin-right:.5rem} .mr-4{margin-right:1rem} .mr-\\[9\\.5px\\]{margin-right:9.5px} .mt-0\\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-7\\.5{margin-top:1.875} .mt-9{margin-top:2.25rem} .mt-\\[9\\.5px\\]{margin-top:9.5px} .line-clamp-1{-webkit-line-clamp:1} .line-clamp-1, .line-clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical} .line-clamp-3{-webkit-line-clamp:3} .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .table{display:table} .grid{display:grid} .contents{display:contents} .hidden{display:none} .h-10\\.5{height:2.625rem} .h-11{height:2.75rem} .h-2{height:.5rem} .h-4{height:1rem} .h-52{height:13rem} .h-6{height:1.5rem} .h-8\\.5{height:2.125rem} .h-\\[13\\.33px\\]{height:13.33px} .h-\\[8\\.77px\\]{height:8.77px} .h-auto{height:auto} .h-fit{height:-moz-fit-content;height:fit-content} .h-full{height:100%} .h-screen{height:100vh} .max-h-\\[184px\\]{max-height:184px} .max-h-\\[470px\\]{max-height:470px} .max-h-\\[660px\\]{max-height:660px} .max-h-\\[calc\\(100vh-168px\\)\\]{max-height:calc(100vh - 168px)} .max-h-\\[calc\\(100vh-168px-34px\\)\\]{max-height:calc(100vh - 202px)} .max-h-none{max-height:none} .min-h-\\[133px\\]{min-height:133px} .min-h-\\[140px\\]{min-height:140px} .min-h-\\[154px\\]{min-height:154px} .min-h-\\[210px\\]{min-height:210px} .min-h-\\[44px\\]{min-height:44px} .min-h-\\[54px\\]{min-height:54px} .min-h-\\[86px\\]{min-height:86px} .w-11{width:2.75rem} .w-2{width:.5rem} .w-2\\/4{width:50%} .w-3{width:.75rem} .w-4{width:1rem} .w-6{width:1.5rem} .w-60{width:15rem} .w-8\\.5{width:2.125rem} .w-\\[13\\.33px\\]{width:13.33px} .w-\\[8\\.77px\\]{width:8.77px} .w-auto{width:auto} .w-fit{width:-moz-fit-content;width:fit-content} .w-full{width:100%} .w-screen{width:100vw} .min-w-0{min-width:0} .min-w-\\[288px\\]{min-width:288px} .min-w-\\[44px\\]{min-width:44px} .min-w-\\[85px\\]{min-width:85px} .max-w-\\[1008px\\]{max-width:1008px} .max-w-\\[300px\\]{max-width:300px} .max-w-\\[304px\\]{max-width:304px} .max-w-\\[400px\\]{max-width:400px} .max-w-full{max-width:100%} .max-w-none{max-width:none} .flex-1{flex:1 1 0%} .flex-none{flex:none} .flex-shrink-0{flex-shrink:0} .grow{flex-grow:1} .basis-0{flex-basis:0px} .-translate-x-1\\/2{--tw-translate-x:-50%} .-translate-x-1\\/2, .-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .-translate-y-1\\/2{--tw-translate-y:-50%} .rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .\\!cursor-default{cursor:default!important} .\\!cursor-pointer{cursor:pointer!important} .cursor-default{cursor:default} .cursor-pointer{cursor:pointer} .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none} .resize-none{resize:none} .resize{resize:both} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .flex-row{flex-direction:row} .flex-col{flex-direction:column} .flex-col-reverse{flex-direction:column-reverse} .flex-wrap{flex-wrap:wrap} .content-start{align-content:flex-start} .items-center{align-items:center} .justify-start{justify-content:flex-start} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .gap-1{gap:.25rem} .gap-2{gap:.5rem} .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))} .space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1} .overflow-hidden{overflow:hidden} .overflow-y-auto{overflow-y:auto} .overflow-y-visible{overflow-y:visible} .truncate{overflow:hidden;white-space:nowrap} .text-ellipsis, .truncate{text-overflow:ellipsis} .whitespace-normal{white-space:normal} .whitespace-nowrap{white-space:nowrap} .break-words{overflow-wrap:break-word} .break-all{word-break:break-all} .rounded{border-radius:.25rem} .rounded-\\[32px\\]{border-radius:32px} .rounded-lg{border-radius:.5rem} .rounded-md{border-radius:.375rem} .rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem} .rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem} .rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem} .border{border-width:1px} .border-2{border-width:2px} .border-b{border-bottom-width:1px} .border-l-4{border-left-width:4px} .border-l-6{border-left-width:6px} .border-dashed{border-style:dashed} .\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(40,44,135,var(--tw-border-opacity,1))!important} .border-blue-1000{--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .border-blue-950{--tw-border-opacity:1;border-color:rgb(29,78,216,var(--tw-border-opacity,1))} .border-border-minimal{--tw-border-opacity:1;border-color:rgb(229,231,235,var(--tw-border-opacity,1))} .border-charcoal{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .border-gray-400{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .border-gray-800{--tw-border-opacity:1;border-color:rgb(93,99,107,var(--tw-border-opacity,1))} .border-gray-850{--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .border-green-800{--tw-border-opacity:1;border-color:rgb(0,102,5,var(--tw-border-opacity,1))} .border-green-900{--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1))} .border-red-600{--tw-border-opacity:1;border-color:rgb(220,38,38,var(--tw-border-opacity,1))} .border-red-800{--tw-border-opacity:1;border-color:rgb(217,12,85,var(--tw-border-opacity,1))} .border-red-900{--tw-border-opacity:1;border-color:rgb(190,24,93,var(--tw-border-opacity,1))} .border-soft-blue{--tw-border-opacity:1;border-color:rgb(84,101,251,var(--tw-border-opacity,1))} .border-white{--tw-border-opacity:1;border-color:rgb(255,255,255,var(--tw-border-opacity,1))} .\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))!important} .\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239,246,255,var(--tw-bg-opacity,1))} .bg-charcoal\\/30{background-color:rgba(33,37,41,.3)} .bg-charcoal\\/80{background-color:rgba(33,37,41,.8)} .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247,250,250,var(--tw-bg-opacity,1))} .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244,244,244,var(--tw-bg-opacity,1))} .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(57,62,69,var(--tw-bg-opacity,1))} .bg-green-300{--tw-bg-opacity:1;background-color:rgb(241,254,241,var(--tw-bg-opacity,1))} .bg-red-200{--tw-bg-opacity:1;background-color:rgb(254,202,202,var(--tw-bg-opacity,1))} .bg-red-300{--tw-bg-opacity:1;background-color:rgb(253,243,247,var(--tw-bg-opacity,1))} .bg-red-50{--tw-bg-opacity:1;background-color:rgb(253,242,248,var(--tw-bg-opacity,1))} .bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))} .bg-transparent{background-color:transparent} .bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))} .bg-white{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .bg-white\\/80{background-color:hsla(0,0%,100%,.8)} .bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .bg-opacity-5{--tw-bg-opacity:0.05} .object-contain{-o-object-fit:contain;object-fit:contain} .p-0\\.5{padding:.125rem} .p-1{padding:.25rem} .p-1\\.5{padding:.375rem} .p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem} .px-0{padding-left:0;padding-right:0} .px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .py-1{padding-bottom:.25rem;padding-top:.25rem} .py-1\\.5{padding-bottom:.375rem;padding-top:.375rem} .py-2{padding-bottom:.5rem;padding-top:.5rem} .py-\\[9px\\]{padding-bottom:9px;padding-top:9px} .\\!pr-11{padding-right:2.75rem!important} .pb-0{padding-bottom:0} .pb-10{padding-bottom:2.5rem} .pb-2{padding-bottom:.5rem} .pb-3{padding-bottom:.75rem} .pb-\\[72px\\]{padding-bottom:72px} .pl-13\\.2{padding-left:3.125rem} .pl-24{padding-left:6rem} .pl-3{padding-left:.75rem} .pl-4{padding-left:1rem} .pr-3{padding-right:.75rem} .pr-4{padding-right:1rem} .pt-0{padding-top:0} .pt-0\\.5{padding-top:.125rem} .pt-14{padding-top:3.5rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-\\[15px\\]{padding-top:15px} .pt-\\[55px\\]{padding-top:55px} .text-left{text-align:left} .text-center{text-align:center} .align-middle{vertical-align:middle} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .font-bold{font-weight:700} .font-normal{font-weight:400} .font-semibold{font-weight:600} .leading-12{line-height:3rem} .leading-4{line-height:1rem} .leading-5{line-height:1.25rem} .leading-6{line-height:1.5rem} .leading-\\[1\\.5\\]{line-height:1.5} .leading-\\[150\\%\\]{line-height:150%} .leading-\\[19\\.2px\\]{line-height:19.2px} .leading-\\[19px\\]{line-height:19px} .leading-\\[22px\\]{line-height:22px} .\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57,62,69,var(--tw-text-opacity,1))!important} .text-blue-1000{--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .text-blue-850{--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .text-charcoal{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-gray-500{--tw-text-opacity:1;color:rgb(107,114,128,var(--tw-text-opacity,1))} .text-gray-800{--tw-text-opacity:1;color:rgb(93,99,107,var(--tw-text-opacity,1))} .text-gray-860{--tw-text-opacity:1;color:rgb(55,65,81,var(--tw-text-opacity,1))} .text-green-800{--tw-text-opacity:1;color:rgb(0,102,5,var(--tw-text-opacity,1))} .text-green-900{--tw-text-opacity:1;color:rgb(21,128,61,var(--tw-text-opacity,1))} .text-inherit{color:inherit} .text-primary-emphasis{--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1))} .text-red-800{--tw-text-opacity:1;color:rgb(217,12,85,var(--tw-text-opacity,1))} .text-red-900{--tw-text-opacity:1;color:rgb(190,24,93,var(--tw-text-opacity,1))} .text-white{--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .underline{text-decoration-line:underline} .opacity-0{opacity:0} .opacity-5{opacity:.05} .opacity-50{opacity:.5} .shadow-\\[0_-12px_14px_-16px_\\#00000033\\]{--tw-shadow:0 -12px 14px -16px #00000033;--tw-shadow-colored:0 -12px 14px -16px var(--tw-shadow-color)} .shadow-\\[0_-12px_14px_-16px_\\#00000033\\], .shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .shadow-md{--tw-shadow:0px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 8px var(--tw-shadow-color)} .\\!outline-none{outline:2px solid transparent!important;outline-offset:2px!important} .outline-none{outline:2px solid transparent;outline-offset:2px} .blur{--tw-blur:blur(8px)} .blur, .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)} .backdrop-blur-md{--tw-backdrop-blur:blur(12px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)} .transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)} .duration-300{transition-duration:.3s} :host, html{-webkit-tap-highlight-color:inherit!important} .active\\:raw-focus-ring-by:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529} .active\\:raw-focus-ring-by:active, .active\\:raw-focus-ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .active\\:raw-focus-ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}@media (min-width:732px){ .md\\:item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))}}@media (hover:hover) and (pointer:fine){ .td\\:hover-focus-ring:hover{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;transition-duration:50ms}} .last\\:mr-0:last-child{margin-right:0} .focus-within\\:left-0:focus-within{left:0} .focus-within\\:right-0:focus-within{right:0} .focus-within\\:top-0:focus-within{top:0} .focus-within\\:z-30:focus-within{z-index:30} .hover\\:bg-black-50:hover{background-color:rgba(0,0,0,.051)} .hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222,222,255,var(--tw-bg-opacity,1))} .hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .hover\\:underline:hover{text-decoration-line:underline} .hover\\:decoration-2:hover{text-decoration-thickness:2px} .hover\\:underline-offset-\\[25\\%\\]:hover{text-underline-offset:25%} .focus-visible\\:border-charcoal:focus-visible{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .focus-visible\\:bg-yellow-900:focus-visible{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))} .focus-visible\\:text-charcoal:focus-visible{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .focus-visible\\:underline:focus-visible{text-decoration-line:underline} .focus-visible\\:decoration-2:focus-visible{text-decoration-thickness:2px} .focus-visible\\:underline-offset-\\[25\\%\\]:focus-visible{text-underline-offset:25%} .focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px} .focus-visible\\:ring-4:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .focus-visible\\:ring-soft-blue:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1))} .focus-visible\\:ring-offset-4:focus-visible{--tw-ring-offset-width:4px} .focus-visible\\:duration-50:focus-visible{transition-duration:50ms} .active\\:bg-black-55:active, .active\\:bg-black-60:active{background-color:rgba(0,0,0,.102)} .active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238,206,26,var(--tw-bg-opacity,1))} .active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142,147,153,var(--tw-text-opacity,1))} .disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .group:hover .group-hover\\:underline{text-decoration-line:underline} .group.active .group-\\[\\.active\\]\\:border-b-2{border-bottom-width:2px}@media (min-width:732px){ .md\\:inset-0{inset:0} .md\\:top-20{top:5rem} .md\\:mb-2{margin-bottom:.5rem} .md\\:mb-4{margin-bottom:1rem} .md\\:mb-8{margin-bottom:2rem} .md\\:ml-0{margin-left:0} .md\\:mt-0{margin-top:0} .md\\:mt-14{margin-top:3.5rem} .md\\:block{display:block} .md\\:inline-block{display:inline-block} .md\\:flex{display:flex} .md\\:grid{display:grid} .md\\:hidden{display:none} .md\\:h-11{height:2.75rem} .md\\:h-5{height:1.25rem} .md\\:h-\\[13\\.5px\\]{height:13.5px} .md\\:h-fit{height:-moz-fit-content;height:fit-content} .md\\:max-h-\\[calc\\(100vh-128px\\)\\]{max-height:calc(100vh - 128px)} .md\\:max-h-\\[calc\\(100vh-128px-54px\\)\\]{max-height:calc(100vh - 182px)} .md\\:min-h-0{min-height:0} .md\\:min-h-\\[140px\\]{min-height:140px} .md\\:min-h-\\[164px\\]{min-height:164px} .md\\:w-1\\/2{width:50%} .md\\:w-11{width:2.75rem} .md\\:w-5{width:1.25rem} .md\\:w-\\[13\\.5px\\]{width:13.5px} .md\\:w-fit{width:-moz-fit-content;width:fit-content} .md\\:max-w-\\[calc\\(100vw-164px\\)\\]{max-width:calc(100vw - 164px)} .md\\:flex-none{flex:none} .md\\:grow-0{flex-grow:0} .md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\\:flex-row{flex-direction:row} .md\\:flex-col{flex-direction:column} .md\\:items-start{align-items:flex-start} .md\\:items-center{align-items:center} .md\\:justify-normal{justify-content:normal} .md\\:justify-center{justify-content:center} .md\\:justify-between{justify-content:space-between} .md\\:gap-4{gap:1rem} .md\\:gap-6{gap:1.5rem} .md\\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem} .md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))} .md\\:rounded-lg{border-radius:.5rem} .md\\:rounded-md{border-radius:.375rem} .md\\:rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0} .md\\:border{border-width:1px} .md\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .md\\:p-4{padding:1rem} .md\\:px-0{padding-left:0;padding-right:0} .md\\:px-4{padding-left:1rem;padding-right:1rem} .md\\:px-6{padding-left:1.5rem;padding-right:1.5rem} .md\\:px-\\[82px\\]{padding-left:82px;padding-right:82px} .md\\:pb-0{padding-bottom:0} .md\\:pl-13\\.2{padding-left:3.125rem} .md\\:pl-4{padding-left:1rem} .md\\:pr-4{padding-right:1rem} .md\\:pt-20\\.5{padding-top:5.125rem} .md\\:text-center{text-align:center} .md\\:text-lg{font-size:1.125rem;line-height:1.75rem} .md\\:shadow-\\[0_0_\\#0000\\]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .md\\:\\[grid-template-columns\\:repeat\\(2\\,minmax\\(auto\\,304px\\)\\)\\]{grid-template-columns:repeat(2,minmax(auto,304px))}}@media (min-width:1196px){ .lg\\:left-16{left:4rem} .lg\\:right-16{right:4rem} .lg\\:flex{display:flex} .lg\\:hidden{display:none} .lg\\:max-h-\\[calc\\(100vh-192px\\)\\]{max-height:calc(100vh - 192px)} .lg\\:max-h-\\[calc\\(100vh-192px-54px\\)\\]{max-height:calc(100vh - 246px)} .lg\\:min-h-\\[224px\\]{min-height:224px} .lg\\:w-full{width:100%} .lg\\:max-w-\\[50\\%\\]{max-width:50%} .lg\\:max-w-\\[calc\\(100vw-248px\\)\\]{max-width:calc(100vw - 248px)} .lg\\:grow{flex-grow:1} .lg\\:basis-1\\/2{flex-basis:50%} .lg\\:justify-start{justify-content:flex-start} .lg\\:rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .lg\\:rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .lg\\:px-16{padding-left:4rem;padding-right:4rem} .lg\\:px-\\[128px\\]{padding-left:128px;padding-right:128px} .lg\\:py-24{padding-bottom:6rem;padding-top:6rem} .lg\\:pt-6{padding-top:1.5rem}}@media (hover:hover) and (pointer:fine){ .td\\:border-2{border-width:2px} .td\\:border-blue-900{--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .td\\:hover\\:cursor-grab:hover{cursor:grab} .td\\:hover\\:bg-black-50:hover{background-color:rgba(0,0,0,.051)} .td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84,101,251,var(--tw-text-opacity,1))} .group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .group:hover .td\\:group-hover\\:opacity-5{opacity:.05}}@media (pointer:coarse){ .coarse\\:active\\:bg-yellow-900:active{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))}}'
|
|
18624
|
+
code: ' *, :after, :before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} ::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style:} *, :after, :before{border:0 solid #e5e7eb;box-sizing:border-box} :after, :before{--tw-content:""} :host, html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Mulish,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent} body{line-height:inherit;margin:0} hr{border-top-width:1px;color:inherit;height:0} abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted} h1, h2, h3, h4, h5, h6{font-size:inherit;font-weight:inherit} a{color:inherit;text-decoration:inherit} b, strong{font-weight:bolder} code, kbd, pre, samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal} small{font-size:80%} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sub{bottom:-.25em} sup{top:-.5em} table{border-collapse:collapse;border-color:inherit;text-indent:0} button, input, optgroup, select, textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0} button, select{text-transform:none} button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none} :-moz-focusring{outline:auto} :-moz-ui-invalid{box-shadow:none} progress{vertical-align:baseline} ::-webkit-inner-spin-button, ::-webkit-outer-spin-button{height:auto} [type=search]{-webkit-appearance:textfield;outline-offset:-2px} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} summary{display:list-item} blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre{margin:0} fieldset{margin:0} fieldset, legend{padding:0} menu, ol, ul{list-style:none;margin:0;padding:0} dialog{padding:0} textarea{resize:vertical} input::-moz-placeholder, textarea::-moz-placeholder{color:#9ca3af;opacity:1} input::placeholder, textarea::placeholder{color:#9ca3af;opacity:1} [role=button], button{cursor:pointer} :disabled{cursor:default} audio, canvas, embed, iframe, img, object, svg, video{display:block;vertical-align:middle} img, video{height:auto;max-width:100%} [hidden]:where(:not([hidden=until-found])){display:none} *{font-family:Mulish,sans-serif} input::-moz-selection, textarea::-moz-selection{background-color:hsla(0,0%,85%,.4)} input::selection, textarea::selection{background-color:hsla(0,0%,85%,.4)} .container{width:100%}@media (min-width:732px){ .container{max-width:732px}}@media (min-width:1196px){ .container{max-width:1196px}} .p2{font-size:.875rem;font-weight:600;line-height:1.25rem;line-height:1.5} .blanket-overlay{inset:0;position:absolute} .item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .focus-ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px} .focus-ring:focus, .raw-focus-ring{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .raw-focus-ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px} .focus-ring-by-dropdown{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:rgb(59,64,240,var(--tw-border-opacity,1));border-width:2px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047} .divider, .focus-ring-by-dropdown{--tw-border-opacity:1} .divider{border-bottom-width:1px;border-color:rgb(218,224,224,var(--tw-border-opacity,1))}@keyframes svelte-1dpid58-pulse{50%{opacity:.5}} .animate-skeleton{animation:svelte-1dpid58-pulse 2s cubic-bezier(.4,0,.6,1) infinite;--tw-bg-opacity:1;background-color:rgb(226,232,240,var(--tw-bg-opacity,1))} .btn-mcq-option:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-mcq-option{font-size:1rem;line-height:1.5rem;line-height:19.2px;margin-bottom:1rem;min-height:52px;width:100%;--tw-text-opacity:1;border-radius:.5rem;border-width:1px;box-sizing:border-box;color:rgb(33,37,41,var(--tw-text-opacity,1));--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-text{align-items:center;display:flex;padding:.375rem .75rem;width:100%}@supports (overflow-wrap:anywhere){ .btn-mcq-text{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .btn-mcq-text{word-break:break-word}} .btn-mcq-option>span>span>span>.choice{align-items:center;border-radius:1rem;border-width:1px;display:flex;font-size:1rem;font-weight:700;height:2rem;justify-content:center;letter-spacing:.05em;line-height:1rem;width:2rem;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));padding:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected{border-width:2px;--tw-border-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1));border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected, .btn-mcq-option.selected:active{--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .btn-mcq-option.selected:active{background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}} .btn-mcq-option.finished{cursor:default} .btn-mcq-option.finished:active, .btn-mcq-option.finished:hover{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))} .btn-mcq-option.selected>span>span>.choice{--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))} .btn-mcq-option>span>span>span>.custom-checkbox{align-items:center;border-radius:.25rem;border-width:1px;display:flex;height:1.75rem;justify-content:center;pointer-events:none;width:1.75rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option:hover>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .btn-mcq-option:active>span>span>span>.custom-checkbox.preview-only, .btn-mcq-option:hover>span>span>span>.custom-checkbox.preview-only{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))}} .btn-mcq-option:active>span>span>span>.custom-checkbox{border-width:2px;--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .btn-mcq-option.selected>span>span>span>.custom-checkbox{border-width:0;pointer-events:none;--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.selected:hover>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(76,91,226,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected:active>span>span>span>.custom-checkbox{border-width:0;--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .btn-mcq-option.finished:active>span>span>span>.custom-checkbox, .btn-mcq-option.finished:hover>span>span>span>.custom-checkbox{border-width:1px;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-mcq-option.missing.\\!correct, .btn-mcq-option.missing.correct{border-width:1px;--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(248,248,248,var(--tw-bg-opacity,1))}@media (hover:hover) and (pointer:fine){ .btn-mcq-option.\\!correct.interactive:active, .btn-mcq-option.\\!correct.interactive:hover, .btn-mcq-option.correct.interactive:active, .btn-mcq-option.correct.interactive:hover, .btn-mcq-option.incorrect.interactive:active, .btn-mcq-option.incorrect.interactive:hover, .btn-mcq-option.missing.interactive:active, .btn-mcq-option.missing.interactive:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(238,240,255,var(--tw-bg-opacity,1))}} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct{background-color:rgb(240,253,244,var(--tw-bg-opacity,1));border-color:rgb(21,128,61,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct, .btn-mcq-option.selected.correct, .btn-mcq-option.selected.incorrect{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .btn-mcq-option.selected.incorrect{background-color:rgb(253,242,248,var(--tw-bg-opacity,1));border-color:rgb(190,24,93,var(--tw-border-opacity,1));border-width:1px} .btn-mcq-option.selected.\\!correct>span>span>span>.choice, .btn-mcq-option.selected.correct>span>span>span>.choice, .btn-mcq-option.selected.incorrect>span>span>span>.choice{border-width:1px;--tw-border-opacity:1;border-color:rgb(113,115,119,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .btn-pressed{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-base:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .btn-base{align-items:center;display:inline-flex;justify-content:center}@media (hover:hover) and (pointer:fine){ .btn-base:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-base:active{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container{align-items:center;display:flex;height:2.75rem;justify-content:center;width:2.75rem} .btn-touch-container:focus{outline:2px solid transparent;outline-offset:2px} .btn-icon-sm{align-items:center;background-color:hsla(0,0%,100%,.8);border-radius:.25rem;display:flex;height:1.5rem;justify-content:center;width:1.5rem}@media (hover:hover) and (pointer:fine){ .btn-touch-container:hover>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1))}} .btn-touch-container:active>.btn-icon-sm{border-width:2px;--tw-border-opacity:1;border-color:rgb(51,69,223,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249,250,251,var(--tw-bg-opacity,1));--tw-shadow:inset 0 0 0 100vmax rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 0 100vmax var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .btn-touch-container:focus-visible>.btn-icon-sm{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529;outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .typein-textbox:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .typein-textbox{border-radius:.5rem;border-width:1px;width:100%;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .typein-textbox::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox::placeholder{--tw-placeholder-opacity:1;color:rgb(55,65,81,var(--tw-placeholder-opacity,1))} .typein-textbox:focus{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}} .typein-textbox:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)!important}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{transition-duration:50ms}} .typein-textbox:focus{outline-color:#212529;outline-width:2px}@media (hover:hover) and (pointer:fine){ .typein-textbox:hover{outline-color:#212529;outline-width:2px}} .typein-textbox:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1))} .inline-typein-container>p{font-size:1.25rem;font-weight:600;line-height:3rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;cursor:grabbing!important;transition-duration:50ms;--tw-border-opacity:1!important;border-color:rgb(93,99,107,var(--tw-border-opacity,1))!important;--tw-bg-opacity:1!important;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))!important} #dnd-action-dragged-el .btn-vertical-icon{cursor:grabbing!important;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} #dnd-action-dragged-el .preview-icon{display:none!important} #dnd-action-dragged-el .preview-vertical{display:block!important} .image-description, .text-stimulus{padding-bottom:1rem;padding-top:1rem} .text-stimulus p{font-size:1.25rem;line-height:1.75rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .image-description p{font-size:.875rem;line-height:1.25rem;padding-bottom:.5rem;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus ol, .text-stimulus ul{font-size:1rem;line-height:1.5rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .text-stimulus ol ::marker, .text-stimulus ul ::marker{color:#282c87} .text-stimulus ol::marker, .text-stimulus ul::marker{color:#282c87} .image-description ol, .image-description ul{font-size:.875rem;line-height:1.25rem;list-style-position:inside;padding-bottom:.5rem;padding-left:.5rem} .image-description ol ::marker, .image-description ul ::marker{color:#212529} .image-description ol::marker, .image-description ul::marker{color:#212529} .image-description ul, .text-stimulus ul{list-style-type:disc} .image-description ol, .text-stimulus ol{list-style-type:decimal} .image-description ul li>p, .text-stimulus ul li>p{margin-left:-.5rem} .text-stimulus ol>li>p, .text-stimulus ul>li>p{display:inline;font-size:1rem;line-height:1.5rem;padding-bottom:0;padding-top:0} .image-description ol>li>p, .image-description ul>li>p{display:inline;font-size:.875rem;line-height:1.25rem;padding-bottom:0;padding-top:0} .image-description div.table-container:focus, .text-stimulus div.table-container:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:4px;transition-duration:50ms} .image-description div.table-container, .text-stimulus div.table-container{border-radius:.5rem;overflow:auto;padding-left:.125rem;padding-right:.125rem} .image-description table, .text-stimulus table{margin-bottom:1rem;margin-top:.5rem;width:100%;--tw-border-spacing-x:0.75rem;--tw-border-spacing-y:0.75rem;border-radius:.5rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);overflow-x:auto;--tw-shadow:0 0 0 1px #9ca3af;--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .image-description table tr, .text-stimulus table tr{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table tr:last-child, .text-stimulus table tr:last-child{border-color:transparent} .image-description table td, .image-description table th, .text-stimulus table td, .text-stimulus table th{border-left-width:1px;min-width:140px;--tw-border-opacity:1;border-color:rgb(156,163,175,var(--tw-border-opacity,1))} .image-description table td:first-child, .image-description table th:first-child, .text-stimulus table td:first-child, .text-stimulus table th:first-child{border-style:none} .text-stimulus table td>p, .text-stimulus table th>p{font-size:1rem;line-height:1.5rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .image-description table td>p, .image-description table th>p{font-size:.875rem;line-height:1.25rem;padding:.75rem;text-align:left;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-stimulus table th>p{font-weight:400} .image-description table th p, .prompt p, .text-stimulus table th p{font-weight:600} .prompt p b, .prompt p b i, .prompt p b i u, .prompt p b u, .prompt p b u i, .prompt p i b, .prompt p i b u, .prompt p i u b, .prompt p u b, .prompt p u b i, .prompt p u i b, .text-stimulus table th p b, .text-stimulus table th p b i, .text-stimulus table th p b i u, .text-stimulus table th p b u, .text-stimulus table th p b u i, .text-stimulus table th p i b, .text-stimulus table th p i b u, .text-stimulus table th p i u b, .text-stimulus table th p u b, .text-stimulus table th p u b i, .text-stimulus table th p u i b{font-weight:900} .dropdown-text:not(:last-child), .dropdown:not(:last-child){margin-right:1rem} .dropdown-container{align-items:center;border-radius:.5rem;border-width:1px;display:flex;height:2.75rem;overflow:hidden;white-space:nowrap;width:15rem;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .dropdown-container:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .dropdown-container:active, .dropdown-container:focus{border-width:2px;box-shadow:0 0 0 2px #fff,0 0 0 4px #212529,0 0 0 6px #fde047;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))}@media (hover:hover) and (pointer:fine){ .dropdown-container:hover{border-width:2px;--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1));outline-color:#212529;outline-width:2px}} .dropdown-menu{border-radius:.5rem;border-width:1px;margin-top:.5rem;max-height:400px;overflow-y:auto;position:absolute;z-index:10;--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}@supports (overflow-wrap:anywhere){ .dropdown-menu{overflow-wrap:anywhere}}@supports not (overflow-wrap:anywhere){ .dropdown-menu{word-break:break-word}} .dropdown-menu{max-width:min(500px,100vw - 2rem);min-width:240px;width:-moz-max-content;width:max-content} .dropdown-item{cursor:pointer;font-size:1rem;line-height:1.5rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem 1rem} .dropdown-itemtext{border-bottom-width:1px;border-color:transparent} .dropdown-itemtext.hover-option{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .dropdown-itemtext.current-option{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .dropdown-itemtext:active{border-bottom-width:2px} .image-description-accordion{border-bottom-width:1px;border-color:transparent;font-weight:600;--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .group:focus .image-description-accordion{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1));--tw-text-opacity:1;border-bottom-width:1px;color:rgb(0,0,0,var(--tw-text-opacity,1));outline:2px solid transparent;outline-offset:2px} .group:focus .image-description-accordion, .group:hover .image-description-accordion{--tw-border-opacity:1;border-color:rgb(0,0,0,var(--tw-border-opacity,1))} .group:active .image-description-accordion{border-bottom-width:2px} .sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap} .pointer-events-none{pointer-events:none} .pointer-events-auto{pointer-events:auto} .visible{visibility:visible} .invisible{visibility:hidden} .collapse{visibility:collapse} .static{position:static} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .inset-0{inset:0} .inset-y-0{bottom:0;top:0} .-top-2\\.5{top:-.625rem} .bottom-0{bottom:0} .bottom-1\\.5{bottom:.375rem} .bottom-4{bottom:1rem} .bottom-5{bottom:1.25rem} .bottom-\\[7px\\]{bottom:7px} .bottom-full{bottom:100%} .left-0{left:0} .left-1\\/2{left:50%} .left-4{left:1rem} .left-6{left:1.5rem} .left-\\[-9999px\\]{left:-9999px} .left-full{left:100%} .right-0{right:0} .right-1{right:.25rem} .right-1\\.5{right:.375rem} .right-4{right:1rem} .right-6{right:1.5rem} .right-full{right:100%} .top-0{top:0} .top-1{top:.25rem} .top-1\\.5{top:.375rem} .top-1\\/2{top:50%} .top-12{top:3rem} .top-3\\.5{top:.875rem} .top-\\[13px\\]{top:13px} .top-\\[calc\\(50\\%\\+0\\.375rem\\)\\]{top:calc(50% + .375rem)} .top-full{top:100%} .z-0{z-index:0} .z-10{z-index:10} .z-50{z-index:50} .m-0{margin:0} .m-auto{margin:auto} .mx-0\\.5{margin-left:.125rem;margin-right:.125rem} .mx-auto{margin-left:auto;margin-right:auto} .my-1\\.5{margin-bottom:.375rem;margin-top:.375rem} .my-2{margin-bottom:.5rem;margin-top:.5rem} .my-6{margin-bottom:1.5rem;margin-top:1.5rem} .-mb-1{margin-bottom:-.25rem} .-ml-1{margin-left:-.25rem} .-mr-1{margin-right:-.25rem} .-mr-2\\.5{margin-right:-.625rem} .-mt-0\\.5{margin-top:-.125rem} .-mt-1{margin-top:-.25rem} .mb-0\\.5{margin-bottom:.125rem} .mb-10{margin-bottom:2.5rem} .mb-12{margin-bottom:3rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem} .mb-6{margin-bottom:1.5rem} .mb-\\[9\\.5px\\]{margin-bottom:9.5px} .ml-1{margin-left:.25rem} .ml-2{margin-left:.5rem} .ml-2\\.5{margin-left:.625rem} .ml-3{margin-left:.75rem} .ml-8\\.5{margin-left:2.125rem} .ml-\\[3px\\]{margin-left:3px} .ml-\\[9\\.5px\\]{margin-left:9.5px} .mr-1{margin-right:.25rem} .mr-2{margin-right:.5rem} .mr-4{margin-right:1rem} .mr-\\[9\\.5px\\]{margin-right:9.5px} .mt-0\\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-7\\.5{margin-top:1.875} .mt-9{margin-top:2.25rem} .mt-\\[9\\.5px\\]{margin-top:9.5px} .line-clamp-1{-webkit-line-clamp:1} .line-clamp-1, .line-clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical} .line-clamp-3{-webkit-line-clamp:3} .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .table{display:table} .grid{display:grid} .contents{display:contents} .hidden{display:none} .h-0{height:0} .h-10\\.5{height:2.625rem} .h-11{height:2.75rem} .h-2{height:.5rem} .h-4{height:1rem} .h-52{height:13rem} .h-6{height:1.5rem} .h-8\\.5{height:2.125rem} .h-\\[13\\.33px\\]{height:13.33px} .h-\\[8\\.77px\\]{height:8.77px} .h-auto{height:auto} .h-fit{height:-moz-fit-content;height:fit-content} .h-full{height:100%} .h-screen{height:100vh} .max-h-\\[184px\\]{max-height:184px} .max-h-\\[470px\\]{max-height:470px} .max-h-\\[660px\\]{max-height:660px} .max-h-\\[calc\\(100vh-168px\\)\\]{max-height:calc(100vh - 168px)} .max-h-\\[calc\\(100vh-168px-34px\\)\\]{max-height:calc(100vh - 202px)} .max-h-none{max-height:none} .min-h-\\[133px\\]{min-height:133px} .min-h-\\[140px\\]{min-height:140px} .min-h-\\[154px\\]{min-height:154px} .min-h-\\[210px\\]{min-height:210px} .min-h-\\[44px\\]{min-height:44px} .min-h-\\[54px\\]{min-height:54px} .min-h-\\[86px\\]{min-height:86px} .w-0{width:0} .w-11{width:2.75rem} .w-2{width:.5rem} .w-2\\/4{width:50%} .w-3{width:.75rem} .w-4{width:1rem} .w-6{width:1.5rem} .w-60{width:15rem} .w-8\\.5{width:2.125rem} .w-\\[13\\.33px\\]{width:13.33px} .w-\\[8\\.77px\\]{width:8.77px} .w-auto{width:auto} .w-fit{width:-moz-fit-content;width:fit-content} .w-full{width:100%} .w-screen{width:100vw} .min-w-0{min-width:0} .min-w-\\[288px\\]{min-width:288px} .min-w-\\[44px\\]{min-width:44px} .min-w-\\[85px\\]{min-width:85px} .max-w-\\[1008px\\]{max-width:1008px} .max-w-\\[300px\\]{max-width:300px} .max-w-\\[304px\\]{max-width:304px} .max-w-\\[400px\\]{max-width:400px} .max-w-full{max-width:100%} .max-w-none{max-width:none} .flex-1{flex:1 1 0%} .flex-none{flex:none} .flex-shrink-0{flex-shrink:0} .grow{flex-grow:1} .basis-0{flex-basis:0px} .-translate-x-1\\/2{--tw-translate-x:-50%} .-translate-x-1\\/2, .-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .-translate-y-1\\/2{--tw-translate-y:-50%} .rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .\\!cursor-default{cursor:default!important} .\\!cursor-pointer{cursor:pointer!important} .cursor-default{cursor:default} .cursor-pointer{cursor:pointer} .select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none} .resize-none{resize:none} .resize{resize:both} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .flex-row{flex-direction:row} .flex-col{flex-direction:column} .flex-col-reverse{flex-direction:column-reverse} .flex-wrap{flex-wrap:wrap} .content-start{align-content:flex-start} .items-center{align-items:center} .justify-start{justify-content:flex-start} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .gap-1{gap:.25rem} .gap-2{gap:.5rem} .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))} .space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1} .overflow-hidden{overflow:hidden} .overflow-y-auto{overflow-y:auto} .overflow-x-hidden{overflow-x:hidden} .overflow-y-visible{overflow-y:visible} .truncate{overflow:hidden;white-space:nowrap} .text-ellipsis, .truncate{text-overflow:ellipsis} .whitespace-normal{white-space:normal} .whitespace-nowrap{white-space:nowrap} .break-words{overflow-wrap:break-word} .break-all{word-break:break-all} .rounded{border-radius:.25rem} .rounded-\\[32px\\]{border-radius:32px} .rounded-lg{border-radius:.5rem} .rounded-md{border-radius:.375rem} .rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .rounded-b-md{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem} .rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem} .rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .rounded-t-md{border-top-left-radius:.375rem;border-top-right-radius:.375rem} .border{border-width:1px} .border-2{border-width:2px} .border-b{border-bottom-width:1px} .border-l-4{border-left-width:4px} .border-l-6{border-left-width:6px} .border-dashed{border-style:dashed} .\\!border-blue-1000{--tw-border-opacity:1!important;border-color:rgb(40,44,135,var(--tw-border-opacity,1))!important} .border-blue-1000{--tw-border-opacity:1;border-color:rgb(40,44,135,var(--tw-border-opacity,1))} .border-blue-950{--tw-border-opacity:1;border-color:rgb(29,78,216,var(--tw-border-opacity,1))} .border-border-minimal{--tw-border-opacity:1;border-color:rgb(229,231,235,var(--tw-border-opacity,1))} .border-charcoal{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .border-gray-400{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .border-gray-800{--tw-border-opacity:1;border-color:rgb(93,99,107,var(--tw-border-opacity,1))} .border-gray-850{--tw-border-opacity:1;border-color:rgb(75,85,99,var(--tw-border-opacity,1))} .border-green-800{--tw-border-opacity:1;border-color:rgb(0,102,5,var(--tw-border-opacity,1))} .border-green-900{--tw-border-opacity:1;border-color:rgb(21,128,61,var(--tw-border-opacity,1))} .border-red-600{--tw-border-opacity:1;border-color:rgb(220,38,38,var(--tw-border-opacity,1))} .border-red-800{--tw-border-opacity:1;border-color:rgb(217,12,85,var(--tw-border-opacity,1))} .border-red-900{--tw-border-opacity:1;border-color:rgb(190,24,93,var(--tw-border-opacity,1))} .border-soft-blue{--tw-border-opacity:1;border-color:rgb(84,101,251,var(--tw-border-opacity,1))} .border-white{--tw-border-opacity:1;border-color:rgb(255,255,255,var(--tw-border-opacity,1))} .\\!bg-violet-100{--tw-bg-opacity:1!important;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))!important} .\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .bg-blue-1000{--tw-bg-opacity:1;background-color:rgb(40,44,135,var(--tw-bg-opacity,1))} .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239,246,255,var(--tw-bg-opacity,1))} .bg-charcoal\\/30{background-color:rgba(33,37,41,.3)} .bg-charcoal\\/80{background-color:rgba(33,37,41,.8)} .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(247,250,250,var(--tw-bg-opacity,1))} .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(244,244,244,var(--tw-bg-opacity,1))} .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(57,62,69,var(--tw-bg-opacity,1))} .bg-green-300{--tw-bg-opacity:1;background-color:rgb(241,254,241,var(--tw-bg-opacity,1))} .bg-red-200{--tw-bg-opacity:1;background-color:rgb(254,202,202,var(--tw-bg-opacity,1))} .bg-red-300{--tw-bg-opacity:1;background-color:rgb(253,243,247,var(--tw-bg-opacity,1))} .bg-red-50{--tw-bg-opacity:1;background-color:rgb(253,242,248,var(--tw-bg-opacity,1))} .bg-soft-blue{--tw-bg-opacity:1;background-color:rgb(84,101,251,var(--tw-bg-opacity,1))} .bg-transparent{background-color:transparent} .bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .bg-violet-150{--tw-bg-opacity:1;background-color:rgb(205,208,254,var(--tw-bg-opacity,1))} .bg-white{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .bg-white\\/80{background-color:hsla(0,0%,100%,.8)} .bg-yellow-1000{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .bg-opacity-5{--tw-bg-opacity:0.05} .object-contain{-o-object-fit:contain;object-fit:contain} .p-0\\.5{padding:.125rem} .p-1{padding:.25rem} .p-1\\.5{padding:.375rem} .p-2{padding:.5rem} .p-3{padding:.75rem} .p-4{padding:1rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem} .px-0{padding-left:0;padding-right:0} .px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .py-1{padding-bottom:.25rem;padding-top:.25rem} .py-1\\.5{padding-bottom:.375rem;padding-top:.375rem} .py-2{padding-bottom:.5rem;padding-top:.5rem} .py-\\[9px\\]{padding-bottom:9px;padding-top:9px} .\\!pr-11{padding-right:2.75rem!important} .pb-0{padding-bottom:0} .pb-10{padding-bottom:2.5rem} .pb-2{padding-bottom:.5rem} .pb-3{padding-bottom:.75rem} .pb-\\[72px\\]{padding-bottom:72px} .pl-13\\.2{padding-left:3.125rem} .pl-24{padding-left:6rem} .pl-3{padding-left:.75rem} .pl-4{padding-left:1rem} .pr-3{padding-right:.75rem} .pr-4{padding-right:1rem} .pt-0{padding-top:0} .pt-0\\.5{padding-top:.125rem} .pt-14{padding-top:3.5rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-\\[15px\\]{padding-top:15px} .pt-\\[55px\\]{padding-top:55px} .text-left{text-align:left} .text-center{text-align:center} .align-middle{vertical-align:middle} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .font-bold{font-weight:700} .font-normal{font-weight:400} .font-semibold{font-weight:600} .leading-12{line-height:3rem} .leading-4{line-height:1rem} .leading-5{line-height:1.25rem} .leading-6{line-height:1.5rem} .leading-\\[1\\.5\\]{line-height:1.5} .leading-\\[150\\%\\]{line-height:150%} .leading-\\[19\\.2px\\]{line-height:19.2px} .leading-\\[19px\\]{line-height:19px} .leading-\\[22px\\]{line-height:22px} .\\!text-gray-900{--tw-text-opacity:1!important;color:rgb(57,62,69,var(--tw-text-opacity,1))!important} .text-blue-1000{--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))} .text-blue-850{--tw-text-opacity:1;color:rgb(46,47,212,var(--tw-text-opacity,1))} .text-charcoal{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .text-gray-500{--tw-text-opacity:1;color:rgb(107,114,128,var(--tw-text-opacity,1))} .text-gray-800{--tw-text-opacity:1;color:rgb(93,99,107,var(--tw-text-opacity,1))} .text-gray-860{--tw-text-opacity:1;color:rgb(55,65,81,var(--tw-text-opacity,1))} .text-green-800{--tw-text-opacity:1;color:rgb(0,102,5,var(--tw-text-opacity,1))} .text-green-900{--tw-text-opacity:1;color:rgb(21,128,61,var(--tw-text-opacity,1))} .text-inherit{color:inherit} .text-primary-emphasis{--tw-text-opacity:1;color:rgb(8,38,99,var(--tw-text-opacity,1))} .text-red-800{--tw-text-opacity:1;color:rgb(217,12,85,var(--tw-text-opacity,1))} .text-red-900{--tw-text-opacity:1;color:rgb(190,24,93,var(--tw-text-opacity,1))} .text-white{--tw-text-opacity:1;color:rgb(255,255,255,var(--tw-text-opacity,1))} .underline{text-decoration-line:underline} .opacity-0{opacity:0} .opacity-5{opacity:.05} .opacity-50{opacity:.5} .shadow-\\[0_-12px_14px_-16px_\\#00000033\\]{--tw-shadow:0 -12px 14px -16px #00000033;--tw-shadow-colored:0 -12px 14px -16px var(--tw-shadow-color)} .shadow-\\[0_-12px_14px_-16px_\\#00000033\\], .shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .shadow-md{--tw-shadow:0px 2px 8px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 8px var(--tw-shadow-color)} .\\!outline-none{outline:2px solid transparent!important;outline-offset:2px!important} .outline-none{outline:2px solid transparent;outline-offset:2px} .blur{--tw-blur:blur(8px)} .blur, .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)} .backdrop-blur-md{--tw-backdrop-blur:blur(12px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)} .transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)} .duration-300{transition-duration:.3s} :host, html{-webkit-tap-highlight-color:inherit!important} .active\\:raw-focus-ring-by:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(253 224 71/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;--tw-ring-offset-color:#212529} .active\\:raw-focus-ring-by:active, .active\\:raw-focus-ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);outline:2px solid transparent;outline-offset:2px;transition-duration:50ms} .active\\:raw-focus-ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px}@media (min-width:732px){ .md\\:item-heading{font-size:1.25rem;letter-spacing:-.025em;line-height:1.5rem;--tw-text-opacity:1;color:rgb(40,44,135,var(--tw-text-opacity,1))}}@media (hover:hover) and (pointer:fine){ .td\\:hover-focus-ring:hover{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent);--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1));--tw-ring-offset-width:2px;transition-duration:50ms}} .last\\:mr-0:last-child{margin-right:0} .focus-within\\:left-0:focus-within{left:0} .focus-within\\:right-0:focus-within{right:0} .focus-within\\:top-0:focus-within{top:0} .focus-within\\:z-30:focus-within{z-index:30} .hover\\:bg-black-50:hover{background-color:rgba(0,0,0,.051)} .hover\\:bg-blue-100:hover{--tw-bg-opacity:1;background-color:rgb(222,222,255,var(--tw-bg-opacity,1))} .hover\\:bg-yellow-1000:hover{--tw-bg-opacity:1;background-color:rgb(251,217,27,var(--tw-bg-opacity,1))} .hover\\:text-charcoal:hover{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .hover\\:underline:hover{text-decoration-line:underline} .hover\\:decoration-2:hover{text-decoration-thickness:2px} .hover\\:underline-offset-\\[25\\%\\]:hover{text-underline-offset:25%} .focus-visible\\:border-charcoal:focus-visible{--tw-border-opacity:1;border-color:rgb(33,37,41,var(--tw-border-opacity,1))} .focus-visible\\:bg-yellow-900:focus-visible{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))} .focus-visible\\:text-charcoal:focus-visible{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .focus-visible\\:underline:focus-visible{text-decoration-line:underline} .focus-visible\\:decoration-2:focus-visible{text-decoration-thickness:2px} .focus-visible\\:underline-offset-\\[25\\%\\]:focus-visible{text-underline-offset:25%} .focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px} .focus-visible\\:ring-4:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)} .focus-visible\\:ring-soft-blue:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(84 101 251/var(--tw-ring-opacity,1))} .focus-visible\\:ring-offset-4:focus-visible{--tw-ring-offset-width:4px} .focus-visible\\:duration-50:focus-visible{transition-duration:50ms} .active\\:bg-black-55:active, .active\\:bg-black-60:active{background-color:rgba(0,0,0,.102)} .active\\:bg-yellow-1100:active{--tw-bg-opacity:1;background-color:rgb(238,206,26,var(--tw-bg-opacity,1))} .active\\:text-charcoal:active{--tw-text-opacity:1;color:rgb(33,37,41,var(--tw-text-opacity,1))} .disabled\\:text-gray-40:disabled{--tw-text-opacity:1;color:rgb(142,147,153,var(--tw-text-opacity,1))} .disabled\\:hover\\:bg-white:hover:disabled{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))} .group:hover .group-hover\\:underline{text-decoration-line:underline} .group.active .group-\\[\\.active\\]\\:border-b-2{border-bottom-width:2px}@media (min-width:732px){ .md\\:inset-0{inset:0} .md\\:top-20{top:5rem} .md\\:mb-2{margin-bottom:.5rem} .md\\:mb-4{margin-bottom:1rem} .md\\:mb-8{margin-bottom:2rem} .md\\:ml-0{margin-left:0} .md\\:mt-0{margin-top:0} .md\\:mt-14{margin-top:3.5rem} .md\\:block{display:block} .md\\:inline-block{display:inline-block} .md\\:flex{display:flex} .md\\:grid{display:grid} .md\\:hidden{display:none} .md\\:h-11{height:2.75rem} .md\\:h-5{height:1.25rem} .md\\:h-\\[13\\.5px\\]{height:13.5px} .md\\:h-fit{height:-moz-fit-content;height:fit-content} .md\\:max-h-\\[calc\\(100vh-128px\\)\\]{max-height:calc(100vh - 128px)} .md\\:max-h-\\[calc\\(100vh-128px-54px\\)\\]{max-height:calc(100vh - 182px)} .md\\:min-h-0{min-height:0} .md\\:min-h-\\[140px\\]{min-height:140px} .md\\:min-h-\\[164px\\]{min-height:164px} .md\\:w-1\\/2{width:50%} .md\\:w-11{width:2.75rem} .md\\:w-5{width:1.25rem} .md\\:w-\\[13\\.5px\\]{width:13.5px} .md\\:w-fit{width:-moz-fit-content;width:fit-content} .md\\:max-w-\\[calc\\(100vw-164px\\)\\]{max-width:calc(100vw - 164px)} .md\\:flex-none{flex:none} .md\\:grow-0{flex-grow:0} .md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\\:flex-row{flex-direction:row} .md\\:flex-col{flex-direction:column} .md\\:items-start{align-items:flex-start} .md\\:items-center{align-items:center} .md\\:justify-normal{justify-content:normal} .md\\:justify-center{justify-content:center} .md\\:justify-between{justify-content:space-between} .md\\:gap-4{gap:1rem} .md\\:gap-6{gap:1.5rem} .md\\:gap-x-4{-moz-column-gap:1rem;column-gap:1rem} .md\\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))} .md\\:rounded-lg{border-radius:.5rem} .md\\:rounded-md{border-radius:.375rem} .md\\:rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0} .md\\:border{border-width:1px} .md\\:border-gray-400{--tw-border-opacity:1;border-color:rgb(196,201,204,var(--tw-border-opacity,1))} .md\\:\\!bg-white{--tw-bg-opacity:1!important;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))!important} .md\\:p-4{padding:1rem} .md\\:px-0{padding-left:0;padding-right:0} .md\\:px-4{padding-left:1rem;padding-right:1rem} .md\\:px-6{padding-left:1.5rem;padding-right:1.5rem} .md\\:px-\\[82px\\]{padding-left:82px;padding-right:82px} .md\\:pb-0{padding-bottom:0} .md\\:pl-13\\.2{padding-left:3.125rem} .md\\:pl-4{padding-left:1rem} .md\\:pr-4{padding-right:1rem} .md\\:pt-20\\.5{padding-top:5.125rem} .md\\:text-center{text-align:center} .md\\:text-lg{font-size:1.125rem;line-height:1.75rem} .md\\:shadow-\\[0_0_\\#0000\\]{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)} .md\\:\\[grid-template-columns\\:repeat\\(2\\,minmax\\(auto\\,304px\\)\\)\\]{grid-template-columns:repeat(2,minmax(auto,304px))}}@media (min-width:1196px){ .lg\\:left-16{left:4rem} .lg\\:right-16{right:4rem} .lg\\:flex{display:flex} .lg\\:hidden{display:none} .lg\\:max-h-\\[calc\\(100vh-192px\\)\\]{max-height:calc(100vh - 192px)} .lg\\:max-h-\\[calc\\(100vh-192px-54px\\)\\]{max-height:calc(100vh - 246px)} .lg\\:min-h-\\[224px\\]{min-height:224px} .lg\\:w-full{width:100%} .lg\\:max-w-\\[50\\%\\]{max-width:50%} .lg\\:max-w-\\[calc\\(100vw-248px\\)\\]{max-width:calc(100vw - 248px)} .lg\\:grow{flex-grow:1} .lg\\:basis-1\\/2{flex-basis:50%} .lg\\:justify-start{justify-content:flex-start} .lg\\:rounded-b-lg{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem} .lg\\:rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem} .lg\\:px-16{padding-left:4rem;padding-right:4rem} .lg\\:px-\\[128px\\]{padding-left:128px;padding-right:128px} .lg\\:py-24{padding-bottom:6rem;padding-top:6rem} .lg\\:pt-6{padding-top:1.5rem}}@media (hover:hover) and (pointer:fine){ .td\\:border-2{border-width:2px} .td\\:border-blue-900{--tw-border-opacity:1;border-color:rgb(59,64,240,var(--tw-border-opacity,1))} .td\\:hover\\:cursor-grab:hover{cursor:grab} .td\\:hover\\:bg-black-50:hover{background-color:rgba(0,0,0,.051)} .td\\:hover\\:bg-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235,235,255,var(--tw-bg-opacity,1))} .td\\:hover\\:text-soft-blue:hover{--tw-text-opacity:1;color:rgb(84,101,251,var(--tw-text-opacity,1))} .group:hover .td\\:group-hover\\:bg-black{--tw-bg-opacity:1;background-color:rgb(0,0,0,var(--tw-bg-opacity,1))} .group:hover .td\\:group-hover\\:opacity-5{opacity:.05}}@media (pointer:coarse){ .coarse\\:active\\:bg-yellow-900:active{--tw-bg-opacity:1;background-color:rgb(253,224,71,var(--tw-bg-opacity,1))}}'
|
|
18453
18625
|
};
|
|
18454
18626
|
function InteractionBuilder($$anchor, $$props) {
|
|
18455
18627
|
push($$props, true);
|