@pie-element/mc-populated-blank 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/mc-populated-blank",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Multiple-choice option populates an inline blank in a sentence template (Svelte 5 PIE element)",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,9 +30,6 @@
       "development": "./src/print/index.ts",
       "types": "./dist/print/index.d.ts",
       "default": "./dist/print/index.js"
-    },
-    "./iife": {
-      "default": "./dist/index.iife.js"
     }
   },
   "files": [

package/src/controller/defaults.ts

@@ -1,5 +1,41 @@
 /** Token authors must include exactly once in `template` (HTML). */
 export const BLANK_TOKEN = '{{blank}}';
+/** Baseline values tuned to match historical CQT visuals; override via model.layoutLimits. */
+export const DEFAULT_LAYOUT_LIMITS = {
+  blankStandaloneWidthRem: 7,
+  blankWideWidthRem: 10,
+  blankUnderlineWidthPx: 2,
+  blankUnderlineWideWidthPx: 4,
+  horizontalChoiceWidthPx: 170,
+  horizontalChoiceWidthVw: 30,
+  horizontalChoiceTileMinHeightRem: 11,
+  horizontalChoiceContentMinHeightRem: 7.5,
+  selectedImageMaxHeightRem: 4,
+  choiceImageMaxHeightRem: 5,
+  listenButtonSizePx: 128,
+  stimulusMinColumnPx: 210,
+  textMinColumnPx: 260,
+  legendMaxChars: 120,
+  choiceGroupGapRem: 0.5,
+  choiceRowGapRem: 0.5,
+  toggleButtonGapRem: 0.5,
+  horizontalChoiceRadioTopMarginRem: 0.5,
+  audioBlankTemplateMarginTopRem: 0.8,
+  audioBlankTemplateMarginBottomRem: 1.8,
+  stimulusGridColumnGapRem: 2,
+  stimulusGridRowGapRem: 0.7,
+  stimulusSentenceMarginTopRem: 0.2,
+  stimulusChoicesMarginTopRem: 0.9,
+  tokenGridColumnGapRem: 1.5,
+  tokenGridRowGapRem: 0.8,
+  tokenTemplateMarginTopRem: 0.6,
+  tokenInlineTokenGapRem: 0.35,
+  tokenChoicesMarginTopRem: 0.2,
+  inlineGridColumnGapRem: 1.5,
+  inlineGridRowGapRem: 0.65,
+  inlineTemplateMarginTopRem: 0.45,
+  inlineChoicesMarginTopRem: 0.25,
+} as const;
 
 export default {
   model: {
@@ -10,6 +46,21 @@ export default {
     interactionMode: 'populate_blank' as const,
     layoutProfile: '',
     choiceLayout: '',
+    layoutProfilePresets: {},
+    layoutLimits: { ...DEFAULT_LAYOUT_LIMITS },
+    audioButtonSkin: null,
+    audioButtonSkinsByLocale: {},
+    uiText: {
+      answerChoices: 'Answer choices',
+      selectedAnswerInSentence: 'Selected answer in sentence',
+      showCorrectAnswer: 'Show correct answer',
+      hideCorrectAnswer: 'Hide correct answer',
+      clickToEnableAutoplay: 'Click to enable audio autoplay',
+      audioResourceUnavailable: 'Audio is enabled but no playable audio URL is configured.',
+      transcriptLabel: 'Transcript',
+      listenLabelEn: 'Listen',
+      listenLabelEs: 'Escuchar',
+    },
     sentenceHtml: '',
     template: `<p>The answer is ${BLANK_TOKEN}.</p>`,
     choiceMode: 'text' as const,

package/src/controller/index.ts

@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash-es';
-import defaults, { BLANK_TOKEN } from './defaults';
+import defaults, { BLANK_TOKEN, DEFAULT_LAYOUT_LIMITS } from './defaults';
 
 export function countBlankTokens(template: string): number {
   if (!template) return 0;
@@ -72,7 +72,14 @@ export const outcome = (question: any, session: any, env: any) =>
     resolve({ score, empty: false, traceLog });
   });
 
-export const createDefaultModel = (model: any = {}) => ({ ...defaults.model, ...model });
+export const createDefaultModel = (model: any = {}) => ({
+  ...defaults.model,
+  ...model,
+  layoutLimits: {
+    ...DEFAULT_LAYOUT_LIMITS,
+    ...(model?.layoutLimits || {}),
+  },
+});
 
 export const normalizeSession = (s: any) => ({ ...s });
 
@@ -151,6 +158,28 @@ export const model = async (question: any, session: any, env: any, updateSession
     interactionMode: normalizedQuestion.interactionMode || 'populate_blank',
     layoutProfile: normalizedQuestion.layoutProfile || '',
     choiceLayout: normalizedQuestion.choiceLayout || '',
+    layoutProfilePresets:
+      normalizedQuestion.layoutProfilePresets &&
+      typeof normalizedQuestion.layoutProfilePresets === 'object'
+        ? normalizedQuestion.layoutProfilePresets
+        : {},
+    layoutLimits: {
+      ...DEFAULT_LAYOUT_LIMITS,
+      ...(normalizedQuestion.layoutLimits || {}),
+    },
+    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,
@@ -161,6 +190,10 @@ export const model = async (question: any, session: any, env: any, updateSession
     audioUrl: normalizedQuestion.hasAudio ? normalizedQuestion.audioUrl : null,
     audioTranscript: normalizedQuestion.hasAudio ? normalizedQuestion.audioTranscript : null,
     showVisibleTranscript: !!normalizedQuestion.showVisibleTranscript,
+    useFeatureButtonAudio:
+      typeof normalizedQuestion.useFeatureButtonAudio === 'boolean'
+        ? normalizedQuestion.useFeatureButtonAudio
+        : undefined,
     locale: normalizedQuestion.locale || '',
     disabled: env.mode !== 'gather',
     view: env.mode === 'view',
@@ -263,9 +296,55 @@ export const validate = (model: any = {}, _config: any = {}) => {
 
   if (model.hasAudio) {
     const hasAudioUrl = !!model.audioUrl?.trim();
-    const hasTranscript = !!model.audioTranscript?.trim();
-    if (!hasAudioUrl && !hasTranscript) {
-      errors.audioTranscript = 'Audio transcript or audio URL is required when audio is enabled';
+    if (!hasAudioUrl) {
+      errors.audioUrl = 'A playable audio URL is required when audio is enabled';
+    }
+  }
+
+  const limits = model?.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',
+      'stimulusGridColumnGapRem',
+      'stimulusGridRowGapRem',
+      'stimulusSentenceMarginTopRem',
+      'stimulusChoicesMarginTopRem',
+      'tokenGridColumnGapRem',
+      'tokenGridRowGapRem',
+      'tokenTemplateMarginTopRem',
+      'tokenInlineTokenGapRem',
+      'tokenChoicesMarginTopRem',
+      'inlineGridColumnGapRem',
+      'inlineGridRowGapRem',
+      'inlineTemplateMarginTopRem',
+      'inlineChoicesMarginTopRem',
+    ];
+    for (const key of numericLimitKeys) {
+      if (limits[key] === undefined || limits[key] === null || limits[key] === '') continue;
+      const value = Number(limits[key]);
+      if (!Number.isFinite(value) || value <= 0) {
+        errors.layoutLimits = `${key} must be a positive number when provided`;
+        break;
+      }
     }
   }