@pie-element/mc-populated-blank 0.2.11 → 0.2.12

package/src/delivery/McPopulatedBlank.transcript.test.ts

@@ -1,154 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { mount, unmount, flushSync } from 'svelte';
-import McPopulatedBlank from './McPopulatedBlank.svelte';
-
-const BASE_MODEL = {
-  id: '1',
-  element: 'mc-populated-blank',
-  template: '<p>{{blank}}</p>',
-  choiceMode: 'text',
-  choices: [
-    { id: 'a', labelHtml: 'louk' },
-    { id: 'b', labelHtml: 'lok' },
-    { id: 'c', labelHtml: 'look' },
-  ],
-  correctChoiceId: 'c',
-  hasAudio: true,
-  audioUrl: 'https://example.com/audio.mp3',
-  audioTranscript: 'The word is look. Pick the correct spelling of the word look.',
-  interactionMode: 'populate_blank',
-  sentenceHtml: '',
-  layoutProfile: 'audio_blank_only',
-  customType: 'sel_r1-_plusggg',
-  useFeatureButtonAudio: true,
-  choiceLayout: 'horizontal',
-  autoplayAudioEnabled: false,
-  completeAudioEnabled: false,
-  showVisibleTranscript: false,
-  mode: 'gather',
-};
-
-function mountComponent(modelOverrides: Record<string, unknown> = {}) {
-  const target = document.createElement('div');
-  document.body.appendChild(target);
-  const component = mount(McPopulatedBlank as any, {
-    target,
-    props: { model: { ...BASE_MODEL, ...modelOverrides }, session: {} },
-  });
-  return { target, component };
-}
-
-const mounts: Array<{ target: HTMLElement; component: ReturnType<typeof mount> }> = [];
-
-afterEach(() => {
-  for (const { target, component } of mounts.splice(0)) {
-    unmount(component);
-    target.remove();
-  }
-});
-
-describe('McPopulatedBlank — transcript rendering', () => {
-  it('renders transcript in the DOM when audioTranscript is set', () => {
-    const { target, component } = mountComponent();
-    mounts.push({ target, component });
-    flushSync();
-    expect(target.querySelector('.pie-audio-transcript')).not.toBeNull();
-  });
-
-  it('hides transcript with sr-only when showVisibleTranscript is false', () => {
-    const { target, component } = mountComponent({ showVisibleTranscript: false });
-    mounts.push({ target, component });
-    flushSync();
-    const transcript = target.querySelector('.pie-audio-transcript');
-    expect(transcript?.classList.contains('sr-only')).toBe(true);
-  });
-
-  it('shows transcript without sr-only when ancestor has rli-with-audio-transcript class', async () => {
-    const wrapper = document.createElement('div');
-    document.body.appendChild(wrapper);
-    const target = document.createElement('div');
-    wrapper.appendChild(target);
-    const component = mount(McPopulatedBlank as any, {
-      target,
-      props: { model: { ...BASE_MODEL }, session: {} },
-    });
-    mounts.push({ target, component });
-    flushSync();
-
-    wrapper.classList.add('rli-with-audio-transcript');
-    await new Promise((r) => setTimeout(r, 0));
-    flushSync();
-
-    const transcript = target.querySelector('.pie-audio-transcript');
-    expect(transcript?.classList.contains('sr-only')).toBe(false);
-    wrapper.remove();
-  });
-
-  it('transcript text has no label prefix', async () => {
-    const wrapper = document.createElement('div');
-    document.body.appendChild(wrapper);
-    const target = document.createElement('div');
-    wrapper.appendChild(target);
-    const component = mount(McPopulatedBlank as any, {
-      target,
-      props: { model: { ...BASE_MODEL }, session: {} },
-    });
-    mounts.push({ target, component });
-    flushSync();
-
-    wrapper.classList.add('rli-with-audio-transcript');
-    await new Promise((r) => setTimeout(r, 0));
-    flushSync();
-
-    const transcript = target.querySelector('.pie-audio-transcript');
-    expect(transcript?.textContent?.trim()).not.toMatch(/^Transcript:/i);
-    wrapper.remove();
-  });
-
-  it('transcript contains the audioTranscript text', () => {
-    const { target, component } = mountComponent();
-    mounts.push({ target, component });
-    flushSync();
-    const transcript = target.querySelector('.pie-audio-transcript');
-    expect(transcript?.textContent).toContain(BASE_MODEL.audioTranscript);
-  });
-
-  it('omits transcript element when audioTranscript is empty', () => {
-    const { target, component } = mountComponent({ audioTranscript: '' });
-    mounts.push({ target, component });
-    flushSync();
-    expect(target.querySelector('.pie-audio-transcript')).toBeNull();
-  });
-
-  it('transcript renders before the first choice tile', () => {
-    const { target, component } = mountComponent();
-    mounts.push({ target, component });
-    flushSync();
-    const all = Array.from(target.querySelectorAll('.pie-audio-transcript, .pie-choice'));
-    expect(all[0].classList.contains('pie-audio-transcript')).toBe(true);
-  });
-
-  it('shows transcript when ancestor gains rli-with-audio-transcript class', async () => {
-    const wrapper = document.createElement('div');
-    document.body.appendChild(wrapper);
-    const target = document.createElement('div');
-    wrapper.appendChild(target);
-    const component = mount(McPopulatedBlank as any, {
-      target,
-      props: { model: { ...BASE_MODEL, showVisibleTranscript: false }, session: {} },
-    });
-    mounts.push({ target, component });
-    flushSync();
-
-    const transcript = target.querySelector('.pie-audio-transcript');
-    expect(transcript?.classList.contains('sr-only')).toBe(true);
-
-    wrapper.classList.add('rli-with-audio-transcript');
-    // Allow MutationObserver microtask to fire
-    await new Promise((r) => setTimeout(r, 0));
-    flushSync();
-
-    expect(transcript?.classList.contains('sr-only')).toBe(false);
-    wrapper.remove();
-  });
-});

