@pie-element/mc-populated-blank 0.2.9 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/mc-populated-blank",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Multiple-choice option populates an inline blank in a sentence template (Svelte 5 PIE element)",
   "type": "module",
   "main": "./dist/index.js",

package/src/controller/index.ts

@@ -195,6 +195,7 @@ export const model = async (question: any, session: any, env: any, updateSession
     audioUrl: normalizedQuestion.hasAudio ? normalizedQuestion.audioUrl : null,
     audioTranscript: normalizedQuestion.hasAudio ? normalizedQuestion.audioTranscript : null,
     showVisibleTranscript: !!normalizedQuestion.showVisibleTranscript,
+    customType: normalizedQuestion.customType || '',
     useFeatureButtonAudio:
       typeof normalizedQuestion.useFeatureButtonAudio === 'boolean'
         ? normalizedQuestion.useFeatureButtonAudio

package/src/delivery/McPopulatedBlank.svelte

@@ -12,6 +12,11 @@
 
 <script lang="ts">
 import { color } from '@pie-lib/styling-svelte';
+import {
+  ensureVariantCssInjected,
+  getVariantCssConfig,
+  getVariantRootClass,
+} from './variant-css-map';
 /** Must match controller `BLANK_TOKEN` (kept local to avoid pulling controller into delivery). */
 const BLANK_TOKEN = '{{blank}}';
 const DEFAULT_LAYOUT_LIMITS = {
@@ -122,6 +127,8 @@ const isBlankOnlyTemplate = $derived.by(() => {
   return plain === BLANK_TOKEN;
 });
 const layoutProfile = $derived(model?.layoutProfile || '');
+const variantCssConfig = $derived(getVariantCssConfig(model?.customType));
+const variantRootClass = $derived(getVariantRootClass(model?.customType));
 const choiceLayout = $derived(
   model?.choiceLayout || (isAudioOnlyMode || isBlankOnlyTemplate ? 'horizontal' : 'vertical')
 );
@@ -275,6 +282,7 @@ const displayChoiceId = $derived.by(() => {
 });
 
 const displayChoice = $derived.by(() => choices.find((c: any) => c.id === displayChoiceId));
+const displayChoiceLabelHtml = $derived.by(() => String(displayChoice?.labelHtml || ''));
 
 const legendText = $derived.by(() => {
   const plain = (model?.prompt || '')
@@ -562,10 +570,14 @@ $effect(() => {
     });
   }
 });
+
+$effect(() => {
+  ensureVariantCssInjected(variantCssConfig);
+});
 </script>
 
 <div
-  class={`p-4 mc-populated-blank-root pie-element pie-element-mc-populated-blank pie-delivery-root layout-${layoutProfile} ${hasInlineSentenceAudioLayout ? 'has-inline-audio' : ''}`}
+  class={`p-4 mc-populated-blank-root pie-element pie-element-mc-populated-blank pie-delivery-root layout-${layoutProfile} ${variantRootClass} ${hasInlineSentenceAudioLayout ? 'has-inline-audio' : ''}`}
   lang={lang}
   style={rootStyle}
 >
@@ -729,8 +741,8 @@ $effect(() => {
             class="w-auto object-contain pie-blank-image"
             style="max-height:var(--mpb-selected-image-max-height, 4rem);"
           />
-        {:else if displayChoice?.labelHtml}
-          <span class="blank-inner choice-label pie-blank-value">{@html displayChoice.labelHtml}</span>
+        {:else if displayChoiceLabelHtml}
+          <span class="choice-html pie-blank-value">{@html displayChoiceLabelHtml}</span>
         {:else}
           <span class="blank-inner-empty" aria-hidden="true">&nbsp;</span>
         {/if}
@@ -775,7 +787,7 @@ $effect(() => {
                     style="max-height:var(--mpb-choice-image-max-height, 5rem);"
                   />
                 {:else}
-                  <span class="choice-label pie-choice-label">{@html c.labelHtml || ''}</span>
+                  <span class="choice-html pie-choice-label">{@html c.labelHtml || ''}</span>
                 {/if}
               </span>
               <input
@@ -811,7 +823,7 @@ $effect(() => {
                   style="max-height:var(--mpb-choice-image-max-height, 5rem);"
                 />
               {:else}
-                <span class="choice-label pie-choice-label">{@html c.labelHtml || ''}</span>
+                <span class="choice-html pie-choice-label">{@html c.labelHtml || ''}</span>
               {/if}
             </label>
           {/if}
@@ -984,6 +996,10 @@ $effect(() => {
     background: var(--pie-correct-answer-choice-hover-bg, #ececec);
   }
 
+  .pie-choice-horizontal:not(.is-selected):not(:hover) .pie-choice-tile {
+    background: transparent;
+  }
+
   .choice-row-horizontal.is-selected .choice-tile {
     background: var(--pie-correct-answer-choice-selected-bg, #f1f1f1);
   }
@@ -992,6 +1008,23 @@ $effect(() => {
     background: var(--pie-correct-answer-choice-selected-bg, #f1f1f1);
   }
 
+  .pie-choice:not(.pie-choice-horizontal):hover .pie-choice-label-wrap {
+    background: var(--pie-correct-answer-choice-hover-bg, #ececec);
+  }
+
+  .pie-choice:not(.pie-choice-horizontal):not(.is-selected):not(:hover) .pie-choice-label-wrap {
+    background: transparent;
+  }
+
+  .pie-choice:not(.pie-choice-horizontal).is-selected .pie-choice-label-wrap {
+    background: var(--pie-correct-answer-choice-selected-bg, #f1f1f1);
+    border-radius: 6px;
+  }
+
+  .pie-choice:not(.pie-choice-horizontal).is-selected:hover .pie-choice-label-wrap {
+    background: var(--pie-correct-answer-choice-selected-bg, #f1f1f1);
+  }
+
   .pie-choice.choice-correct {
     border-left: 3px solid var(--pie-correct-answer-choice-correct-border, #0ea449);
   }
@@ -1035,12 +1068,11 @@ $effect(() => {
     text-align: center;
   }
 
-  .choice-label :global(p),
-  .blank-inner :global(p) {
+  .choice-html :global(p) {
     margin: 0;
   }
 
-  .blank-inner {
+  .choice-html {
     width: 100%;
     display: inline-flex;
     align-items: center;

package/src/delivery/cqt-css/sel-r1-g-stem.css

@@ -0,0 +1,29 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-r1-g-stem {
+  font-family: Starial, Arial, sans-serif;
+  max-width: 875px;
+  margin-inline: auto;
+  --mpb-listen-button-size: 128px;
+  --mpb-choice-width-px: 155px;
+  --mpb-choice-tile-min-height: 11.25rem;
+  --mpb-choice-content-min-height: 9.375rem;
+  --pie-correct-answer-choice-hover-bg: #e2e2e2;
+  --pie-correct-answer-choice-selected-bg: #fcfcd3;
+}
+
+.mc-populated-blank-root.variant-sel-r1-g-stem .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-r1-g-stem .pie-choice-label {
+  font-size: 1.9em;
+  line-height: 89px;
+}
+
+.mc-populated-blank-root.variant-sel-r1-g-stem.layout-token_sequence {
+  grid-template-columns: minmax(260px, auto) auto;
+  justify-content: center;
+}

package/src/delivery/cqt-css/sel-r1-gg-plus.css

@@ -0,0 +1,29 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-r1-gg-plus {
+  font-family: Starial, Arial, sans-serif;
+  max-width: 875px;
+  margin-inline: auto;
+  --mpb-listen-button-size: 128px;
+  --mpb-choice-width-px: 155px;
+  --mpb-choice-tile-min-height: 11.25rem;
+  --mpb-choice-content-min-height: 9.375rem;
+  --pie-correct-answer-choice-hover-bg: #e2e2e2;
+  --pie-correct-answer-choice-selected-bg: #fcfcd3;
+}
+
+.mc-populated-blank-root.variant-sel-r1-gg-plus .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-r1-gg-plus .pie-choice-label {
+  font-size: 1.9em;
+  line-height: 89px;
+}
+
+.mc-populated-blank-root.variant-sel-r1-gg-plus.layout-token_sequence {
+  grid-template-columns: minmax(260px, auto) auto;
+  justify-content: center;
+}

package/src/delivery/cqt-css/sel-r1-ggplus.css

@@ -0,0 +1,34 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_ggplusggg/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-r1-ggplus {
+  font-family: Starial, Arial, sans-serif;
+  max-width: 875px;
+  margin-inline: auto;
+  --mpb-listen-button-size: 128px;
+  --mpb-choice-width-px: 155px;
+  --mpb-choice-tile-min-height: 11.25rem;
+  --mpb-choice-content-min-height: 9.375rem;
+  --pie-correct-answer-choice-hover-bg: #e2e2e2;
+  --pie-correct-answer-choice-selected-bg: #fcfcd3;
+}
+
+.mc-populated-blank-root.variant-sel-r1-ggplus .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-r1-ggplus .pie-choice-label {
+  font-size: 1.9em;
+  line-height: 89px;
+}
+
+.mc-populated-blank-root.variant-sel-r1-ggplus.layout-token_sequence {
+  grid-template-columns: minmax(260px, auto) auto;
+  justify-content: center;
+}
+
+/* In this variant, the blank appears before trailing tokens; avoid offsetting it. */
+.mc-populated-blank-root.variant-sel-r1-ggplus.layout-token_sequence .pie-blank-slot {
+  margin-left: 0;
+}

package/src/delivery/cqt-css/sel-r1-gplusggg.css

@@ -0,0 +1,20 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-r1-gplusggg {
+  font-family: Starial, Arial, sans-serif;
+  --mpb-listen-button-size: 128px;
+  --mpb-choice-width-px: 155px;
+  --mpb-choice-tile-min-height: 11.25rem;
+  --mpb-choice-content-min-height: 9.375rem;
+}
+
+.mc-populated-blank-root.variant-sel-r1-gplusggg .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-r1-gplusggg .pie-choice-label {
+  font-size: 1.9em;
+  line-height: 89px;
+}

package/src/delivery/cqt-css/sel-r1-plusggg.css

@@ -0,0 +1,20 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-r1-plusggg {
+  font-family: Starial, Arial, sans-serif;
+  --mpb-listen-button-size: 128px;
+  --mpb-choice-width-px: 155px;
+  --mpb-choice-tile-min-height: 11.25rem;
+  --mpb-choice-content-min-height: 9.375rem;
+}
+
+.mc-populated-blank-root.variant-sel-r1-plusggg .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-r1-plusggg .pie-choice-label {
+  font-size: 1.9em;
+  line-height: 89px;
+}

package/src/delivery/cqt-css/sel-r1-s3.css

@@ -0,0 +1,91 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-r1-s3 {
+  font-family: Starial, Arial, sans-serif;
+  max-width: 860px;
+  margin-inline: auto;
+  --mpb-listen-button-size: 128px;
+  --mpb-choice-width-px: 155px;
+  --mpb-choice-tile-min-height: 11.25rem;
+  --mpb-choice-content-min-height: 9.375rem;
+  --mpb-choice-group-gap: 0.35rem;
+  --mpb-choice-row-gap: 0.35rem;
+  --mpb-horizontal-choice-radio-top-margin: 0.25rem;
+  --mpb-stimulus-min-column: 240px;
+  --mpb-stimulus-grid-column-gap: 1.1rem;
+  --mpb-stimulus-choices-margin-top: 0.85rem;
+  --mpb-audio-blank-template-margin-bottom: 0.9rem;
+  --mpb-blank-wide-width: 6.8rem;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {
+  font-size: 1.9em;
+  line-height: 89px;
+  font-weight: 500;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {
+  font-size: 1.9em;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {
+  grid-template-columns: minmax(220px, auto) auto auto;
+  grid-template-areas:
+    "sentence template audio"
+    "choices choices choices";
+  justify-content: center;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {
+  grid-area: template;
+  justify-self: center;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {
+  justify-self: end;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {
+  justify-self: start;
+  align-self: start;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {
+  justify-self: center;
+  width: fit-content;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {
+  max-width: 100%;
+  height: auto;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {
+  background: #e2e2e2;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,
+.mc-populated-blank-root.variant-sel-r1-s3
+  .pie-choice-horizontal.is-selected:hover
+  .pie-choice-tile {
+  background: #fcfcd3;
+}
+
+.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {
+  transform: scale(0.85);
+}

package/src/delivery/cqt-css/sel-vic.css

@@ -0,0 +1,38 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css */
+.mc-populated-blank-root.variant-sel-vic {
+  font-family: Starial, Arial, sans-serif;
+  font-size: 1.5em;
+  max-width: 800px;
+  margin-inline: auto;
+  --mpb-inline-grid-column-gap: 1rem;
+  --mpb-inline-grid-row-gap: 0.5rem;
+  --mpb-inline-template-margin-top: 0.2rem;
+  --mpb-inline-choices-margin-top: 0.2rem;
+  --pie-correct-answer-choice-hover-bg: #e2e2e2;
+  --pie-correct-answer-choice-selected-bg: #fcfcd3;
+}
+
+.mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.mc-populated-blank-root.variant-sel-vic .pie-template-line,
+.mc-populated-blank-root.variant-sel-vic .pie-blank-value,
+.mc-populated-blank-root.variant-sel-vic .pie-choice-label {
+  line-height: 123%;
+}
+
+.mc-populated-blank-root.variant-sel-vic .pie-audio-container {
+  min-height: 128px;
+}
+
+@media (min-width: 620px) {
+  .mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {
+    min-width: 620px;
+    max-width: 800px;
+    transform: translateX(-55px);
+  }
+}

package/src/delivery/cqt-css/sr-vic.css

@@ -0,0 +1,14 @@
+/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css */
+.mc-populated-blank-root.variant-sr-vic {
+  font-family: Starial, Arial, sans-serif;
+  --mpb-inline-grid-column-gap: 1rem;
+  --mpb-inline-grid-row-gap: 0.5rem;
+  --mpb-inline-template-margin-top: 0.2rem;
+  --mpb-inline-choices-margin-top: 0.2rem;
+}
+
+.mc-populated-blank-root.variant-sr-vic .pie-template-line,
+.mc-populated-blank-root.variant-sr-vic .pie-blank-value,
+.mc-populated-blank-root.variant-sr-vic .pie-choice-label {
+  line-height: 123%;
+}

package/src/delivery/variant-css-map.ts

@@ -0,0 +1,110 @@
+import selR1PlusgggCss from './cqt-css/sel-r1-plusggg.css?raw';
+import srVicCss from './cqt-css/sr-vic.css?raw';
+import selVicCss from './cqt-css/sel-vic.css?raw';
+import selR1GplusgggCss from './cqt-css/sel-r1-gplusggg.css?raw';
+import selR1GStemCss from './cqt-css/sel-r1-g-stem.css?raw';
+import selR1GgPlusCss from './cqt-css/sel-r1-gg-plus.css?raw';
+import selR1GgplusCss from './cqt-css/sel-r1-ggplus.css?raw';
+import selR1S3Css from './cqt-css/sel-r1-s3.css?raw';
+
+export type VariantCssConfig = {
+  variantId: string;
+  variantClass: string;
+  sourceUrl: string;
+  cssText: string;
+};
+
+const VARIANT_BY_CUSTOM_TYPE: Record<string, VariantCssConfig> = {
+  'sel_r1-_plusggg': {
+    variantId: 'sel-r1-plusggg',
+    variantClass: 'variant-sel-r1-plusggg',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css',
+    cssText: selR1PlusgggCss,
+  },
+  'sr-vic': {
+    variantId: 'sr-vic',
+    variantClass: 'variant-sr-vic',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css',
+    cssText: srVicCss,
+  },
+  sel_vic: {
+    variantId: 'sel-vic',
+    variantClass: 'variant-sel-vic',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css',
+    cssText: selVicCss,
+  },
+  'sel_r1-_gplusggg': {
+    variantId: 'sel-r1-gplusggg',
+    variantClass: 'variant-sel-r1-gplusggg',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css',
+    cssText: selR1GplusgggCss,
+  },
+  'sel_r1-g_plusggg': {
+    variantId: 'sel-r1-g-stem',
+    variantClass: 'variant-sel-r1-g-stem',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css',
+    cssText: selR1GStemCss,
+  },
+  'sel_r1-gg_plusggg': {
+    variantId: 'sel-r1-gg-plus',
+    variantClass: 'variant-sel-r1-gg-plus',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css',
+    cssText: selR1GgPlusCss,
+  },
+  'sel_r1-_ggplusggg': {
+    variantId: 'sel-r1-ggplus',
+    variantClass: 'variant-sel-r1-ggplus',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_ggplusggg/0.0.1/question.css',
+    cssText: selR1GgplusCss,
+  },
+  'sel_r1-s3_plusggg': {
+    variantId: 'sel-r1-s3',
+    variantClass: 'variant-sel-r1-s3',
+    sourceUrl:
+      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css',
+    cssText: selR1S3Css,
+  },
+};
+
+const normalizeCustomType = (value: unknown): string => {
+  const normalized = String(value || '')
+    .trim()
+    .toLowerCase();
+  // Accept both base custom types and version-suffixed tags like "...v0.0.1".
+  return normalized.replace(/v\d+\.\d+\.\d+$/i, '');
+};
+
+export const getVariantCssConfig = (customType: unknown): VariantCssConfig | undefined => {
+  const normalized = normalizeCustomType(customType);
+  return VARIANT_BY_CUSTOM_TYPE[normalized];
+};
+
+export const getVariantRootClass = (customType: unknown): string => {
+  return getVariantCssConfig(customType)?.variantClass || '';
+};
+
+export const ensureVariantCssInjected = (config?: VariantCssConfig): void => {
+  if (!config || !config.cssText || typeof document === 'undefined') {
+    return;
+  }
+  const styleId = `mc-populated-blank-css-${config.variantId}`;
+  const existing = document.getElementById(styleId) as HTMLStyleElement | null;
+  if (existing) {
+    if (existing.textContent !== config.cssText) {
+      existing.textContent = config.cssText;
+    }
+    return;
+  }
+  const style = document.createElement('style');
+  style.id = styleId;
+  style.setAttribute('data-mpb-variant', config.variantId);
+  style.textContent = config.cssText;
+  document.head.appendChild(style);
+};

package/src/types/css-raw.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css?raw' {
+  const css: string;
+  export default css;
+}