@pie-element/mc-populated-blank 0.2.0 → 0.2.2

package/src/delivery/McPopulatedBlank.svelte

@@ -1,6 +1,6 @@
 <svelte:options
   customElement={{
-    tag: 'mc-populated-blank-element',
+    tag: 'mc-populated-blank',
     shadow: 'none',
     props: {
       model: { type: 'Object' },
@@ -11,6 +11,7 @@
 />
 
 <script lang="ts">
+import { color } from '@pie-lib-svelte/styling';
 /** Must match controller `BLANK_TOKEN` (kept local to avoid pulling controller into delivery). */
 const BLANK_TOKEN = '{{blank}}';
 const DEFAULT_LAYOUT_LIMITS = {
@@ -34,6 +35,8 @@ const DEFAULT_LAYOUT_LIMITS = {
   horizontalChoiceRadioTopMarginRem: 0.5,
   audioBlankTemplateMarginTopRem: 0.8,
   audioBlankTemplateMarginBottomRem: 1.8,
+  audioInstructionsMaxWidthPx: 875,
+  narrowHorizontalChoiceMaxWidthPx: 230,
   stimulusGridColumnGapRem: 2,
   stimulusGridRowGapRem: 0.7,
   stimulusSentenceMarginTopRem: 0.2,
@@ -88,21 +91,29 @@ const DEFAULT_UI_TEXT = {
   listenLabelEs: 'Escuchar',
 } as const;
 
-let props = $props<{ model?: any; session?: any; options?: any }>();
+let { model, session, options } = $props<{ model?: any; session?: any; options?: any }>();
 let audioEl = $state<HTMLAudioElement | null>(null);
 let isMediaPlaying = $state(false);
 let localChoiceId = $state('');
 let autoPlayPromptOpen = $state(false);
 let autoplayAttempted = $state(false);
+let featureAudioButtonEl = $state<HTMLButtonElement | null>(null);
+let autoplayEnableButtonEl = $state<HTMLButtonElement | null>(null);
+let toggleCorrectAnswerButtonEl = $state<HTMLButtonElement | null>(null);
+let choicesGroupEl = $state<HTMLDivElement | null>(null);
 const instanceId = `mc-populated-blank-${Math.random().toString(36).slice(2, 10)}`;
 
-const isEvaluateMode = $derived(props?.model?.env?.mode === 'evaluate');
-const correctness = $derived(props?.model?.correctness);
+const deliveryMode = $derived((model?.mode || model?.env?.mode || '').toString());
+const isEvaluateMode = $derived(deliveryMode === 'evaluate');
+const correctness = $derived(model?.correctness);
+const isResponseCorrect = $derived(
+  typeof model?.responseCorrect === 'boolean' ? model.responseCorrect : correctness === 'correct'
+);
 const isCorrect = $derived(correctness === 'correct');
 const isIncorrect = $derived(correctness === 'incorrect');
-const isAudioOnlyMode = $derived(props?.model?.interactionMode === 'audio_mc_only');
+const isAudioOnlyMode = $derived(model?.interactionMode === 'audio_mc_only');
 const isBlankOnlyTemplate = $derived.by(() => {
-  const t = props?.model?.template || '';
+  const t = model?.template || '';
   if (!t) return false;
   const plain = t
     .replace(/<[^>]+>/g, '')
@@ -110,27 +121,27 @@ const isBlankOnlyTemplate = $derived.by(() => {
     .trim();
   return plain === BLANK_TOKEN;
 });
-const layoutProfile = $derived(props?.model?.layoutProfile || '');
+const layoutProfile = $derived(model?.layoutProfile || '');
 const choiceLayout = $derived(
-  props?.model?.choiceLayout || (isAudioOnlyMode || isBlankOnlyTemplate ? 'horizontal' : 'vertical')
+  model?.choiceLayout || (isAudioOnlyMode || isBlankOnlyTemplate ? 'horizontal' : 'vertical')
 );
 const isHorizontalChoices = $derived(choiceLayout === 'horizontal');
-const showVisibleTranscript = $derived(!!props?.model?.showVisibleTranscript);
-const hasPlayableAudio = $derived(!!props?.model?.hasAudio && !!props?.model?.audioUrl);
-const hasAudioButMissingResource = $derived(!!props?.model?.hasAudio && !props?.model?.audioUrl);
+const showVisibleTranscript = $derived(!!model?.showVisibleTranscript);
+const hasPlayableAudio = $derived(!!model?.hasAudio && !!model?.audioUrl);
+const hasAudioButMissingResource = $derived(!!model?.hasAudio && !model?.audioUrl);
 const hasInlineSentenceAudioLayout = $derived(
-  layoutProfile === 'inline_sentence' && !!props?.model?.hasAudio
+  layoutProfile === 'inline_sentence' && !!model?.hasAudio
 );
 const uiText = $derived.by(() => ({
   ...DEFAULT_UI_TEXT,
-  ...(props?.model?.uiText || {}),
+  ...(model?.uiText || {}),
 }));
 const profilePresetLimits = $derived.by(() => {
   const profile = String(layoutProfile || '');
   const defaults = DEFAULT_LAYOUT_PROFILE_PRESETS[profile] || {};
   const customPresets =
-    props?.model?.layoutProfilePresets && typeof props.model.layoutProfilePresets === 'object'
-      ? props.model.layoutProfilePresets
+    model?.layoutProfilePresets && typeof model.layoutProfilePresets === 'object'
+      ? model.layoutProfilePresets
       : {};
   const custom =
     customPresets[profile] && typeof customPresets[profile] === 'object'
@@ -143,15 +154,30 @@ const profilePresetLimits = $derived.by(() => {
 });
 const layoutLimits = $derived.by(() => {
   const configured =
-    props?.model?.layoutLimits && typeof props.model.layoutLimits === 'object'
-      ? props.model.layoutLimits
-      : {};
+    model?.layoutLimits && typeof model.layoutLimits === 'object' ? model.layoutLimits : {};
   return {
     ...DEFAULT_LAYOUT_LIMITS,
     ...profilePresetLimits,
     ...configured,
   };
 });
+const correctAnswerStyleVars = $derived.by(() =>
+  [
+    `--pie-correct-answer-toggle-label-color:${color.text()}`,
+    `--pie-correct-answer-toggle-icon-open-bg:${color.tertiaryLight()}`,
+    `--pie-correct-answer-toggle-icon-closed-bg:${color.backgroundDark()}`,
+    `--pie-correct-answer-toggle-icon-glyph-color:${color.tertiary()}`,
+    `--pie-correct-answer-choice-hover-bg:${color.backgroundDark()}`,
+    `--pie-correct-answer-choice-selected-bg:${color.secondaryBackground()}`,
+    `--pie-correct-answer-choice-correct-bg:${color.correctSecondary()}`,
+    `--pie-correct-answer-choice-incorrect-bg:${color.incorrectSecondary()}`,
+    `--pie-correct-answer-choice-correct-border:${color.correctTertiary()}`,
+    `--pie-correct-answer-choice-incorrect-border:${color.incorrectWithIcon()}`,
+    `--pie-correct-answer-feedback-correct-bg:${color.correctWithIcon()}`,
+    `--pie-correct-answer-feedback-incorrect-bg:${color.incorrectWithIcon()}`,
+    `--pie-correct-answer-feedback-glyph-color:${color.white()}`,
+  ].join(';')
+);
 const rootStyle = $derived.by(() =>
   [
     `--mpb-listen-button-size:${layoutLimits.listenButtonSizePx}px`,
@@ -173,6 +199,8 @@ const rootStyle = $derived.by(() =>
     `--mpb-horizontal-choice-radio-top-margin:${layoutLimits.horizontalChoiceRadioTopMarginRem}rem`,
     `--mpb-audio-blank-template-margin-top:${layoutLimits.audioBlankTemplateMarginTopRem}rem`,
     `--mpb-audio-blank-template-margin-bottom:${layoutLimits.audioBlankTemplateMarginBottomRem}rem`,
+    `--mpb-audio-instructions-max-width:${layoutLimits.audioInstructionsMaxWidthPx}px`,
+    `--mpb-narrow-choice-max-width:${layoutLimits.narrowHorizontalChoiceMaxWidthPx}px`,
     `--mpb-stimulus-grid-column-gap:${layoutLimits.stimulusGridColumnGapRem}rem`,
     `--mpb-stimulus-grid-row-gap:${layoutLimits.stimulusGridRowGapRem}rem`,
     `--mpb-stimulus-sentence-margin-top:${layoutLimits.stimulusSentenceMarginTopRem}rem`,
@@ -186,15 +214,16 @@ const rootStyle = $derived.by(() =>
     `--mpb-inline-grid-row-gap:${layoutLimits.inlineGridRowGapRem}rem`,
     `--mpb-inline-template-margin-top:${layoutLimits.inlineTemplateMarginTopRem}rem`,
     `--mpb-inline-choices-margin-top:${layoutLimits.inlineChoicesMarginTopRem}rem`,
+    correctAnswerStyleVars,
   ].join(';')
 );
 const useFeatureButtonAudio = $derived.by(() => {
-  if (typeof props?.model?.useFeatureButtonAudio === 'boolean') {
-    return !!props.model.useFeatureButtonAudio;
+  if (typeof model?.useFeatureButtonAudio === 'boolean') {
+    return !!model.useFeatureButtonAudio;
   }
   const profile = layoutProfile || '';
   return (
-    !!props?.model?.hasAudio &&
+    !!model?.hasAudio &&
     (profile === 'audio_blank_only' ||
       profile === 'stimulus_image_blank' ||
       profile === 'token_sequence')
@@ -202,7 +231,7 @@ const useFeatureButtonAudio = $derived.by(() => {
 });
 
 const templateParts = $derived.by(() => {
-  const t = props?.model?.template || '';
+  const t = model?.template || '';
   const idx = t.indexOf(BLANK_TOKEN);
   if (idx < 0) {
     return { before: t, after: '' };
@@ -228,16 +257,26 @@ const blankBorderWidth = $derived.by(() => {
   return `${layoutLimits.blankUnderlineWidthPx}px`;
 });
 
-const choices = $derived(Array.isArray(props?.model?.choices) ? props.model.choices : []);
-const choiceMode = $derived(props?.model?.choiceMode || 'text');
-const selectedId = $derived(props?.session?.choiceId || localChoiceId || '');
-const radioGroupName = $derived(`${instanceId}-choice-group-${props?.model?.id || '1'}`);
+const choices = $derived(Array.isArray(model?.choices) ? model.choices : []);
+const choiceMode = $derived(model?.choiceMode || 'text');
+const selectedId = $derived(session?.choiceId || localChoiceId || '');
+const radioGroupName = $derived(`${instanceId}-choice-group-${model?.id || '1'}`);
 
 let showCorrectAnswer = $state(false);
+const alwaysShowCorrect = $derived(
+  !!model?.alwaysShowCorrect || !!options?.alwaysShowCorrect || !!options?.addCorrectResponse
+);
+const canRevealCorrectAnswer = $derived(
+  !!model?.correctChoiceId && (isEvaluateMode || alwaysShowCorrect)
+);
+const shouldShowCorrectAnswer = $derived(alwaysShowCorrect || showCorrectAnswer);
+const shouldShowCorrectAnswerToggle = $derived(
+  isEvaluateMode && !isResponseCorrect && !!model?.correctChoiceId && !alwaysShowCorrect
+);
 
 const displayChoiceId = $derived.by(() => {
-  if (isEvaluateMode && showCorrectAnswer && props?.model?.correctChoiceId) {
-    return props.model.correctChoiceId;
+  if (canRevealCorrectAnswer && shouldShowCorrectAnswer && model?.correctChoiceId) {
+    return model.correctChoiceId;
   }
   return selectedId;
 });
@@ -245,7 +284,7 @@ const displayChoiceId = $derived.by(() => {
 const displayChoice = $derived.by(() => choices.find((c: any) => c.id === displayChoiceId));
 
 const legendText = $derived.by(() => {
-  const plain = (props?.model?.prompt || '')
+  const plain = (model?.prompt || '')
     .replace(/<[^>]+>/g, ' ')
     .replace(/\s+/g, ' ')
     .trim();
@@ -263,19 +302,25 @@ const transcriptId = $derived(`${instanceId}-transcript`);
 const legendId = $derived(`${instanceId}-choices-legend`);
 const resultId = $derived(`${instanceId}-result`);
 
-const choicesGroupLabelledBy = $derived(props?.model?.prompt ? promptId : legendId);
+const choicesGroupLabelledBy = $derived(model?.prompt ? promptId : undefined);
+const choicesGroupAriaLabel = $derived.by(() => {
+  if (model?.prompt) return undefined;
+  const explicit = String(model?.choiceGroupLabel || '').trim();
+  if (explicit) return explicit;
+  return legendText;
+});
 
 const templateDescribedBy = $derived.by(() => {
   const ids: string[] = [];
-  if (props?.model?.prompt) ids.push(promptId);
-  if (props?.model?.hasAudio && props?.model?.audioTranscript) {
+  if (model?.prompt) ids.push(promptId);
+  if (model?.hasAudio && model?.audioTranscript) {
     ids.push(transcriptId);
   }
   return ids.length ? ids.join(' ') : undefined;
 });
 
 const lang = $derived.by(() => {
-  const locale = props?.model?.locale || '';
+  const locale = model?.locale || '';
   return locale ? locale.slice(0, 2) : 'en';
 });
 const audioErrorMessage = $derived.by(() =>
@@ -283,16 +328,42 @@ const audioErrorMessage = $derived.by(() =>
 );
 
 const resultText = $derived.by(() => {
-  if (!isEvaluateMode || showCorrectAnswer) return '';
+  if (!isEvaluateMode || shouldShowCorrectAnswer) return '';
   if (isCorrect) return 'Correct answer selected';
   if (isIncorrect && selectedId) return 'Incorrect answer selected';
   return '';
 });
+const choiceCorrectnessById = $derived.by(() => {
+  const map = new Map<string, 'correct' | 'incorrect'>();
+  const correctChoiceId = String(model?.correctChoiceId || '');
+  const activeSelectedId = String(selectedId || '');
+
+  if (!isEvaluateMode || !correctChoiceId) {
+    return map;
+  }
+
+  if (shouldShowCorrectAnswer && canRevealCorrectAnswer) {
+    map.set(correctChoiceId, 'correct');
+    return map;
+  }
+
+  if (!activeSelectedId) {
+    map.set(correctChoiceId, 'incorrect');
+    return map;
+  }
+
+  if (activeSelectedId === correctChoiceId) {
+    map.set(correctChoiceId, 'correct');
+    return map;
+  }
+
+  map.set(activeSelectedId, 'incorrect');
+  map.set(correctChoiceId, 'incorrect');
+  return map;
+});
 
 function emitSession(updatedSession: any, sourceEl?: HTMLElement | null) {
-  const host =
-    (sourceEl?.closest?.('mc-populated-blank-element') as any) ||
-    (document.querySelector('mc-populated-blank-element') as any);
+  const host = getHostElement(sourceEl);
   if (host?.onSessionChange) {
     host.onSessionChange(updatedSession);
     return;
@@ -312,8 +383,8 @@ function onRadioChange(e: Event) {
   const choiceId = input.value;
   localChoiceId = choiceId;
   const updatedSession = {
-    ...props.session,
-    id: props.session?.id || props.model?.id || '1',
+    ...session,
+    id: session?.id || model?.id || '1',
     element: 'mc-populated-blank',
     choiceId,
   };
@@ -321,11 +392,18 @@ function onRadioChange(e: Event) {
 }
 
 function toggleCorrectAnswer() {
+  if (!shouldShowCorrectAnswerToggle) return;
   showCorrectAnswer = !showCorrectAnswer;
 }
 
+$effect(() => {
+  if (!isEvaluateMode || isResponseCorrect || alwaysShowCorrect) {
+    showCorrectAnswer = false;
+  }
+});
+
 function onRadioGroupKeydown(e: KeyboardEvent) {
-  if (props?.model?.disabled) return;
+  if (model?.disabled) return;
   const key = e.key;
   if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key)) return;
   e.preventDefault();
@@ -355,33 +433,48 @@ function handleEnableAutoplayClick() {
 }
 
 function onAudioPlaying(e: Event) {
-  const host = (e.currentTarget as HTMLElement)?.closest('mc-populated-blank-element') as any;
+  const host = getHostElement(e.currentTarget as HTMLElement);
   isMediaPlaying = true;
   host?.onAudioStarted?.();
   autoPlayPromptOpen = false;
 }
 
 function onAudioEnded(e: Event) {
-  const host = (e.currentTarget as HTMLElement)?.closest('mc-populated-blank-element') as any;
+  const host = getHostElement(e.currentTarget as HTMLElement);
   isMediaPlaying = false;
   host?.onAudioEnded?.();
 }
 
+function getHostElement(sourceEl?: HTMLElement | null) {
+  let cursor: HTMLElement | null | undefined = sourceEl;
+  while (cursor) {
+    const maybeHost = cursor as any;
+    if (
+      typeof maybeHost?.onSessionChange === 'function' ||
+      typeof maybeHost?.onAudioStarted === 'function' ||
+      typeof maybeHost?.onAudioEnded === 'function'
+    ) {
+      return maybeHost;
+    }
+    cursor = cursor.parentElement;
+  }
+  return (document.querySelector('mc-populated-blank') as any) || null;
+}
+
 function speechButtonLabel(locale = '') {
   return locale.toLowerCase().startsWith('es') ? uiText.listenLabelEs : uiText.listenLabelEn;
 }
 
 const featureAudioSkin = $derived.by(() => {
-  const locale = String(props?.model?.locale || '').toLowerCase();
+  const locale = String(model?.locale || '').toLowerCase();
   const lang = locale.slice(0, 2);
   const byLocale =
-    props?.model?.audioButtonSkinsByLocale &&
-    typeof props.model.audioButtonSkinsByLocale === 'object'
-      ? props.model.audioButtonSkinsByLocale
+    model?.audioButtonSkinsByLocale && typeof model.audioButtonSkinsByLocale === 'object'
+      ? model.audioButtonSkinsByLocale
       : {};
   const customSingle =
-    props?.model?.audioButtonSkin && typeof props.model.audioButtonSkin === 'object'
-      ? props.model.audioButtonSkin
+    model?.audioButtonSkin && typeof model.audioButtonSkin === 'object'
+      ? model.audioButtonSkin
       : null;
   const defaultSkin = locale.startsWith('es')
     ? DEFAULT_AUDIO_BUTTON_SKINS.es
@@ -398,17 +491,77 @@ function playFeatureAudio() {
 }
 
 $effect(() => {
-  if (props?.session?.choiceId) {
-    localChoiceId = props.session.choiceId;
+  if (session?.choiceId) {
+    localChoiceId = session.choiceId;
   }
 });
 
 $effect(() => {
-  if (!props?.model?.hasAudio || !props?.model?.autoplayAudioEnabled) return;
+  const el = audioEl;
+  if (!el) return;
+  const handlePlaying = (e: Event) => onAudioPlaying(e);
+  const handleEnded = (e: Event) => onAudioEnded(e);
+  el.addEventListener('playing', handlePlaying);
+  el.addEventListener('ended', handleEnded);
+  return () => {
+    el.removeEventListener('playing', handlePlaying);
+    el.removeEventListener('ended', handleEnded);
+  };
+});
+
+$effect(() => {
+  const btn = featureAudioButtonEl;
+  if (!btn) return;
+  const handleClick = () => playFeatureAudio();
+  btn.addEventListener('click', handleClick);
+  return () => {
+    btn.removeEventListener('click', handleClick);
+  };
+});
+
+$effect(() => {
+  const btn = autoplayEnableButtonEl;
+  if (!btn) return;
+  const handleClick = () => handleEnableAutoplayClick();
+  btn.addEventListener('click', handleClick);
+  return () => {
+    btn.removeEventListener('click', handleClick);
+  };
+});
+
+$effect(() => {
+  const btn = toggleCorrectAnswerButtonEl;
+  if (!btn) return;
+  const handleClick = () => toggleCorrectAnswer();
+  btn.addEventListener('click', handleClick);
+  return () => {
+    btn.removeEventListener('click', handleClick);
+  };
+});
+
+$effect(() => {
+  const group = choicesGroupEl;
+  if (!group) return;
+  const handleChange = (e: Event) => {
+    const target = e.target as HTMLInputElement | null;
+    if (!target || target.type !== 'radio') return;
+    onRadioChange(e);
+  };
+  const handleKeydown = (e: KeyboardEvent) => onRadioGroupKeydown(e);
+  group.addEventListener('change', handleChange);
+  group.addEventListener('keydown', handleKeydown);
+  return () => {
+    group.removeEventListener('change', handleChange);
+    group.removeEventListener('keydown', handleKeydown);
+  };
+});
+
+$effect(() => {
+  if (!model?.hasAudio || !model?.autoplayAudioEnabled) return;
   if (autoplayAttempted) return;
 
   autoplayAttempted = true;
-  if (audioEl && props?.model?.audioUrl) {
+  if (audioEl && model?.audioUrl) {
     // Browser autoplay restrictions vary. Try immediate play; if blocked show click-to-enable affordance.
     audioEl.play().catch(() => {
       autoPlayPromptOpen = true;
@@ -422,28 +575,94 @@ $effect(() => {
   lang={lang}
   style={rootStyle}
 >
-  {#if props?.model?.prompt}
-    <div class="mb-4 prose pie-prompt" id={promptId}>{@html props.model.prompt}</div>
+  {#if model?.prompt}
+    <div class="mb-4 prose pie-prompt" id={promptId}>{@html model.prompt}</div>
+  {/if}
+
+  {#if shouldShowCorrectAnswerToggle}
+    <div class="pie-correct-answer-toggle-row">
+      <button
+        bind:this={toggleCorrectAnswerButtonEl}
+        type="button"
+        class="mb-3 pie-toggle-correct-answer"
+        style="gap:var(--mpb-toggle-button-gap, 0.5rem);"
+        aria-pressed={shouldShowCorrectAnswer}
+        data-testid="show-correct-answer"
+      >
+        <span class="pie-correct-answer-toggle-content">
+          <span class="pie-correct-answer-toggle-icon-holder" aria-hidden="true">
+            {#if shouldShowCorrectAnswer}
+              <svg
+                class="pie-correct-answer-toggle-svg"
+                preserveAspectRatio="xMinYMin meet"
+                version="1.1"
+                viewBox="-283 359 34 35"
+              >
+                <circle cx="-266" cy="375.9" r="14" fill="var(--pie-correct-answer-toggle-icon-open-bg, #bce2ff)" />
+                <path
+                  d="M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z"
+                  fill="var(--pie-correct-answer-toggle-icon-open-bg, #bce2ff)"
+                />
+                <polygon
+                  points="-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6"
+                  fill="var(--pie-correct-answer-toggle-icon-glyph-color, #1a9cff)"
+                />
+              </svg>
+            {:else}
+              <svg
+                class="pie-correct-answer-toggle-svg"
+                preserveAspectRatio="xMinYMin meet"
+                version="1.1"
+                viewBox="-129.5 127 34 35"
+              >
+                <path
+                  d="M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5 C-97.4,153.5-104.3,160.4-112.9,160.4z"
+                  fill="#D0CAC5"
+                  stroke="#E6E3E0"
+                  stroke-width="0.75"
+                />
+                <path
+                  d="M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
+                  fill="#B3ABA4"
+                  stroke="#CDC7C2"
+                  stroke-width="0.5"
+                />
+                <circle cx="-114.2" cy="143.5" r="14" fill="white" />
+                <path
+                  d="M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z"
+                  fill="var(--pie-correct-answer-toggle-icon-closed-bg, #bce2ff)"
+                />
+                <polygon
+                  points="-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2"
+                  fill="var(--pie-correct-answer-toggle-icon-glyph-color, #1a9cff)"
+                />
+              </svg>
+            {/if}
+          </span>
+          <span class="pie-correct-answer-toggle-label">
+            {shouldShowCorrectAnswer ? uiText.hideCorrectAnswer : uiText.showCorrectAnswer}
+          </span>
+        </span>
+      </button>
+    </div>
   {/if}
 
-  {#if props?.model?.hasAudio}
+  {#if model?.hasAudio}
     <div class="mb-4 audio-container pie-audio-container">
       {#if hasPlayableAudio && useFeatureButtonAudio}
         <audio
           bind:this={audioEl}
           class="sr-only pie-audio-player"
           preload="metadata"
-          src={props.model.audioUrl}
+          src={model.audioUrl}
           aria-hidden="true"
           tabindex="-1"
-          on:playing={onAudioPlaying}
-          on:ended={onAudioEnded}
         ></audio>
         <button
+          bind:this={featureAudioButtonEl}
           class="listen-button pie-listen-button rli-feature-audio"
           type="button"
-          aria-label={speechButtonLabel(props?.model?.locale)}
-          on:click={playFeatureAudio}
+          aria-label={speechButtonLabel(model?.locale)}
         >
           <img
             class={`listen-feature-icon pie-listen-icon rli-feature-listen ${isMediaPlaying ? '' : 'listen-active'}`}
@@ -464,18 +683,16 @@ $effect(() => {
           controls
           class="w-full max-w-md pie-audio-player"
           preload="metadata"
-          src={props.model.audioUrl}
-          aria-describedby={props?.model?.audioTranscript ? transcriptId : undefined}
-          on:playing={onAudioPlaying}
-          on:ended={onAudioEnded}
+          src={model.audioUrl}
+          aria-describedby={model?.audioTranscript ? transcriptId : undefined}
         >
           <track kind="captions" />
         </audio>
         {#if autoPlayPromptOpen}
           <button
+            bind:this={autoplayEnableButtonEl}
             class="mt-2 text-sm underline pie-audio-autoplay-enable"
             type="button"
-            on:click={handleEnableAutoplayClick}
           >
             {uiText.clickToEnableAutoplay}
           </button>
@@ -483,20 +700,20 @@ $effect(() => {
       {:else if hasAudioButMissingResource}
         <p class="text-sm text-red-700 pie-audio-error" role="alert">{audioErrorMessage}</p>
       {/if}
-      {#if props?.model?.audioTranscript}
+      {#if model?.audioTranscript}
         <p
           class={`text-sm mt-2 text-gray-700 pie-audio-transcript ${showVisibleTranscript ? '' : 'sr-only'}`}
           id={transcriptId}
         >
-          <strong>{uiText.transcriptLabel}:</strong> {props.model.audioTranscript}
+          <strong>{uiText.transcriptLabel}:</strong> {model.audioTranscript}
         </p>
       {/if}
     </div>
   {/if}
 
-  {#if props?.model?.sentenceHtml}
+  {#if model?.sentenceHtml}
     <div class="mb-3 prose prose-p:my-1 sentence-line pie-sentence-line" aria-describedby={templateDescribedBy}>
-      {@html props.model.sentenceHtml}
+      {@html model.sentenceHtml}
     </div>
   {/if}
 
@@ -528,37 +745,26 @@ $effect(() => {
     </div>
   {/if}
 
-  {#if isEvaluateMode && isIncorrect}
-    <button
-      type="button"
-      class="mb-3 flex items-center cursor-pointer select-none pie-toggle-correct-answer"
-      style="gap:var(--mpb-toggle-button-gap, 0.5rem);"
-      on:click={toggleCorrectAnswer}
-      aria-pressed={showCorrectAnswer}
-    >
-      <span class="text-sm hover:underline">
-        {showCorrectAnswer ? uiText.hideCorrectAnswer : uiText.showCorrectAnswer}
-      </span>
-    </button>
-  {/if}
   {#if resultText}
     <p id={resultId} class="sr-only pie-result-feedback" role="status" aria-live="polite">{resultText}</p>
   {/if}
 
-  <fieldset class="border-0 p-0 m-0 pie-choices-fieldset" disabled={props?.model?.disabled}>
+  <fieldset class="border-0 p-0 m-0 pie-choices-fieldset" disabled={model?.disabled}>
     <legend class="sr-only pie-choices-legend" id={legendId}>{legendText}</legend>
     <div
+      bind:this={choicesGroupEl}
       class={`pie-choices ${isHorizontalChoices ? 'flex flex-row flex-wrap items-start justify-center' : 'flex flex-col'}`}
       style="gap:var(--mpb-choice-group-gap, 0.5rem);"
       role="radiogroup"
       tabindex="-1"
       aria-labelledby={choicesGroupLabelledBy}
+      aria-label={choicesGroupAriaLabel}
       aria-describedby={resultText ? resultId : undefined}
-      on:keydown={onRadioGroupKeydown}
     >
       {#each choices as c (c.id)}
+        {@const choiceCorrectness = choiceCorrectnessById.get(c.id)}
         <div
-          class={`flex items-start choice-row pie-choice ${isHorizontalChoices ? 'choice-row-horizontal pie-choice-horizontal' : ''} ${((showCorrectAnswer && isEvaluateMode ? props?.model?.correctChoiceId : selectedId) === c.id) ? 'is-selected pie-choice-selected' : ''}`}
+          class={`flex items-start choice-row pie-choice ${isHorizontalChoices ? 'choice-row-horizontal pie-choice-horizontal' : ''} ${((shouldShowCorrectAnswer && canRevealCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id) ? 'is-selected pie-choice-selected' : ''} ${choiceCorrectness ? `choice-${choiceCorrectness} pie-choice-${choiceCorrectness}` : ''}`}
           style="gap:var(--mpb-choice-row-gap, 0.5rem);"
         >
           {#if isHorizontalChoices}
@@ -584,10 +790,9 @@ $effect(() => {
                 id={`${instanceId}-opt-${c.id}`}
                 value={c.id}
                 checked={
-                  (showCorrectAnswer && isEvaluateMode ? props?.model?.correctChoiceId : selectedId) === c.id
+                  (shouldShowCorrectAnswer && canRevealCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id
                 }
-                disabled={props?.model?.disabled}
-                on:change={onRadioChange}
+                disabled={model?.disabled}
                 class="choice-radio-bottom pie-choice-radio pie-choice-radio-bottom"
               />
             </label>
@@ -598,10 +803,9 @@ $effect(() => {
               id={`${instanceId}-opt-${c.id}`}
               value={c.id}
               checked={
-                (showCorrectAnswer && isEvaluateMode ? props?.model?.correctChoiceId : selectedId) === c.id
+                (shouldShowCorrectAnswer && canRevealCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id
               }
-              disabled={props?.model?.disabled}
-              on:change={onRadioChange}
+              disabled={model?.disabled}
               class="choice-radio-inline pie-choice-radio pie-choice-radio-inline"
             />
             <label for={`${instanceId}-opt-${c.id}`} class="cursor-pointer flex-1 pie-choice-label-wrap">
@@ -617,16 +821,13 @@ $effect(() => {
               {/if}
             </label>
           {/if}
-          {#if isEvaluateMode && !showCorrectAnswer}
-            {#if selectedId === c.id && isCorrect}
-              <span class="text-green-600 text-sm font-medium pie-choice-feedback-correct" aria-hidden="true">
-                ✓
-              </span>
-            {:else if selectedId === c.id && isIncorrect}
-              <span class="text-red-600 text-sm font-medium pie-choice-feedback-incorrect" aria-hidden="true">
-                ✗
-              </span>
-            {/if}
+          {#if isEvaluateMode && choiceCorrectness}
+            <span
+              class={`pie-choice-feedback-badge ${choiceCorrectness === 'correct' ? 'pie-choice-feedback-correct' : 'pie-choice-feedback-incorrect'}`}
+              aria-hidden="true"
+            >
+              {choiceCorrectness === 'correct' ? '✓' : '✕'}
+            </span>
           {/if}
         </div>
       {/each}
@@ -664,6 +865,57 @@ $effect(() => {
     vertical-align: baseline;
   }
 
+  .pie-toggle-correct-answer {
+    width: 100%;
+    cursor: pointer;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    color: var(--pie-correct-answer-toggle-label-color, var(--pie-text, black));
+  }
+
+  .pie-correct-answer-toggle-row {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .pie-correct-answer-toggle-content {
+    display: flex;
+    margin: 0 auto;
+    align-items: center;
+  }
+
+  .pie-correct-answer-toggle-icon-holder {
+    width: 25px;
+    margin-right: 5px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pie-correct-answer-toggle-svg {
+    width: 25px;
+    height: 25px;
+  }
+
+  .pie-correct-answer-toggle-label {
+    width: fit-content;
+    min-width: 140px;
+    align-self: center;
+    vertical-align: middle;
+    font-weight: 400;
+    user-select: none;
+  }
+
+  .pie-toggle-correct-answer:hover .pie-correct-answer-toggle-label,
+  .pie-toggle-correct-answer:focus-visible .pie-correct-answer-toggle-label {
+    text-decoration: underline;
+  }
+
   .template-line {
     white-space: pre-wrap;
   }
@@ -735,15 +987,53 @@ $effect(() => {
   }
 
   .choice-row-horizontal:hover .choice-tile {
-    background: #ececec;
+    background: var(--pie-correct-answer-choice-hover-bg, #ececec);
   }
 
   .choice-row-horizontal.is-selected .choice-tile {
-    background: #eceabf;
+    background: var(--pie-correct-answer-choice-selected-bg, #f1f1f1);
   }
 
   .choice-row-horizontal.is-selected:hover .choice-tile {
-    background: #eceabf;
+    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);
+  }
+
+  .pie-choice.choice-incorrect {
+    border-left: 3px solid var(--pie-correct-answer-choice-incorrect-border, #bf0d00);
+  }
+
+  .pie-choice-horizontal.choice-correct .choice-tile {
+    background: var(--pie-correct-answer-choice-correct-bg, #e8f5e9);
+  }
+
+  .pie-choice-horizontal.choice-incorrect .choice-tile {
+    background: var(--pie-correct-answer-choice-incorrect-bg, #ffebee);
+  }
+
+  .pie-choice-feedback-badge {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.1rem;
+    height: 1.1rem;
+    border-radius: 9999px;
+    font-size: 0.72rem;
+    line-height: 1;
+    font-weight: 700;
+    color: var(--pie-correct-answer-feedback-glyph-color, #fff);
+  }
+
+  .pie-choice-feedback-correct {
+    background: var(--pie-correct-answer-feedback-correct-bg, #087d38);
+  }
+
+  .pie-choice-feedback-incorrect {
+    background: var(--pie-correct-answer-feedback-incorrect-bg, #bf0d00);
   }
 
   .choice-row-horizontal :global(p) {
@@ -775,6 +1065,9 @@ $effect(() => {
   .layout-audio_blank_only .audio-container,
   .layout-stimulus_image_blank .audio-container {
     display: flex;
+    width: min(100%, var(--mpb-audio-instructions-max-width, 875px));
+    margin-left: auto;
+    margin-right: auto;
     justify-content: flex-end;
   }
 
@@ -892,4 +1185,36 @@ $effect(() => {
     grid-area: choices;
     margin-top: var(--mpb-inline-choices-margin-top, 0.25rem);
   }
+
+  /* Match Learnosity responsive behavior for CQT audio-blank layouts:
+     at smaller widths, audio control shifts left and answer tiles stack. */
+  @media (max-width: 760px) {
+    .layout-audio_blank_only .audio-container,
+    .layout-stimulus_image_blank .audio-container,
+    .layout-token_sequence .audio-container,
+    .layout-inline_sentence.has-inline-audio .audio-container {
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      justify-content: flex-start;
+      justify-self: start;
+    }
+
+    .layout-audio_blank_only .pie-choices,
+    .layout-token_sequence .pie-choices,
+    .layout-stimulus_image_blank .pie-choices,
+    .layout-inline_sentence.has-inline-audio .pie-choices {
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+    }
+
+    .layout-audio_blank_only .choice-row-horizontal,
+    .layout-token_sequence .choice-row-horizontal,
+    .layout-stimulus_image_blank .choice-row-horizontal,
+    .layout-inline_sentence.has-inline-audio .choice-row-horizontal {
+      width: min(100%, var(--mpb-narrow-choice-max-width, 230px));
+      align-items: flex-start;
+    }
+  }
 </style>