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

package/src/delivery/ChoiceRow.svelte

@@ -0,0 +1,222 @@
+<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

@@ -0,0 +1,179 @@
+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

@@ -0,0 +1,83 @@
+<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>

package/src/delivery/ClozeMarker.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { mount, unmount, flushSync } from 'svelte';
+import ClozeMarker from './ClozeMarker.svelte';
+
+const BASE = {
+  blankWidth: '8rem',
+  blankBorderWidth: '2px',
+  ariaLabel: 'Selected answer',
+};
+
+const mounts: Array<{ target: HTMLElement; component: ReturnType<typeof mount> }> = [];
+
+function mountSlot(props: Record<string, unknown>) {
+  const target = document.createElement('div');
+  document.body.appendChild(target);
+  const component = mount(ClozeMarker, { target, props });
+  mounts.push({ target, component });
+  flushSync();
+  return target;
+}
+
+afterEach(() => {
+  for (const { target, component } of mounts.splice(0)) {
+    unmount(component);
+    target.remove();
+  }
+});
+
+describe('ClozeMarker — ARIA contract', () => {
+  it('renders a span with role=status', () => {
+    const target = mountSlot({ ...BASE });
+    const span = target.querySelector('.pie-blank-slot') as HTMLElement;
+    expect(span.getAttribute('role')).toBe('status');
+  });
+
+  it('has aria-live=polite and aria-atomic=true', () => {
+    const target = mountSlot({ ...BASE });
+    const span = target.querySelector('.pie-blank-slot') as HTMLElement;
+    expect(span.getAttribute('aria-live')).toBe('polite');
+    expect(span.getAttribute('aria-atomic')).toBe('true');
+  });
+
+  it('forwards ariaLabel to aria-label', () => {
+    const target = mountSlot({ ...BASE, ariaLabel: 'Your answer' });
+    const span = target.querySelector('.pie-blank-slot') as HTMLElement;
+    expect(span.getAttribute('aria-label')).toBe('Your answer');
+  });
+});
+
+describe('ClozeMarker — layout props', () => {
+  it('applies blankWidth and blankBorderWidth as inline styles', () => {
+    const target = mountSlot({ ...BASE, blankWidth: '10rem', blankBorderWidth: '4px' });
+    const span = target.querySelector('.pie-blank-slot') as HTMLElement;
+    expect(span.style.width).toBe('10rem');
+    expect(span.style.borderBottomWidth).toBe('4px');
+  });
+
+  it('applies standalone classes when isStandalone=true', () => {
+    const target = mountSlot({ ...BASE, isStandalone: true });
+    const span = target.querySelector('.pie-blank-slot') as HTMLElement;
+    expect(span.classList.contains('cloze-marker-standalone')).toBe(true);
+    expect(span.classList.contains('pie-blank-slot-standalone')).toBe(true);
+  });
+
+  it('does not apply standalone classes when isStandalone=false', () => {
+    const target = mountSlot({ ...BASE, isStandalone: false });
+    const span = target.querySelector('.pie-blank-slot') as HTMLElement;
+    expect(span.classList.contains('cloze-marker-standalone')).toBe(false);
+  });
+});
+
+describe('ClozeMarker — content modes', () => {
+  it('renders empty placeholder when no choice is set', () => {
+    const target = mountSlot({ ...BASE });
+    expect(target.querySelector('.cloze-marker-empty')).not.toBeNull();
+    expect(target.querySelector('.pie-blank-value')).toBeNull();
+    expect(target.querySelector('img')).toBeNull();
+  });
+
+  it('renders text value when displayChoiceLabelHtml is set', () => {
+    const target = mountSlot({ ...BASE, displayChoiceLabelHtml: '<p>Look</p>' });
+    expect(target.querySelector('.pie-blank-value')).not.toBeNull();
+    expect(target.querySelector('.cloze-marker-empty')).toBeNull();
+  });
+
+  it('renders image when choiceMode=image and displayChoice has imageUrl', () => {
+    const target = mountSlot({
+      ...BASE,
+      choiceMode: 'image',
+      displayChoice: { imageUrl: 'https://example.com/cat.png', imageAlt: 'A cat' },
+    });
+    const img = target.querySelector('img.pie-blank-image') as HTMLImageElement;
+    expect(img).not.toBeNull();
+    expect(img.alt).toBe('A cat');
+    expect(target.querySelector('.cloze-marker-empty')).toBeNull();
+  });
+
+  it('falls back to empty placeholder when choiceMode=image but imageUrl is missing', () => {
+    const target = mountSlot({
+      ...BASE,
+      choiceMode: 'image',
+      displayChoice: { imageUrl: undefined },
+    });
+    expect(target.querySelector('.cloze-marker-empty')).not.toBeNull();
+    expect(target.querySelector('img')).toBeNull();
+  });
+
+  it('uses fallback alt text when imageAlt is not provided', () => {
+    const target = mountSlot({
+      ...BASE,
+      choiceMode: 'image',
+      displayChoice: { imageUrl: 'https://example.com/img.png' },
+    });
+    const img = target.querySelector('img') as HTMLImageElement;
+    expect(img.alt).toBe('Selected answer image');
+  });
+
+  it('prefers image over text when both choiceMode=image and displayChoiceLabelHtml are set', () => {
+    const target = mountSlot({
+      ...BASE,
+      choiceMode: 'image',
+      displayChoice: { imageUrl: 'https://example.com/img.png', imageAlt: 'Cat' },
+      displayChoiceLabelHtml: '<p>Look</p>',
+    });
+    expect(target.querySelector('img')).not.toBeNull();
+    expect(target.querySelector('.pie-blank-value')).toBeNull();
+  });
+});