package/src/delivery/computeAudioMode.test.ts

@@ -1,40 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { computeAudioMode } from './computeAudioMode';
-
-describe('computeAudioMode', () => {
-  it('C1: no audio → none regardless of audioUrl', () => {
-    expect(
-      computeAudioMode({
-        hasAudio: false,
-        audioUrl: 'http://example.com/a.mp3',
-        useFeatureButtonAudio: true,
-      })
-    ).toBe('none');
-  });
-
-  it('C2: audio enabled but no audioUrl → error', () => {
-    expect(
-      computeAudioMode({ hasAudio: true, audioUrl: undefined, useFeatureButtonAudio: false })
-    ).toBe('error');
-  });
-
-  it('C3: audio enabled, url present, feature button → feature-button', () => {
-    expect(
-      computeAudioMode({
-        hasAudio: true,
-        audioUrl: 'http://example.com/a.mp3',
-        useFeatureButtonAudio: true,
-      })
-    ).toBe('feature-button');
-  });
-
-  it('C4: audio enabled, url present, no feature button → controls', () => {
-    expect(
-      computeAudioMode({
-        hasAudio: true,
-        audioUrl: 'http://example.com/a.mp3',
-        useFeatureButtonAudio: false,
-      })
-    ).toBe('controls');
-  });
-});

package/src/delivery/computeAudioMode.ts

@@ -1,11 +0,0 @@
-export type AudioMode = 'feature-button' | 'controls' | 'error' | 'none';
-
-export function computeAudioMode(params: {
-  hasAudio: boolean;
-  audioUrl: string | undefined;
-  useFeatureButtonAudio: boolean;
-}): AudioMode {
-  if (!params.hasAudio) return 'none';
-  if (!params.audioUrl) return 'error';
-  return params.useFeatureButtonAudio ? 'feature-button' : 'controls';
-}

package/src/delivery/computeChoiceCorrectness.test.ts

