@pie-element/mc-populated-blank 0.3.3-next.20261007184841 → 0.3.3
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/README.md +1 -1
- package/dist/browser/{McPopulatedBlank-C0cMqim4.js → McPopulatedBlank-CJcV9lfT.js} +870 -842
- package/dist/browser/{McPopulatedBlank-C0cMqim4.js.map → McPopulatedBlank-CJcV9lfT.js.map} +1 -1
- package/dist/browser/author/index.js +8 -8
- package/dist/browser/{client-Dfdyltec.js → client-BOmFEbpb.js} +92 -89
- package/dist/browser/{client-Dfdyltec.js.map → client-BOmFEbpb.js.map} +1 -1
- package/dist/browser/delivery/index.js +1 -1
- package/dist/browser/print/index.js +47 -47
- package/dist/delivery/index.js +66 -13
- package/dist/delivery/index.js.map +1 -1
- package/dist/index.iife.js +31 -15
- package/dist/print/index.js +66 -13
- package/dist/print/index.js.map +1 -1
- package/module/print.js +690 -659
- package/module/print.js.map +1 -1
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { A as e, C as t, D as n, E as r, F as i,
|
|
2
|
-
import { n as S, r as C, t as w } from "../McPopulatedBlank-
|
|
1
|
+
import { A as e, C as t, D as n, E as r, F as i, I as a, M as o, O as s, P as c, S as l, T as u, _ as d, d as f, g as p, h as m, j as h, m as g, n as _, t as v, u as y, v as b, w as x } from "../client-BOmFEbpb.js";
|
|
2
|
+
import { n as S, r as C, t as w } from "../McPopulatedBlank-CJcV9lfT.js";
|
|
3
3
|
import { n as T, o as E } from "../controller-Dv_mGlnz.js";
|
|
4
4
|
//#region src/print/preparePrint.ts
|
|
5
5
|
async function D(e, t) {
|
|
@@ -24,82 +24,82 @@ async function D(e, t) {
|
|
|
24
24
|
}
|
|
25
25
|
//#endregion
|
|
26
26
|
//#region src/print/Print.svelte
|
|
27
|
-
var O =
|
|
27
|
+
var O = b("<div class=\"mpb-print-block mpb-print-teacher-instructions svelte-1fx5wwa\"></div>"), k = b("<div><strong> </strong> </div>"), A = b("<div class=\"mpb-print-block mpb-print-audio svelte-1fx5wwa\"><!> <!></div>"), j = b("<div class=\"mpb-print\"><!> <!> <!></div>"), M = {
|
|
28
28
|
hash: "svelte-1fx5wwa",
|
|
29
29
|
code: "\n /* Inset to line up with the delivery root's padding. */.mpb-print-block.svelte-1fx5wwa {padding:0 1rem;margin:1rem 0;}.mpb-print-teacher-instructions.svelte-1fx5wwa p {margin:0.5em 0;}.mpb-print-audio.svelte-1fx5wwa {font-size:0.875rem;line-height:1.25rem;}"
|
|
30
30
|
};
|
|
31
|
-
function N(
|
|
32
|
-
|
|
33
|
-
let T =
|
|
34
|
-
|
|
35
|
-
let
|
|
36
|
-
if (!
|
|
37
|
-
|
|
31
|
+
function N(v, b) {
|
|
32
|
+
i(b, !0), y(v, M);
|
|
33
|
+
let T = _(b, "model", 7, null), E = _(b, "options", 7, null), N = h(null);
|
|
34
|
+
x(() => {
|
|
35
|
+
let t = T(), n = E()?.role;
|
|
36
|
+
if (!t) {
|
|
37
|
+
e(N, null);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
let
|
|
41
|
-
return D(
|
|
42
|
-
|
|
40
|
+
let r = !0;
|
|
41
|
+
return D(t, n).then((t) => {
|
|
42
|
+
r && e(N, t, !0);
|
|
43
43
|
}), () => {
|
|
44
|
-
|
|
44
|
+
r = !1;
|
|
45
45
|
};
|
|
46
46
|
});
|
|
47
|
-
let P = (e) => S(e,
|
|
47
|
+
let P = (e) => S(e, l(N)?.model.language || void 0);
|
|
48
48
|
var F = {
|
|
49
49
|
get model() {
|
|
50
50
|
return T();
|
|
51
51
|
},
|
|
52
52
|
set model(e = null) {
|
|
53
|
-
T(e),
|
|
53
|
+
T(e), o();
|
|
54
54
|
},
|
|
55
55
|
get options() {
|
|
56
56
|
return E();
|
|
57
57
|
},
|
|
58
58
|
set options(e = null) {
|
|
59
|
-
E(e),
|
|
59
|
+
E(e), o();
|
|
60
60
|
}
|
|
61
|
-
}, I = d(), L =
|
|
62
|
-
var
|
|
61
|
+
}, I = d(), L = r(I), R = (e) => {
|
|
62
|
+
var r = j(), i = u(r), o = (e) => {
|
|
63
63
|
var t = O();
|
|
64
|
-
|
|
64
|
+
f(t, () => C(l(N).teacherInstructions), !0), a(t), p(e, t);
|
|
65
65
|
};
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
g(i, (e) => {
|
|
67
|
+
l(N).teacherInstructions && e(o);
|
|
68
68
|
});
|
|
69
|
-
var c =
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}, [() => P("printAudio")]),
|
|
69
|
+
var c = s(i, 2), d = (e) => {
|
|
70
|
+
var r = A(), i = u(r), o = (e) => {
|
|
71
|
+
var r = k(), i = u(r), o = n(i, !0), c = s(i);
|
|
72
|
+
a(r), t((e) => {
|
|
73
|
+
m(o, e), m(c, ` ${l(N).audioUrl ?? ""}`);
|
|
74
|
+
}, [() => P("printAudio")]), p(e, r);
|
|
75
75
|
};
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
g(i, (e) => {
|
|
77
|
+
l(N).audioUrl && e(o);
|
|
78
78
|
});
|
|
79
|
-
var c =
|
|
80
|
-
var
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}, [() => P("printTranscript")]),
|
|
79
|
+
var c = s(i, 2), d = (e) => {
|
|
80
|
+
var r = k(), i = u(r), o = n(i, !0), c = s(i);
|
|
81
|
+
a(r), t((e) => {
|
|
82
|
+
m(o, e), m(c, ` ${l(N).audioTranscript ?? ""}`);
|
|
83
|
+
}, [() => P("printTranscript")]), p(e, r);
|
|
84
84
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}),
|
|
85
|
+
g(c, (e) => {
|
|
86
|
+
l(N).audioTranscript && e(d);
|
|
87
|
+
}), a(r), p(e, r);
|
|
88
88
|
};
|
|
89
|
-
|
|
90
|
-
(
|
|
91
|
-
}), w(
|
|
89
|
+
g(c, (e) => {
|
|
90
|
+
(l(N).audioUrl || l(N).audioTranscript) && e(d);
|
|
91
|
+
}), w(s(c, 2), {
|
|
92
92
|
get model() {
|
|
93
|
-
return
|
|
93
|
+
return l(N).model;
|
|
94
94
|
},
|
|
95
95
|
get session() {
|
|
96
|
-
return
|
|
96
|
+
return l(N).session;
|
|
97
97
|
}
|
|
98
|
-
}),
|
|
98
|
+
}), a(r), p(e, r);
|
|
99
99
|
};
|
|
100
|
-
return
|
|
101
|
-
|
|
102
|
-
}),
|
|
100
|
+
return g(L, (e) => {
|
|
101
|
+
l(N) && e(R);
|
|
102
|
+
}), p(v, I), c(F);
|
|
103
103
|
}
|
|
104
104
|
v(N, {
|
|
105
105
|
model: { type: "Object" },
|
package/dist/delivery/index.js
CHANGED
|
@@ -3926,6 +3926,13 @@ function if_block(node, fn, elseif = false) {
|
|
|
3926
3926
|
/** @import { EachItem, EachOutroGroup, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
|
|
3927
3927
|
/** @import { Batch } from '../../reactivity/batch.js'; */
|
|
3928
3928
|
/**
|
|
3929
|
+
* @param {any} _
|
|
3930
|
+
* @param {number} i
|
|
3931
|
+
*/
|
|
3932
|
+
function index(_, i) {
|
|
3933
|
+
return i;
|
|
3934
|
+
}
|
|
3935
|
+
/**
|
|
3929
3936
|
* Pause multiple effects simultaneously, and coordinate their
|
|
3930
3937
|
* subsequent destruction. Used in each blocks
|
|
3931
3938
|
* @param {EachState} state
|
|
@@ -10758,7 +10765,7 @@ var root$4 = /* @__PURE__ */ from_html(`<audio class="sr-only pie-audio-player s
|
|
|
10758
10765
|
var root_1$3 = /* @__PURE__ */ from_html(`<button class="autoplay-enable pie-audio-autoplay-enable svelte-ypdwb3" type="button"> </button>`);
|
|
10759
10766
|
var root_2$3 = /* @__PURE__ */ from_html(`<audio controls="" class="audio-controls pie-audio-player svelte-ypdwb3" preload="metadata"><track kind="captions"/></audio> <!>`, 1);
|
|
10760
10767
|
var root_3$3 = /* @__PURE__ */ from_html(`<p class="audio-error pie-audio-error svelte-ypdwb3" role="alert"> </p>`);
|
|
10761
|
-
var root_4$
|
|
10768
|
+
var root_4$3 = /* @__PURE__ */ from_html(`<div class="audio-container pie-audio-container svelte-ypdwb3"><!></div>`);
|
|
10762
10769
|
var $$css$4 = {
|
|
10763
10770
|
hash: "svelte-ypdwb3",
|
|
10764
10771
|
code: ".audio-container.svelte-ypdwb3 {margin-bottom:1rem;}.audio-controls.svelte-ypdwb3 {display:block;width:100%;max-width:28rem;}.autoplay-enable.svelte-ypdwb3 {margin-top:0.5rem;padding:0;border:0;background:transparent;font:inherit;font-size:0.875rem;line-height:calc(1.25 / 0.875);color:inherit;text-decoration-line:underline;}.audio-error.svelte-ypdwb3 {margin:0;font-size:0.875rem;line-height:calc(1.25 / 0.875);color:var(--pie-incorrect-icon, #c10007);}.listen-button.svelte-ypdwb3 {width:var(--mpb-listen-button-size, 128px);height:var(--mpb-listen-button-size, 128px);border:0;padding:0;\n /*\n * Fixed light plates, at rest and on hover: the artwork's outlines and baked \"Listen\" label are\n * dark literals an <img> cannot theme, down to 1.2:1 on a dark scheme's page.\n */background-color:#ffffff;cursor:pointer;z-index:1;}.listen-button.svelte-ypdwb3:hover {background-color:#e2f1fe;}.listen-feature-icon.svelte-ypdwb3 {width:var(--mpb-listen-button-size, 128px);height:var(--mpb-listen-button-size, 128px);object-fit:contain;display:none;}.listen-feature-icon.listen-active.svelte-ypdwb3 {display:block;}.sr-only.svelte-ypdwb3 {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}"
|
|
@@ -10886,7 +10893,7 @@ function AudioPlayer($$anchor, $$props) {
|
|
|
10886
10893
|
var fragment = comment();
|
|
10887
10894
|
var node = first_child(fragment);
|
|
10888
10895
|
var consequent_4 = ($$anchor) => {
|
|
10889
|
-
var div = root_4$
|
|
10896
|
+
var div = root_4$3();
|
|
10890
10897
|
var node_1 = child(div);
|
|
10891
10898
|
var consequent = ($$anchor) => {
|
|
10892
10899
|
var fragment_1 = root$4();
|
|
@@ -10966,15 +10973,19 @@ create_custom_element(AudioPlayer, {
|
|
|
10966
10973
|
var root$3 = /* @__PURE__ */ from_html(`<img class="cloze-marker-image pie-blank-image svelte-d9l5tb" style="max-width:var(--mpb-choice-image-max-width, 9.375rem);max-height:var(--mpb-choice-image-max-height, 9.375rem);"/>`);
|
|
10967
10974
|
var root_1$2 = /* @__PURE__ */ from_html(`<span class="cloze-marker-value pie-blank-value svelte-d9l5tb"></span>`);
|
|
10968
10975
|
var root_2$2 = /* @__PURE__ */ from_html(`<span class="cloze-marker-empty svelte-d9l5tb"><span aria-hidden="true"> </span> <span class="sr-only svelte-d9l5tb"> </span></span>`);
|
|
10969
|
-
var root_3$2 = /* @__PURE__ */ from_html(`<
|
|
10976
|
+
var root_3$2 = /* @__PURE__ */ from_html(`<img alt="" class="cloze-marker-image pie-blank-image svelte-d9l5tb" style="max-width:var(--mpb-choice-image-max-width, 9.375rem);max-height:var(--mpb-choice-image-max-height, 9.375rem);"/>`);
|
|
10977
|
+
var root_4$2 = /* @__PURE__ */ from_html(`<span class="cloze-marker-sizers pie-blank-sizers svelte-d9l5tb" aria-hidden="true"></span>`);
|
|
10978
|
+
var root_5$2 = /* @__PURE__ */ from_html(`<span role="status" aria-live="polite" aria-atomic="true"><!> <!></span>`);
|
|
10970
10979
|
var $$css$3 = {
|
|
10971
10980
|
hash: "svelte-d9l5tb",
|
|
10972
|
-
code: "\n /* The underline width comes from the inline style (layoutLimits); the colour\n follows the text. */.cloze-marker.svelte-d9l5tb {display:inline-
|
|
10981
|
+
code: "\n /* The underline width comes from the inline style (layoutLimits); the colour\n follows the text. The answer and a hidden copy of every choice share one grid\n cell, so the blank holds the largest choice's box from the start and nothing\n around it moves on selection; the copies keep the empty placeholder's 4ch\n minimum too. The answer comes first: it gives the blank its baseline. The\n minmax(0, 1fr) tracks keep a fixed-size blank at its size, so an answer\n taller than it overflows evenly, as in a flex box (sel-r1-base.css). */.cloze-marker.svelte-d9l5tb {display:inline-grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:minmax(0, 1fr);align-items:center;justify-items:center;text-align:center;vertical-align:baseline;padding-inline:0.5rem;border-bottom:2px solid currentColor;}.cloze-marker.svelte-d9l5tb:focus-within {outline:2px solid var(--mpb-focus-ring, #1565c0);outline-offset:2px;}\n\n /* :global, because a host may wrap an answer image in its own element. */.cloze-marker.svelte-d9l5tb > *,\n .cloze-marker-sizers.svelte-d9l5tb > * {grid-area:1 / 1;}.cloze-marker-sizers.svelte-d9l5tb {display:grid;grid-template-columns:minmax(0, 1fr);justify-items:center;align-self:stretch;justify-self:stretch;min-width:4ch;visibility:hidden;pointer-events:none;}.cloze-marker-standalone.svelte-d9l5tb {width:var(--mpb-blank-standalone-width, 7rem);}.cloze-marker-image.svelte-d9l5tb {object-fit:contain;}.cloze-marker-empty.svelte-d9l5tb {display:inline-block;min-width:4ch;}.cloze-marker-value.svelte-d9l5tb {width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;}.cloze-marker-value.svelte-d9l5tb p {margin:0;}\n\n /* Same 150x150 content-element constraint as ChoiceRow.svelte's .choice-html\n img — the selected choice's raw labelHtml can carry an embedded <img> here\n too, regardless of customType. See CONTOOL-3159. */.cloze-marker-value.svelte-d9l5tb img {width:150px;height:150px;}.sr-only.svelte-d9l5tb {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}"
|
|
10973
10982
|
};
|
|
10974
10983
|
function ClozeMarker($$anchor, $$props) {
|
|
10975
10984
|
push($$props, true);
|
|
10976
10985
|
append_styles$1($$anchor, $$css$3);
|
|
10977
|
-
let choiceMode = prop($$props, "choiceMode", 7, "text"), displayChoice = prop($$props, "displayChoice", 7, void 0), displayChoiceLabelHtml = prop($$props, "displayChoiceLabelHtml", 7, ""), isStandalone = prop($$props, "isStandalone", 7, false), blankWidth = prop($$props, "blankWidth", 7), blankBorderWidth = prop($$props, "blankBorderWidth", 7), ariaLabel = prop($$props, "ariaLabel", 7), language = prop($$props, "language", 7);
|
|
10986
|
+
let choiceMode = prop($$props, "choiceMode", 7, "text"), choices = prop($$props, "choices", 23, () => []), displayChoice = prop($$props, "displayChoice", 7, void 0), displayChoiceLabelHtml = prop($$props, "displayChoiceLabelHtml", 7, ""), isStandalone = prop($$props, "isStandalone", 7, false), blankWidth = prop($$props, "blankWidth", 7), blankBorderWidth = prop($$props, "blankBorderWidth", 7), ariaLabel = prop($$props, "ariaLabel", 7), language = prop($$props, "language", 7);
|
|
10987
|
+
const isImage = (c) => choiceMode() === "image" && !!c?.imageUrl;
|
|
10988
|
+
const sizers = /* @__PURE__ */ user_derived(() => choices().filter((c) => isImage(c) || !!c?.labelHtml));
|
|
10978
10989
|
var $$exports = {
|
|
10979
10990
|
get choiceMode() {
|
|
10980
10991
|
return choiceMode();
|
|
@@ -10983,6 +10994,13 @@ function ClozeMarker($$anchor, $$props) {
|
|
|
10983
10994
|
choiceMode($$value);
|
|
10984
10995
|
flushSync();
|
|
10985
10996
|
},
|
|
10997
|
+
get choices() {
|
|
10998
|
+
return choices();
|
|
10999
|
+
},
|
|
11000
|
+
set choices($$value = []) {
|
|
11001
|
+
choices($$value);
|
|
11002
|
+
flushSync();
|
|
11003
|
+
},
|
|
10986
11004
|
get displayChoice() {
|
|
10987
11005
|
return displayChoice();
|
|
10988
11006
|
},
|
|
@@ -11033,16 +11051,17 @@ function ClozeMarker($$anchor, $$props) {
|
|
|
11033
11051
|
flushSync();
|
|
11034
11052
|
}
|
|
11035
11053
|
};
|
|
11036
|
-
var span =
|
|
11054
|
+
var span = root_5$2();
|
|
11037
11055
|
var node = child(span);
|
|
11038
11056
|
var consequent = ($$anchor) => {
|
|
11039
11057
|
var img = root$3();
|
|
11040
11058
|
template_effect(($0) => {
|
|
11041
|
-
set_attribute(img, "src", displayChoice()
|
|
11059
|
+
set_attribute(img, "src", displayChoice()?.imageUrl);
|
|
11042
11060
|
set_attribute(img, "alt", $0);
|
|
11043
|
-
}, [() => displayChoice()
|
|
11061
|
+
}, [() => displayChoice()?.imageAlt || t$1("selectedAnswerImage", language())]);
|
|
11044
11062
|
append($$anchor, img);
|
|
11045
11063
|
};
|
|
11064
|
+
var d = /* @__PURE__ */ user_derived(() => isImage(displayChoice()));
|
|
11046
11065
|
var consequent_1 = ($$anchor) => {
|
|
11047
11066
|
var span_1 = root_1$2();
|
|
11048
11067
|
html$2(span_1, () => ie(displayChoiceLabelHtml()), true);
|
|
@@ -11057,10 +11076,40 @@ function ClozeMarker($$anchor, $$props) {
|
|
|
11057
11076
|
append($$anchor, span_2);
|
|
11058
11077
|
};
|
|
11059
11078
|
if_block(node, ($$render) => {
|
|
11060
|
-
if (
|
|
11079
|
+
if (get$1(d)) $$render(consequent);
|
|
11061
11080
|
else if (displayChoiceLabelHtml()) $$render(consequent_1, 1);
|
|
11062
11081
|
else $$render(alternate, -1);
|
|
11063
11082
|
});
|
|
11083
|
+
var node_1 = sibling(node, 2);
|
|
11084
|
+
var consequent_3 = ($$anchor) => {
|
|
11085
|
+
var span_4 = root_4$2();
|
|
11086
|
+
each(span_4, 21, () => get$1(sizers), index, ($$anchor, c) => {
|
|
11087
|
+
var fragment = comment();
|
|
11088
|
+
var node_2 = first_child(fragment);
|
|
11089
|
+
var consequent_2 = ($$anchor) => {
|
|
11090
|
+
var img_1 = root_3$2();
|
|
11091
|
+
template_effect(() => set_attribute(img_1, "src", get$1(c).imageUrl));
|
|
11092
|
+
append($$anchor, img_1);
|
|
11093
|
+
};
|
|
11094
|
+
var d_1 = /* @__PURE__ */ user_derived(() => isImage(get$1(c)));
|
|
11095
|
+
var alternate_1 = ($$anchor) => {
|
|
11096
|
+
var span_5 = root_1$2();
|
|
11097
|
+
html$2(span_5, () => ie(get$1(c).labelHtml || ""), true);
|
|
11098
|
+
reset(span_5);
|
|
11099
|
+
append($$anchor, span_5);
|
|
11100
|
+
};
|
|
11101
|
+
if_block(node_2, ($$render) => {
|
|
11102
|
+
if (get$1(d_1)) $$render(consequent_2);
|
|
11103
|
+
else $$render(alternate_1, -1);
|
|
11104
|
+
});
|
|
11105
|
+
append($$anchor, fragment);
|
|
11106
|
+
});
|
|
11107
|
+
reset(span_4);
|
|
11108
|
+
append($$anchor, span_4);
|
|
11109
|
+
};
|
|
11110
|
+
if_block(node_1, ($$render) => {
|
|
11111
|
+
if (get$1(sizers).length) $$render(consequent_3);
|
|
11112
|
+
});
|
|
11064
11113
|
reset(span);
|
|
11065
11114
|
template_effect(() => {
|
|
11066
11115
|
set_class(span, 1, `cloze-marker pie-blank-slot ${isStandalone() ? "cloze-marker-standalone pie-blank-slot-standalone" : ""}`, "svelte-d9l5tb");
|
|
@@ -11072,6 +11121,7 @@ function ClozeMarker($$anchor, $$props) {
|
|
|
11072
11121
|
}
|
|
11073
11122
|
create_custom_element(ClozeMarker, {
|
|
11074
11123
|
choiceMode: {},
|
|
11124
|
+
choices: {},
|
|
11075
11125
|
displayChoice: {},
|
|
11076
11126
|
displayChoiceLabelHtml: {},
|
|
11077
11127
|
isStandalone: {},
|
|
@@ -11082,7 +11132,7 @@ create_custom_element(ClozeMarker, {
|
|
|
11082
11132
|
}, [], [], { mode: "open" });
|
|
11083
11133
|
//#endregion
|
|
11084
11134
|
//#region src/delivery/ChoiceRow.svelte
|
|
11085
|
-
var root$2 = /* @__PURE__ */ from_html(`<img class="choice-image pie-choice-image svelte-8xu1pt" style="max-width:var(--mpb-choice-image-max-width, 9.375rem);max-height:var(--mpb-choice-image-max-height, 9.375rem);"/>`);
|
|
11135
|
+
var root$2 = /* @__PURE__ */ from_html(`<img class="choice-image pie-choice-image svelte-8xu1pt" style="max-width:min(100%, var(--mpb-choice-image-max-width, 9.375rem));max-height:var(--mpb-choice-image-max-height, 9.375rem);"/>`);
|
|
11086
11136
|
var root_1$1 = /* @__PURE__ */ from_html(`<span class="choice-html pie-choice-label svelte-8xu1pt"></span>`);
|
|
11087
11137
|
var root_2$1 = /* @__PURE__ */ from_html(`<label class="choice-tile pie-choice-tile svelte-8xu1pt"><span class="choice-tile-content pie-choice-tile-content svelte-8xu1pt"><!></span> <input type="radio" class="choice-radio-bottom pie-choice-radio pie-choice-radio-bottom svelte-8xu1pt"/></label>`);
|
|
11088
11138
|
var root_3$1 = /* @__PURE__ */ from_html(`<img class="choice-image pie-choice-image svelte-8xu1pt" style="max-height:var(--mpb-choice-image-max-height, 5rem);"/>`);
|
|
@@ -11091,7 +11141,7 @@ var root_5$1 = /* @__PURE__ */ from_html(`<span aria-hidden="true"> </span>`);
|
|
|
11091
11141
|
var root_6$1 = /* @__PURE__ */ from_html(`<div style="gap:var(--mpb-choice-row-gap, 0.5rem);"><!> <!></div>`);
|
|
11092
11142
|
var $$css$2 = {
|
|
11093
11143
|
hash: "svelte-8xu1pt",
|
|
11094
|
-
code: ".choice-row.svelte-8xu1pt {display:flex;align-items:flex-start;}.choice-row-horizontal.svelte-8xu1pt {flex-direction:column;align-items:center;width:min(var(--mpb-choice-width-px, 170px), var(--mpb-choice-width-vw, 30vw));min-height:var(--mpb-choice-tile-min-height, 11rem);gap:0;}.choice-tile.svelte-8xu1pt {display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;min-height:var(--mpb-choice-tile-min-height, 11rem);padding:0.8rem 0.65rem 0.5rem;border-radius:8px;background:transparent;transition:background-color 120ms ease-in-out;cursor:pointer;text-align:center;}.choice-tile-content.svelte-8xu1pt {width:100%;display:
|
|
11144
|
+
code: ".choice-row.svelte-8xu1pt {display:flex;align-items:flex-start;}.choice-row-horizontal.svelte-8xu1pt {flex-direction:column;align-items:center;width:min(var(--mpb-choice-width-px, 170px), var(--mpb-choice-width-vw, 30vw));min-height:var(--mpb-choice-tile-min-height, 11rem);gap:0;}.choice-tile.svelte-8xu1pt {display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:100%;min-height:var(--mpb-choice-tile-min-height, 11rem);padding:0.8rem 0.65rem 0.5rem;border-radius:8px;background:transparent;transition:background-color 120ms ease-in-out;cursor:pointer;text-align:center;}\n\n /* A grid track gives the content's child the tile's width, where a flex box sized it to\n its content. A host's image wrapper (pie-players' .pie-image-scroll) then fills the\n tile, so an SVG with a viewBox and no width or height takes the tile's width instead\n of collapsing to 0×0; and an image capped at 100% never overflows the wrapper into a\n scroll bar. The image's auto margins centre it and keep a smaller one at its own size. */.choice-tile-content.svelte-8xu1pt {width:100%;display:grid;grid-template-columns:minmax(0, 1fr);align-items:center;justify-items:center;min-height:var(--mpb-choice-content-min-height, 7.5rem);}.choice-tile-content.svelte-8xu1pt > * {justify-self:stretch;max-width:100%;}.choice-image.svelte-8xu1pt {display:block;margin-inline:auto;object-fit:contain;}.choice-label-wrap.svelte-8xu1pt {flex:1 1 0%;cursor:pointer;}\n\n /* Every background painted here carries its own text colour: a variant that\n pins a light surface (the CQT sheets' #fcfcd3) would otherwise sit under\n the scheme's text colour, which is near-white in a dark scheme. With neither\n the hook nor --pie-text defined the declaration is invalid at computed-value\n time and the colour inherits. */.choice-row-horizontal.svelte-8xu1pt:hover .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-hover-bg, var(--pie-background-dark, #ecedf1));color:var(--mpb-choice-hover-color, var(--pie-text));}.pie-choice-horizontal.svelte-8xu1pt:not(.is-selected):not(:hover) .pie-choice-tile:where(.svelte-8xu1pt) {background:transparent;}.choice-row-horizontal.is-selected.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-selected-bg, var(--pie-secondary-background, rgba(241, 241, 241, 1)));color:var(--mpb-choice-selected-color, var(--pie-text));}.choice-row-horizontal.is-selected.svelte-8xu1pt:hover .choice-tile:where(.svelte-8xu1pt) {background:var(--mpb-choice-selected-bg, var(--pie-secondary-background, rgba(241, 241, 241, 1)));color:var(--mpb-choice-selected-color, var(--pie-text));}.pie-choice.svelte-8xu1pt:not(.pie-choice-horizontal):hover .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-background-dark, #ecedf1);color:var(--pie-text);}.pie-choice.svelte-8xu1pt:not(.pie-choice-horizontal):not(.is-selected):not(:hover) .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:transparent;}.pie-choice:not(.pie-choice-horizontal).is-selected.svelte-8xu1pt .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-secondary-background, rgba(241, 241, 241, 1));color:var(--pie-text);border-radius:6px;}.pie-choice:not(.pie-choice-horizontal).is-selected.svelte-8xu1pt:hover .pie-choice-label-wrap:where(.svelte-8xu1pt) {background:var(--pie-secondary-background, rgba(241, 241, 241, 1));color:var(--pie-text);}.pie-choice.choice-correct.svelte-8xu1pt {border-left:3px solid var(--pie-correct-tertiary, #0ea449);}.pie-choice.choice-incorrect.svelte-8xu1pt {border-left:3px solid var(--pie-incorrect-icon, #bf0d00);}.pie-choice-horizontal.choice-correct.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--pie-correct-secondary, #e8f5e9);color:var(--pie-text);}.pie-choice-horizontal.choice-incorrect.svelte-8xu1pt .choice-tile:where(.svelte-8xu1pt) {background:var(--pie-incorrect-secondary, #ffebee);color:var(--pie-text);}.pie-choice-feedback-badge.svelte-8xu1pt {margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:9999px;font-size:0.72rem;line-height:1;font-weight:700;color:var(--pie-background, #ffffff);}.pie-choice-feedback-correct.svelte-8xu1pt {background:var(--pie-correct-icon, #087d38);}.pie-choice-feedback-incorrect.svelte-8xu1pt {background:var(--pie-incorrect-icon, #bf0d00);}.choice-row-horizontal.svelte-8xu1pt p {margin:0;text-align:center;}.choice-html.svelte-8xu1pt p {margin:0;}.choice-html.svelte-8xu1pt {width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center;}\n\n /* Choices carrying raw <img> markup in labelHtml (rather than the dedicated\n imageUrl/imageAlt fields) render unconstrained at their authored size\n otherwise — 3rd-party/CQT-sourced content is typically authored well above\n the platform's 150x150 content-element spec. Applies regardless of\n customType, unlike the r1-CQT-specific cqt-css overlays. See CONTOOL-3159. */.choice-html.svelte-8xu1pt img {width:150px;height:150px;}\n\n /* Only the top margin is spaced; the browser's own radio side margins would\n otherwise offset the control from its label (the demo app's preflight zeroed them).\n 24px is the WCAG 2.5.8 minimum target size; the native radio scales its circle to the box. */.choice-radio-bottom.svelte-8xu1pt {margin:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem) 0 0;padding:var(--mpb-choice-radio-padding, 0px);width:24px;height:24px;}.choice-radio-inline.svelte-8xu1pt {margin:var(--mpb-horizontal-choice-radio-top-margin, 0.5rem) 0 0;width:24px;height:24px;flex-shrink:0;}"
|
|
11095
11145
|
};
|
|
11096
11146
|
function ChoiceRow($$anchor, $$props) {
|
|
11097
11147
|
push($$props, true);
|
|
@@ -11707,7 +11757,7 @@ function computeLegendText(params) {
|
|
|
11707
11757
|
}
|
|
11708
11758
|
//#endregion
|
|
11709
11759
|
//#region src/delivery/cqt-css/sel-r1-base.css?raw
|
|
11710
|
-
var sel_r1_base_default = "/* Shared base styles for all sel_r1-*_plusggg variants.\n Applied via the data-mpb-variant=\"sel-r1-base\" style element.\n Every selector starts at .mc-populated-blank-root carrying any r1 variant class,\n so it cannot match outside this element. :where() keeps the attribute match out\n of the specificity, so each per-variant file still overrides a base rule with\n the selector shapes it already uses. Comments cite the CQT template's r1.scss. */\n\n/* r1.scss: Starial font throughout.\n font-size 14px mirrors the CQT host root, which sets the\n base for all em-scaled rules in r1.scss (e.g. .rli-r1-content-element { 1.9em })\n and any em-based author content (e.g. <span style=\"font-size:1.8em\">). Without\n this base PIE inherits the 16px browser default and renders ~14% larger than\n the CQT reference. See CONTOOL-2567. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) {\n font-family: Starial, Arial, sans-serif;\n font-size: 14px;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size: 1.9em } wraps all stem tokens.\n Makes inline font-size spans in the template multiply on top of this base. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n font-size: 1.9em;\n}\n\n/* r1.scss: .rli-r1-stem { display:flex; flex-direction:row; justify-content:center }\n r1.scss: .rli-r1-content-element { margin-right:2px; margin-left:2px } — 4px total gap.\n Apply the per-element margin to both classless tokens and the blank slot\n (which is the cloze equivalent) so the gap stacks with whitespace text-nodes\n between flex items the same way the CQT does. Earlier this used column-gap:4px,\n but flex column-gap accumulates with the cloze margin and the implicit\n whitespace, producing a wider gap than the CQT shows. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n display: flex;\n flex-direction: row;\n align-items: baseline;\n justify-content: center;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line p {\n margin: 0;\n display: flex;\n flex-direction: row;\n align-items: baseline;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px; min-height:150px;\n line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token in\n the CQT, giving each a 150px box with a 2px per-side margin. Applies to the token\n layouts, the same set that gets the feature button and the wide underline, so\n trailing tokens in audio_blank_only (gplusggg) match the blank's height the way\n the CQT does. Stems on other layouts are prose, which the box would stack a word or\n two per line. Spans inside the blank are the answer's own markup, not stem tokens.\n The margin outranks token_sequence's span + span gap, so tokens sit 4px apart,\n as in the CQT (CONTOOL-2569). */\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(\n .layout-audio_blank_only,\n .layout-stimulus_image_blank,\n .layout-token_sequence\n )\n )\n .pie-template-line\n span:not([class]):not(.pie-blank-slot *) {\n min-width: 150px;\n max-width: 150px;\n min-height: 150px;\n line-height: 89px;\n margin-left: 2px;\n margin-right: 2px;\n}\n\n/* r1.scss: the content-element's wrapping flex line packs to the bottom of its box\n (align-content:flex-end), so a token's 89px line sits on the box's bottom edge\n whatever its font size; .rli-r1-stem { align-items:start } top-aligns the row.\n Every item in it has a fixed height (150px tokens and images, the 160px cloze),\n so the underline lands 4px under the tokens' bottom edge. */\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line\n span:not([class]):not(.pie-blank-slot *) {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n align-content: flex-end;\n justify-content: center;\n margin-bottom: 8px;\n}\n\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line,\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line\n p {\n align-items: flex-start;\n}\n\n/* .pie-template-line's align-items:baseline (above) computes a shared baseline\n across all its flex items. .pie-blank-slot has no baseline-participating child\n of its own (.cloze-marker centers internally, align-items:center) — so it\n contributes a *synthesized* baseline back to the row, based on its own box\n geometry. That geometry swings wildly depending on the blank's content: an\n empty placeholder vs. a selected choice's image (up to 150x150). Every time a\n choice is selected the row's shared baseline is recomputed from that new\n geometry, visibly shifting sibling tokens like a leading/trailing stem word.\n align-self removes the blank from that shared computation entirely — its\n siblings' position no longer depends on what's currently displayed inside it.\n See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n align-self: flex-end;\n}\n\n/* r1.scss's .rli-r1-cloze and question.css's .rli-s3-cloze have no inline padding, so the\n 150px content-element spans the blank. ClozeMarker.svelte's 0.5rem would narrow an\n answer image to 134px or 144px. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n padding-inline: 0;\n}\n\n/* r1.scss: .rli-r1-cloze { height:160px; padding-bottom:4px; border-bottom:6px solid }\n — the blank in the token layouts is the CQT's cloze box, top-aligned with the stem\n tokens (align-self overrides the flex-end above). A fixed height rather than a\n min-height keeps the empty and the filled blank at one geometry: the 150px image\n or content box below fits its 150px content area exactly, and the underline\n never moves on selection (CONTOOL-3159). .pie-blank-slot is border-box, as the CQT's\n cloze is. McPopulatedBlank.svelte gives audio_blank_only the padding and the\n 6px underline; token_sequence takes both here. The 2px per-side margin matches\n the CQT's .rli-r1-content-element rhythm (CONTOOL-2569). */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n .layout-audio_blank_only,\n .layout-token_sequence\n )\n .pie-template-line\n .pie-blank-slot {\n align-self: flex-start;\n height: 160px;\n padding-bottom: 4px;\n margin-left: 2px;\n margin-right: 2px;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-token_sequence\n .pie-template-line\n .pie-blank-slot {\n min-width: 150px;\n max-width: 150px;\n line-height: 89px;\n}\n\n/* stimulus_image_blank keeps the 160px min-height blank slot McPopulatedBlank.svelte\n sets, with the same 2px per-side margin. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n .pie-template-line\n .pie-blank-slot {\n margin-left: 2px;\n margin-right: 2px;\n}\n\n/* cloze.js: the cloze holds an .rli-r1-content-element around the answer's markup,\n so the answer's line packs to the bottom of a 150px box the way a stem token's\n does. The box's 8px bottom margin, centred in the cloze's 150px content area,\n lifts it 4px, as it does in the CQT. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n .layout-audio_blank_only,\n .layout-token_sequence\n) .pie-blank-value {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n align-content: flex-end;\n justify-content: center;\n min-height: 150px;\n line-height: 89px;\n margin-bottom: 8px;\n}\n\n/* An imageUrl answer is .pie-blank-image directly in the blank, with no\n .pie-blank-value around it; the same margin puts it where a labelHtml image sits. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n .layout-audio_blank_only,\n .layout-token_sequence\n) .pie-blank-image {\n margin-bottom: 8px;\n}\n\n/* Classless answer spans in the s3 blank keep line-height:normal, which outranks\n sel-r1-s3.css's 1.1. See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n .pie-blank-value\n span:not([class]) {\n line-height: normal;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size:1.9em; line-height:89px } on distractors */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label {\n font-size: 1.9em;\n line-height: 89px;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px;\n min-height:150px } wraps every image (stem token + distractor) and forces\n the content box to 150×150. The CQT host also rewrites <img width/height>\n to 150 server-side. PIE keeps the authored attributes (typically 108×108),\n so without an explicit override images render ~28% smaller than in the CQT.\n See CONTOOL-2570. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line img,\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label img {\n width: 150px;\n height: 150px;\n}\n\n/* r1.scss: .rli-r1-stem and .rli-r1-distractors are flex-direction:column and become\n rows only in its @media (min-width:850px), so below it every stem token, the cloze\n and each distractor stack at the left edge (.rli-r1-stem { align-items:start }).\n Each token's 8px bottom margin spaces the stack. */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line,\n .mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line\n p {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choices.choices-horizontal {\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n --mpb-choice-width-vw: 100vw;\n }\n}\n";
|
|
11760
|
+
var sel_r1_base_default = "/* Shared base styles for all sel_r1-*_plusggg variants.\n Applied via the data-mpb-variant=\"sel-r1-base\" style element.\n Every selector starts at .mc-populated-blank-root carrying any r1 variant class,\n so it cannot match outside this element. :where() keeps the attribute match out\n of the specificity, so each per-variant file still overrides a base rule with\n the selector shapes it already uses. Comments cite the CQT template's r1.scss. */\n\n/* r1.scss: Starial font throughout.\n font-size 14px mirrors the CQT host root, which sets the\n base for all em-scaled rules in r1.scss (e.g. .rli-r1-content-element { 1.9em })\n and any em-based author content (e.g. <span style=\"font-size:1.8em\">). Without\n this base PIE inherits the 16px browser default and renders ~14% larger than\n the CQT reference. See CONTOOL-2567. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) {\n font-family: Starial, Arial, sans-serif;\n font-size: 14px;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size: 1.9em } wraps all stem tokens.\n Makes inline font-size spans in the template multiply on top of this base. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n font-size: 1.9em;\n}\n\n/* r1.scss: .rli-r1-stem { display:flex; flex-direction:row; justify-content:center }\n r1.scss: .rli-r1-content-element { margin-right:2px; margin-left:2px } — 4px total gap.\n Apply the per-element margin to both classless tokens and the blank slot\n (which is the cloze equivalent) so the gap stacks with whitespace text-nodes\n between flex items the same way the CQT does. Earlier this used column-gap:4px,\n but flex column-gap accumulates with the cloze margin and the implicit\n whitespace, producing a wider gap than the CQT shows. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line {\n display: flex;\n flex-direction: row;\n align-items: baseline;\n justify-content: center;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line p {\n margin: 0;\n display: flex;\n flex-direction: row;\n align-items: baseline;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px; min-height:150px;\n line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token in\n the CQT, giving each a 150px box with a 2px per-side margin. Applies to the token\n layouts, the same set that gets the feature button and the wide underline, so\n trailing tokens in audio_blank_only (gplusggg) match the blank's height the way\n the CQT does. Stems on other layouts are prose, which the box would stack a word or\n two per line. Spans inside the blank are the answer's own markup, not stem tokens.\n The margin outranks token_sequence's span + span gap, so tokens sit 4px apart,\n as in the CQT (CONTOOL-2569). */\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(\n .layout-audio_blank_only,\n .layout-stimulus_image_blank,\n .layout-token_sequence\n )\n )\n .pie-template-line\n span:not([class]):not(.pie-blank-slot *) {\n min-width: 150px;\n max-width: 150px;\n min-height: 150px;\n line-height: 89px;\n margin-left: 2px;\n margin-right: 2px;\n}\n\n/* r1.scss: the content-element's wrapping flex line packs to the bottom of its box\n (align-content:flex-end), so a token's 89px line sits on the box's bottom edge\n whatever its font size; .rli-r1-stem { align-items:start } top-aligns the row.\n Every item in it has a fixed height (150px tokens and images, the 160px cloze),\n so the underline lands 4px under the tokens' bottom edge. */\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line\n span:not([class]):not(.pie-blank-slot *) {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n align-content: flex-end;\n justify-content: center;\n margin-bottom: 8px;\n}\n\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line,\n.mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line\n p {\n align-items: flex-start;\n}\n\n/* .pie-template-line's align-items:baseline (above) computes a shared baseline\n across all its flex items. .pie-blank-slot has no baseline-participating child\n of its own (.cloze-marker centers internally, align-items:center) — so it\n contributes a *synthesized* baseline back to the row, based on its own box\n geometry. That geometry swings wildly depending on the blank's content: an\n empty placeholder vs. a selected choice's image (up to 150x150). Every time a\n choice is selected the row's shared baseline is recomputed from that new\n geometry, visibly shifting sibling tokens like a leading/trailing stem word.\n align-self removes the blank from that shared computation entirely — its\n siblings' position no longer depends on what's currently displayed inside it.\n See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n align-self: flex-end;\n}\n\n/* r1.scss's .rli-r1-cloze and question.css's .rli-s3-cloze have no inline padding, so the\n 150px content-element spans the blank. ClozeMarker.svelte's 0.5rem would narrow an\n answer image to 134px or 144px. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line .pie-blank-slot {\n padding-inline: 0;\n}\n\n/* r1.scss: .rli-r1-cloze { height:160px; padding-bottom:4px; border-bottom:6px solid }\n — the blank in the token layouts is the CQT's cloze box, top-aligned with the stem\n tokens (align-self overrides the flex-end above). A fixed height rather than a\n min-height keeps the empty and the filled blank at one geometry: the 150px image\n or content box below fits its 150px content area exactly, and the underline\n never moves on selection (CONTOOL-3159). .pie-blank-slot is border-box, as the CQT's\n cloze is. McPopulatedBlank.svelte gives audio_blank_only the padding and the\n 6px underline; token_sequence takes both here. The 2px per-side margin matches\n the CQT's .rli-r1-content-element rhythm (CONTOOL-2569). */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n .layout-audio_blank_only,\n .layout-token_sequence\n )\n .pie-template-line\n .pie-blank-slot {\n align-self: flex-start;\n height: 160px;\n padding-bottom: 4px;\n margin-left: 2px;\n margin-right: 2px;\n}\n\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-token_sequence\n .pie-template-line\n .pie-blank-slot {\n min-width: 150px;\n max-width: 150px;\n line-height: 89px;\n}\n\n/* stimulus_image_blank keeps the 160px min-height blank slot McPopulatedBlank.svelte\n sets, with the same 2px per-side margin. See CONTOOL-2569. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n .pie-template-line\n .pie-blank-slot {\n margin-left: 2px;\n margin-right: 2px;\n}\n\n/* cloze.js: the cloze holds an .rli-r1-content-element around the answer's markup,\n so the answer's line packs to the bottom of a 150px box the way a stem token's\n does. The box's 8px bottom margin, centred in the cloze's 150px content area,\n lifts it 4px, as it does in the CQT. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n .layout-audio_blank_only,\n .layout-token_sequence\n) .pie-blank-value {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n align-content: flex-end;\n justify-content: center;\n min-height: 150px;\n line-height: 89px;\n margin-bottom: 8px;\n}\n\n/* An imageUrl answer is .pie-blank-image directly in the blank, with no\n .pie-blank-value around it; the same margin puts it where a labelHtml image sits. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]):is(\n .layout-audio_blank_only,\n .layout-token_sequence\n) .pie-blank-image {\n margin-bottom: 8px;\n}\n\n/* Classless answer spans in the s3 blank keep line-height:normal, which outranks\n sel-r1-s3.css's 1.1. See CONTOOL-3159. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]).layout-stimulus_image_blank\n .pie-blank-value\n span:not([class]) {\n line-height: normal;\n}\n\n/* r1.scss: .rli-r1-content-element { font-size:1.9em; line-height:89px } on distractors */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label {\n font-size: 1.9em;\n line-height: 89px;\n}\n\n/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px;\n min-height:150px } wraps every image (stem token + distractor) and forces\n the content box to 150×150. The CQT host also rewrites <img width/height>\n to 150 server-side. PIE keeps the authored attributes (typically 108×108),\n so without an explicit override images render ~28% smaller than in the CQT.\n See CONTOOL-2570. An imageUrl distractor in its tile takes the same box: the\n blank, in the template line, already shows it at 150×150 once picked. */\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-template-line img,\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-label img,\n.mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choice-tile .pie-choice-image {\n width: 150px;\n height: 150px;\n}\n\n/* r1.scss: .rli-r1-stem and .rli-r1-distractors are flex-direction:column and become\n rows only in its @media (min-width:850px), so below it every stem token, the cloze\n and each distractor stack at the left edge (.rli-r1-stem { align-items:start }).\n Each token's 8px bottom margin spaces the stack. */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line,\n .mc-populated-blank-root:where(\n [class*=\"variant-sel-r1-\"]:is(.layout-audio_blank_only, .layout-token_sequence)\n )\n .pie-template-line\n p {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .mc-populated-blank-root:where([class*=\"variant-sel-r1-\"]) .pie-choices.choices-horizontal {\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n --mpb-choice-width-vw: 100vw;\n }\n}\n";
|
|
11711
11761
|
//#endregion
|
|
11712
11762
|
//#region src/delivery/variant-css-map.ts
|
|
11713
11763
|
var VARIANT_BY_CUSTOM_TYPE = {
|
|
@@ -11749,7 +11799,7 @@ var VARIANT_BY_CUSTOM_TYPE = {
|
|
|
11749
11799
|
"sel_r1-s3_plusggg": {
|
|
11750
11800
|
variantId: "sel-r1-s3",
|
|
11751
11801
|
variantClass: "variant-sel-r1-s3",
|
|
11752
|
-
cssText: "/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-s3 {\n max-width: 860px;\n margin-inline: auto;\n --mpb-listen-button-size: 128px;\n --mpb-choice-width-px: 155px;\n --mpb-choice-tile-min-height: 11.25rem;\n --mpb-choice-content-min-height: 9.375rem;\n --mpb-choice-group-gap: 0.35rem;\n --mpb-choice-row-gap: 0.35rem;\n --mpb-horizontal-choice-radio-top-margin: 0.25rem;\n --mpb-stimulus-min-column: 240px;\n --mpb-stimulus-grid-column-gap: 1.1rem;\n --mpb-stimulus-choices-margin-top: 0.85rem;\n --mpb-audio-blank-template-margin-bottom: 0.9rem;\n --mpb-blank-wide-width: 6.8rem;\n}\n\n/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or\n cloze content-element, so they inherit 400 from the host root. The earlier\n font-weight:500 override caused PIE to render visibly heavier than the CQT for\n the same author content. See CONTOOL-2571. */\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {\n font-size: 1.9em;\n line-height: 89px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {\n line-height: 1.1;\n white-space: nowrap;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(220px, auto) auto auto;\n grid-template-areas:\n \"sentence template audio\"\n \"choices choices choices\";\n justify-content: center;\n /* question.css: .rli-s3-cloze-container { justify-content:end } bottom-anchors\n the cloze against the shared sentence/audio row instead of top-aligning it —\n matches every item sitting on the same visual baseline. See CONTOOL-3159. */\n align-items: end;\n}\n\n/* The component's header row, restated because these areas replace its own. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header header header\"\n \"sentence template audio\"\n \"choices choices choices\";\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n grid-area: template;\n justify-self: center;\n}\n\n/* ClozeMarker.svelte's shared .cloze-marker rule vertically *centers* its content\n (align-items:center). question.css's .rli-s3-cloze-container uses\n justify-content:end instead, bottom-anchoring the answer text against the\n underline. Centering leaves it floating well above both the underline and the\n sentence image's own (bottom-anchored) baseline. The blank's own box height\n (160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank\n rule) is left as-is — it already matches the CQT reference (~161px)\n closely; only the internal alignment was wrong. See CONTOOL-3159. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n align-items: flex-end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {\n justify-self: end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {\n justify-self: start;\n align-self: start;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: center;\n width: fit-content;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {\n max-width: 100%;\n height: auto;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {\n background: #e2e2e2;\n color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,\n.mc-populated-blank-root.variant-sel-r1-s3\n .pie-choice-horizontal.is-selected:hover\n .pie-choice-tile {\n background: #fcfcd3;\n color: #000;\n}\n\n/* question.css: below 850px .rli-s3-container is a one-column grid in DOM order\n (listen button, sentence, cloze, distractors), each at the left edge. The cloze\n container stretches, so the underline spans the column, with the 150px\n content-element at its start (.rli-s3-cloze { justify-content:flex-start }). */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(0, 1fr);\n grid-template-areas:\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n align-items: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header\"\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line,\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n justify-self: stretch;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n flex-grow: 1;\n justify-
|
|
11802
|
+
cssText: "/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-s3 {\n max-width: 860px;\n margin-inline: auto;\n --mpb-listen-button-size: 128px;\n --mpb-choice-width-px: 155px;\n --mpb-choice-tile-min-height: 11.25rem;\n --mpb-choice-content-min-height: 9.375rem;\n --mpb-choice-group-gap: 0.35rem;\n --mpb-choice-row-gap: 0.35rem;\n --mpb-horizontal-choice-radio-top-margin: 0.25rem;\n --mpb-stimulus-min-column: 240px;\n --mpb-stimulus-grid-column-gap: 1.1rem;\n --mpb-stimulus-choices-margin-top: 0.85rem;\n --mpb-audio-blank-template-margin-bottom: 0.9rem;\n --mpb-blank-wide-width: 6.8rem;\n}\n\n/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or\n cloze content-element, so they inherit 400 from the host root. The earlier\n font-weight:500 override caused PIE to render visibly heavier than the CQT for\n the same author content. See CONTOOL-2571. */\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {\n font-size: 1.9em;\n line-height: 89px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {\n line-height: 1.1;\n white-space: nowrap;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(220px, auto) auto auto;\n grid-template-areas:\n \"sentence template audio\"\n \"choices choices choices\";\n justify-content: center;\n /* question.css: .rli-s3-cloze-container { justify-content:end } bottom-anchors\n the cloze against the shared sentence/audio row instead of top-aligning it —\n matches every item sitting on the same visual baseline. See CONTOOL-3159. */\n align-items: end;\n}\n\n/* The component's header row, restated because these areas replace its own. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header header header\"\n \"sentence template audio\"\n \"choices choices choices\";\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n grid-area: template;\n justify-self: center;\n}\n\n/* ClozeMarker.svelte's shared .cloze-marker rule vertically *centers* its content\n (align-items:center). question.css's .rli-s3-cloze-container uses\n justify-content:end instead, bottom-anchoring the answer text against the\n underline. Centering leaves it floating well above both the underline and the\n sentence image's own (bottom-anchored) baseline. The blank's own box height\n (160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank\n rule) is left as-is — it already matches the CQT reference (~161px)\n closely; only the internal alignment was wrong. See CONTOOL-3159. */\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n align-items: flex-end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {\n justify-self: end;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {\n justify-self: start;\n align-self: start;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: center;\n width: fit-content;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {\n max-width: 100%;\n height: auto;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {\n background: #e2e2e2;\n color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,\n.mc-populated-blank-root.variant-sel-r1-s3\n .pie-choice-horizontal.is-selected:hover\n .pie-choice-tile {\n background: #fcfcd3;\n color: #000;\n}\n\n/* question.css: below 850px .rli-s3-container is a one-column grid in DOM order\n (listen button, sentence, cloze, distractors), each at the left edge. The cloze\n container stretches, so the underline spans the column, with the 150px\n content-element at its start (.rli-s3-cloze { justify-content:flex-start }). */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {\n grid-template-columns: minmax(0, 1fr);\n grid-template-areas:\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n align-items: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank.has-header {\n grid-template-areas:\n \"header\"\n \"transcript\"\n \"audio\"\n \"sentence\"\n \"template\"\n \"choices\";\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line,\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {\n justify-self: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {\n justify-self: stretch;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {\n flex-grow: 1;\n justify-items: start;\n }\n\n .mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-value {\n width: 150px;\n }\n}\n"
|
|
11753
11803
|
}
|
|
11754
11804
|
};
|
|
11755
11805
|
var normalizeCustomType = (value) => {
|
|
@@ -12176,6 +12226,9 @@ function McPopulatedBlank($$anchor, $$props) {
|
|
|
12176
12226
|
get choiceMode() {
|
|
12177
12227
|
return get$1(choiceMode);
|
|
12178
12228
|
},
|
|
12229
|
+
get choices() {
|
|
12230
|
+
return get$1(choices);
|
|
12231
|
+
},
|
|
12179
12232
|
get displayChoice() {
|
|
12180
12233
|
return get$1(displayChoice);
|
|
12181
12234
|
},
|