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

package/src/delivery/AudioPlayer.test.ts

@@ -1,149 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { mount, unmount, flushSync } from 'svelte';
-import AudioPlayer from './AudioPlayer.svelte';
-
-const BASE_PROPS = {
-  hasAudio: true,
-  audioUrl: 'https://example.com/audio.mp3',
-  useFeatureButtonAudio: false,
-  autoplayEnabled: false,
-  audioTranscript: 'The word is look.',
-  showVisibleTranscript: false,
-  transcriptId: 'test-transcript',
-  featureAudioSkin: { silentUrl: '', playingUrl: '' },
-  uiText: {
-    clickToEnableAutoplay: 'Click to enable',
-    transcriptLabel: 'Transcript',
-    audioResourceUnavailable: 'Unavailable',
-    listenSilentAlt: 'Repeat instructions',
-    listenPlayingAlt: 'Instructions are playing',
-    listenSilentAltEs: 'Escuchar. Repetir las instrucciones.',
-    listenPlayingAltEs: 'Escuchar. Estas son las instrucciones.',
-  },
-};
-
-function mountPlayer(props: Partial<typeof BASE_PROPS>) {
-  const target = document.createElement('div');
-  document.body.appendChild(target);
-  const component = mount(AudioPlayer, { target, props: { ...BASE_PROPS, ...props } });
-  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('AudioPlayer — audio element', () => {
-  it('renders native controls when hasAudio=true and useFeatureButtonAudio=false', () => {
-    const { target, component } = mountPlayer({ useFeatureButtonAudio: false });
-    mounts.push({ target, component });
-    flushSync();
-    expect(target.querySelector('.pie-audio-player')).not.toBeNull();
-  });
-
-  it('renders nothing when hasAudio is false', () => {
-    const { target, component } = mountPlayer({ hasAudio: false });
-    mounts.push({ target, component });
-    flushSync();
-    expect(target.querySelector('.pie-audio-container')).toBeNull();
-  });
-
-  it('renders an error message when hasAudio=true but audioUrl is missing', () => {
-    const { target, component } = mountPlayer({ audioUrl: undefined });
-    mounts.push({ target, component });
-    flushSync();
-    expect(target.querySelector('.pie-audio-error')).not.toBeNull();
-  });
-
-  it('renders the feature button when useFeatureButtonAudio=true', () => {
-    const { target, component } = mountPlayer({ useFeatureButtonAudio: true });
-    mounts.push({ target, component });
-    flushSync();
-    expect(target.querySelector('.pie-listen-button')).not.toBeNull();
-  });
-
-  it('silent image alt is "Repeat instructions" in feature-button mode', () => {
-    const { target, component } = mountPlayer({ useFeatureButtonAudio: true });
-    mounts.push({ target, component });
-    flushSync();
-    const imgs = target.querySelectorAll('.pie-listen-icon');
-    const alts = Array.from(imgs).map((el) => (el as HTMLImageElement).alt);
-    expect(alts).toContain('Repeat instructions');
-  });
-
-  it('playing image alt is "Instructions are playing" in feature-button mode', () => {
-    const { target, component } = mountPlayer({ useFeatureButtonAudio: true });
-    mounts.push({ target, component });
-    flushSync();
-    const imgs = target.querySelectorAll('.pie-listen-icon');
-    const alts = Array.from(imgs).map((el) => (el as HTMLImageElement).alt);
-    expect(alts).toContain('Instructions are playing');
-  });
-});
-
-describe('AudioPlayer — autoplay-blocked prompt', () => {
-  it('shows pie-audio-autoplay-enable when autoplay is blocked by the browser', async () => {
-    // Override HTMLAudioElement.play on the global so all audio elements reject
-    const originalPlay = HTMLMediaElement.prototype.play;
-    HTMLMediaElement.prototype.play = () =>
-      Promise.reject(new DOMException('autoplay blocked', 'NotAllowedError'));
-
-    const { target, component } = mountPlayer({
-      useFeatureButtonAudio: false,
-      autoplayEnabled: true,
-    });
-    mounts.push({ target, component });
-    flushSync();
-
-    // Allow the rejected promise microtask to settle
-    await Promise.resolve();
-    flushSync();
-
-    expect(target.querySelector('.pie-audio-autoplay-enable')).not.toBeNull();
-
-    HTMLMediaElement.prototype.play = originalPlay;
-  });
-
-  it('hides pie-audio-autoplay-enable when autoplay is not blocked', async () => {
-    const originalPlay = HTMLMediaElement.prototype.play;
-    HTMLMediaElement.prototype.play = () => Promise.resolve();
-
-    const { target, component } = mountPlayer({
-      useFeatureButtonAudio: false,
-      autoplayEnabled: true,
-    });
-    mounts.push({ target, component });
-    flushSync();
-    await Promise.resolve();
-    flushSync();
-
-    expect(target.querySelector('.pie-audio-autoplay-enable')).toBeNull();
-
-    HTMLMediaElement.prototype.play = originalPlay;
-  });
-
-  it('pie-audio-autoplay-enable is not rendered in feature-button mode even when autoplay is blocked', async () => {
-    const originalPlay = HTMLMediaElement.prototype.play;
-    HTMLMediaElement.prototype.play = () =>
-      Promise.reject(new DOMException('autoplay blocked', 'NotAllowedError'));
-
-    const { target, component } = mountPlayer({
-      useFeatureButtonAudio: true,
-      autoplayEnabled: true,
-    });
-    mounts.push({ target, component });
-    flushSync();
-    await Promise.resolve();
-    flushSync();
-
-    // Feature-button mode never shows the enable-autoplay prompt
-    expect(target.querySelector('.pie-audio-autoplay-enable')).toBeNull();
-
-    HTMLMediaElement.prototype.play = originalPlay;
-  });
-});

package/src/delivery/ChoiceRow.svelte

@@ -1,222 +0,0 @@
-<script lang="ts">
-interface Choice {
-  id: string;
-  labelHtml?: string;
-  imageUrl?: string;
-  imageAlt?: string;
-}
-
-let {
-  choice,
-  choiceMode = 'text',
-  isHorizontal = false,
-  isSelected = false,
-  isDisabled = false,
-  correctness = undefined,
-  isEvaluateMode = false,
-  instanceId,
-  radioGroupName,
-}: {
-  choice: Choice;
-  choiceMode?: 'text' | 'image';
-  isHorizontal?: boolean;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  correctness?: 'correct' | 'incorrect' | undefined;
-  isEvaluateMode?: boolean;
-  instanceId: string;
-  radioGroupName: string;
-} = $props();
-</script>
-
-<div
-  class={`flex items-start choice-row pie-choice ${isHorizontal ? 'choice-row-horizontal pie-choice-horizontal' : ''} ${isSelected ? 'is-selected pie-choice-selected' : ''} ${correctness ? `choice-${correctness} pie-choice-${correctness}` : ''}`}
-  style="gap:var(--mpb-choice-row-gap, 0.5rem);"
->
-  {#if isHorizontal}
-    <label
-      for={`${instanceId}-opt-${choice.id}`}
-      class="cursor-pointer choice-tile text-center pie-choice-tile"
-    >
-      <span class="choice-tile-content pie-choice-tile-content">
-        {#if choiceMode === 'image' && choice.imageUrl}
-          <img
-            src={choice.imageUrl}
-            alt={choice.imageAlt || `Choice ${choice.id}`}
-            class="object-contain pie-choice-image"
-            style="max-height:var(--mpb-choice-image-max-height, 5rem);"
-          />
-        {:else}
-          <span class="choice-html pie-choice-label">{@html choice.labelHtml || ''}</span>
-        {/if}
-      </span>
-      <input
-        type="radio"
-        name={radioGroupName}
-        id={`${instanceId}-opt-${choice.id}`}
-        value={choice.id}
-        checked={isSelected}
-        disabled={isDisabled}
-        class="choice-radio-bottom pie-choice-radio pie-choice-radio-bottom"
-      />
-    </label>
-  {:else}
-    <input
-      type="radio"
-      name={radioGroupName}
-      id={`${instanceId}-opt-${choice.id}`}
-      value={choice.id}
-      checked={isSelected}
-      disabled={isDisabled}
-      class="choice-radio-inline pie-choice-radio pie-choice-radio-inline"
-    />
-    <label for={`${instanceId}-opt-${choice.id}`} class="cursor-pointer flex-1 pie-choice-label-wrap">
-      {#if choiceMode === 'image' && choice.imageUrl}
-        <img
-          src={choice.imageUrl}
-          alt={choice.imageAlt || `Choice ${choice.id}`}
-          class="object-contain pie-choice-image"
-          style="max-height:var(--mpb-choice-image-max-height, 5rem);"
-        />
-      {:else}
-        <span class="choice-html pie-choice-label">{@html choice.labelHtml || ''}</span>
-      {/if}
-    </label>
-  {/if}
-  {#if isEvaluateMode && correctness}
-    <span
-      class={`pie-choice-feedback-badge ${correctness === 'correct' ? 'pie-choice-feedback-correct' : 'pie-choice-feedback-incorrect'}`}
-      aria-hidden="true"
-    >
-      {correctness === 'correct' ? '✓' : '✕'}
-    </span>
-  {/if}
-</div>
-
-<style>
-  .choice-row-horizontal {
-    flex-direction: column;
-    align-items: center;
-    width: min(var(--mpb-choice-width-px, 170px), var(--mpb-choice-width-vw, 30vw));
-    min-height: var(--mpb-choice-tile-min-height, 11rem);
-    gap: 0;
-  }
-
-  .choice-tile {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    min-height: var(--mpb-choice-tile-min-height, 11rem);
-    padding: 0.8rem 0.65rem 0.5rem;
-    border-radius: 8px;
-    background: transparent;
-    transition: background-color 120ms ease-in-out;
-  }
-
-  .choice-tile-content {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: var(--mpb-choice-content-min-height, 7.5rem);
-  }
-
-  .choice-row-horizontal:hover .choice-tile {
-    background: var(--mpb-choice-hover-bg, var(--pie-correct-answer-choice-hover-bg, #f2f2f2));
-  }
-
-  .pie-choice-horizontal:not(.is-selected):not(:hover) .pie-choice-tile {
-    background: transparent;
-  }
-
-  .choice-row-horizontal.is-selected .choice-tile {
-    background: var(--mpb-choice-selected-bg, var(--pie-correct-answer-choice-selected-bg, #fcfcd3));
-  }
-
-  .choice-row-horizontal.is-selected:hover .choice-tile {
-    background: var(--mpb-choice-selected-bg, var(--pie-correct-answer-choice-selected-bg, #fcfcd3));
-  }
-
-  .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);
-  }
-
-  .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) {
-    margin: 0;
-    text-align: center;
-  }
-
-  .choice-html :global(p) {
-    margin: 0;
-  }
-
-  .choice-html {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .choice-radio-bottom {
-    margin-top: var(--mpb-horizontal-choice-radio-top-margin, 0.5rem);
-    padding: var(--mpb-choice-radio-padding, 0px);
-  }
-
-  .choice-radio-inline {
-    margin-top: var(--mpb-horizontal-choice-radio-top-margin, 0.5rem);
-  }
-</style>

package/src/delivery/ChoiceRow.test.ts

@@ -1,179 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { mount, unmount, flushSync } from 'svelte';
-import ChoiceRow from './ChoiceRow.svelte';
-
-const CHOICE = { id: 'choice-a', labelHtml: '<p>Look</p>' };
-const CHOICE_IMG = { id: 'choice-b', imageUrl: 'https://example.com/img.png', imageAlt: 'A cat' };
-
-const BASE = {
-  choice: CHOICE,
-  instanceId: 'test',
-  radioGroupName: 'test-group',
-};
-
-const mounts: Array<{ target: HTMLElement; component: ReturnType<typeof mount> }> = [];
-
-function mountRow(props: Record<string, unknown>) {
-  const target = document.createElement('div');
-  document.body.appendChild(target);
-  const component = mount(ChoiceRow, { target, props });
-  mounts.push({ target, component });
-  flushSync();
-  return target;
-}
-
-afterEach(() => {
-  for (const { target, component } of mounts.splice(0)) {
-    unmount(component);
-    target.remove();
-  }
-});
-
-describe('ChoiceRow — inline layout (isHorizontal=false)', () => {
-  it('renders a radio input and label for the choice', () => {
-    const target = mountRow({ ...BASE });
-    expect(target.querySelector('input[type="radio"]')).not.toBeNull();
-    expect(target.querySelector('label')).not.toBeNull();
-  });
-
-  it('radio id and label for are paired', () => {
-    const target = mountRow({ ...BASE });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    const label = target.querySelector('label') as HTMLLabelElement;
-    expect(input.id).toBe('test-opt-choice-a');
-    expect(label.htmlFor).toBe('test-opt-choice-a');
-  });
-
-  it('radio has correct name and value', () => {
-    const target = mountRow({ ...BASE });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    expect(input.name).toBe('test-group');
-    expect(input.value).toBe('choice-a');
-  });
-
-  it('radio is not checked when isSelected=false', () => {
-    const target = mountRow({ ...BASE, isSelected: false });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    expect(input.checked).toBe(false);
-  });
-
-  it('radio is checked when isSelected=true', () => {
-    const target = mountRow({ ...BASE, isSelected: true });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    expect(input.checked).toBe(true);
-  });
-
-  it('radio is disabled when isDisabled=true', () => {
-    const target = mountRow({ ...BASE, isDisabled: true });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    expect(input.disabled).toBe(true);
-  });
-
-  it('inline radio has pie-choice-radio-inline class', () => {
-    const target = mountRow({ ...BASE });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    expect(input.classList.contains('pie-choice-radio-inline')).toBe(true);
-  });
-
-  it('renders label html for text choice', () => {
-    const target = mountRow({ ...BASE });
-    expect(target.querySelector('.pie-choice-label')).not.toBeNull();
-  });
-
-  it('renders image for image choice', () => {
-    const target = mountRow({ ...BASE, choice: CHOICE_IMG, choiceMode: 'image' });
-    const img = target.querySelector('img.pie-choice-image') as HTMLImageElement;
-    expect(img).not.toBeNull();
-    expect(img.alt).toBe('A cat');
-  });
-});
-
-describe('ChoiceRow — horizontal layout (isHorizontal=true)', () => {
-  it('wraps radio inside label (tile layout)', () => {
-    const target = mountRow({ ...BASE, isHorizontal: true });
-    const label = target.querySelector('label.pie-choice-tile') as HTMLLabelElement;
-    expect(label).not.toBeNull();
-    expect(label.querySelector('input[type="radio"]')).not.toBeNull();
-  });
-
-  it('radio has pie-choice-radio-bottom class in horizontal mode', () => {
-    const target = mountRow({ ...BASE, isHorizontal: true });
-    const input = target.querySelector('input[type="radio"]') as HTMLInputElement;
-    expect(input.classList.contains('pie-choice-radio-bottom')).toBe(true);
-  });
-
-  it('choice content is inside pie-choice-tile-content', () => {
-    const target = mountRow({ ...BASE, isHorizontal: true });
-    expect(target.querySelector('.pie-choice-tile-content')).not.toBeNull();
-  });
-});
-
-describe('ChoiceRow — CSS state classes', () => {
-  it('applies is-selected and pie-choice-selected when isSelected=true', () => {
-    const target = mountRow({ ...BASE, isSelected: true });
-    const row = target.querySelector('.pie-choice') as HTMLElement;
-    expect(row.classList.contains('is-selected')).toBe(true);
-    expect(row.classList.contains('pie-choice-selected')).toBe(true);
-  });
-
-  it('does not apply selected classes when isSelected=false', () => {
-    const target = mountRow({ ...BASE, isSelected: false });
-    const row = target.querySelector('.pie-choice') as HTMLElement;
-    expect(row.classList.contains('is-selected')).toBe(false);
-  });
-
-  it('applies choice-correct and pie-choice-correct when correctness=correct', () => {
-    const target = mountRow({ ...BASE, correctness: 'correct' });
-    const row = target.querySelector('.pie-choice') as HTMLElement;
-    expect(row.classList.contains('choice-correct')).toBe(true);
-    expect(row.classList.contains('pie-choice-correct')).toBe(true);
-  });
-
-  it('applies choice-incorrect and pie-choice-incorrect when correctness=incorrect', () => {
-    const target = mountRow({ ...BASE, correctness: 'incorrect' });
-    const row = target.querySelector('.pie-choice') as HTMLElement;
-    expect(row.classList.contains('choice-incorrect')).toBe(true);
-    expect(row.classList.contains('pie-choice-incorrect')).toBe(true);
-  });
-
-  it('applies no correctness class when correctness=undefined', () => {
-    const target = mountRow({ ...BASE });
-    const row = target.querySelector('.pie-choice') as HTMLElement;
-    expect(row.classList.contains('choice-correct')).toBe(false);
-    expect(row.classList.contains('choice-incorrect')).toBe(false);
-  });
-});
-
-describe('ChoiceRow — feedback badge', () => {
-  it('renders no badge outside evaluate mode', () => {
-    const target = mountRow({ ...BASE, isEvaluateMode: false, correctness: 'correct' });
-    expect(target.querySelector('.pie-choice-feedback-badge')).toBeNull();
-  });
-
-  it('renders no badge in evaluate mode when correctness is undefined', () => {
-    const target = mountRow({ ...BASE, isEvaluateMode: true, correctness: undefined });
-    expect(target.querySelector('.pie-choice-feedback-badge')).toBeNull();
-  });
-
-  it('renders ✓ badge with pie-choice-feedback-correct in evaluate mode when correct', () => {
-    const target = mountRow({ ...BASE, isEvaluateMode: true, correctness: 'correct' });
-    const badge = target.querySelector('.pie-choice-feedback-badge') as HTMLElement;
-    expect(badge).not.toBeNull();
-    expect(badge.classList.contains('pie-choice-feedback-correct')).toBe(true);
-    expect(badge.textContent?.trim()).toBe('✓');
-  });
-
-  it('renders ✕ badge with pie-choice-feedback-incorrect in evaluate mode when incorrect', () => {
-    const target = mountRow({ ...BASE, isEvaluateMode: true, correctness: 'incorrect' });
-    const badge = target.querySelector('.pie-choice-feedback-badge') as HTMLElement;
-    expect(badge).not.toBeNull();
-    expect(badge.classList.contains('pie-choice-feedback-incorrect')).toBe(true);
-    expect(badge.textContent?.trim()).toBe('✕');
-  });
-
-  it('badge has aria-hidden=true', () => {
-    const target = mountRow({ ...BASE, isEvaluateMode: true, correctness: 'correct' });
-    const badge = target.querySelector('.pie-choice-feedback-badge') as HTMLElement;
-    expect(badge.getAttribute('aria-hidden')).toBe('true');
-  });
-});

package/src/delivery/ClozeMarker.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-interface DisplayChoice {
-  imageUrl?: string;
-  imageAlt?: string;
-  labelHtml?: string;
-}
-
-let {
-  choiceMode = 'text',
-  displayChoice = undefined,
-  displayChoiceLabelHtml = '',
-  isStandalone = false,
-  blankWidth,
-  blankBorderWidth,
-  ariaLabel,
-}: {
-  choiceMode?: 'text' | 'image';
-  displayChoice?: DisplayChoice;
-  displayChoiceLabelHtml?: string;
-  isStandalone?: boolean;
-  blankWidth: string;
-  blankBorderWidth: string;
-  ariaLabel: string;
-} = $props();
-</script>
-
-<span
-  class={`inline-flex items-center min-h-[1.5em] px-2 mx-1 border-b-2 border-gray-500 align-baseline cloze-marker pie-blank-slot ${isStandalone ? 'cloze-marker-standalone pie-blank-slot-standalone' : ''}`}
-  style={`width:${blankWidth};border-bottom-width:${blankBorderWidth};`}
-  role="status"
-  aria-live="polite"
-  aria-atomic="true"
-  aria-label={ariaLabel}
->
-  {#if choiceMode === 'image' && displayChoice?.imageUrl}
-    <img
-      src={displayChoice.imageUrl}
-      alt={displayChoice.imageAlt || 'Selected answer image'}
-      class="w-auto object-contain pie-blank-image"
-      style="max-height:var(--mpb-selected-image-max-height, 4rem);"
-    />
-  {:else if displayChoiceLabelHtml}
-    <span class="cloze-marker-value pie-blank-value">{@html displayChoiceLabelHtml}</span>
-  {:else}
-    <span class="cloze-marker-empty" aria-hidden="true">&nbsp;</span>
-  {/if}
-</span>
-
-<style>
-  .cloze-marker {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    vertical-align: baseline;
-  }
-
-  .cloze-marker:focus-within {
-    outline: 2px solid var(--pie-focus, #2563eb);
-    outline-offset: 2px;
-  }
-
-  .cloze-marker-standalone {
-    width: var(--mpb-blank-standalone-width, 7rem);
-  }
-
-  .cloze-marker-empty {
-    display: inline-block;
-    min-width: 4ch;
-  }
-
-  .cloze-marker-value {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  }
-
-  .cloze-marker-value :global(p) {
-    margin: 0;
-  }
-</style>