@@ -1,120 +0,0 @@
-/**
- * Unit tests for computeChoiceCorrectness.
- *
- * This is the harness for extracting the choiceCorrectnessById state machine
- * from McPopulatedBlank.svelte. The function takes five pure inputs and returns
- * a Map — no component rendering required.
- *
- * Cases:
- *   C1. Not evaluate mode → empty map
- *   C2. Evaluate mode, no correctChoiceId → empty map
- *   C3. Reveal active, student chose correctly → { correctId: 'correct' } only
- *   C4. Reveal active, student chose wrong → { correctId: 'correct' } only (student badge suppressed)
- *   C5. Evaluate, unanswered → { correctId: 'incorrect' }
- *   C6. Evaluate, student chose correctly → { correctId: 'correct' }
- *   C7. Evaluate, student chose wrong → { studentId: 'incorrect', correctId: 'incorrect' }
- *   C8. Empty-string ids treated as "no selection" → C5 path, not C7
- */
-
-import { describe, expect, it } from 'vitest';
-import { computeChoiceCorrectness } from './computeChoiceCorrectness';
-
-describe('computeChoiceCorrectness', () => {
-  // C1 — not in evaluate mode: no badges regardless of selection
-  it('C1: returns empty map when not in evaluate mode', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: false,
-      correctChoiceId: 'choice-a',
-      selectedId: 'choice-b',
-      showCorrectAnswer: false,
-    });
-    expect(result.size).toBe(0);
-  });
-
-  // C2 — evaluate mode but no correct answer defined: nothing to badge
-  it('C2: returns empty map when correctChoiceId is absent', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: '',
-      selectedId: 'choice-b',
-      showCorrectAnswer: false,
-    });
-    expect(result.size).toBe(0);
-  });
-
-  // C3 — reveal active, student answered correctly: only the correct badge
-  it('C3: reveal active + correct selection → correct badge on correct choice only', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: 'choice-a',
-      selectedId: 'choice-a',
-      showCorrectAnswer: true,
-    });
-    expect(result.size).toBe(1);
-    expect(result.get('choice-a')).toBe('correct');
-  });
-
-  // C4 — reveal active, student chose wrong: correct badge only, student's badge suppressed
-  it('C4: reveal active + wrong selection → correct badge only, student choice suppressed', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: 'choice-a',
-      selectedId: 'choice-b',
-      showCorrectAnswer: true,
-    });
-    expect(result.size).toBe(1);
-    expect(result.get('choice-a')).toBe('correct');
-    expect(result.has('choice-b')).toBe(false);
-  });
-
-  // C5 — evaluate mode, student did not answer: flag the correct choice as missed
-  it('C5: unanswered in evaluate mode → correct choice marked incorrect (missed)', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: 'choice-a',
-      selectedId: '',
-      showCorrectAnswer: false,
-    });
-    expect(result.size).toBe(1);
-    expect(result.get('choice-a')).toBe('incorrect');
-  });
-
-  // C6 — evaluate mode, student chose the right answer
-  it('C6: correct selection in evaluate mode → correct badge on correct choice', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: 'choice-a',
-      selectedId: 'choice-a',
-      showCorrectAnswer: false,
-    });
-    expect(result.size).toBe(1);
-    expect(result.get('choice-a')).toBe('correct');
-  });
-
-  // C7 — evaluate mode, student chose the wrong answer: both choices badged incorrect
-  it('C7: wrong selection in evaluate mode → student choice and correct choice both marked incorrect', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: 'choice-a',
-      selectedId: 'choice-b',
-      showCorrectAnswer: false,
-    });
-    expect(result.size).toBe(2);
-    expect(result.get('choice-b')).toBe('incorrect');
-    expect(result.get('choice-a')).toBe('incorrect');
-  });
-
-  // C8 — both ids are empty strings: empty selectedId is "no selection", not a wrong answer
-  it('C8: empty-string selectedId is treated as unanswered (C5 path), not wrong answer (C7 path)', () => {
-    const result = computeChoiceCorrectness({
-      isEvaluateMode: true,
-      correctChoiceId: 'choice-a',
-      selectedId: '',
-      showCorrectAnswer: false,
-    });
-    // Must be C5 (size 1, correct choice marked incorrect) not C7 (size 2)
-    expect(result.size).toBe(1);
-    expect(result.get('choice-a')).toBe('incorrect');
-    expect(result.has('')).toBe(false);
-  });
-});

package/src/delivery/computeChoiceCorrectness.ts

