@pie-element/mc-populated-blank 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/mc-populated-blank",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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

@@ -81,6 +81,8 @@ export const createDefaultModel = (model: any = {}) => ({
   },
 });
 
+export const normalize = (question: any = {}) => createDefaultModel(question);
+
 export const normalizeSession = (s: any) => ({ ...s });
 
 const shouldShuffleChoices = (question: any) => !!question?.shuffle;
@@ -150,8 +152,9 @@ const getOrderedChoices = async (question: any, session: any, env: any, updateSe
 
 export const model = async (question: any, session: any, env: any, updateSession?: any) => {
   session = session || {};
-  const normalizedQuestion = createDefaultModel(question);
-  const choices = await getOrderedChoices(normalizedQuestion, session, env, updateSession);
+  const safeEnv = env || {};
+  const normalizedQuestion = normalize(question);
+  const choices = await getOrderedChoices(normalizedQuestion, session, safeEnv, updateSession);
 
   const out: any = {
     prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
@@ -192,19 +195,18 @@ export const model = async (question: any, session: any, env: any, updateSession
         ? normalizedQuestion.useFeatureButtonAudio
         : undefined,
     locale: normalizedQuestion.locale || '',
-    disabled: env.mode !== 'gather',
-    view: env.mode === 'view',
-    mode: env.mode,
+    disabled: safeEnv.mode !== 'gather',
+    mode: safeEnv.mode,
   };
 
-  if (env.mode === 'evaluate') {
+  if (safeEnv.mode === 'evaluate') {
     const correctness = getCorrectness(normalizedQuestion, session);
     out.correctness = correctness;
     out.responseCorrect = correctness === 'correct';
     out.correctChoiceId = normalizedQuestion.correctChoiceId;
   }
 
-  if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+  if (safeEnv.role === 'instructor' && (safeEnv.mode === 'view' || safeEnv.mode === 'evaluate')) {
     out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
       ? normalizedQuestion.teacherInstructions
       : null;

package/src/delivery/McPopulatedBlank.svelte

@@ -91,7 +91,7 @@ const DEFAULT_UI_TEXT = {
   listenLabelEs: 'Escuchar',
 } as const;
 
-let { model, session, options } = $props<{ model?: any; session?: any; options?: any }>();
+let { model, session } = $props<{ model?: any; session?: any; options?: any }>();
 let audioEl = $state<HTMLAudioElement | null>(null);
 let isMediaPlaying = $state(false);
 let localChoiceId = $state('');
@@ -263,19 +263,12 @@ 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
+  isEvaluateMode && !isResponseCorrect && !!model?.correctChoiceId
 );
 
 const displayChoiceId = $derived.by(() => {
-  if (canRevealCorrectAnswer && shouldShowCorrectAnswer && model?.correctChoiceId) {
+  if (isEvaluateMode && showCorrectAnswer && model?.correctChoiceId) {
     return model.correctChoiceId;
   }
   return selectedId;
@@ -328,7 +321,7 @@ const audioErrorMessage = $derived.by(() =>
 );
 
 const resultText = $derived.by(() => {
-  if (!isEvaluateMode || shouldShowCorrectAnswer) return '';
+  if (!isEvaluateMode || showCorrectAnswer) return '';
   if (isCorrect) return 'Correct answer selected';
   if (isIncorrect && selectedId) return 'Incorrect answer selected';
   return '';
@@ -342,8 +335,18 @@ const choiceCorrectnessById = $derived.by(() => {
     return map;
   }
 
-  if (shouldShowCorrectAnswer && canRevealCorrectAnswer) {
-    map.set(correctChoiceId, 'correct');
+  if (showCorrectAnswer) {
+    // In reveal mode we still reflect learner correctness:
+    // if learner did not select the correct choice (or selected nothing),
+    // keep the correct option marked incorrect.
+    if (activeSelectedId === correctChoiceId) {
+      map.set(correctChoiceId, 'correct');
+      return map;
+    }
+    if (activeSelectedId) {
+      map.set(activeSelectedId, 'incorrect');
+    }
+    map.set(correctChoiceId, 'incorrect');
     return map;
   }
 
@@ -397,7 +400,7 @@ function toggleCorrectAnswer() {
 }
 
 $effect(() => {
-  if (!isEvaluateMode || isResponseCorrect || alwaysShowCorrect) {
+  if (!isEvaluateMode || isResponseCorrect) {
     showCorrectAnswer = false;
   }
 });
@@ -586,12 +589,12 @@ $effect(() => {
         type="button"
         class="mb-3 pie-toggle-correct-answer"
         style="gap:var(--mpb-toggle-button-gap, 0.5rem);"
-        aria-pressed={shouldShowCorrectAnswer}
+        aria-pressed={showCorrectAnswer}
         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}
+            {#if showCorrectAnswer}
               <svg
                 class="pie-correct-answer-toggle-svg"
                 preserveAspectRatio="xMinYMin meet"
@@ -640,7 +643,7 @@ $effect(() => {
             {/if}
           </span>
           <span class="pie-correct-answer-toggle-label">
-            {shouldShowCorrectAnswer ? uiText.hideCorrectAnswer : uiText.showCorrectAnswer}
+            {showCorrectAnswer ? uiText.hideCorrectAnswer : uiText.showCorrectAnswer}
           </span>
         </span>
       </button>
@@ -764,7 +767,7 @@ $effect(() => {
       {#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' : ''} ${((shouldShowCorrectAnswer && canRevealCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id) ? 'is-selected pie-choice-selected' : ''} ${choiceCorrectness ? `choice-${choiceCorrectness} pie-choice-${choiceCorrectness}` : ''}`}
+          class={`flex items-start choice-row pie-choice ${isHorizontalChoices ? 'choice-row-horizontal pie-choice-horizontal' : ''} ${((showCorrectAnswer ? 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}
@@ -790,7 +793,7 @@ $effect(() => {
                 id={`${instanceId}-opt-${c.id}`}
                 value={c.id}
                 checked={
-                  (shouldShowCorrectAnswer && canRevealCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id
+                  (showCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id
                 }
                 disabled={model?.disabled}
                 class="choice-radio-bottom pie-choice-radio pie-choice-radio-bottom"
@@ -803,7 +806,7 @@ $effect(() => {
               id={`${instanceId}-opt-${c.id}`}
               value={c.id}
               checked={
-                (shouldShowCorrectAnswer && canRevealCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id
+                (showCorrectAnswer ? model?.correctChoiceId : selectedId) === c.id
               }
               disabled={model?.disabled}
               class="choice-radio-inline pie-choice-radio pie-choice-radio-inline"

package/src/index.iife.ts

@@ -3,5 +3,7 @@
  * Registration is handled by PIE players/loaders, not by the element bundle itself.
  */
 import Element from './delivery';
+import * as controller from './controller';
 
+export { controller };
 export default Element;

package/src/index.ts

@@ -1 +1,2 @@
 export { default } from './delivery/index';
+export * as controller from './controller/index';