@pie-element/mc-populated-blank 0.1.0

package/src/delivery/index.ts

@@ -0,0 +1,103 @@
+import McPopulatedBlankComponent from './McPopulatedBlank.svelte';
+import { isComplete as isControllerComplete } from '../controller';
+
+const SvelteElementClass = (McPopulatedBlankComponent as any).element;
+
+class McPopulatedBlankElement extends SvelteElementClass {
+  _internalSession: any = null;
+  _model: any = null;
+  _options: any = null;
+  audioComplete = false;
+
+  _dispatchModelSet = () => {
+    this.dispatchEvent(
+      new CustomEvent('model-set', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: this._isComplete(),
+          component: this.tagName.toLowerCase(),
+          hasModel: this._model !== undefined,
+        },
+      })
+    );
+  };
+
+  _dispatchSessionChanged = () => {
+    this.dispatchEvent(
+      new CustomEvent('session-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: this._isComplete(),
+          component: this.tagName.toLowerCase(),
+        },
+      })
+    );
+  };
+
+  set model(m: any) {
+    this._model = m;
+    this.audioComplete = false;
+    super.model = m;
+    this._dispatchModelSet();
+  }
+
+  get model() {
+    return this._model;
+  }
+
+  set session(s: any) {
+    this._internalSession = s;
+    super.session = s;
+    this._dispatchSessionChanged();
+  }
+
+  get session() {
+    return this._internalSession;
+  }
+
+  set options(o: any) {
+    this._options = o;
+    super.options = o;
+  }
+
+  get options() {
+    return this._options;
+  }
+
+  onSessionChange = (updatedSession: any) => {
+    this._internalSession = updatedSession;
+    super.session = updatedSession;
+    this._dispatchSessionChanged();
+  };
+
+  onAudioStarted = () => {
+    this._internalSession = {
+      ...(this._internalSession || {}),
+      audioStartTime: new Date().getTime(),
+    };
+  };
+
+  onAudioEnded = () => {
+    this.audioComplete = true;
+    this._internalSession = {
+      ...(this._internalSession || {}),
+      audioEndTime: new Date().getTime(),
+    };
+    this._dispatchSessionChanged();
+  };
+
+  _isComplete = () => {
+    return isControllerComplete(this._model, this._internalSession, this.audioComplete);
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    (this as any).onSessionChange = this.onSessionChange;
+    (this as any).onAudioStarted = this.onAudioStarted;
+    (this as any).onAudioEnded = this.onAudioEnded;
+  }
+}
+
+export default McPopulatedBlankElement;

package/src/index.iife.ts

@@ -0,0 +1,13 @@
+/**
+ * IIFE entry for mc-populated-blank delivery custom element.
+ */
+import Element from './delivery';
+
+if (typeof window !== 'undefined' && !customElements.get('mc-populated-blank-element')) {
+  customElements.define(
+    'mc-populated-blank-element',
+    Element as unknown as CustomElementConstructor
+  );
+}
+
+export default Element;

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index';

package/src/print/Print.svelte

@@ -0,0 +1,95 @@
+<svelte:options
+  customElement={{
+    shadow: 'none',
+    props: {
+      model: { type: 'Object' },
+    },
+  }}
+/>
+
+<script lang="ts">
+const BLANK_TOKEN = '{{blank}}';
+
+let { model = null }: { model?: any } = $props();
+
+let prompt = $state('');
+let template = $state('');
+$effect(() => {
+  prompt = model?.prompt || '';
+  template = model?.template || '';
+});
+
+const parts = $derived.by(() => {
+  const idx = template.indexOf(BLANK_TOKEN);
+  if (idx < 0) return { before: template, after: '' };
+  return { before: template.slice(0, idx), after: template.slice(idx + BLANK_TOKEN.length) };
+});
+
+const choices = $derived(Array.isArray(model?.choices) ? model.choices : []);
+const correct = $derived(model?.choices?.find((c: any) => c.id === model?.correctChoiceId));
+const mode = $derived(model?.choiceMode || 'text');
+const isAudioOnlyMode = $derived(model?.interactionMode === 'audio_mc_only');
+const showAnswerKey = $derived(model?.printAnswerKey !== false);
+</script>
+
+<div class="p-4 print:p-0">
+  {#if prompt && model?.promptEnabled !== false}
+    <div class="mb-4 prose prose-sm">{@html prompt}</div>
+  {/if}
+
+  {#if model?.sentenceHtml}
+    <div class="mb-2 prose prose-sm">{@html model.sentenceHtml}</div>
+  {/if}
+
+  {#if !isAudioOnlyMode}
+    <div class="mb-4 prose prose-sm">
+      {@html parts.before}
+      <span class="inline-block min-w-[6rem] border-b-2 border-gray-600 print:border-black px-1">
+        {#if showAnswerKey && mode === 'image' && correct?.imageUrl}
+          <img src={correct.imageUrl} alt={correct.imageAlt || ''} class="max-h-14 object-contain" />
+        {:else if showAnswerKey && correct?.labelHtml}
+          {@html correct.labelHtml}
+        {:else}
+          ________
+        {/if}
+      </span>
+      {@html parts.after}
+    </div>
+  {/if}
+
+  {#if model?.hasAudio}
+    <div class="text-sm mb-4">
+      {#if model?.audioUrl}
+        <div><strong>Audio:</strong> {model.audioUrl}</div>
+      {/if}
+      {#if model?.audioTranscript}
+        <div><strong>Transcript:</strong> {model.audioTranscript}</div>
+      {/if}
+    </div>
+  {/if}
+
+  <ul class="text-sm list-disc pl-5">
+    {#each choices as c}
+      <li>
+        {#if mode === 'image'}
+          <span class="font-medium">{c.id}</span>
+          {#if showAnswerKey && c.id === model?.correctChoiceId}(key){/if}
+        {:else}
+          {@html c.labelHtml || ''}
+          {#if showAnswerKey && c.id === model?.correctChoiceId}
+            <span class="font-medium"> (key)</span>
+          {/if}
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  .prose :global(p) {
+    margin: 0.5em 0;
+  }
+  .prose :global(strong) {
+    font-weight: 600;
+  }
+</style>

package/src/print/index.ts

@@ -0,0 +1,18 @@
+import PrintComponent from './Print.svelte';
+
+const SvelteElementClass = (PrintComponent as any).element;
+
+class McPopulatedBlankPrint extends SvelteElementClass {
+  private _model: any = null;
+
+  set model(m: any) {
+    this._model = m;
+    super.model = m;
+  }
+
+  get model() {
+    return this._model;
+  }
+}
+
+export default McPopulatedBlankPrint;