@@ -1,42 +0,0 @@
-export interface ChoiceCorrectnessParams {
-  isEvaluateMode: boolean;
-  correctChoiceId: string;
-  selectedId: string;
-  showCorrectAnswer: boolean;
-}
-
-/**
- * Computes which choice ids should display a correctness badge and what kind.
- *
- * Reveal mode (showCorrectAnswer=true) shows only the canonical correct answer —
- * the student's wrong selection is deliberately suppressed so the UI only
- * highlights what to remember, not what to regret.
- *
- * Unanswered-in-evaluate (selectedId='') treats the correct choice as missed
- * (incorrect badge) rather than triggering the two-badge wrong-answer path.
- */
-export function computeChoiceCorrectness(
-  params: ChoiceCorrectnessParams
-): Map<string, 'correct' | 'incorrect'> {
-  const map = new Map<string, 'correct' | 'incorrect'>();
-  const { isEvaluateMode, correctChoiceId, selectedId, showCorrectAnswer } = params;
-
-  if (!isEvaluateMode || !correctChoiceId) {
-    return map;
-  }
-  if (showCorrectAnswer) {
-    map.set(correctChoiceId, 'correct');
-    return map;
-  }
-  if (!selectedId) {
-    map.set(correctChoiceId, 'incorrect');
-    return map;
-  }
-  if (selectedId === correctChoiceId) {
-    map.set(correctChoiceId, 'correct');
-    return map;
-  }
-  map.set(selectedId, 'incorrect');
-  map.set(correctChoiceId, 'incorrect');
-  return map;
-}

package/src/delivery/computeDisplayState.test.ts

