@pie-element/mc-populated-blank 0.3.0-next.28 → 0.3.0-next.29
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 +10 -13
- package/dist/browser/{McPopulatedBlank-yvmy2-rw.js → McPopulatedBlank-LqV-pdXv.js} +10 -18
- package/dist/browser/{McPopulatedBlank-yvmy2-rw.js.map → McPopulatedBlank-LqV-pdXv.js.map} +1 -1
- package/dist/browser/delivery/index.js +1 -1
- package/dist/browser/layoutLimits-C2D60jW0.js.map +1 -1
- package/dist/browser/print/index.js +1 -1
- package/dist/controller/index.js.map +1 -1
- package/dist/delivery/index.js +9 -17
- package/dist/delivery/index.js.map +1 -1
- package/dist/delivery/variant-css-map.d.ts +0 -1
- package/dist/index.iife.js +32 -43
- package/dist/print/index.js +9 -17
- package/dist/print/index.js.map +1 -1
- package/dist/shared/types.d.ts +1 -1
- package/module/print.js +9 -17
- package/module/print.js.map +1 -1
- package/package.json +3 -3
package/dist/index.iife.js
CHANGED
|
@@ -26,15 +26,14 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
26
26
|
Every selector starts at .mc-populated-blank-root carrying any r1 variant class,
|
|
27
27
|
so it cannot match outside this element. :where() keeps the attribute match out
|
|
28
28
|
of the specificity, so each per-variant file still overrides a base rule with
|
|
29
|
-
the selector shapes it already uses.
|
|
30
|
-
Source: web-ItemBankViewer/learnosity/templates/Renaissance/r1.scss */
|
|
29
|
+
the selector shapes it already uses. Comments cite the CQT template's r1.scss. */
|
|
31
30
|
|
|
32
31
|
/* r1.scss: Starial font throughout.
|
|
33
|
-
font-size 14px mirrors the
|
|
32
|
+
font-size 14px mirrors the CQT host root, which sets the
|
|
34
33
|
base for all em-scaled rules in r1.scss (e.g. .rli-r1-content-element { 1.9em })
|
|
35
34
|
and any em-based author content (e.g. <span style="font-size:1.8em">). Without
|
|
36
35
|
this base PIE inherits the 16px browser default and renders ~14% larger than
|
|
37
|
-
the
|
|
36
|
+
the CQT reference. See CONTOOL-2567. */
|
|
38
37
|
.mc-populated-blank-root:where([class*="variant-sel-r1-"]) {
|
|
39
38
|
font-family: Starial, Arial, sans-serif;
|
|
40
39
|
font-size: 14px;
|
|
@@ -50,9 +49,9 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
50
49
|
r1.scss: .rli-r1-content-element { margin-right:2px; margin-left:2px } — 4px total gap.
|
|
51
50
|
Apply the per-element margin to both classless tokens and the blank slot
|
|
52
51
|
(which is the cloze equivalent) so the gap stacks with whitespace text-nodes
|
|
53
|
-
between flex items the same way
|
|
52
|
+
between flex items the same way the CQT does. Earlier this used column-gap:4px,
|
|
54
53
|
but flex column-gap accumulates with the cloze margin and the implicit
|
|
55
|
-
whitespace, producing a wider gap than
|
|
54
|
+
whitespace, producing a wider gap than the CQT shows. See CONTOOL-2569. */
|
|
56
55
|
.mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-template-line {
|
|
57
56
|
display: flex;
|
|
58
57
|
flex-direction: row;
|
|
@@ -69,13 +68,13 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
69
68
|
|
|
70
69
|
/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px; min-height:150px;
|
|
71
70
|
line-height:89px; margin-right:2px; margin-left:2px } — wraps every stem token in
|
|
72
|
-
|
|
71
|
+
the CQT, giving each a 150px box with a 2px per-side margin. Applies to the token
|
|
73
72
|
layouts, the same set that gets the feature button and the wide underline, so
|
|
74
73
|
trailing tokens in audio_blank_only (gplusggg) match the blank's height the way
|
|
75
|
-
|
|
74
|
+
the CQT does. Stems on other layouts are prose, which the box would stack a word or
|
|
76
75
|
two per line. Spans inside the blank are the answer's own markup, not stem tokens.
|
|
77
|
-
The margin outranks token_sequence's span + span gap, so tokens sit
|
|
78
|
-
|
|
76
|
+
The margin outranks token_sequence's span + span gap, so tokens sit 4px apart,
|
|
77
|
+
as in the CQT (CONTOOL-2569). */
|
|
79
78
|
.mc-populated-blank-root:where(
|
|
80
79
|
[class*="variant-sel-r1-"]:is(
|
|
81
80
|
.layout-audio_blank_only,
|
|
@@ -147,14 +146,14 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
/* r1.scss: .rli-r1-cloze { height:160px; padding-bottom:4px; border-bottom:6px solid }
|
|
150
|
-
— the blank in the token layouts is
|
|
149
|
+
— the blank in the token layouts is the CQT's cloze box, top-aligned with the stem
|
|
151
150
|
tokens (align-self overrides the flex-end above). A fixed height rather than a
|
|
152
151
|
min-height keeps the empty and the filled blank at one geometry: the 150px image
|
|
153
152
|
or content box below fits its 150px content area exactly, and the underline
|
|
154
|
-
never moves on selection (CONTOOL-3159). .pie-blank-slot is border-box, as
|
|
153
|
+
never moves on selection (CONTOOL-3159). .pie-blank-slot is border-box, as the CQT's
|
|
155
154
|
cloze is. McPopulatedBlank.svelte gives audio_blank_only the padding and the
|
|
156
155
|
6px underline; token_sequence takes both here. The 2px per-side margin matches
|
|
157
|
-
|
|
156
|
+
the CQT's .rli-r1-content-element rhythm (CONTOOL-2569). */
|
|
158
157
|
.mc-populated-blank-root:where([class*="variant-sel-r1-"]):is(
|
|
159
158
|
.layout-audio_blank_only,
|
|
160
159
|
.layout-token_sequence
|
|
@@ -188,7 +187,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
188
187
|
/* cloze.js: the cloze holds an .rli-r1-content-element around the answer's markup,
|
|
189
188
|
so the answer's line packs to the bottom of a 150px box the way a stem token's
|
|
190
189
|
does. The box's 8px bottom margin, centred in the cloze's 150px content area,
|
|
191
|
-
lifts it 4px, as it does in
|
|
190
|
+
lifts it 4px, as it does in the CQT. */
|
|
192
191
|
.mc-populated-blank-root:where([class*="variant-sel-r1-"]):is(
|
|
193
192
|
.layout-audio_blank_only,
|
|
194
193
|
.layout-token_sequence
|
|
@@ -229,9 +228,9 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
229
228
|
|
|
230
229
|
/* r1.scss: .rli-r1-content-element { min-width:150px; max-width:150px;
|
|
231
230
|
min-height:150px } wraps every image (stem token + distractor) and forces
|
|
232
|
-
the content box to 150×150.
|
|
231
|
+
the content box to 150×150. The CQT host also rewrites <img width/height>
|
|
233
232
|
to 150 server-side. PIE keeps the authored attributes (typically 108×108),
|
|
234
|
-
so without an explicit override images render ~28% smaller than
|
|
233
|
+
so without an explicit override images render ~28% smaller than in the CQT.
|
|
235
234
|
See CONTOOL-2570. */
|
|
236
235
|
.mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-template-line img,
|
|
237
236
|
.mc-populated-blank-root:where([class*="variant-sel-r1-"]) .pie-choice-label img {
|
|
@@ -264,8 +263,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
264
263
|
--mpb-choice-width-vw: 100vw;
|
|
265
264
|
}
|
|
266
265
|
}
|
|
267
|
-
`,xo={"sel_r1-_plusggg":{variantId:`sel-r1-plusggg`,variantClass:`variant-sel-r1-plusggg`,
|
|
268
|
-
/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
266
|
+
`,xo={"sel_r1-_plusggg":{variantId:`sel-r1-plusggg`,variantClass:`variant-sel-r1-plusggg`,cssText:`/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
269
267
|
.mc-populated-blank-root.variant-sel-r1-plusggg {
|
|
270
268
|
max-width: 875px;
|
|
271
269
|
margin-inline: auto;
|
|
@@ -284,9 +282,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
284
282
|
.mc-populated-blank-root.variant-sel-r1-plusggg {
|
|
285
283
|
--mpb-choice-radio-padding: 20px;
|
|
286
284
|
}
|
|
287
|
-
`},"sr-vic":{variantId:`sr-vic`,variantClass:`variant-sr-vic`,
|
|
288
|
-
/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/vic.scss */
|
|
289
|
-
.mc-populated-blank-root.variant-sr-vic {
|
|
285
|
+
`},"sr-vic":{variantId:`sr-vic`,variantClass:`variant-sr-vic`,cssText:`.mc-populated-blank-root.variant-sr-vic {
|
|
290
286
|
font-family: Starial, Arial, sans-serif;
|
|
291
287
|
}
|
|
292
288
|
|
|
@@ -304,7 +300,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
304
300
|
margin: 0;
|
|
305
301
|
}
|
|
306
302
|
|
|
307
|
-
/*
|
|
303
|
+
/* The CQT's .rli-vic-answer has no text-align rule and inherits start; PIE's
|
|
308
304
|
inline_sentence layout sets text-align:center on .template-line via a
|
|
309
305
|
Svelte-scoped selector with specificity (0,4,0), so we need to match or
|
|
310
306
|
exceed that. Pin sr-vic back to start so wrapped lines stay left-aligned.
|
|
@@ -322,7 +318,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
322
318
|
}
|
|
323
319
|
|
|
324
320
|
/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }
|
|
325
|
-
The red holds AA only on
|
|
321
|
+
The red holds AA only on the CQT's white page (5.1:1), so the answer carries that
|
|
326
322
|
surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'
|
|
327
323
|
colour schemes, which declare no color-scheme. */
|
|
328
324
|
.mc-populated-blank-root.variant-sr-vic .pie-blank-value {
|
|
@@ -387,12 +383,10 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
387
383
|
background-color: #fcfcd3;
|
|
388
384
|
color: #000;
|
|
389
385
|
}
|
|
390
|
-
`},sel_vic:{variantId:`sel-vic`,variantClass:`variant-sel-vic`,
|
|
391
|
-
/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/sel_vic/scss/main.scss + vic.scss */
|
|
392
|
-
.mc-populated-blank-root.variant-sel-vic {
|
|
386
|
+
`},sel_vic:{variantId:`sel-vic`,variantClass:`variant-sel-vic`,cssText:`.mc-populated-blank-root.variant-sel-vic {
|
|
393
387
|
font-family: Starial, Arial, sans-serif;
|
|
394
|
-
/*
|
|
395
|
-
PIE collapses both
|
|
388
|
+
/* CQT chain: 14px host → .sel-vic { 1.5em } = 21px.
|
|
389
|
+
PIE collapses both CQT layers into this single variant-root selector, so
|
|
396
390
|
the resolved value is set directly. See CONTOOL-2567. */
|
|
397
391
|
font-size: 21px;
|
|
398
392
|
max-width: 800px;
|
|
@@ -424,7 +418,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
424
418
|
margin: 0;
|
|
425
419
|
}
|
|
426
420
|
|
|
427
|
-
/*
|
|
421
|
+
/* The CQT's .rli-vic-answer has no text-align rule and inherits start; PIE's
|
|
428
422
|
inline_sentence layout sets text-align:center on .template-line via a
|
|
429
423
|
Svelte-scoped selector with specificity (0,4,0), so we need to match or
|
|
430
424
|
exceed that. Pin sel-vic back to start so wrapped lines stay left-aligned.
|
|
@@ -458,7 +452,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
458
452
|
/* vic.scss: .rli-vic-cloze { margin-left: 6px; margin-right: 6px } gives the
|
|
459
453
|
cloze breathing room from adjacent text or punctuation. The shared blank slot
|
|
460
454
|
has no inline margin, so set it here so the cloze→trailing-punctuation gap
|
|
461
|
-
matches
|
|
455
|
+
matches the CQT. See CONTOOL-2572. The cloze has no inline padding either, where
|
|
462
456
|
ClozeMarker.svelte gives the blank 0.5rem. */
|
|
463
457
|
.mc-populated-blank-root.variant-sel-vic .pie-template-line .pie-blank-slot {
|
|
464
458
|
margin-left: 6px;
|
|
@@ -467,7 +461,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
467
461
|
}
|
|
468
462
|
|
|
469
463
|
/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }
|
|
470
|
-
The red holds AA only on
|
|
464
|
+
The red holds AA only on the CQT's white page (5.1:1), so the answer carries that
|
|
471
465
|
surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'
|
|
472
466
|
colour schemes, which declare no color-scheme. */
|
|
473
467
|
.mc-populated-blank-root.variant-sel-vic .pie-blank-value {
|
|
@@ -537,8 +531,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
537
531
|
background-color: transparent;
|
|
538
532
|
color: inherit;
|
|
539
533
|
}
|
|
540
|
-
`},"sel_r1-_gplusggg":{variantId:`sel-r1-gplusggg`,variantClass:`variant-sel-r1-gplusggg`,
|
|
541
|
-
/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
534
|
+
`},"sel_r1-_gplusggg":{variantId:`sel-r1-gplusggg`,variantClass:`variant-sel-r1-gplusggg`,cssText:`/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
542
535
|
.mc-populated-blank-root.variant-sel-r1-gplusggg {
|
|
543
536
|
max-width: 875px;
|
|
544
537
|
margin-inline: auto;
|
|
@@ -553,8 +546,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
553
546
|
--mpb-choice-selected-bg: #fcfcd3;
|
|
554
547
|
--mpb-choice-selected-color: #000;
|
|
555
548
|
}
|
|
556
|
-
`},"sel_r1-g_plusggg":{variantId:`sel-r1-g-stem`,variantClass:`variant-sel-r1-g-stem`,
|
|
557
|
-
/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
549
|
+
`},"sel_r1-g_plusggg":{variantId:`sel-r1-g-stem`,variantClass:`variant-sel-r1-g-stem`,cssText:`/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
558
550
|
.mc-populated-blank-root.variant-sel-r1-g-stem {
|
|
559
551
|
max-width: 875px;
|
|
560
552
|
margin-inline: auto;
|
|
@@ -570,8 +562,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
570
562
|
/* r1.scss: .rli-r1-cloze { border-bottom: 6px solid } */
|
|
571
563
|
--mpb-blank-underline-wide-width: 6px;
|
|
572
564
|
}
|
|
573
|
-
`},"sel_r1-gg_plusggg":{variantId:`sel-r1-gg-plus`,variantClass:`variant-sel-r1-gg-plus`,
|
|
574
|
-
/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
565
|
+
`},"sel_r1-gg_plusggg":{variantId:`sel-r1-gg-plus`,variantClass:`variant-sel-r1-gg-plus`,cssText:`/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
575
566
|
.mc-populated-blank-root.variant-sel-r1-gg-plus {
|
|
576
567
|
max-width: 875px;
|
|
577
568
|
margin-inline: auto;
|
|
@@ -585,8 +576,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
585
576
|
--mpb-choice-selected-bg: #fcfcd3;
|
|
586
577
|
--mpb-choice-selected-color: #000;
|
|
587
578
|
}
|
|
588
|
-
`},"sel_r1-_ggplusggg":{variantId:`sel-r1-ggplus`,variantClass:`variant-sel-r1-ggplus`,
|
|
589
|
-
/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
579
|
+
`},"sel_r1-_ggplusggg":{variantId:`sel-r1-ggplus`,variantClass:`variant-sel-r1-ggplus`,cssText:`/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
590
580
|
.mc-populated-blank-root.variant-sel-r1-ggplus {
|
|
591
581
|
max-width: 875px;
|
|
592
582
|
margin-inline: auto;
|
|
@@ -600,8 +590,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
600
590
|
--mpb-choice-selected-bg: #fcfcd3;
|
|
601
591
|
--mpb-choice-selected-color: #000;
|
|
602
592
|
}
|
|
603
|
-
`},"sel_r1-s3_plusggg":{variantId:`sel-r1-s3`,variantClass:`variant-sel-r1-s3`,
|
|
604
|
-
/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
593
|
+
`},"sel_r1-s3_plusggg":{variantId:`sel-r1-s3`,variantClass:`variant-sel-r1-s3`,cssText:`/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */
|
|
605
594
|
.mc-populated-blank-root.variant-sel-r1-s3 {
|
|
606
595
|
max-width: 860px;
|
|
607
596
|
margin-inline: auto;
|
|
@@ -621,7 +610,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
621
610
|
|
|
622
611
|
/* sel_r1-s3_plusggg/question.css does not set font-weight on distractors or
|
|
623
612
|
cloze content-element, so they inherit 400 from the host root. The earlier
|
|
624
|
-
font-weight:500 override caused PIE to render visibly heavier than
|
|
613
|
+
font-weight:500 override caused PIE to render visibly heavier than the CQT for
|
|
625
614
|
the same author content. See CONTOOL-2571. */
|
|
626
615
|
.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,
|
|
627
616
|
.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {
|
|
@@ -670,7 +659,7 @@ this.McPopulatedBlankElement=(function(){typeof window<`u`&&((window.__svelte??=
|
|
|
670
659
|
underline. Centering leaves it floating well above both the underline and the
|
|
671
660
|
sentence image's own (bottom-anchored) baseline. The blank's own box height
|
|
672
661
|
(160px, from McPopulatedBlank.svelte's shared audio_blank_only/stimulus_image_blank
|
|
673
|
-
rule) is left as-is — it already matches the
|
|
662
|
+
rule) is left as-is — it already matches the CQT reference (~161px)
|
|
674
663
|
closely; only the internal alignment was wrong. See CONTOOL-3159. */
|
|
675
664
|
.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-blank-slot {
|
|
676
665
|
align-items: flex-end;
|
package/dist/print/index.js
CHANGED
|
@@ -8602,57 +8602,49 @@ function computeLegendText(params) {
|
|
|
8602
8602
|
}
|
|
8603
8603
|
//#endregion
|
|
8604
8604
|
//#region src/delivery/cqt-css/sel-r1-base.css?raw
|
|
8605
|
-
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.\n Source: web-ItemBankViewer/learnosity/templates/Renaissance/r1.scss */\n\n/* r1.scss: Starial font throughout.\n font-size 14px mirrors the Learnosity host root (.lrn_widget) 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 LSY 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 LSY 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 LSY 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 LSY, 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 LSY 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 LSY's 4px\n apart (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 LSY'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 LSY'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 LSY'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 LSY. */\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. LSY's 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 LSY.\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";
|
|
8605
|
+
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";
|
|
8606
8606
|
//#endregion
|
|
8607
8607
|
//#region src/delivery/variant-css-map.ts
|
|
8608
8608
|
var VARIANT_BY_CUSTOM_TYPE = {
|
|
8609
8609
|
"sel_r1-_plusggg": {
|
|
8610
8610
|
variantId: "sel-r1-plusggg",
|
|
8611
8611
|
variantClass: "variant-sel-r1-plusggg",
|
|
8612
|
-
|
|
8613
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-plusggg {\n max-width: 875px;\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: 1rem;\n /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-plusggg {\n --mpb-choice-radio-padding: 20px;\n}\n"
|
|
8612
|
+
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-plusggg {\n max-width: 875px;\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: 1rem;\n /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n\n.mc-populated-blank-root.variant-sel-r1-plusggg {\n --mpb-choice-radio-padding: 20px;\n}\n"
|
|
8614
8613
|
},
|
|
8615
8614
|
"sr-vic": {
|
|
8616
8615
|
variantId: "sr-vic",
|
|
8617
8616
|
variantClass: "variant-sr-vic",
|
|
8618
|
-
|
|
8619
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css */\n/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/vic.scss */\n.mc-populated-blank-root.variant-sr-vic {\n font-family: Starial, Arial, sans-serif;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-template-line,\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n line-height: 123%;\n}\n\n/* vic.scss: .rli-vic-answer uses display:flex so sentence and cloze stay on\n one line. The template HTML wraps text in <p>, which is block by default and\n breaks to a new line. Making <p> inline keeps the sentence and blank inline. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line p {\n display: inline;\n margin: 0;\n}\n\n/* LSY .rli-vic-answer has no text-align rule and inherits start; PIE's\n inline_sentence layout sets text-align:center on .template-line via a\n Svelte-scoped selector with specificity (0,4,0), so we need to match or\n exceed that. Pin sr-vic back to start so wrapped lines stay left-aligned.\n Same root cause as sel-vic. See CONTOOL-2573. */\n.mc-populated-blank-root.variant-sr-vic.layout-inline_sentence .pie-template-line.template-line {\n text-align: start;\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left:6px; margin-right:6px }, with no inline\n padding, where ClozeMarker.svelte gives the blank 0.5rem. See CONTOOL-2572. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line .pie-blank-slot {\n margin-left: 6px;\n margin-right: 6px;\n padding-inline: 0;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n The red holds AA only on LSY's white page (5.1:1), so the answer carries that\n surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value {\n color: #cc3333;\n background-color: #fff;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } applied to the\n whole distractor row (radio + label), not just the label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected {\n background-color: #fcfcd3;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n text-align: left;\n justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and\n .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and\n from its label, centred on the label, and its margins set the row pitch: the rows and\n the radio and label have no gap between them. */\n.mc-populated-blank-root.variant-sr-vic .pie-choices.choices-vertical {\n --mpb-choice-group-gap: 0;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal) {\n --mpb-choice-row-gap: 0;\n align-items: center;\n margin-right: 10px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice-radio-inline {\n margin: 20px;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } applied to\n the full row element, not only the inner label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal):hover {\n background-color: #f2f2f2;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic\n .pie-choice:not(.pie-choice-horizontal):hover\n .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n\n/* Selected state must win over hover — yellow persists when hovering a chosen row. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n background-color: #fcfcd3;\n color: #000;\n}\n"
|
|
8617
|
+
cssText: ".mc-populated-blank-root.variant-sr-vic {\n font-family: Starial, Arial, sans-serif;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-template-line,\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n line-height: 123%;\n}\n\n/* vic.scss: .rli-vic-answer uses display:flex so sentence and cloze stay on\n one line. The template HTML wraps text in <p>, which is block by default and\n breaks to a new line. Making <p> inline keeps the sentence and blank inline. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line p {\n display: inline;\n margin: 0;\n}\n\n/* The CQT's .rli-vic-answer has no text-align rule and inherits start; PIE's\n inline_sentence layout sets text-align:center on .template-line via a\n Svelte-scoped selector with specificity (0,4,0), so we need to match or\n exceed that. Pin sr-vic back to start so wrapped lines stay left-aligned.\n Same root cause as sel-vic. See CONTOOL-2573. */\n.mc-populated-blank-root.variant-sr-vic.layout-inline_sentence .pie-template-line.template-line {\n text-align: start;\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left:6px; margin-right:6px }, with no inline\n padding, where ClozeMarker.svelte gives the blank 0.5rem. See CONTOOL-2572. */\n.mc-populated-blank-root.variant-sr-vic .pie-template-line .pie-blank-slot {\n margin-left: 6px;\n margin-right: 6px;\n padding-inline: 0;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n The red holds AA only on the CQT's white page (5.1:1), so the answer carries that\n surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sr-vic .pie-blank-value {\n color: #cc3333;\n background-color: #fff;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } applied to the\n whole distractor row (radio + label), not just the label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected {\n background-color: #fcfcd3;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice.is-selected .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice-label {\n text-align: left;\n justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and\n .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and\n from its label, centred on the label, and its margins set the row pitch: the rows and\n the radio and label have no gap between them. */\n.mc-populated-blank-root.variant-sr-vic .pie-choices.choices-vertical {\n --mpb-choice-group-gap: 0;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal) {\n --mpb-choice-row-gap: 0;\n align-items: center;\n margin-right: 10px;\n}\n\n.mc-populated-blank-root.variant-sr-vic .pie-choice-radio-inline {\n margin: 20px;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } applied to\n the full row element, not only the inner label wrapper. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal):hover {\n background-color: #f2f2f2;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sr-vic\n .pie-choice:not(.pie-choice-horizontal):hover\n .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n\n/* Selected state must win over hover — yellow persists when hovering a chosen row. */\n.mc-populated-blank-root.variant-sr-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n background-color: #fcfcd3;\n color: #000;\n}\n"
|
|
8620
8618
|
},
|
|
8621
8619
|
sel_vic: {
|
|
8622
8620
|
variantId: "sel-vic",
|
|
8623
8621
|
variantClass: "variant-sel-vic",
|
|
8624
|
-
|
|
8625
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css */\n/* Reference layout: web-ItemBankViewer/learnosity/templates/Renaissance/sel_vic/scss/main.scss + vic.scss */\n.mc-populated-blank-root.variant-sel-vic {\n font-family: Starial, Arial, sans-serif;\n /* LSY chain: .lrn_widget (14px host) → .sel-vic { 1.5em } = 21px.\n PIE collapses both LSY layers into this single variant-root selector, so\n the resolved value is set directly. See CONTOOL-2567. */\n font-size: 21px;\n max-width: 800px;\n margin-inline: auto;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-template-line,\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n line-height: 123%;\n}\n\n/* sel_vic/main.scss: template left ~75%, audio right ~25% on the same row.\n Svelte scoping prevents the component-internal grid-area rule from reaching\n .audio-container inside AudioPlayer, so we override it here via the global\n .pie-audio-container class which is not subject to scope hashing. */\n.mc-populated-blank-root.variant-sel-vic .pie-audio-container {\n grid-area: audio;\n margin: 0;\n justify-self: end;\n align-self: start;\n min-height: 128px;\n}\n\n/* vic.scss: sentence and cloze sit inline — the <p> wrapper must not break to\n a new line before the blank slot. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line p {\n display: inline;\n margin: 0;\n}\n\n/* LSY .rli-vic-answer has no text-align rule and inherits start; PIE's\n inline_sentence layout sets text-align:center on .template-line via a\n Svelte-scoped selector with specificity (0,4,0), so we need to match or\n exceed that. Pin sel-vic back to start so wrapped lines stay left-aligned.\n See CONTOOL-2573.\n vic.scss: .rli-vic-stimulus { align-items:flex-start } also starts the\n sentence at the content's left edge, where the same layout centres it in its\n grid column (justify-self:center). */\n.mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n text-align: start;\n justify-self: start;\n}\n\n/* vic.scss: @media (min-width:850px) { .rli-vic-stimulus { margin-left:20px;\n margin-right:20px } } — the sentence sits 20px in from the distractors. */\n@media (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n margin-left: 20px;\n margin-right: 20px;\n }\n}\n\n/* sel_vic/main.scss: .sel-vic .rli-vic-stimulus { min-height:128px }. From 850px up the\n listen button beside the sentence gives the row that height; below it the button\n moves above, and the sentence keeps the 128px on its own. */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n min-height: 128px;\n }\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left: 6px; margin-right: 6px } gives the\n cloze breathing room from adjacent text or punctuation. The shared blank slot\n has no inline margin, so set it here so the cloze→trailing-punctuation gap\n matches LSY. See CONTOOL-2572. The cloze has no inline padding either, where\n ClozeMarker.svelte gives the blank 0.5rem. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line .pie-blank-slot {\n margin-left: 6px;\n margin-right: 6px;\n padding-inline: 0;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n The red holds AA only on LSY's white page (5.1:1), so the answer carries that\n surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value {\n color: #cc3333;\n background-color: #fff;\n}\n\n/* sel_vic/main.scss: .sel-vic { max-width: 800px } — the fieldset/choices must\n also be constrained so rows don't span beyond 800px. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices-fieldset {\n max-width: 800px;\n width: 100%;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n text-align: left;\n justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and\n .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and\n from its label, centred on the label, and its margins set the row pitch: the rows and\n the radio and label have no gap between them. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices.choices-vertical {\n --mpb-choice-group-gap: 0;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal) {\n --mpb-choice-row-gap: 0;\n align-items: center;\n margin-right: 10px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice-radio-inline {\n margin: 20px;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected {\n background-color: #fcfcd3;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n\n/* Selected state must win over hover. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n background-color: #fcfcd3;\n color: #000;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal):hover {\n background-color: #f2f2f2;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic\n .pie-choice:not(.pie-choice-horizontal):hover\n .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n"
|
|
8622
|
+
cssText: ".mc-populated-blank-root.variant-sel-vic {\n font-family: Starial, Arial, sans-serif;\n /* CQT chain: 14px host → .sel-vic { 1.5em } = 21px.\n PIE collapses both CQT layers into this single variant-root selector, so\n the resolved value is set directly. See CONTOOL-2567. */\n font-size: 21px;\n max-width: 800px;\n margin-inline: auto;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-template-line,\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value,\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n line-height: 123%;\n}\n\n/* sel_vic/main.scss: template left ~75%, audio right ~25% on the same row.\n Svelte scoping prevents the component-internal grid-area rule from reaching\n .audio-container inside AudioPlayer, so we override it here via the global\n .pie-audio-container class which is not subject to scope hashing. */\n.mc-populated-blank-root.variant-sel-vic .pie-audio-container {\n grid-area: audio;\n margin: 0;\n justify-self: end;\n align-self: start;\n min-height: 128px;\n}\n\n/* vic.scss: sentence and cloze sit inline — the <p> wrapper must not break to\n a new line before the blank slot. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line p {\n display: inline;\n margin: 0;\n}\n\n/* The CQT's .rli-vic-answer has no text-align rule and inherits start; PIE's\n inline_sentence layout sets text-align:center on .template-line via a\n Svelte-scoped selector with specificity (0,4,0), so we need to match or\n exceed that. Pin sel-vic back to start so wrapped lines stay left-aligned.\n See CONTOOL-2573.\n vic.scss: .rli-vic-stimulus { align-items:flex-start } also starts the\n sentence at the content's left edge, where the same layout centres it in its\n grid column (justify-self:center). */\n.mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n text-align: start;\n justify-self: start;\n}\n\n/* vic.scss: @media (min-width:850px) { .rli-vic-stimulus { margin-left:20px;\n margin-right:20px } } — the sentence sits 20px in from the distractors. */\n@media (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n margin-left: 20px;\n margin-right: 20px;\n }\n}\n\n/* sel_vic/main.scss: .sel-vic .rli-vic-stimulus { min-height:128px }. From 850px up the\n listen button beside the sentence gives the row that height; below it the button\n moves above, and the sentence keeps the 128px on its own. */\n@media not all and (min-width: 850px) {\n .mc-populated-blank-root.variant-sel-vic.layout-inline_sentence .pie-template-line.template-line {\n min-height: 128px;\n }\n}\n\n/* vic.scss: .rli-vic-cloze { margin-left: 6px; margin-right: 6px } gives the\n cloze breathing room from adjacent text or punctuation. The shared blank slot\n has no inline margin, so set it here so the cloze→trailing-punctuation gap\n matches the CQT. See CONTOOL-2572. The cloze has no inline padding either, where\n ClozeMarker.svelte gives the blank 0.5rem. */\n.mc-populated-blank-root.variant-sel-vic .pie-template-line .pie-blank-slot {\n margin-left: 6px;\n margin-right: 6px;\n padding-inline: 0;\n}\n\n/* vic.scss: .rli-vic-cloze > .rli-vic-content-element { color: #cc3333 }\n The red holds AA only on the CQT's white page (5.1:1), so the answer carries that\n surface: on a dark host it is 3.08:1. light-dark() would miss pie-players'\n colour schemes, which declare no color-scheme. */\n.mc-populated-blank-root.variant-sel-vic .pie-blank-value {\n color: #cc3333;\n background-color: #fff;\n}\n\n/* sel_vic/main.scss: .sel-vic { max-width: 800px } — the fieldset/choices must\n also be constrained so rows don't span beyond 800px. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices-fieldset {\n max-width: 800px;\n width: 100%;\n}\n\n/* vic.scss: distractor label text sits to the right of the radio — no centering. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice-label {\n text-align: left;\n justify-content: flex-start;\n}\n\n/* vic.scss: .rli-vic-distractor { align-items:center; margin-right:10px } and\n .rli-vic-distractor > input { margin:20px }. The radio sits 20px from the row edge and\n from its label, centred on the label, and its margins set the row pitch: the rows and\n the radio and label have no gap between them. */\n.mc-populated-blank-root.variant-sel-vic .pie-choices.choices-vertical {\n --mpb-choice-group-gap: 0;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal) {\n --mpb-choice-row-gap: 0;\n align-items: center;\n margin-right: 10px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice-radio-inline {\n margin: 20px;\n}\n\n/* vic.scss: .rli-vic-selected { background-color: #fcfcd3 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected {\n background-color: #fcfcd3;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic .pie-choice.is-selected .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n\n/* Selected state must win over hover. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal).is-selected:hover {\n background-color: #fcfcd3;\n color: #000;\n}\n\n/* vic.scss: .rli-vic-distractor:hover { background-color: #F2F2F2 } on the full row. */\n.mc-populated-blank-root.variant-sel-vic .pie-choice:not(.pie-choice-horizontal):hover {\n background-color: #f2f2f2;\n color: #000;\n border-radius: 6px;\n}\n\n.mc-populated-blank-root.variant-sel-vic\n .pie-choice:not(.pie-choice-horizontal):hover\n .pie-choice-label-wrap {\n background-color: transparent;\n color: inherit;\n}\n"
|
|
8626
8623
|
},
|
|
8627
8624
|
"sel_r1-_gplusggg": {
|
|
8628
8625
|
variantId: "sel-r1-gplusggg",
|
|
8629
8626
|
variantClass: "variant-sel-r1-gplusggg",
|
|
8630
|
-
|
|
8631
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-gplusggg {\n max-width: 875px;\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: 1rem;\n /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n"
|
|
8627
|
+
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-gplusggg {\n max-width: 875px;\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: 1rem;\n /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n"
|
|
8632
8628
|
},
|
|
8633
8629
|
"sel_r1-g_plusggg": {
|
|
8634
8630
|
variantId: "sel-r1-g-stem",
|
|
8635
8631
|
variantClass: "variant-sel-r1-g-stem",
|
|
8636
|
-
|
|
8637
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-g-stem {\n max-width: 875px;\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 /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n /* r1.scss: .rli-r1-cloze { border-bottom: 6px solid } */\n --mpb-blank-underline-wide-width: 6px;\n}\n"
|
|
8632
|
+
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-g-stem {\n max-width: 875px;\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 /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n /* r1.scss: .rli-r1-cloze { border-bottom: 6px solid } */\n --mpb-blank-underline-wide-width: 6px;\n}\n"
|
|
8638
8633
|
},
|
|
8639
8634
|
"sel_r1-gg_plusggg": {
|
|
8640
8635
|
variantId: "sel-r1-gg-plus",
|
|
8641
8636
|
variantClass: "variant-sel-r1-gg-plus",
|
|
8642
|
-
|
|
8643
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-gg-plus {\n max-width: 875px;\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 /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n"
|
|
8637
|
+
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-gg-plus {\n max-width: 875px;\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 /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n"
|
|
8644
8638
|
},
|
|
8645
8639
|
"sel_r1-_ggplusggg": {
|
|
8646
8640
|
variantId: "sel-r1-ggplus",
|
|
8647
8641
|
variantClass: "variant-sel-r1-ggplus",
|
|
8648
|
-
|
|
8649
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_ggplusggg/0.0.1/question.css */\n/* Shared r1 base styles (font, template-line flex, choice-label) are in sel-r1-base.css */\n.mc-populated-blank-root.variant-sel-r1-ggplus {\n max-width: 875px;\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 /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n"
|
|
8642
|
+
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-ggplus {\n max-width: 875px;\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 /* A fixed light surface takes fixed dark text: the scheme text colour is near-white in dark schemes. */\n --mpb-choice-hover-bg: #f2f2f2;\n --mpb-choice-hover-color: #000;\n --mpb-choice-selected-bg: #fcfcd3;\n --mpb-choice-selected-color: #000;\n}\n"
|
|
8650
8643
|
},
|
|
8651
8644
|
"sel_r1-s3_plusggg": {
|
|
8652
8645
|
variantId: "sel-r1-s3",
|
|
8653
8646
|
variantClass: "variant-sel-r1-s3",
|
|
8654
|
-
|
|
8655
|
-
cssText: "/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css */\n/* 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 LSY 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 Learnosity 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.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {\n transform: scale(0.85);\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-content: flex-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"
|
|
8647
|
+
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.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {\n transform: scale(0.85);\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-content: flex-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"
|
|
8656
8648
|
}
|
|
8657
8649
|
};
|
|
8658
8650
|
var normalizeCustomType = (value) => {
|