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

package/src/controller/index.ts

@@ -1,372 +0,0 @@
-import defaults, { BLANK_TOKEN, DEFAULT_LAYOUT_LIMITS } from './defaults';
-import type {
-  McpbChoice,
-  McpbQuestion,
-  McpbSession,
-  McpbEnv,
-  McpbCorrectness,
-} from '../shared/types';
-
-const isEmptyObject = (value: unknown): boolean =>
-  !!value &&
-  typeof value === 'object' &&
-  !Array.isArray(value) &&
-  Object.keys(value as Record<string, unknown>).length === 0;
-
-export function countBlankTokens(template: string): number {
-  if (!template) return 0;
-  const re = /\{\{blank\}\}/g;
-  return (template.match(re) || []).length;
-}
-
-export const getCorrectness = (question: McpbQuestion, session: McpbSession): McpbCorrectness => {
-  if (!session?.choiceId) {
-    return 'unanswered';
-  }
-  const correct = question?.correctChoiceId || '';
-  if (session.choiceId === correct) {
-    return 'correct';
-  }
-  return 'incorrect';
-};
-
-export const getPartialScore = (_question: McpbQuestion, session: McpbSession) => {
-  if (!session || isEmptyObject(session) || !session.choiceId) {
-    return 0;
-  }
-  return 1;
-};
-
-export const outcome = (question: McpbQuestion, session: McpbSession, env: McpbEnv) =>
-  new Promise((resolve) => {
-    if (!session || isEmptyObject(session)) {
-      resolve({
-        score: 0,
-        empty: true,
-        traceLog: ['Student did not select any answers. Score is 0.'],
-      });
-      return;
-    }
-
-    session = normalizeSession(session);
-    const correctness = getCorrectness(question, session);
-
-    if (correctness === 'unanswered') {
-      resolve({
-        score: 0,
-        empty: true,
-        traceLog: ['Student did not select any answers. Score is 0.'],
-      });
-      return;
-    }
-
-    const score = correctness === 'correct' ? 1 : 0;
-    const traceLog = [
-      `Mode: ${env?.mode || 'unknown'}.`,
-      `Student selected choice: ${session.choiceId}.`,
-      `Correct choice: ${question?.correctChoiceId || 'none'}.`,
-      `Final score: ${score}.`,
-    ];
-    resolve({ score, empty: false, traceLog });
-  });
-
-export const createDefaultModel = (model: McpbQuestion = {}) => ({
-  ...defaults.model,
-  ...model,
-  layoutLimits: {
-    ...DEFAULT_LAYOUT_LIMITS,
-    ...(model?.layoutLimits || {}),
-  },
-});
-
-export const normalize = (question: McpbQuestion = {}) => createDefaultModel(question);
-
-export const normalizeSession = (s: McpbSession): McpbSession => ({ ...s });
-
-const shouldShuffleChoices = (question: McpbQuestion) => !!question?.shuffle;
-
-const shouldLockChoices = (question: McpbQuestion, env: McpbEnv) => {
-  if (question?.lockChoiceOrder) return true;
-  if (env?.['@pie-element']?.lockChoiceOrder) return true;
-  return env?.role === 'instructor';
-};
-
-function shuffleArray<T>(items: T[]): T[] {
-  const out = [...items];
-  for (let i = out.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [out[i], out[j]] = [out[j], out[i]];
-  }
-  return out;
-}
-
-const getStoredShuffle = (session: McpbSession): string[] =>
-  Array.isArray(session?.data?.shuffledValues)
-    ? session.data.shuffledValues
-    : Array.isArray(session?.shuffledValues)
-      ? session.shuffledValues
-      : [];
-
-const applyShuffledValues = (
-  choices: McpbChoice[],
-  shuffledValues: string[],
-  choiceKey: keyof McpbChoice
-) => {
-  const orderedChoices = shuffledValues
-    .map((value) => choices.find((choice) => choice?.[choiceKey] === value))
-    .filter((c): c is McpbChoice => !!c);
-
-  if (orderedChoices.length === choices.length) {
-    return orderedChoices;
-  }
-
-  const orderedValues = new Set(orderedChoices.map((choice) => choice[choiceKey]));
-  const leftovers = choices.filter((choice) => !orderedValues.has(choice?.[choiceKey]));
-  return [...orderedChoices, ...leftovers];
-};
-
-type UpdateSessionFn = (
-  id: string,
-  element: string,
-  data: { shuffledValues: string[] }
-) => Promise<void>;
-
-const getOrderedChoices = async (
-  question: McpbQuestion,
-  session: McpbSession,
-  env: McpbEnv,
-  updateSession?: UpdateSessionFn
-) => {
-  const choices = Array.isArray(question?.choices) ? [...question.choices] : [];
-  if (!choices.length || !shouldShuffleChoices(question)) {
-    return choices;
-  }
-
-  if (shouldLockChoices(question, env || {})) {
-    return choices;
-  }
-
-  const shuffledValues = getStoredShuffle(session);
-  if (shuffledValues.length) {
-    return applyShuffledValues(choices, shuffledValues, 'id');
-  }
-
-  const shuffledChoices = shuffleArray(choices);
-
-  if (updateSession && typeof updateSession === 'function' && session?.id && session?.element) {
-    const shuffledIds = shuffledChoices.map((choice) => choice?.id).filter(Boolean);
-    if (shuffledIds.length) {
-      await updateSession(session.id, session.element, { shuffledValues: shuffledIds });
-    }
-  }
-
-  return shuffledChoices;
-};
-
-export const model = async (
-  question: McpbQuestion,
-  session: McpbSession | null,
-  env: McpbEnv | null,
-  updateSession?: UpdateSessionFn
-) => {
-  const safeSession: McpbSession = session || {};
-  const safeEnv: McpbEnv = env || {};
-  const normalizedQuestion = normalize(question);
-  const choices = await getOrderedChoices(normalizedQuestion, safeSession, safeEnv, updateSession);
-
-  const out: Record<string, unknown> = {
-    prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
-    interactionMode: normalizedQuestion.interactionMode || 'populate_blank',
-    layoutProfile: normalizedQuestion.layoutProfile || '',
-    choiceLayout: normalizedQuestion.choiceLayout || '',
-    layoutProfilePresets:
-      normalizedQuestion.layoutProfilePresets &&
-      typeof normalizedQuestion.layoutProfilePresets === 'object'
-        ? normalizedQuestion.layoutProfilePresets
-        : {},
-    layoutLimits: normalizedQuestion.layoutLimits || { ...DEFAULT_LAYOUT_LIMITS },
-    audioButtonSkin:
-      normalizedQuestion.audioButtonSkin && typeof normalizedQuestion.audioButtonSkin === 'object'
-        ? normalizedQuestion.audioButtonSkin
-        : null,
-    audioButtonSkinsByLocale:
-      normalizedQuestion.audioButtonSkinsByLocale &&
-      typeof normalizedQuestion.audioButtonSkinsByLocale === 'object'
-        ? normalizedQuestion.audioButtonSkinsByLocale
-        : {},
-    uiText:
-      normalizedQuestion.uiText && typeof normalizedQuestion.uiText === 'object'
-        ? normalizedQuestion.uiText
-        : {},
-    sentenceHtml: normalizedQuestion.sentenceHtml || null,
-    template: normalizedQuestion.template,
-    choiceMode: normalizedQuestion.choiceMode,
-    choices,
-    hasAudio: normalizedQuestion.hasAudio,
-    autoplayAudioEnabled: !!normalizedQuestion.autoplayAudioEnabled,
-    completeAudioEnabled: !!normalizedQuestion.completeAudioEnabled,
-    audioUrl: normalizedQuestion.hasAudio ? normalizedQuestion.audioUrl : null,
-    audioTranscript: normalizedQuestion.hasAudio ? normalizedQuestion.audioTranscript : null,
-    showVisibleTranscript: !!normalizedQuestion.showVisibleTranscript,
-    customType: normalizedQuestion.customType || '',
-    useFeatureButtonAudio:
-      typeof normalizedQuestion.useFeatureButtonAudio === 'boolean'
-        ? normalizedQuestion.useFeatureButtonAudio
-        : undefined,
-    locale: normalizedQuestion.locale || '',
-    disabled: safeEnv.mode !== 'gather',
-    mode: safeEnv.mode,
-  };
-
-  if (safeEnv.mode === 'evaluate') {
-    const correctness = getCorrectness(normalizedQuestion, safeSession);
-    out.correctness = correctness;
-    out.responseCorrect = correctness === 'correct';
-    out.correctChoiceId = normalizedQuestion.correctChoiceId;
-  }
-
-  if (safeEnv.role === 'instructor' && (safeEnv.mode === 'view' || safeEnv.mode === 'evaluate')) {
-    out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
-      ? normalizedQuestion.teacherInstructions
-      : null;
-  } else {
-    out.teacherInstructions = null;
-  }
-
-  return out;
-};
-
-export const createCorrectResponseSession = (question: McpbQuestion, env: McpbEnv) => {
-  return new Promise((resolve) => {
-    if (env.mode !== 'evaluate' && env.role === 'instructor') {
-      resolve({
-        id: '1',
-        element: 'mc-populated-blank',
-        choiceId: question?.correctChoiceId || '',
-      });
-    } else {
-      resolve(null);
-    }
-  });
-};
-
-export const validate = (question: McpbQuestion = {}, _config: Record<string, unknown> = {}) => {
-  const errors: Record<string, string> = {};
-
-  if (question.promptEnabled) {
-    const p = question.prompt?.trim() || '';
-    if (!p || p === '<p></p>') {
-      errors.prompt = 'Prompt is required when prompt is enabled';
-    }
-  }
-
-  const interactionMode = question.interactionMode || 'populate_blank';
-  const template = question.template || '';
-  const n = countBlankTokens(template);
-  if (interactionMode === 'audio_mc_only') {
-    if (n > 0) {
-      errors.template = `Template cannot contain ${BLANK_TOKEN} in audio-only mode`;
-    }
-  } else if (interactionMode === 'populate_blank') {
-    if (n === 0) {
-      errors.template = `Template must contain exactly one ${BLANK_TOKEN} placeholder`;
-    } else if (n > 1) {
-      errors.template = `Template must contain only one ${BLANK_TOKEN} placeholder`;
-    }
-  } else {
-    errors.interactionMode = 'Unknown interaction mode';
-  }
-
-  const choices = Array.isArray(question.choices) ? question.choices : [];
-  if (choices.length < 2) {
-    errors.choices = 'At least two choices are required';
-  }
-
-  const mode = question.choiceMode || 'text';
-  for (let i = 0; i < choices.length; i++) {
-    const c = choices[i];
-    if (!c?.id) {
-      errors.choices = `Choice ${i + 1} is missing an id`;
-      break;
-    }
-    if (mode === 'text') {
-      const lbl = (c.labelHtml || '').trim();
-      if (!lbl || lbl === '<p></p>') {
-        errors.choices = `Choice ${i + 1} needs label text`;
-        break;
-      }
-    } else {
-      if (!c.imageUrl?.trim()) {
-        errors.choices = `Choice ${i + 1} needs an image URL`;
-        break;
-      }
-      if (!c.imageAlt?.trim()) {
-        errors.choices = `Choice ${i + 1} needs image alt text`;
-        break;
-      }
-    }
-  }
-
-  const correct = question.correctChoiceId;
-  if (!correct || !choices.some((c) => c.id === correct)) {
-    errors.correctChoiceId = 'Correct choice must match one of the choice ids';
-  }
-
-  if (question.hasAudio) {
-    const hasAudioUrl = !!question.audioUrl?.trim();
-    if (!hasAudioUrl) {
-      errors.audioUrl = 'A playable audio URL is required when audio is enabled';
-    }
-  }
-
-  const limits = question?.layoutLimits;
-  if (limits && typeof limits === 'object') {
-    const numericLimitKeys = [
-      'blankStandaloneWidthRem',
-      'blankWideWidthRem',
-      'blankUnderlineWidthPx',
-      'blankUnderlineWideWidthPx',
-      'horizontalChoiceWidthPx',
-      'horizontalChoiceWidthVw',
-      'horizontalChoiceTileMinHeightRem',
-      'horizontalChoiceContentMinHeightRem',
-      'selectedImageMaxHeightRem',
-      'choiceImageMaxHeightRem',
-      'listenButtonSizePx',
-      'stimulusMinColumnPx',
-      'textMinColumnPx',
-      'legendMaxChars',
-      'choiceGroupGapRem',
-      'choiceRowGapRem',
-      'toggleButtonGapRem',
-      'horizontalChoiceRadioTopMarginRem',
-      'audioBlankTemplateMarginTopRem',
-      'audioBlankTemplateMarginBottomRem',
-      'audioInstructionsMaxWidthPx',
-      'narrowHorizontalChoiceMaxWidthPx',
-      'stimulusGridColumnGapRem',
-      'stimulusGridRowGapRem',
-      'stimulusSentenceMarginTopRem',
-      'stimulusChoicesMarginTopRem',
-      'tokenGridColumnGapRem',
-      'tokenGridRowGapRem',
-      'tokenTemplateMarginTopRem',
-      'tokenInlineTokenGapRem',
-      'tokenChoicesMarginTopRem',
-      'inlineGridColumnGapRem',
-      'inlineGridRowGapRem',
-      'inlineTemplateMarginTopRem',
-      'inlineChoicesMarginTopRem',
-    ] as const;
-    for (const key of numericLimitKeys) {
-      if (limits[key] === undefined || limits[key] === null) continue;
-      const value = Number(limits[key]);
-      if (!Number.isFinite(value) || value <= 0) {
-        errors.layoutLimits = `${key} must be a positive number when provided`;
-        break;
-      }
-    }
-  }
-
-  return errors;
-};