@@ -1,274 +0,0 @@
-/**
- * Unit tests for computeDisplayState.
- *
- * computeFeatureAudioSkin
- *   A1. No locale, no overrides → default English skin
- *   A2. Spanish locale (es-MX) → built-in es skin
- *   A3. Exact locale match in byLocale → that skin
- *   A4. No exact match, lang prefix match (es) → lang skin
- *   A5. byLocale.default when no locale/lang match → byLocale.default skin
- *   A6. customSingle fallback when byLocale empty → customSingle
- *   A7. byLocale.default wins over customSingle
- *
- * computeDisplayChoiceId
- *   D1. Normal gather: returns selectedId
- *   D2. alwaysShowCorrect=true: returns correctChoiceId regardless
- *   D3. alwaysShowCorrect=true, no correctChoiceId: returns selectedId
- *   D4. evaluate + showCorrectAnswer=true: returns correctChoiceId
- *   D5. evaluate + showCorrectAnswer=false: returns selectedId
- *   D6. Not evaluate + showCorrectAnswer=true: returns selectedId (not overridden outside evaluate)
- *
- * computeResultText
- *   R1. Not evaluate mode → empty string
- *   R2. Evaluate + showCorrectAnswer=true → empty string (suppressed while reveal active)
- *   R3. Evaluate + correct → 'Correct answer selected'
- *   R4. Evaluate + incorrect + has selection → 'Incorrect answer selected'
- *   R5. Evaluate + incorrect + no selection → empty string (unanswered, no message)
- *   R6. Evaluate + unanswered (not correct, not incorrect) → empty string
- *
- * computeLegendText
- *   L1. Plain text prompt under limit → prompt text as-is
- *   L2. HTML prompt → tags stripped
- *   L3. Prompt over legendMaxChars → truncated with ellipsis
- *   L4. Empty prompt → answerChoicesLabel fallback
- *   L5. legendMaxChars < 8 → clamped to 8 before truncation
- *   L6. Whitespace-only prompt (after strip) → fallback
- */
-
-import { describe, expect, it } from 'vitest';
-import {
-  computeFeatureAudioSkin,
-  computeDisplayChoiceId,
-  computeResultText,
-  computeLegendText,
-  DEFAULT_AUDIO_BUTTON_SKINS,
-} from './computeDisplayState';
-
-const CUSTOM_SKIN = {
-  silentUrl: 'https://example.com/s.svg',
-  playingUrl: 'https://example.com/p.svg',
-};
-const BY_LOCALE_SKIN = {
-  silentUrl: 'https://example.com/l.svg',
-  playingUrl: 'https://example.com/lp.svg',
-};
-
-// ---------------------------------------------------------------------------
-// computeFeatureAudioSkin
-// ---------------------------------------------------------------------------
-
-describe('computeFeatureAudioSkin', () => {
-  it('A1: no locale, no overrides → default English skin', () => {
-    const result = computeFeatureAudioSkin({
-      locale: '',
-      audioButtonSkin: null,
-      audioButtonSkinsByLocale: {},
-    });
-    expect(result).toEqual(DEFAULT_AUDIO_BUTTON_SKINS.default);
-  });
-
-  it('A2: Spanish locale (es-MX) → built-in es skin', () => {
-    const result = computeFeatureAudioSkin({
-      locale: 'es-MX',
-      audioButtonSkin: null,
-      audioButtonSkinsByLocale: {},
-    });
-    expect(result).toEqual(DEFAULT_AUDIO_BUTTON_SKINS.es);
-  });
-
-  it('A3: exact locale match in byLocale → that skin', () => {
-    const result = computeFeatureAudioSkin({
-      locale: 'fr-CA',
-      audioButtonSkin: null,
-      audioButtonSkinsByLocale: { 'fr-ca': BY_LOCALE_SKIN },
-    });
-    expect(result).toEqual(BY_LOCALE_SKIN);
-  });
-
-  it('A4: no exact match, lang prefix match → lang skin', () => {
-    const frSkin = { silentUrl: 'fr-s', playingUrl: 'fr-p' };
-    const result = computeFeatureAudioSkin({
-      locale: 'fr-CA',
-      audioButtonSkin: null,
-      audioButtonSkinsByLocale: { fr: frSkin },
-    });
-    expect(result).toEqual(frSkin);
-  });
-
-  it('A5: byLocale.default when no locale/lang match → byLocale.default', () => {
-    const defaultOverride = { silentUrl: 'def-s', playingUrl: 'def-p' };
-    const result = computeFeatureAudioSkin({
-      locale: 'de',
-      audioButtonSkin: null,
-      audioButtonSkinsByLocale: { default: defaultOverride },
-    });
-    expect(result).toEqual(defaultOverride);
-  });
-
-  it('A6: customSingle fallback when byLocale empty', () => {
-    const result = computeFeatureAudioSkin({
-      locale: '',
-      audioButtonSkin: CUSTOM_SKIN,
-      audioButtonSkinsByLocale: {},
-    });
-    expect(result).toEqual(CUSTOM_SKIN);
-  });
-
-  it('A7: byLocale.default wins over customSingle', () => {
-    const defaultOverride = { silentUrl: 'def-s', playingUrl: 'def-p' };
-    const result = computeFeatureAudioSkin({
-      locale: '',
-      audioButtonSkin: CUSTOM_SKIN,
-      audioButtonSkinsByLocale: { default: defaultOverride },
-    });
-    expect(result).toEqual(defaultOverride);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// computeDisplayChoiceId
-// ---------------------------------------------------------------------------
-
-describe('computeDisplayChoiceId', () => {
-  const base = {
-    selectedId: 'a',
-    isEvaluateMode: false,
-    showCorrectAnswer: false,
-    alwaysShowCorrect: false,
-    correctChoiceId: 'b',
-  };
-
-  it('D1: gather mode → selectedId', () => {
-    expect(computeDisplayChoiceId({ ...base })).toBe('a');
-  });
-
-  it('D2: alwaysShowCorrect=true → correctChoiceId', () => {
-    expect(computeDisplayChoiceId({ ...base, alwaysShowCorrect: true })).toBe('b');
-  });
-
-  it('D3: alwaysShowCorrect=true, no correctChoiceId → selectedId', () => {
-    expect(computeDisplayChoiceId({ ...base, alwaysShowCorrect: true, correctChoiceId: '' })).toBe(
-      'a'
-    );
-  });
-
-  it('D4: evaluate + showCorrectAnswer=true → correctChoiceId', () => {
-    expect(computeDisplayChoiceId({ ...base, isEvaluateMode: true, showCorrectAnswer: true })).toBe(
-      'b'
-    );
-  });
-
-  it('D5: evaluate + showCorrectAnswer=false → selectedId', () => {
-    expect(
-      computeDisplayChoiceId({ ...base, isEvaluateMode: true, showCorrectAnswer: false })
-    ).toBe('a');
-  });
-
-  it('D6: not evaluate + showCorrectAnswer=true → selectedId (not overridden)', () => {
-    expect(
-      computeDisplayChoiceId({ ...base, isEvaluateMode: false, showCorrectAnswer: true })
-    ).toBe('a');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// computeResultText
-// ---------------------------------------------------------------------------
-
-describe('computeResultText', () => {
-  const base = {
-    isEvaluateMode: true,
-    showCorrectAnswer: false,
-    isCorrect: false,
-    isIncorrect: false,
-    selectedId: '',
-  };
-
-  it('R1: not evaluate mode → empty string', () => {
-    expect(computeResultText({ ...base, isEvaluateMode: false })).toBe('');
-  });
-
-  it('R2: evaluate + showCorrectAnswer=true → empty string', () => {
-    expect(computeResultText({ ...base, isCorrect: true, showCorrectAnswer: true })).toBe('');
-  });
-
-  it('R3: evaluate + correct → Correct answer selected', () => {
-    expect(computeResultText({ ...base, isCorrect: true })).toBe('Correct answer selected');
-  });
-
-  it('R4: evaluate + incorrect + has selection → Incorrect answer selected', () => {
-    expect(computeResultText({ ...base, isIncorrect: true, selectedId: 'a' })).toBe(
-      'Incorrect answer selected'
-    );
-  });
-
-  it('R5: evaluate + incorrect + no selection → empty string', () => {
-    expect(computeResultText({ ...base, isIncorrect: true, selectedId: '' })).toBe('');
-  });
-
-  it('R6: evaluate + unanswered (neither correct nor incorrect) → empty string', () => {
-    expect(computeResultText({ ...base })).toBe('');
-  });
-});
-
-// ---------------------------------------------------------------------------
-// computeLegendText
-// ---------------------------------------------------------------------------
-
-describe('computeLegendText', () => {
-  it('L1: plain text prompt under limit → prompt text', () => {
-    expect(
-      computeLegendText({
-        prompt: 'Choose the word',
-        legendMaxChars: 40,
-        answerChoicesLabel: 'Choices',
-      })
-    ).toBe('Choose the word');
-  });
-
-  it('L2: HTML prompt → tags stripped', () => {
-    expect(
-      computeLegendText({
-        prompt: '<p><strong>Choose</strong> the word</p>',
-        legendMaxChars: 40,
-        answerChoicesLabel: 'Choices',
-      })
-    ).toBe('Choose the word');
-  });
-
-  it('L3: prompt over legendMaxChars → truncated with ellipsis', () => {
-    const result = computeLegendText({
-      prompt: 'Choose the correct spelling',
-      legendMaxChars: 10,
-      answerChoicesLabel: 'Choices',
-    });
-    expect(result.length).toBeLessThanOrEqual(10);
-    expect(result.endsWith('…')).toBe(true);
-  });
-
-  it('L4: empty prompt → answerChoicesLabel fallback', () => {
-    expect(
-      computeLegendText({ prompt: '', legendMaxChars: 40, answerChoicesLabel: 'Answer choices' })
-    ).toBe('Answer choices');
-  });
-
-  it('L5: legendMaxChars below 8 → clamped, no crash', () => {
-    const result = computeLegendText({
-      prompt: 'Hi there friend',
-      legendMaxChars: 2,
-      answerChoicesLabel: 'Choices',
-    });
-    expect(result.endsWith('…')).toBe(true);
-    expect(result.length).toBeGreaterThan(0);
-  });
-
-  it('L6: whitespace-only HTML prompt → fallback', () => {
-    expect(
-      computeLegendText({
-        prompt: '<p>   </p>',
-        legendMaxChars: 40,
-        answerChoicesLabel: 'Answer choices',
-      })
-    ).toBe('Answer choices');
-  });
-});