eat-js-sdk 2.0.44 → 2.0.46
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 +318 -182
- 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",
|
|
@@ -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) => {
|
|
@@ -6881,9 +6885,9 @@ 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$
|
|
6890
|
+
var root_5$6 = /* @__PURE__ */ from_html(`<div><span aria-hidden="true"><!></span></div>`);
|
|
6887
6891
|
var root_8$4 = /* @__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>`);
|
|
@@ -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
|
{
|
|
@@ -7467,7 +7471,7 @@ 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
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 w-full px-0 md:px-6 lg:px-16"><div class="relative bg-white rounded-md md:rounded-lg shadow-sm overflow-hidden flex-shrink-0"><img class="block object-contain w-full h-auto max-w-full mx-auto"/> <!></div> <!></div></div></div>`);
|
|
@@ -7639,7 +7643,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
|
|
|
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,12 +8301,12 @@ create_custom_element(
|
|
|
8297
8301
|
[],
|
|
8298
8302
|
true
|
|
8299
8303
|
);
|
|
8300
|
-
var root_3$
|
|
8304
|
+
var root_3$9 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8301
8305
|
var root_4$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8302
8306
|
var root_2$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8303
8307
|
var root_6$2 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8304
8308
|
var root_7$3 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8305
|
-
var root_5$
|
|
8309
|
+
var root_5$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
8306
8310
|
var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!></div>`);
|
|
8307
8311
|
function StimulusSection($$anchor, $$props) {
|
|
8308
8312
|
push($$props, true);
|
|
@@ -8373,7 +8377,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8373
8377
|
var node_2 = first_child(fragment_1);
|
|
8374
8378
|
{
|
|
8375
8379
|
var consequent = ($$anchor4) => {
|
|
8376
|
-
var div_1 = root_3$
|
|
8380
|
+
var div_1 = root_3$9();
|
|
8377
8381
|
var node_3 = child(div_1);
|
|
8378
8382
|
CommonStringToHtml(node_3, {
|
|
8379
8383
|
get htmlString() {
|
|
@@ -8427,7 +8431,7 @@ function StimulusSection($$anchor, $$props) {
|
|
|
8427
8431
|
append($$anchor3, fragment_1);
|
|
8428
8432
|
};
|
|
8429
8433
|
var alternate = ($$anchor3) => {
|
|
8430
|
-
var fragment_2 = root_5$
|
|
8434
|
+
var fragment_2 = root_5$3();
|
|
8431
8435
|
var node_6 = first_child(fragment_2);
|
|
8432
8436
|
{
|
|
8433
8437
|
var consequent_3 = ($$anchor4) => {
|
|
@@ -8512,10 +8516,10 @@ create_custom_element(
|
|
|
8512
8516
|
true
|
|
8513
8517
|
);
|
|
8514
8518
|
var root_8$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
|
|
8515
|
-
var root_13
|
|
8516
|
-
var root_15
|
|
8519
|
+
var root_13 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
|
|
8520
|
+
var root_15 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
|
|
8517
8521
|
var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8518
|
-
var root_16 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8522
|
+
var root_16$1 = /* @__PURE__ */ from_html(`<div><!></div>`);
|
|
8519
8523
|
var root$e = /* @__PURE__ */ from_html(`<div class="prompt-container"><div><div></div> <!></div></div> <!>`, 1);
|
|
8520
8524
|
function PromptContainer($$anchor, $$props) {
|
|
8521
8525
|
push($$props, true);
|
|
@@ -8706,7 +8710,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8706
8710
|
var node_6 = first_child(fragment_10);
|
|
8707
8711
|
{
|
|
8708
8712
|
var consequent_5 = ($$anchor8) => {
|
|
8709
|
-
var div_5 = root_13
|
|
8713
|
+
var div_5 = root_13();
|
|
8710
8714
|
append($$anchor8, div_5);
|
|
8711
8715
|
};
|
|
8712
8716
|
var alternate = ($$anchor8) => {
|
|
@@ -8714,7 +8718,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8714
8718
|
var node_7 = first_child(fragment_11);
|
|
8715
8719
|
{
|
|
8716
8720
|
var consequent_6 = ($$anchor9) => {
|
|
8717
|
-
var div_6 = root_15
|
|
8721
|
+
var div_6 = root_15();
|
|
8718
8722
|
var node_8 = child(div_6);
|
|
8719
8723
|
snippet(node_8, () => feedback() ?? noop);
|
|
8720
8724
|
reset(div_6);
|
|
@@ -8807,7 +8811,7 @@ function PromptContainer($$anchor, $$props) {
|
|
|
8807
8811
|
var node_9 = sibling(div_2, 2);
|
|
8808
8812
|
{
|
|
8809
8813
|
var consequent_7 = ($$anchor2) => {
|
|
8810
|
-
var div_7 = root_16();
|
|
8814
|
+
var div_7 = root_16$1();
|
|
8811
8815
|
var node_10 = child(div_7);
|
|
8812
8816
|
StimulusSection(node_10, {
|
|
8813
8817
|
get stimulusData() {
|
|
@@ -8894,9 +8898,9 @@ create_custom_element(
|
|
|
8894
8898
|
);
|
|
8895
8899
|
var root_1$g = /* @__PURE__ */ from_html(`<p class="text-charcoal text-sm leading-[19.2px] mb-2"> </p>`);
|
|
8896
8900
|
var root_2$a = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5"> </span>`);
|
|
8897
|
-
var root_3$
|
|
8901
|
+
var root_3$8 = /* @__PURE__ */ from_html(`<span class="text-gray-860 text-sm mb-0.5">Missing answer:</span>`);
|
|
8898
8902
|
var root_4$2 = /* @__PURE__ */ from_html(`<span aria-hidden="true" class="text-green-900 mr-1"><!></span>`);
|
|
8899
|
-
var root_5$
|
|
8903
|
+
var root_5$2 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
|
|
8900
8904
|
var root_9$1 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
|
|
8901
8905
|
var root_8$2 = /* @__PURE__ */ from_html(`<span><!></span>`);
|
|
8902
8906
|
var root_10$1 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" loading="lazy"/></div>`);
|
|
@@ -9028,7 +9032,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9028
9032
|
var node_2 = sibling(node_1, 2);
|
|
9029
9033
|
{
|
|
9030
9034
|
var consequent_2 = ($$anchor2) => {
|
|
9031
|
-
var span_6 = root_3$
|
|
9035
|
+
var span_6 = root_3$8();
|
|
9032
9036
|
append($$anchor2, span_6);
|
|
9033
9037
|
};
|
|
9034
9038
|
if_block(node_2, ($$render) => {
|
|
@@ -9061,7 +9065,7 @@ function MCQOption($$anchor, $$props) {
|
|
|
9061
9065
|
var node_6 = sibling(node_4, 2);
|
|
9062
9066
|
{
|
|
9063
9067
|
var consequent_5 = ($$anchor2) => {
|
|
9064
|
-
var span_9 = root_5$
|
|
9068
|
+
var span_9 = root_5$2();
|
|
9065
9069
|
var node_7 = child(span_9);
|
|
9066
9070
|
{
|
|
9067
9071
|
var consequent_4 = ($$anchor3) => {
|
|
@@ -9308,7 +9312,7 @@ create_custom_element(
|
|
|
9308
9312
|
[],
|
|
9309
9313
|
true
|
|
9310
9314
|
);
|
|
9311
|
-
var root_3$
|
|
9315
|
+
var root_3$7 = /* @__PURE__ */ from_html(`<div aria-live="polite" class="mb-6"><!></div>`);
|
|
9312
9316
|
var root$c = /* @__PURE__ */ from_html(`<!> <!>`, 1);
|
|
9313
9317
|
function MCQComponent($$anchor, $$props) {
|
|
9314
9318
|
push($$props, true);
|
|
@@ -9446,7 +9450,7 @@ function MCQComponent($$anchor, $$props) {
|
|
|
9446
9450
|
var node_1 = first_child(fragment_2);
|
|
9447
9451
|
{
|
|
9448
9452
|
var consequent = ($$anchor3) => {
|
|
9449
|
-
var div = root_3$
|
|
9453
|
+
var div = root_3$7();
|
|
9450
9454
|
var node_2 = child(div);
|
|
9451
9455
|
MCQFeedback(node_2, {
|
|
9452
9456
|
get feedbackState() {
|
|
@@ -10297,7 +10301,7 @@ action.update = n.update;
|
|
|
10297
10301
|
action.destroy = n.destroy;
|
|
10298
10302
|
var root_1$c = /* @__PURE__ */ from_html(`<label aria-hidden="true"><span></span> <span> </span></label>`);
|
|
10299
10303
|
var root_2$6 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
|
|
10300
|
-
var root_3$
|
|
10304
|
+
var root_3$6 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
|
|
10301
10305
|
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
10306
|
var root$9 = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
|
|
10303
10307
|
function AnswerDisplay($$anchor, $$props) {
|
|
@@ -10478,7 +10482,7 @@ function AnswerDisplay($$anchor, $$props) {
|
|
|
10478
10482
|
append($$anchor2, div_1);
|
|
10479
10483
|
};
|
|
10480
10484
|
var alternate = ($$anchor2) => {
|
|
10481
|
-
var textarea = root_3$
|
|
10485
|
+
var textarea = root_3$6();
|
|
10482
10486
|
remove_textarea_child(textarea);
|
|
10483
10487
|
action$1(textarea, ($$node) => action?.($$node));
|
|
10484
10488
|
template_effect(() => {
|
|
@@ -10971,7 +10975,7 @@ create_custom_element(
|
|
|
10971
10975
|
[],
|
|
10972
10976
|
true
|
|
10973
10977
|
);
|
|
10974
|
-
var root_3$
|
|
10978
|
+
var root_3$5 = /* @__PURE__ */ from_html(`<p></p>`);
|
|
10975
10979
|
var root_8$1 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
|
|
10976
10980
|
var root_2$4 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
|
|
10977
10981
|
function TypeInComponent($$anchor, $$props) {
|
|
@@ -11175,7 +11179,7 @@ function TypeInComponent($$anchor, $$props) {
|
|
|
11175
11179
|
var div = root_2$4();
|
|
11176
11180
|
var node_1 = child(div);
|
|
11177
11181
|
each(node_1, 17, () => segments, index, ($$anchor4, segment) => {
|
|
11178
|
-
var p = root_3$
|
|
11182
|
+
var p = root_3$5();
|
|
11179
11183
|
each(p, 21, () => get$1(segment).parts, index, ($$anchor5, part, partIndex) => {
|
|
11180
11184
|
var fragment_2 = comment();
|
|
11181
11185
|
var node_2 = first_child(fragment_2);
|
|
@@ -13842,8 +13846,8 @@ function isInt(value) {
|
|
|
13842
13846
|
})(parseFloat(value));
|
|
13843
13847
|
}
|
|
13844
13848
|
var root_1$9 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
|
|
13845
|
-
var root_3$
|
|
13846
|
-
var root_5$
|
|
13849
|
+
var root_3$4 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
|
|
13850
|
+
var root_5$1 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
|
|
13847
13851
|
var root_7$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
|
|
13848
13852
|
var root$6 = /* @__PURE__ */ from_html(`<button data-item-button=""><span><!></span> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
|
|
13849
13853
|
function CategoriseItem($$anchor, $$props) {
|
|
@@ -14136,7 +14140,7 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14136
14140
|
var node_3 = first_child(fragment);
|
|
14137
14141
|
{
|
|
14138
14142
|
var consequent_1 = ($$anchor3) => {
|
|
14139
|
-
var span_4 = root_3$
|
|
14143
|
+
var span_4 = root_3$4();
|
|
14140
14144
|
var node_4 = child(span_4);
|
|
14141
14145
|
SvgLoader(node_4, { svgName: "errorSolid", className: "incorrect-icon" });
|
|
14142
14146
|
reset(span_4);
|
|
@@ -14147,7 +14151,7 @@ function CategoriseItem($$anchor, $$props) {
|
|
|
14147
14151
|
var node_5 = first_child(fragment_1);
|
|
14148
14152
|
{
|
|
14149
14153
|
var consequent_2 = ($$anchor4) => {
|
|
14150
|
-
var span_5 = root_5$
|
|
14154
|
+
var span_5 = root_5$1();
|
|
14151
14155
|
var node_6 = child(span_5);
|
|
14152
14156
|
SvgLoader(node_6, { svgName: "success", className: "missing-correct-icon" });
|
|
14153
14157
|
reset(span_5);
|
|
@@ -14653,7 +14657,7 @@ create_custom_element(
|
|
|
14653
14657
|
true
|
|
14654
14658
|
);
|
|
14655
14659
|
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$
|
|
14660
|
+
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
14661
|
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
14662
|
var root$4 = /* @__PURE__ */ from_html(`<div role="group"><div><!> <!></div> <!></div>`);
|
|
14659
14663
|
function CategoriseCategory($$anchor, $$props) {
|
|
@@ -14688,16 +14692,15 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
14688
14692
|
${isDraggingOver() && get$1(isNotSourceContainer) ? "raw-focus-ring" : ""}
|
|
14689
14693
|
${get$1(isDropTarget) && get$1(isNotSourceContainer) ? "bg-violet-150" : ""}
|
|
14690
14694
|
${get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition bg-white duration-300" : ""}
|
|
14691
|
-
${get$1(isValidDropTarget) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""}
|
|
14695
|
+
${get$1(isValidDropTarget) ? "td:hover:bg-violet-100 td:hover-focus-ring cursor-pointer" : ""}
|
|
14692
14696
|
${get$1(effectiveIsCollapsed) && isMobile() ? "" : "min-h-[140px]"}`);
|
|
14693
14697
|
const containerClasses = /* @__PURE__ */ user_derived(() => `content-start !outline-none rounded-lg grow w-full md:p-4
|
|
14694
14698
|
${isDraggingOver() && get$1(isNotSourceContainer) ? "bg-violet-100" : ""}
|
|
14695
14699
|
${get$1(effectiveIsCollapsed) && isMobile() ? "" : "h-full p-3 min-h-[86px] md:min-h-0"}`);
|
|
14696
14700
|
const titleClasses = /* @__PURE__ */ user_derived(() => `absolute flex items-center justify-between border-b border-gray-800 w-full rounded-t-lg p-3 md:p-4 md:justify-center
|
|
14697
14701
|
${get$1(isDropTarget) && get$1(isNotSourceContainer) ? "bg-transparent" : "bg-white"}
|
|
14698
|
-
${
|
|
14699
|
-
${get$1(effectiveIsCollapsed) && isMobile() ? "rounded-b-lg md:rounded-b-none" : ""}
|
|
14700
|
-
${get$1(effectiveIsCollapsed) && isMobile() && get$1(isValidDropTarget) ? "group-hover/itemContainer:bg-violet-100 md:group-hover/itemContainer:bg-white" : ""}`);
|
|
14702
|
+
${get$1(effectiveIsCollapsed) && isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100 md:!bg-white" : ""}
|
|
14703
|
+
${get$1(effectiveIsCollapsed) && isMobile() ? "rounded-b-lg md:rounded-b-none" : ""}`);
|
|
14701
14704
|
const adjustedTabindex = /* @__PURE__ */ user_derived(() => () => {
|
|
14702
14705
|
if (get$1(hasSelectedItem)) {
|
|
14703
14706
|
return -1;
|
|
@@ -14921,7 +14924,7 @@ function CategoriseCategory($$anchor, $$props) {
|
|
|
14921
14924
|
append($$anchor3, svg);
|
|
14922
14925
|
};
|
|
14923
14926
|
var alternate = ($$anchor3) => {
|
|
14924
|
-
var svg_1 = root_3$
|
|
14927
|
+
var svg_1 = root_3$3();
|
|
14925
14928
|
append($$anchor3, svg_1);
|
|
14926
14929
|
};
|
|
14927
14930
|
if_block(node_2, ($$render) => {
|
|
@@ -15057,7 +15060,7 @@ create_custom_element(
|
|
|
15057
15060
|
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
|
|
15058
15061
|
absolute top-12 right-4 left-4 bottom-4 flex items-center justify-center !bg-white md:top-20">Word Bin is empty</div>`);
|
|
15059
15062
|
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>`);
|
|
15060
|
-
var root_3$
|
|
15063
|
+
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>`);
|
|
15061
15064
|
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>`);
|
|
15062
15065
|
function CategoriseWordBin($$anchor, $$props) {
|
|
15063
15066
|
push($$props, true);
|
|
@@ -15084,13 +15087,13 @@ function CategoriseWordBin($$anchor, $$props) {
|
|
|
15084
15087
|
${isDraggingOver() && get$1(isNotSourceContainer) ? "raw-focus-ring bg-violet-100" : ""}
|
|
15085
15088
|
${get$1(isDropTarget) && get$1(isNotSourceContainer) ? "bg-violet-150" : ""}
|
|
15086
15089
|
${get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition bg-white duration-300" : ""}
|
|
15087
|
-
${get$1(isValidDropTarget) ? "hover:bg-violet-100 hover-focus-ring cursor-pointer" : ""}
|
|
15090
|
+
${get$1(isValidDropTarget) ? "td:hover:bg-violet-100 td:hover-focus-ring cursor-pointer" : ""}
|
|
15088
15091
|
${get$1(hasSelectedItem) && !get$1(isNotSourceContainer) ? "cursor-default" : ""}`);
|
|
15089
15092
|
const titleClasses = /* @__PURE__ */ user_derived(() => `p-4 pb-3 text-center w-full absolute flex flex-row items-center justify-between md:justify-center md:flex-col md:pb-0
|
|
15090
15093
|
${get$1(isDropTarget) && !hasAddItemAnimation() && get$1(isNotSourceContainer) ? "bg-violet-150" : ""}
|
|
15091
15094
|
${get$1(isDropTarget) && hasAddItemAnimation() && get$1(isNotSourceContainer) ? "transition duration-300 bg-white" : ""}
|
|
15092
15095
|
${isDraggingOver() && get$1(isNotSourceContainer) ? "bg-violet-100" : ""}
|
|
15093
|
-
${get$1(isValidDropTarget) ? "hover:bg-violet-100" : ""}`);
|
|
15096
|
+
${get$1(isValidDropTarget) ? "td:hover:bg-violet-100" : ""}`);
|
|
15094
15097
|
const handleEmptyClick = () => {
|
|
15095
15098
|
if (selectedItemId() && oncontainerclick()) {
|
|
15096
15099
|
oncontainerclick()(containerId());
|
|
@@ -15370,7 +15373,7 @@ function CategoriseWordBin($$anchor, $$props) {
|
|
|
15370
15373
|
var node_4 = sibling(node_3, 2);
|
|
15371
15374
|
{
|
|
15372
15375
|
var consequent_2 = ($$anchor2) => {
|
|
15373
|
-
var button_1 = root_3$
|
|
15376
|
+
var button_1 = root_3$2();
|
|
15374
15377
|
button_1.__click = () => handleNavigate("right");
|
|
15375
15378
|
button_1.__keydown = (e2) => {
|
|
15376
15379
|
if (e2.key === "Enter" || e2.key === " ") {
|
|
@@ -15741,8 +15744,6 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
15741
15744
|
}
|
|
15742
15745
|
}
|
|
15743
15746
|
}
|
|
15744
|
-
} else {
|
|
15745
|
-
set(dragSourceContainerId, null);
|
|
15746
15747
|
}
|
|
15747
15748
|
});
|
|
15748
15749
|
user_effect(() => {
|
|
@@ -15959,7 +15960,6 @@ function CategoriseComponent($$anchor, $$props) {
|
|
|
15959
15960
|
set(interactionState, api().reset(get$1(interactionState)), true);
|
|
15960
15961
|
dispatchStateChange();
|
|
15961
15962
|
set(currentMobileIndex, 0);
|
|
15962
|
-
set(dragSourceContainerId, null);
|
|
15963
15963
|
set(isModalOpen, false);
|
|
15964
15964
|
};
|
|
15965
15965
|
var $$exports = {
|
|
@@ -16957,83 +16957,144 @@ function createDropdownState(initialValue) {
|
|
|
16957
16957
|
searchString: ""
|
|
16958
16958
|
};
|
|
16959
16959
|
}
|
|
16960
|
-
const
|
|
16961
|
-
return
|
|
16960
|
+
const hasRenderedIds = (ids) => {
|
|
16961
|
+
return !!ids && ids.length > 0;
|
|
16962
|
+
};
|
|
16963
|
+
const createSelectionMap = (selections) => {
|
|
16964
|
+
return new Map(selections.map((s) => [s.id, s]));
|
|
16965
|
+
};
|
|
16966
|
+
const isAllAnswered$1 = (selections, renderedIds) => {
|
|
16967
|
+
if (hasRenderedIds(renderedIds)) {
|
|
16968
|
+
const selectionMap = createSelectionMap(selections);
|
|
16969
|
+
return renderedIds.every((id) => {
|
|
16970
|
+
const selection = selectionMap.get(id);
|
|
16971
|
+
return selection && selection.choice !== DROPDOWN_INTERACTION.EMPTY_CHOICE && selection.choice !== DROPDOWN_INTERACTION.PLACEHOLDER;
|
|
16972
|
+
});
|
|
16973
|
+
}
|
|
16974
|
+
return selections.every(
|
|
16975
|
+
(item) => item.choice !== DROPDOWN_INTERACTION.EMPTY_CHOICE && item.choice !== DROPDOWN_INTERACTION.PLACEHOLDER
|
|
16976
|
+
);
|
|
16962
16977
|
};
|
|
16963
|
-
const isAllSkipped = (selections) => {
|
|
16964
|
-
|
|
16978
|
+
const isAllSkipped = (selections, renderedIds) => {
|
|
16979
|
+
if (hasRenderedIds(renderedIds)) {
|
|
16980
|
+
const selectionMap = createSelectionMap(selections);
|
|
16981
|
+
return renderedIds.every((id) => {
|
|
16982
|
+
const selection = selectionMap.get(id);
|
|
16983
|
+
return !selection || selection.choice === DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
16984
|
+
});
|
|
16985
|
+
}
|
|
16986
|
+
return selections.every((item) => item.choice === DROPDOWN_INTERACTION.EMPTY_CHOICE);
|
|
16965
16987
|
};
|
|
16966
|
-
const calculateAnswerResults = (config, selections) => {
|
|
16988
|
+
const calculateAnswerResults = (config, selections, renderedIds) => {
|
|
16989
|
+
const selectionMap = createSelectionMap(selections);
|
|
16990
|
+
if (hasRenderedIds(renderedIds)) {
|
|
16991
|
+
return renderedIds.map((id) => {
|
|
16992
|
+
const selection = selectionMap.get(id);
|
|
16993
|
+
if (!selection) return false;
|
|
16994
|
+
const correctAnswers = config.correctAnswer[id] || [];
|
|
16995
|
+
if (correctAnswers.length === 0) return false;
|
|
16996
|
+
return correctAnswers.includes(selection.choice);
|
|
16997
|
+
});
|
|
16998
|
+
}
|
|
16967
16999
|
return selections.map((item) => {
|
|
16968
17000
|
const correctAnswers = config.correctAnswer[item.id] || [];
|
|
16969
17001
|
if (correctAnswers.length === 0) return false;
|
|
16970
17002
|
return correctAnswers.includes(item.choice);
|
|
16971
17003
|
});
|
|
16972
17004
|
};
|
|
16973
|
-
const getCorrectAnswersForDisplay = (config, selections, answerResults) => {
|
|
17005
|
+
const getCorrectAnswersForDisplay = (config, selections, answerResults, renderedIds) => {
|
|
17006
|
+
const selectionMap = createSelectionMap(selections);
|
|
17007
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17008
|
+
return renderedIds.map((id, index2) => {
|
|
17009
|
+
const selection = selectionMap.get(id);
|
|
17010
|
+
const correctAnswersList = config.correctAnswer[id] || [];
|
|
17011
|
+
const firstCorrectAnswer = correctAnswersList[0] || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17012
|
+
const isDropdownCorrect = answerResults[index2];
|
|
17013
|
+
if (correctAnswersList.length === 0) return DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17014
|
+
return isDropdownCorrect && selection ? selection.choice : firstCorrectAnswer;
|
|
17015
|
+
});
|
|
17016
|
+
}
|
|
16974
17017
|
return selections.map((item, index2) => {
|
|
16975
17018
|
const correctAnswersList = config.correctAnswer[item.id] || [];
|
|
16976
|
-
const firstCorrectAnswer = correctAnswersList[0] ||
|
|
16977
|
-
const
|
|
16978
|
-
if (correctAnswersList.length === 0) return
|
|
16979
|
-
return
|
|
17019
|
+
const firstCorrectAnswer = correctAnswersList[0] || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17020
|
+
const isDropdownCorrect = answerResults[index2];
|
|
17021
|
+
if (correctAnswersList.length === 0) return DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17022
|
+
return isDropdownCorrect ? item.choice : firstCorrectAnswer;
|
|
16980
17023
|
});
|
|
16981
17024
|
};
|
|
16982
|
-
const getSessionAnswersForDisplay = (selections) => {
|
|
17025
|
+
const getSessionAnswersForDisplay = (selections, renderedIds) => {
|
|
17026
|
+
const selectionMap = createSelectionMap(selections);
|
|
17027
|
+
if (hasRenderedIds(renderedIds)) {
|
|
17028
|
+
return renderedIds.map((id) => {
|
|
17029
|
+
const selection = selectionMap.get(id);
|
|
17030
|
+
const answer = selection?.choice || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17031
|
+
return answer === DROPDOWN_INTERACTION.PLACEHOLDER || answer === DROPDOWN_INTERACTION.EMPTY_CHOICE ? DROPDOWN_INTERACTION.EMPTY_CHOICE : answer;
|
|
17032
|
+
});
|
|
17033
|
+
}
|
|
16983
17034
|
return selections.map((item) => {
|
|
16984
|
-
const answer = item.choice ||
|
|
16985
|
-
return answer ===
|
|
17035
|
+
const answer = item.choice || DROPDOWN_INTERACTION.EMPTY_CHOICE;
|
|
17036
|
+
return answer === DROPDOWN_INTERACTION.PLACEHOLDER || answer === DROPDOWN_INTERACTION.EMPTY_CHOICE ? DROPDOWN_INTERACTION.EMPTY_CHOICE : answer;
|
|
16986
17037
|
});
|
|
16987
17038
|
};
|
|
16988
|
-
function calculateDropdownFeedback(state2, config, validateFn) {
|
|
17039
|
+
function calculateDropdownFeedback(state2, config, validateFn, renderedDropdownIds) {
|
|
16989
17040
|
if (config.mode === MODES.PREVIEW) {
|
|
16990
17041
|
return {
|
|
16991
17042
|
showFeedback: true,
|
|
16992
17043
|
isAllCorrect: true,
|
|
16993
17044
|
isSkipped: false,
|
|
16994
17045
|
isAllAnswered: true,
|
|
16995
|
-
resultFeedback:
|
|
17046
|
+
resultFeedback: DROPDOWN_INTERACTION.EMPTY_CHOICE,
|
|
16996
17047
|
answerResults: [],
|
|
16997
17048
|
correctAnswers: [],
|
|
16998
17049
|
sessionAnswer: []
|
|
16999
17050
|
};
|
|
17000
17051
|
}
|
|
17001
17052
|
const selections = state2.data.selected;
|
|
17002
|
-
const allAnswered = isAllAnswered$1(selections);
|
|
17053
|
+
const allAnswered = isAllAnswered$1(selections, renderedDropdownIds);
|
|
17003
17054
|
if (config.mode === MODES.SESSION && !config.isFinished) {
|
|
17004
17055
|
return {
|
|
17005
17056
|
showFeedback: false,
|
|
17006
17057
|
isAllCorrect: false,
|
|
17007
17058
|
isSkipped: false,
|
|
17008
17059
|
isAllAnswered: allAnswered,
|
|
17009
|
-
resultFeedback:
|
|
17060
|
+
resultFeedback: DROPDOWN_INTERACTION.EMPTY_CHOICE,
|
|
17010
17061
|
answerResults: [],
|
|
17011
17062
|
correctAnswers: [],
|
|
17012
|
-
sessionAnswer: getSessionAnswersForDisplay(selections)
|
|
17063
|
+
sessionAnswer: getSessionAnswersForDisplay(selections, renderedDropdownIds)
|
|
17013
17064
|
};
|
|
17014
17065
|
}
|
|
17015
|
-
const isSkipped = isAllSkipped(selections);
|
|
17066
|
+
const isSkipped = isAllSkipped(selections, renderedDropdownIds);
|
|
17067
|
+
const answerResults = calculateAnswerResults(config, selections, renderedDropdownIds);
|
|
17016
17068
|
let validationResult = {
|
|
17017
17069
|
isValid: false,
|
|
17018
|
-
|
|
17070
|
+
score: 0,
|
|
17071
|
+
maxScore: hasRenderedIds(renderedDropdownIds) ? renderedDropdownIds.length : Object.keys(config.options).length,
|
|
17072
|
+
feedback: DROPDOWN_INTERACTION.EMPTY_CHOICE
|
|
17019
17073
|
};
|
|
17020
17074
|
if (allAnswered) {
|
|
17075
|
+
const selectionsToValidate = hasRenderedIds(renderedDropdownIds) ? selections.filter((sel) => renderedDropdownIds.includes(sel.id)) : selections;
|
|
17021
17076
|
validationResult = validateFn({
|
|
17022
|
-
answer:
|
|
17077
|
+
answer: selectionsToValidate,
|
|
17023
17078
|
timestamp: state2.lastModified
|
|
17024
17079
|
});
|
|
17080
|
+
if (hasRenderedIds(renderedDropdownIds)) {
|
|
17081
|
+
const renderedCorrectCount = answerResults.filter(Boolean).length;
|
|
17082
|
+
validationResult.score = renderedCorrectCount;
|
|
17083
|
+
validationResult.maxScore = renderedDropdownIds.length;
|
|
17084
|
+
validationResult.isValid = renderedCorrectCount === renderedDropdownIds.length;
|
|
17085
|
+
validationResult.feedback = renderedCorrectCount === renderedDropdownIds.length ? config.feedback.correct : config.feedback.incorrect;
|
|
17086
|
+
}
|
|
17025
17087
|
} else if (config.mode === MODES.SESSION && config.isFinished && !allAnswered) {
|
|
17026
17088
|
validationResult = {
|
|
17027
17089
|
isValid: false,
|
|
17028
17090
|
score: 0,
|
|
17029
|
-
maxScore: Object.keys(config.options).length,
|
|
17091
|
+
maxScore: hasRenderedIds(renderedDropdownIds) ? renderedDropdownIds.length : Object.keys(config.options).length,
|
|
17030
17092
|
feedback: config.feedback.incorrect
|
|
17031
17093
|
};
|
|
17032
17094
|
}
|
|
17033
|
-
const
|
|
17034
|
-
const
|
|
17035
|
-
const
|
|
17036
|
-
const sessionAnswer = getSessionAnswersForDisplay(selections);
|
|
17095
|
+
const areAllDropdownsCorrect = validationResult.isValid;
|
|
17096
|
+
const correctAnswers = getCorrectAnswersForDisplay(config, selections, answerResults, renderedDropdownIds);
|
|
17097
|
+
const sessionAnswer = getSessionAnswersForDisplay(selections, renderedDropdownIds);
|
|
17037
17098
|
let showFeedback = false;
|
|
17038
17099
|
if (config.mode === MODES.INTERACTIVE) {
|
|
17039
17100
|
showFeedback = allAnswered;
|
|
@@ -17043,10 +17104,10 @@ function calculateDropdownFeedback(state2, config, validateFn) {
|
|
|
17043
17104
|
}
|
|
17044
17105
|
return {
|
|
17045
17106
|
showFeedback,
|
|
17046
|
-
isAllCorrect,
|
|
17107
|
+
isAllCorrect: areAllDropdownsCorrect,
|
|
17047
17108
|
isSkipped,
|
|
17048
17109
|
isAllAnswered: allAnswered,
|
|
17049
|
-
resultFeedback: validationResult.feedback ||
|
|
17110
|
+
resultFeedback: validationResult.feedback || DROPDOWN_INTERACTION.EMPTY_CHOICE,
|
|
17050
17111
|
answerResults,
|
|
17051
17112
|
correctAnswers,
|
|
17052
17113
|
sessionAnswer
|
|
@@ -17076,20 +17137,21 @@ function useDropdownPosition(config) {
|
|
|
17076
17137
|
};
|
|
17077
17138
|
}
|
|
17078
17139
|
var root_1$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-10"></div>`);
|
|
17079
|
-
var root_2 = /* @__PURE__ */ from_html(`<
|
|
17080
|
-
var
|
|
17081
|
-
var root_6 = /* @__PURE__ */ from_html(`<span class="text-
|
|
17082
|
-
var root_7 = /* @__PURE__ */ from_html(`<span class="
|
|
17083
|
-
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">
|
|
17084
|
-
var
|
|
17085
|
-
var
|
|
17086
|
-
var
|
|
17087
|
-
var
|
|
17088
|
-
var
|
|
17089
|
-
var
|
|
17140
|
+
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>`);
|
|
17141
|
+
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>`);
|
|
17142
|
+
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>`);
|
|
17143
|
+
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>`);
|
|
17144
|
+
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>`);
|
|
17145
|
+
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>`);
|
|
17146
|
+
var root_12 = /* @__PURE__ */ from_html(`<span class="flex items-center text-green-900" aria-hidden="true"><!></span>`);
|
|
17147
|
+
var root_14 = /* @__PURE__ */ from_html(`<span class="flex items-center text-red-900" aria-hidden="true"><!></span>`);
|
|
17148
|
+
var root_16 = /* @__PURE__ */ from_html(`<span class="flex items-center text-blue-850" aria-hidden="true"><!></span>`);
|
|
17149
|
+
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>`);
|
|
17150
|
+
var root_10 = /* @__PURE__ */ from_html(`<ul class="dropdown-menu block" role="listbox" tabindex="-1"></ul>`);
|
|
17151
|
+
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>`);
|
|
17090
17152
|
function DropdownContainer($$anchor, $$props) {
|
|
17091
17153
|
push($$props, true);
|
|
17092
|
-
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);
|
|
17154
|
+
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);
|
|
17093
17155
|
const dropdownActions = useDropdownState();
|
|
17094
17156
|
const dropdownPosition = useDropdownPosition();
|
|
17095
17157
|
let initializedOptions = /* @__PURE__ */ user_derived(() => {
|
|
@@ -17110,7 +17172,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17110
17172
|
});
|
|
17111
17173
|
const canInteract = /* @__PURE__ */ user_derived(() => !isDataSaving() && mode() !== MODES.PREVIEW && !(mode() === MODES.SESSION && isFinished()));
|
|
17112
17174
|
const canToggleAccordion = /* @__PURE__ */ user_derived(() => !isDataSaving());
|
|
17113
|
-
const isMissing = /* @__PURE__ */ user_derived(() => mode() === MODES.SESSION && isFinished() && (selected() ===
|
|
17175
|
+
const isMissing = /* @__PURE__ */ user_derived(() => mode() === MODES.SESSION && isFinished() && (selected() === DROPDOWN_INTERACTION.PLACEHOLDER || selected() === ""));
|
|
17114
17176
|
const getOptionIcon = (option) => {
|
|
17115
17177
|
const isCorrectAnswer = correctAnswers().includes(option);
|
|
17116
17178
|
const isSelected = option === get$1(state$1).selected;
|
|
@@ -17170,7 +17232,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17170
17232
|
set(isKeyboardNavigation, false);
|
|
17171
17233
|
set(isFirstNavigation, true);
|
|
17172
17234
|
await tick();
|
|
17173
|
-
if (selected() && selected() !==
|
|
17235
|
+
if (selected() && selected() !== DROPDOWN_INTERACTION.PLACEHOLDER && selected() !== "") {
|
|
17174
17236
|
const currentIndex = get$1(initializedOptions).indexOf(selected());
|
|
17175
17237
|
get$1(state$1).activeIndex = currentIndex >= 0 ? currentIndex : null;
|
|
17176
17238
|
} else {
|
|
@@ -17290,7 +17352,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17290
17352
|
}
|
|
17291
17353
|
resizeTimeout = null;
|
|
17292
17354
|
},
|
|
17293
|
-
|
|
17355
|
+
DROPDOWN_INTERACTION.RESIZE_DEBOUNCE_DELAY
|
|
17294
17356
|
);
|
|
17295
17357
|
};
|
|
17296
17358
|
onMount(() => {
|
|
@@ -17327,24 +17389,35 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17327
17389
|
return classes.join(" ");
|
|
17328
17390
|
});
|
|
17329
17391
|
const ariaLabel = /* @__PURE__ */ user_derived(() => {
|
|
17392
|
+
const cleanSelected = useRemoveRichTextHtmlTags(get$1(state$1).selected);
|
|
17330
17393
|
if (mode() === MODES.PREVIEW) {
|
|
17331
|
-
|
|
17394
|
+
const parts2 = ["Correct answer"];
|
|
17395
|
+
if (showNumbering()) parts2.push(`Item number ${dropdownNumber()}`);
|
|
17396
|
+
parts2.push(cleanSelected);
|
|
17397
|
+
return parts2.filter(Boolean).join(", ");
|
|
17332
17398
|
}
|
|
17333
17399
|
if (mode() === MODES.SESSION && isFinished()) {
|
|
17334
17400
|
const correctness = isCorrect() ? "Correct" : "Incorrect";
|
|
17335
|
-
|
|
17401
|
+
const parts2 = [`Student's answer (${correctness})`];
|
|
17402
|
+
if (showNumbering()) parts2.push(`Item number ${dropdownNumber()}`);
|
|
17403
|
+
parts2.push(cleanSelected);
|
|
17404
|
+
return parts2.filter(Boolean).join(", ");
|
|
17336
17405
|
}
|
|
17337
|
-
|
|
17406
|
+
const parts = [];
|
|
17407
|
+
if (showNumbering()) parts.push(`Item number ${dropdownNumber()}`);
|
|
17408
|
+
parts.push(cleanSelected);
|
|
17409
|
+
return parts.filter(Boolean).join(", ");
|
|
17338
17410
|
});
|
|
17339
17411
|
const getOptionAriaLabel = (option, index2) => {
|
|
17340
17412
|
const optionNum = index2 + 1;
|
|
17341
17413
|
const isSelected = option === get$1(state$1).selected;
|
|
17414
|
+
const cleanOption = useRemoveRichTextHtmlTags(option);
|
|
17342
17415
|
if (showFeedback()) {
|
|
17343
17416
|
const isCorrectAnswer = correctAnswers().includes(option);
|
|
17344
17417
|
const correctness = isCorrectAnswer ? "correct" : "incorrect";
|
|
17345
|
-
return isSelected ? `Selected option ${
|
|
17418
|
+
return isSelected ? `Selected option ${cleanOption} ${correctness}` : `Option ${optionNum} ${cleanOption} ${correctness}`;
|
|
17346
17419
|
}
|
|
17347
|
-
return isSelected ? `Selected option ${
|
|
17420
|
+
return isSelected ? `Selected option ${cleanOption}` : `Option ${optionNum} ${cleanOption}`;
|
|
17348
17421
|
};
|
|
17349
17422
|
const isCurrentOption = (index2) => {
|
|
17350
17423
|
return get$1(state$1).isOpen && get$1(isKeyboardNavigation) && get$1(state$1).activeIndex === index2;
|
|
@@ -17430,6 +17503,13 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17430
17503
|
showFeedback($$value);
|
|
17431
17504
|
flushSync();
|
|
17432
17505
|
},
|
|
17506
|
+
get showNumbering() {
|
|
17507
|
+
return showNumbering();
|
|
17508
|
+
},
|
|
17509
|
+
set showNumbering($$value = true) {
|
|
17510
|
+
showNumbering($$value);
|
|
17511
|
+
flushSync();
|
|
17512
|
+
},
|
|
17433
17513
|
get onselect() {
|
|
17434
17514
|
return onselect();
|
|
17435
17515
|
},
|
|
@@ -17466,24 +17546,34 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17466
17546
|
get$1(state$1).isOpen ? handleCloseMenu() : handleOpenMenu();
|
|
17467
17547
|
};
|
|
17468
17548
|
button.__focusout = handleFocusOut;
|
|
17469
|
-
var
|
|
17470
|
-
|
|
17471
|
-
|
|
17472
|
-
|
|
17473
|
-
|
|
17474
|
-
|
|
17549
|
+
var node_1 = child(button);
|
|
17550
|
+
{
|
|
17551
|
+
var consequent_1 = ($$anchor2) => {
|
|
17552
|
+
var div_1 = root_2();
|
|
17553
|
+
var div_2 = child(div_1);
|
|
17554
|
+
var text_1 = child(div_2, true);
|
|
17555
|
+
reset(div_2);
|
|
17556
|
+
reset(div_1);
|
|
17557
|
+
template_effect(() => set_text(text_1, dropdownNumber()));
|
|
17558
|
+
append($$anchor2, div_1);
|
|
17559
|
+
};
|
|
17560
|
+
if_block(node_1, ($$render) => {
|
|
17561
|
+
if (showNumbering()) $$render(consequent_1);
|
|
17562
|
+
});
|
|
17563
|
+
}
|
|
17564
|
+
var div_3 = sibling(node_1, 2);
|
|
17475
17565
|
var span_2 = child(div_3);
|
|
17476
|
-
var
|
|
17477
|
-
html(
|
|
17566
|
+
var node_2 = child(span_2);
|
|
17567
|
+
html(node_2, () => get$1(state$1).selected === "" ? DROPDOWN_INTERACTION.PLACEHOLDER : get$1(state$1).selected);
|
|
17478
17568
|
reset(span_2);
|
|
17479
17569
|
var div_4 = sibling(span_2, 2);
|
|
17480
|
-
var
|
|
17570
|
+
var node_3 = child(div_4);
|
|
17481
17571
|
{
|
|
17482
|
-
var
|
|
17483
|
-
var span_3 =
|
|
17572
|
+
var consequent_2 = ($$anchor2) => {
|
|
17573
|
+
var span_3 = root_3$1();
|
|
17484
17574
|
var span_4 = child(span_3);
|
|
17485
|
-
var
|
|
17486
|
-
SvgLoader(
|
|
17575
|
+
var node_4 = child(span_4);
|
|
17576
|
+
SvgLoader(node_4, { svgName: "successSolid", className: "correct-icon" });
|
|
17487
17577
|
reset(span_4);
|
|
17488
17578
|
next$1(2);
|
|
17489
17579
|
reset(span_3);
|
|
@@ -17491,61 +17581,61 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17491
17581
|
};
|
|
17492
17582
|
var alternate_1 = ($$anchor2) => {
|
|
17493
17583
|
var fragment = comment();
|
|
17494
|
-
var
|
|
17584
|
+
var node_5 = first_child(fragment);
|
|
17495
17585
|
{
|
|
17496
|
-
var
|
|
17586
|
+
var consequent_4 = ($$anchor3) => {
|
|
17497
17587
|
var fragment_1 = comment();
|
|
17498
|
-
var
|
|
17588
|
+
var node_6 = first_child(fragment_1);
|
|
17499
17589
|
{
|
|
17500
|
-
var
|
|
17501
|
-
var span_5 =
|
|
17590
|
+
var consequent_3 = ($$anchor4) => {
|
|
17591
|
+
var span_5 = root_6();
|
|
17502
17592
|
var span_6 = child(span_5);
|
|
17503
|
-
var
|
|
17504
|
-
SvgLoader(
|
|
17593
|
+
var node_7 = child(span_6);
|
|
17594
|
+
SvgLoader(node_7, { svgName: "successSolid", className: "correct-icon" });
|
|
17505
17595
|
reset(span_6);
|
|
17506
17596
|
next$1(2);
|
|
17507
17597
|
reset(span_5);
|
|
17508
17598
|
append($$anchor4, span_5);
|
|
17509
17599
|
};
|
|
17510
17600
|
var alternate = ($$anchor4) => {
|
|
17511
|
-
var span_7 =
|
|
17601
|
+
var span_7 = root_7();
|
|
17512
17602
|
var span_8 = child(span_7);
|
|
17513
|
-
var
|
|
17514
|
-
SvgLoader(
|
|
17603
|
+
var node_8 = child(span_8);
|
|
17604
|
+
SvgLoader(node_8, { svgName: "errorSolid", className: "incorrect-icon" });
|
|
17515
17605
|
reset(span_8);
|
|
17516
17606
|
next$1(2);
|
|
17517
17607
|
reset(span_7);
|
|
17518
17608
|
append($$anchor4, span_7);
|
|
17519
17609
|
};
|
|
17520
|
-
if_block(
|
|
17521
|
-
if (isCorrect()) $$render(
|
|
17610
|
+
if_block(node_6, ($$render) => {
|
|
17611
|
+
if (isCorrect()) $$render(consequent_3);
|
|
17522
17612
|
else $$render(alternate, false);
|
|
17523
17613
|
});
|
|
17524
17614
|
}
|
|
17525
17615
|
append($$anchor3, fragment_1);
|
|
17526
17616
|
};
|
|
17527
17617
|
if_block(
|
|
17528
|
-
|
|
17618
|
+
node_5,
|
|
17529
17619
|
($$render) => {
|
|
17530
|
-
if (showFeedback() && !get$1(isMissing)) $$render(
|
|
17620
|
+
if (showFeedback() && !get$1(isMissing)) $$render(consequent_4);
|
|
17531
17621
|
},
|
|
17532
17622
|
true
|
|
17533
17623
|
);
|
|
17534
17624
|
}
|
|
17535
17625
|
append($$anchor2, fragment);
|
|
17536
17626
|
};
|
|
17537
|
-
if_block(
|
|
17538
|
-
if (mode() === MODES.PREVIEW) $$render(
|
|
17627
|
+
if_block(node_3, ($$render) => {
|
|
17628
|
+
if (mode() === MODES.PREVIEW) $$render(consequent_2);
|
|
17539
17629
|
else $$render(alternate_1, false);
|
|
17540
17630
|
});
|
|
17541
17631
|
}
|
|
17542
|
-
var
|
|
17632
|
+
var node_9 = sibling(node_3, 2);
|
|
17543
17633
|
{
|
|
17544
|
-
var
|
|
17545
|
-
var span_9 =
|
|
17634
|
+
var consequent_5 = ($$anchor2) => {
|
|
17635
|
+
var span_9 = root_8();
|
|
17546
17636
|
var span_10 = child(span_9);
|
|
17547
|
-
var
|
|
17548
|
-
SvgLoader(
|
|
17637
|
+
var node_10 = child(span_10);
|
|
17638
|
+
SvgLoader(node_10, {
|
|
17549
17639
|
svgName: "smallChevronUp",
|
|
17550
17640
|
className: "collapse-icon",
|
|
17551
17641
|
width: 12,
|
|
@@ -17557,10 +17647,10 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17557
17647
|
append($$anchor2, span_9);
|
|
17558
17648
|
};
|
|
17559
17649
|
var alternate_2 = ($$anchor2) => {
|
|
17560
|
-
var span_11 =
|
|
17650
|
+
var span_11 = root_9();
|
|
17561
17651
|
var span_12 = child(span_11);
|
|
17562
|
-
var
|
|
17563
|
-
SvgLoader(
|
|
17652
|
+
var node_11 = child(span_12);
|
|
17653
|
+
SvgLoader(node_11, {
|
|
17564
17654
|
svgName: "smallChevronDown",
|
|
17565
17655
|
className: "expand-icon",
|
|
17566
17656
|
width: 12,
|
|
@@ -17571,8 +17661,8 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17571
17661
|
reset(span_11);
|
|
17572
17662
|
append($$anchor2, span_11);
|
|
17573
17663
|
};
|
|
17574
|
-
if_block(
|
|
17575
|
-
if (get$1(state$1).isOpen) $$render(
|
|
17664
|
+
if_block(node_9, ($$render) => {
|
|
17665
|
+
if (get$1(state$1).isOpen) $$render(consequent_5);
|
|
17576
17666
|
else $$render(alternate_2, false);
|
|
17577
17667
|
});
|
|
17578
17668
|
}
|
|
@@ -17580,16 +17670,16 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17580
17670
|
reset(div_3);
|
|
17581
17671
|
reset(button);
|
|
17582
17672
|
bind_this(button, ($$value) => set(buttonRef, $$value), () => get$1(buttonRef));
|
|
17583
|
-
var
|
|
17673
|
+
var node_12 = sibling(button, 2);
|
|
17584
17674
|
{
|
|
17585
|
-
var
|
|
17586
|
-
var ul =
|
|
17675
|
+
var consequent_9 = ($$anchor2) => {
|
|
17676
|
+
var ul = root_10();
|
|
17587
17677
|
each(ul, 21, () => get$1(initializedOptions), index, ($$anchor3, option, index2) => {
|
|
17588
17678
|
const iconType = /* @__PURE__ */ user_derived(() => getOptionIcon(get$1(option)));
|
|
17589
17679
|
const showCurrentOption = /* @__PURE__ */ user_derived(() => isCurrentOption(index2));
|
|
17590
17680
|
const showHoverOption = /* @__PURE__ */ user_derived(() => shouldShowHover(index2));
|
|
17591
17681
|
const optionAriaLabel = /* @__PURE__ */ user_derived(() => getOptionAriaLabel(get$1(option), index2));
|
|
17592
|
-
var li =
|
|
17682
|
+
var li = root_11();
|
|
17593
17683
|
li.__mousedown = (e2) => e2.preventDefault();
|
|
17594
17684
|
li.__click = async (e2) => {
|
|
17595
17685
|
e2.preventDefault();
|
|
@@ -17597,11 +17687,11 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17597
17687
|
await handleSelect(get$1(option));
|
|
17598
17688
|
};
|
|
17599
17689
|
var div_5 = child(li);
|
|
17600
|
-
var
|
|
17690
|
+
var node_13 = child(div_5);
|
|
17601
17691
|
{
|
|
17602
17692
|
let $0 = /* @__PURE__ */ user_derived(() => get$1(showHoverOption) && get$1(canInteract) ? "hover-option" : "");
|
|
17603
17693
|
let $1 = /* @__PURE__ */ user_derived(() => get$1(showCurrentOption) ? "current-option" : "");
|
|
17604
|
-
CommonStringToHtml(
|
|
17694
|
+
CommonStringToHtml(node_13, {
|
|
17605
17695
|
get htmlString() {
|
|
17606
17696
|
return get$1(option);
|
|
17607
17697
|
},
|
|
@@ -17612,41 +17702,41 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17612
17702
|
}
|
|
17613
17703
|
});
|
|
17614
17704
|
}
|
|
17615
|
-
var
|
|
17705
|
+
var node_14 = sibling(node_13, 2);
|
|
17616
17706
|
{
|
|
17617
|
-
var
|
|
17618
|
-
var span_13 =
|
|
17619
|
-
var
|
|
17620
|
-
SvgLoader(
|
|
17707
|
+
var consequent_6 = ($$anchor4) => {
|
|
17708
|
+
var span_13 = root_12();
|
|
17709
|
+
var node_15 = child(span_13);
|
|
17710
|
+
SvgLoader(node_15, { svgName: "successSolid", className: "correct-icon" });
|
|
17621
17711
|
reset(span_13);
|
|
17622
17712
|
append($$anchor4, span_13);
|
|
17623
17713
|
};
|
|
17624
17714
|
var alternate_4 = ($$anchor4) => {
|
|
17625
17715
|
var fragment_2 = comment();
|
|
17626
|
-
var
|
|
17716
|
+
var node_16 = first_child(fragment_2);
|
|
17627
17717
|
{
|
|
17628
|
-
var
|
|
17629
|
-
var span_14 =
|
|
17630
|
-
var
|
|
17631
|
-
SvgLoader(
|
|
17718
|
+
var consequent_7 = ($$anchor5) => {
|
|
17719
|
+
var span_14 = root_14();
|
|
17720
|
+
var node_17 = child(span_14);
|
|
17721
|
+
SvgLoader(node_17, { svgName: "errorSolid", className: "incorrect-icon" });
|
|
17632
17722
|
reset(span_14);
|
|
17633
17723
|
append($$anchor5, span_14);
|
|
17634
17724
|
};
|
|
17635
17725
|
var alternate_3 = ($$anchor5) => {
|
|
17636
17726
|
var fragment_3 = comment();
|
|
17637
|
-
var
|
|
17727
|
+
var node_18 = first_child(fragment_3);
|
|
17638
17728
|
{
|
|
17639
|
-
var
|
|
17640
|
-
var span_15 =
|
|
17641
|
-
var
|
|
17642
|
-
SvgLoader(
|
|
17729
|
+
var consequent_8 = ($$anchor6) => {
|
|
17730
|
+
var span_15 = root_16();
|
|
17731
|
+
var node_19 = child(span_15);
|
|
17732
|
+
SvgLoader(node_19, { svgName: "successSolid", className: "correct-icon" });
|
|
17643
17733
|
reset(span_15);
|
|
17644
17734
|
append($$anchor6, span_15);
|
|
17645
17735
|
};
|
|
17646
17736
|
if_block(
|
|
17647
|
-
|
|
17737
|
+
node_18,
|
|
17648
17738
|
($$render) => {
|
|
17649
|
-
if (get$1(iconType) === "selected") $$render(
|
|
17739
|
+
if (get$1(iconType) === "selected") $$render(consequent_8);
|
|
17650
17740
|
},
|
|
17651
17741
|
true
|
|
17652
17742
|
);
|
|
@@ -17654,9 +17744,9 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17654
17744
|
append($$anchor5, fragment_3);
|
|
17655
17745
|
};
|
|
17656
17746
|
if_block(
|
|
17657
|
-
|
|
17747
|
+
node_16,
|
|
17658
17748
|
($$render) => {
|
|
17659
|
-
if (get$1(iconType) === "incorrect") $$render(
|
|
17749
|
+
if (get$1(iconType) === "incorrect") $$render(consequent_7);
|
|
17660
17750
|
else $$render(alternate_3, false);
|
|
17661
17751
|
},
|
|
17662
17752
|
true
|
|
@@ -17664,8 +17754,8 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17664
17754
|
}
|
|
17665
17755
|
append($$anchor4, fragment_2);
|
|
17666
17756
|
};
|
|
17667
|
-
if_block(
|
|
17668
|
-
if (get$1(iconType) === "correct") $$render(
|
|
17757
|
+
if_block(node_14, ($$render) => {
|
|
17758
|
+
if (get$1(iconType) === "correct") $$render(consequent_6);
|
|
17669
17759
|
else $$render(alternate_4, false);
|
|
17670
17760
|
});
|
|
17671
17761
|
}
|
|
@@ -17690,8 +17780,8 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17690
17780
|
});
|
|
17691
17781
|
append($$anchor2, ul);
|
|
17692
17782
|
};
|
|
17693
|
-
if_block(
|
|
17694
|
-
if (get$1(state$1).isOpen && get$1(initializedOptions).length > 0) $$render(
|
|
17783
|
+
if_block(node_12, ($$render) => {
|
|
17784
|
+
if (get$1(state$1).isOpen && get$1(initializedOptions).length > 0) $$render(consequent_9);
|
|
17695
17785
|
});
|
|
17696
17786
|
}
|
|
17697
17787
|
reset(span);
|
|
@@ -17705,8 +17795,7 @@ function DropdownContainer($$anchor, $$props) {
|
|
|
17705
17795
|
set_attribute(button, "aria-labelledby", labelId);
|
|
17706
17796
|
set_attribute(button, "aria-controls", listId);
|
|
17707
17797
|
set_attribute(button, "aria-activedescendant", get$1(state$1).activeIndex !== null ? `${listId}-option-${get$1(state$1).activeIndex}` : void 0);
|
|
17708
|
-
|
|
17709
|
-
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"}`);
|
|
17798
|
+
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"}`);
|
|
17710
17799
|
});
|
|
17711
17800
|
append($$anchor, span);
|
|
17712
17801
|
return pop($$exports);
|
|
@@ -17726,6 +17815,7 @@ create_custom_element(
|
|
|
17726
17815
|
isDataSaving: {},
|
|
17727
17816
|
mode: {},
|
|
17728
17817
|
showFeedback: {},
|
|
17818
|
+
showNumbering: {},
|
|
17729
17819
|
onselect: {},
|
|
17730
17820
|
viewportBuffer: {}
|
|
17731
17821
|
},
|
|
@@ -17745,14 +17835,31 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17745
17835
|
const pTags = config().text.prompt.match(pTagRegex);
|
|
17746
17836
|
return pTags && pTags.length > 0 ? pTags : [config().text.prompt];
|
|
17747
17837
|
});
|
|
17838
|
+
const renderedDropdownIds = /* @__PURE__ */ user_derived(() => {
|
|
17839
|
+
const ids = [];
|
|
17840
|
+
get$1(promptLines).forEach((line) => {
|
|
17841
|
+
const parts = dropdownParser.parseText(line);
|
|
17842
|
+
parts.forEach((part) => {
|
|
17843
|
+
if (part.type === "dropdown" && part.id) {
|
|
17844
|
+
ids.push(part.id);
|
|
17845
|
+
}
|
|
17846
|
+
});
|
|
17847
|
+
});
|
|
17848
|
+
return ids;
|
|
17849
|
+
});
|
|
17850
|
+
const shouldShowNumbering = /* @__PURE__ */ user_derived(() => get$1(renderedDropdownIds).length > 1);
|
|
17748
17851
|
const previewSelections = /* @__PURE__ */ user_derived(() => config().mode === MODES.PREVIEW ? getDropdownPreviewSelections(config()) : []);
|
|
17749
17852
|
const shuffledOptionsCache = /* @__PURE__ */ new Map();
|
|
17750
17853
|
const getShuffledOptions = (dropdownId, options) => {
|
|
17751
17854
|
if (shuffledOptionsCache.has(dropdownId)) {
|
|
17752
17855
|
return shuffledOptionsCache.get(dropdownId);
|
|
17753
17856
|
}
|
|
17857
|
+
if (config().mode === MODES.PREVIEW) {
|
|
17858
|
+
shuffledOptionsCache.set(dropdownId, [...options]);
|
|
17859
|
+
return [...options];
|
|
17860
|
+
}
|
|
17754
17861
|
const selectedValue = getSelectedValue(dropdownId);
|
|
17755
|
-
if (
|
|
17862
|
+
if (selectedValue !== DROPDOWN_INTERACTION.PLACEHOLDER && selectedValue !== "") {
|
|
17756
17863
|
shuffledOptionsCache.set(dropdownId, [...options]);
|
|
17757
17864
|
return [...options];
|
|
17758
17865
|
}
|
|
@@ -17772,11 +17879,11 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17772
17879
|
const getSelectedValue = (dropdownId) => {
|
|
17773
17880
|
if (config().mode === MODES.PREVIEW) {
|
|
17774
17881
|
const previewItem = get$1(previewSelections).find((item) => item.id === dropdownId);
|
|
17775
|
-
return previewItem?.choice || config().correctAnswer[dropdownId]?.[0] ||
|
|
17882
|
+
return previewItem?.choice || config().correctAnswer[dropdownId]?.[0] || DROPDOWN_INTERACTION.PLACEHOLDER;
|
|
17776
17883
|
}
|
|
17777
17884
|
const selection = state2().data.selected.find((item) => item.id === dropdownId);
|
|
17778
17885
|
const value = selection?.choice || "";
|
|
17779
|
-
return value === "" ?
|
|
17886
|
+
return value === "" ? DROPDOWN_INTERACTION.PLACEHOLDER : value;
|
|
17780
17887
|
};
|
|
17781
17888
|
const getCorrectAnswers = (dropdownId) => {
|
|
17782
17889
|
return config().correctAnswer[dropdownId] || [];
|
|
@@ -17788,7 +17895,7 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17788
17895
|
};
|
|
17789
17896
|
const isDropdownCorrect = (dropdownId) => {
|
|
17790
17897
|
const selectedValue = getSelectedValue(dropdownId);
|
|
17791
|
-
if (selectedValue ===
|
|
17898
|
+
if (selectedValue === DROPDOWN_INTERACTION.PLACEHOLDER || selectedValue === "") return false;
|
|
17792
17899
|
const correctAnswers = getCorrectAnswers(dropdownId);
|
|
17793
17900
|
return correctAnswers.length > 0 && correctAnswers.includes(selectedValue);
|
|
17794
17901
|
};
|
|
@@ -17881,6 +17988,9 @@ function DropdownInteractionContent($$anchor, $$props) {
|
|
|
17881
17988
|
get showFeedback() {
|
|
17882
17989
|
return showFeedback();
|
|
17883
17990
|
},
|
|
17991
|
+
get showNumbering() {
|
|
17992
|
+
return get$1(shouldShowNumbering);
|
|
17993
|
+
},
|
|
17884
17994
|
onselect: (value) => handleSelect(get$1(part).id, value)
|
|
17885
17995
|
});
|
|
17886
17996
|
}
|
|
@@ -18026,11 +18136,26 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18026
18136
|
throw new Error("Failed to initialize Dropdown state");
|
|
18027
18137
|
}
|
|
18028
18138
|
let interactionState = /* @__PURE__ */ state(proxy(initialState));
|
|
18029
|
-
|
|
18139
|
+
const dropdownParser = useDropdown(config().text.prompt, config().options);
|
|
18140
|
+
const pTagRegex = /<p[^>]*>.*?<\/p>/gi;
|
|
18141
|
+
const renderedDropdownIds = /* @__PURE__ */ user_derived(() => {
|
|
18142
|
+
const pTags = config().text.prompt.match(pTagRegex);
|
|
18143
|
+
const promptLines = pTags && pTags.length > 0 ? pTags : [config().text.prompt];
|
|
18144
|
+
const ids = [];
|
|
18145
|
+
promptLines.forEach((line) => {
|
|
18146
|
+
const parts = dropdownParser.parseText(line);
|
|
18147
|
+
parts.forEach((part) => {
|
|
18148
|
+
if (part.type === "dropdown" && part.id) {
|
|
18149
|
+
ids.push(part.id);
|
|
18150
|
+
}
|
|
18151
|
+
});
|
|
18152
|
+
});
|
|
18153
|
+
return ids;
|
|
18154
|
+
});
|
|
18155
|
+
let feedbackState = /* @__PURE__ */ user_derived(() => calculateDropdownFeedback(get$1(interactionState), config(), api().validate || (() => ({ isValid: false })), get$1(renderedDropdownIds)));
|
|
18030
18156
|
let isInteractiveMode2 = /* @__PURE__ */ user_derived(() => config().mode === MODES.INTERACTIVE);
|
|
18031
18157
|
let isSessionNotFinished = /* @__PURE__ */ user_derived(() => config().mode === MODES.SESSION && !config().isFinished);
|
|
18032
18158
|
let saveTimer = null;
|
|
18033
|
-
const SAVE_DELAY = 500;
|
|
18034
18159
|
const handleSelection = async (event2) => {
|
|
18035
18160
|
try {
|
|
18036
18161
|
const { id, value } = event2.detail;
|
|
@@ -18042,6 +18167,9 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18042
18167
|
return;
|
|
18043
18168
|
}
|
|
18044
18169
|
set(interactionState, result.newState, true);
|
|
18170
|
+
if (get$1(isInteractiveMode2)) {
|
|
18171
|
+
handleInteractiveModeInteraction();
|
|
18172
|
+
}
|
|
18045
18173
|
api().onStateChange?.(get$1(interactionState));
|
|
18046
18174
|
onstateChange()?.(new CustomEvent("stateChange", {
|
|
18047
18175
|
detail: {
|
|
@@ -18049,13 +18177,14 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18049
18177
|
serialized: api().serialize?.(get$1(interactionState))
|
|
18050
18178
|
}
|
|
18051
18179
|
}));
|
|
18052
|
-
if (get$1(isInteractiveMode2)) {
|
|
18053
|
-
handleInteractiveModeInteraction();
|
|
18054
|
-
}
|
|
18055
18180
|
if (get$1(isSessionNotFinished)) {
|
|
18056
18181
|
if (saveTimer) {
|
|
18057
18182
|
clearTimeout(saveTimer);
|
|
18058
18183
|
}
|
|
18184
|
+
const hasValidSelection = get$1(interactionState).data.selected.some((item) => item.choice !== "" && item.choice !== DROPDOWN_INTERACTION.PLACEHOLDER);
|
|
18185
|
+
if (!hasValidSelection) {
|
|
18186
|
+
return;
|
|
18187
|
+
}
|
|
18059
18188
|
saveTimer = setTimeout(
|
|
18060
18189
|
async () => {
|
|
18061
18190
|
try {
|
|
@@ -18068,18 +18197,25 @@ function DropdownComponent($$anchor, $$props) {
|
|
|
18068
18197
|
saveTimer = null;
|
|
18069
18198
|
}
|
|
18070
18199
|
},
|
|
18071
|
-
|
|
18200
|
+
DROPDOWN_INTERACTION.SAVE_DEBOUNCE_DELAY
|
|
18072
18201
|
);
|
|
18073
18202
|
}
|
|
18074
18203
|
} catch (error) {
|
|
18075
18204
|
}
|
|
18076
18205
|
};
|
|
18077
18206
|
const handleInteractiveModeInteraction = () => {
|
|
18078
|
-
|
|
18079
|
-
|
|
18080
|
-
|
|
18081
|
-
|
|
18082
|
-
|
|
18207
|
+
const allRenderedAnswered = get$1(renderedDropdownIds).every((id) => {
|
|
18208
|
+
const selection = get$1(interactionState).data.selected.find((item) => item.id === id);
|
|
18209
|
+
return selection && selection.choice !== "" && selection.choice !== DROPDOWN_INTERACTION.PLACEHOLDER;
|
|
18210
|
+
});
|
|
18211
|
+
set(
|
|
18212
|
+
interactionState,
|
|
18213
|
+
interactionUtils.updateState(get$1(interactionState), {
|
|
18214
|
+
interactiveHasAnswered: allRenderedAnswered,
|
|
18215
|
+
showFeedback: allRenderedAnswered
|
|
18216
|
+
}),
|
|
18217
|
+
true
|
|
18218
|
+
);
|
|
18083
18219
|
};
|
|
18084
18220
|
onMount(() => {
|
|
18085
18221
|
return () => {
|
|
@@ -18453,7 +18589,7 @@ registerInteraction("dropdown", createDropdownInteraction, DropdownComponent);
|
|
|
18453
18589
|
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);
|
|
18454
18590
|
const $$css = {
|
|
18455
18591
|
hash: "svelte-1dpid58",
|
|
18456
|
-
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{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} .hover-focus-ring:hover, .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;transition-duration:50ms} .focus-ring-by-dropdown, .hover-focus-ring:hover, .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} .focus-ring-by-dropdown{--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-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))} .divider{border-bottom-width:1px;--tw-border-opacity:1;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-violet-100:hover{--tw-bg-opacity:1;background-color:rgb(235,235,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\\/itemContainer:hover .group-hover\\/itemContainer\\:bg-violet-100{--tw-bg-opacity:1;background-color:rgb(235,235,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))} .group\\/itemContainer:hover .md\\:group-hover\\/itemContainer\\:bg-white{--tw-bg-opacity:1;background-color:rgb(255,255,255,var(--tw-bg-opacity,1))}}@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))}}'
|
|
18592
|
+
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))}}'
|
|
18457
18593
|
};
|
|
18458
18594
|
function InteractionBuilder($$anchor, $$props) {
|
|
18459
18595
|
push($$props, true);
|