package/src/delivery/AudioPlayer.svelte

@@ -1,246 +0,0 @@
-<script lang="ts">
-import { computeAudioMode } from './computeAudioMode';
-
-interface AudioButtonSkin {
-  silentUrl: string;
-  playingUrl: string;
-}
-
-interface UiText {
-  clickToEnableAutoplay: string;
-  transcriptLabel: string;
-  audioResourceUnavailable: string;
-  listenSilentAlt?: string;
-  listenPlayingAlt?: string;
-  listenSilentAltEs?: string;
-  listenPlayingAltEs?: string;
-}
-
-const AUDIO_PLAYBACK = {
-  IDLE: 'idle',
-  PLAYING: 'playing',
-  BLOCKED: 'blocked',
-  PAUSED: 'paused',
-} as const;
-type AudioPlaybackState = (typeof AUDIO_PLAYBACK)[keyof typeof AUDIO_PLAYBACK];
-
-let {
-  hasAudio = false,
-  audioUrl,
-  useFeatureButtonAudio = false,
-  autoplayEnabled = false,
-  audioTranscript,
-  showVisibleTranscript,
-  transcriptId,
-  featureAudioSkin,
-  uiText,
-  locale = '',
-  onaudiostarted,
-  onaudioended,
-}: {
-  hasAudio?: boolean;
-  audioUrl?: string;
-  useFeatureButtonAudio?: boolean;
-  autoplayEnabled?: boolean;
-  audioTranscript?: string;
-  showVisibleTranscript: boolean;
-  transcriptId: string;
-  featureAudioSkin: AudioButtonSkin;
-  uiText: UiText;
-  locale?: string;
-  onaudiostarted?: () => void;
-  onaudioended?: () => void;
-} = $props();
-
-let audioEl = $state<HTMLAudioElement | null>(null);
-let featureAudioButtonEl = $state<HTMLButtonElement | null>(null);
-let autoplayEnableButtonEl = $state<HTMLButtonElement | null>(null);
-let audioPlaybackState = $state<AudioPlaybackState>(AUDIO_PLAYBACK.IDLE);
-
-const audioMode = $derived(computeAudioMode({ hasAudio, audioUrl, useFeatureButtonAudio }));
-const isMediaPlaying = $derived(audioPlaybackState === AUDIO_PLAYBACK.PLAYING);
-const autoPlayPromptOpen = $derived(audioPlaybackState === AUDIO_PLAYBACK.BLOCKED);
-const audioErrorMessage = $derived(audioMode === 'error' ? uiText.audioResourceUnavailable : '');
-
-// Reset playback state when audioUrl changes so autoplay re-fires for a new question.
-$effect(() => {
-  audioUrl;
-  audioPlaybackState = AUDIO_PLAYBACK.IDLE;
-});
-
-function playFeatureAudio() {
-  if (audioMode !== 'none' && audioMode !== 'error' && audioEl) {
-    audioEl.play().catch(() => {});
-  }
-}
-
-function handleEnableAutoplayClick() {
-  if (audioMode !== 'none' && audioMode !== 'error' && audioEl) {
-    audioEl.play().finally(() => {
-      if (audioPlaybackState === AUDIO_PLAYBACK.BLOCKED) audioPlaybackState = AUDIO_PLAYBACK.PAUSED;
-    });
-  }
-}
-
-function useListener<K extends keyof HTMLElementEventMap>(
-  getEl: () => EventTarget | null | undefined,
-  event: K,
-  handler: (e: HTMLElementEventMap[K]) => void
-) {
-  $effect(() => {
-    const el = getEl();
-    if (!el) return;
-    el.addEventListener(event, handler as EventListener);
-    return () => el.removeEventListener(event, handler as EventListener);
-  });
-}
-
-useListener(
-  () => audioEl,
-  'playing',
-  () => {
-    audioPlaybackState = AUDIO_PLAYBACK.PLAYING;
-    onaudiostarted?.();
-  }
-);
-
-useListener(
-  () => audioEl,
-  'ended',
-  () => {
-    audioPlaybackState = AUDIO_PLAYBACK.PAUSED;
-    onaudioended?.();
-  }
-);
-
-useListener(
-  () => featureAudioButtonEl,
-  'click',
-  () => playFeatureAudio()
-);
-useListener(
-  () => autoplayEnableButtonEl,
-  'click',
-  () => handleEnableAutoplayClick()
-);
-
-$effect(() => {
-  if (!autoplayEnabled || audioMode === 'none' || audioMode === 'error') return;
-  if (audioPlaybackState !== AUDIO_PLAYBACK.IDLE) return;
-  if (audioEl && audioUrl) {
-    audioPlaybackState = AUDIO_PLAYBACK.PAUSED;
-    audioEl.play().catch(() => {
-      audioPlaybackState = AUDIO_PLAYBACK.BLOCKED;
-    });
-  }
-});
-
-function speechButtonLabel(loc = '') {
-  return loc.toLowerCase().startsWith('es') ? 'Escuchar' : 'Listen';
-}
-
-function silentAlt(loc = '') {
-  return loc.toLowerCase().startsWith('es')
-    ? (uiText.listenSilentAltEs ?? 'Escuchar. Repetir las instrucciones.')
-    : (uiText.listenSilentAlt ?? 'Repeat instructions');
-}
-
-function playingAlt(loc = '') {
-  return loc.toLowerCase().startsWith('es')
-    ? (uiText.listenPlayingAltEs ?? 'Escuchar. Estas son las instrucciones.')
-    : (uiText.listenPlayingAlt ?? 'Instructions are playing');
-}
-</script>
-
-{#if audioMode !== 'none'}
-  <div class="mb-4 audio-container pie-audio-container">
-    {#if audioMode === 'feature-button'}
-      <audio
-        bind:this={audioEl}
-        class="sr-only pie-audio-player"
-        preload="metadata"
-        src={audioUrl}
-        aria-hidden="true"
-        tabindex="-1"
-      ></audio>
-      <button
-        bind:this={featureAudioButtonEl}
-        class="listen-button pie-listen-button rli-feature-audio"
-        type="button"
-        aria-label={speechButtonLabel(locale)}
-      >
-        <img
-          class={`listen-feature-icon pie-listen-icon rli-feature-listen ${isMediaPlaying ? '' : 'listen-active'}`}
-          src={featureAudioSkin.silentUrl}
-          alt={silentAlt(locale)}
-        />
-        <img
-          class={`listen-feature-icon pie-listen-icon rli-feature-listen ${isMediaPlaying ? 'listen-active' : ''}`}
-          src={featureAudioSkin.playingUrl}
-          alt={playingAlt(locale)}
-        />
-      </button>
-    {:else if audioMode === 'controls'}
-      <audio
-        bind:this={audioEl}
-        controls
-        class="w-full max-w-md pie-audio-player"
-        preload="metadata"
-        src={audioUrl}
-        aria-describedby={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"
-        >
-          {uiText.clickToEnableAutoplay}
-        </button>
-      {/if}
-    {:else if audioMode === 'error'}
-      <p class="text-sm text-red-700 pie-audio-error" role="alert">{audioErrorMessage}</p>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .listen-button {
-    width: var(--mpb-listen-button-size, 128px);
-    height: var(--mpb-listen-button-size, 128px);
-    border: 0;
-    padding: 0;
-    background-color: transparent;
-    cursor: pointer;
-    z-index: 1;
-  }
-
-  .listen-button:hover {
-    background-color: #e2f1fe;
-  }
-
-  .listen-feature-icon {
-    width: var(--mpb-listen-button-size, 128px);
-    height: var(--mpb-listen-button-size, 128px);
-    object-fit: contain;
-    display: none;
-  }
-
-  .listen-feature-icon.listen-active {
-    display: block;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-</style>