@pie-element/drag-in-the-blank 0.1.0

package/src/controller/index.ts

@@ -0,0 +1,274 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/controller/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { isEmpty } from 'lodash-es';
+import { getAllCorrectResponses, choiceIsEmpty } from './utils.js';
+import { lockChoices, getShuffledChoices, partialScoring } from '@pie-element/shared-controller-utils';
+import defaults from './defaults.js';
+
+export const normalize = (question) => ({
+  ...defaults,
+  ...question,
+});
+
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ * @param {*} updateSession - optional - a function that will set the properties passed into it on the session.
+ */
+export async function model(question, session, env, updateSession) {
+  const normalizedQuestion = normalize(question);
+  let feedback = {};
+
+  if (env.mode === 'evaluate') {
+    const responses = getAllCorrectResponses(normalizedQuestion) || {};
+    const allCorrectResponses = responses.possibleResponses;
+    const numberOfPossibleResponses = responses.numberOfPossibleResponses || 0;
+    let correctResponses = undefined;
+    const { value } = session || {};
+
+    for (let i = 0; i < numberOfPossibleResponses; i++) {
+      const result = Object.keys(allCorrectResponses).reduce(
+        (obj, key) => {
+          const choices = allCorrectResponses[key];
+          const answer = (value && value[key]) || '';
+
+          obj.feedback[key] = choices[i] === answer;
+
+          if (obj.feedback[key]) {
+            obj.correctResponses += 1;
+          }
+
+          return obj;
+        },
+        { correctResponses: 0, feedback: {} },
+      );
+
+      if (correctResponses === undefined || result.correctResponses > correctResponses) {
+        correctResponses = result.correctResponses;
+        feedback = result.feedback;
+      }
+    }
+  }
+
+  let choices = normalizedQuestion.choices && normalizedQuestion.choices.filter((choice) => !choiceIsEmpty(choice));
+
+  const lockChoiceOrder = lockChoices(normalizedQuestion, session, env);
+
+  if (!lockChoiceOrder) {
+    choices = await getShuffledChoices(choices, session, updateSession, 'id');
+  }
+
+  // we don't need to check for fewer areas to be filled in the alternateResponses
+  // because the alternates are an option in the default correct response (for scoring)
+  const responseAreasToBeFilled = Object.values(normalizedQuestion.correctResponse || {}).filter(
+    (value) => !!value,
+  ).length;
+
+  const shouldIncludeCorrectResponse = env.mode === 'evaluate';
+
+  const out = {
+    ...normalizedQuestion,
+    prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
+    choices,
+    feedback,
+    mode: env.mode,
+    disabled: env.mode !== 'gather',
+    responseCorrect: shouldIncludeCorrectResponse ? getScore(normalizedQuestion, session) === 1 : undefined,
+    correctResponse: shouldIncludeCorrectResponse ? normalizedQuestion.correctResponse : undefined,
+    responseAreasToBeFilled,
+  };
+
+  if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+    out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;
+    out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
+      ? normalizedQuestion.teacherInstructions
+      : null;
+  } else {
+    out.rationale = null;
+    out.teacherInstructions = null;
+  }
+
+  return out;
+}
+
+export const getScore = (config, session) => {
+  const responses = getAllCorrectResponses(config);
+  const allCorrectResponses = responses.possibleResponses;
+  const maxScore = Object.keys(config.correctResponse).length;
+  const numberOfPossibleResponses = responses.numberOfPossibleResponses || 0;
+  let correctCount = 0;
+  const { value } = session || {};
+
+  for (let i = 0; i < numberOfPossibleResponses; i++) {
+    const result = Object.keys(allCorrectResponses).reduce((total, key) => {
+      const choices = allCorrectResponses[key];
+      const answer = (value && value[key]) || '';
+
+      if (choices[i] === answer) {
+        return total;
+      }
+
+      return total - 1;
+    }, maxScore);
+
+    if (result > correctCount) {
+      correctCount = result;
+    }
+
+    if (result === maxScore) {
+      break;
+    }
+  }
+
+  const str = maxScore ? (correctCount / maxScore).toFixed(2) : 0;
+
+  return parseFloat(str);
+};
+
+/**
+ * Generates detailed trace log for scoring evaluation
+ * @param {Object} model - the question model
+ * @param {Object} session - the student session
+ * @param {Object} env - the environment
+ * @returns {Array} traceLog - array of trace messages
+ */
+export const getLogTrace = (model, session, env) => {
+  const traceLog = [];
+  const { value } = session || {};
+  
+  const responseAreas = Object.keys(model.correctResponse || {});
+  const totalAreas = responseAreas.length;
+  traceLog.push(`${totalAreas} response area(s) defined in this question.`);
+  
+  if (value && Object.keys(value).length > 0) {
+    const filledAreas = Object.entries(value).filter(([key, val]) => val && val.trim()).length;
+    traceLog.push(`Student added choices to ${filledAreas} out of ${totalAreas} response area(s).`);
+    
+    responseAreas.forEach((areaKey) => {
+      const studentAnswer = (value && value[areaKey]) || '';
+      const correctAnswer = model.correctResponse[areaKey] || '';
+      
+      if (studentAnswer.trim()) {
+        traceLog.push(`Response area ${areaKey}: student placed '${studentAnswer}' (correct answer: '${correctAnswer}').`);
+      } else {
+        traceLog.push(`Response area ${areaKey}: left empty (correct answer: '${correctAnswer}').`);
+      }
+    });
+  } else {
+    traceLog.push('Student did not add any choices to response areas.');
+  }
+
+  const responses = getAllCorrectResponses(model);
+  const allCorrectResponses = responses.possibleResponses;
+  const numberOfPossibleResponses = responses.numberOfPossibleResponses || 0;
+  
+  if (numberOfPossibleResponses > 1) {
+    traceLog.push(`${numberOfPossibleResponses} alternate response combinations are accepted for this question.`);
+  }
+
+  const partialScoringEnabled = partialScoring.enabled(model, env);
+  const scoringMethod = partialScoringEnabled ? 'partial scoring' : 'all-or-nothing scoring';
+  traceLog.push(`Score calculated using ${scoringMethod}.`);
+
+  const score = getScore(model, session);
+  traceLog.push(`Final score: ${score}.`);
+
+  return traceLog;
+};
+
+/**
+ *
+ * The score is partial by default for checkbox mode, allOrNothing for radio mode.
+ * To disable partial scoring for checkbox mode you either set model.partialScoring = false or env.partialScoring =
+ * false. the value in `env` will override the value in `model`.
+ * @param {Object} model - the main model
+ * @param {boolean} model.partialScoring - is partial scoring enabled (if undefined set to to true)
+ * @param {*} session
+ * @param {Object} env
+ * @param {boolean} env.partialScoring - is partial scoring enabled (if undefined default to true) This overrides
+ *   `model.partialScoring`.
+ */
+export function outcome(model, session, env = {}) {
+  return new Promise((resolve) => {
+    if (!session || isEmpty(session)) {
+      resolve({ 
+        score: 0, 
+        empty: true, 
+        traceLog: ['Student did not add any choices to response areas. Score is 0.'] 
+      });
+    } else {
+      const traceLog = getLogTrace(model, session, env);
+      const score = getScore(model, session);
+      const partialScoringEnabled = partialScoring.enabled(model, env);
+
+      resolve({
+        score: partialScoringEnabled ? score : score === 1 ? 1 : 0,
+        empty: false,
+        traceLog
+      });
+    }
+  });
+}
+
+export const createCorrectResponseSession = (question, env) => {
+  return new Promise((resolve) => {
+    if (env.mode !== 'evaluate' && env.role === 'instructor') {
+      resolve({
+        value: question.correctResponse,
+        id: '1',
+      });
+    } else {
+      resolve(null);
+    }
+  });
+};
+
+// remove all html tags
+const getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');
+
+// remove all html tags except img, iframe and source tag for audio
+const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
+
+export const validate = (model = {}, config = {}) => {
+  const { choices, correctResponse, markup } = model;
+  const { minChoices = 2, maxChoices, maxResponseAreas } = config;
+  const errors = {};
+
+  ['teacherInstructions', 'prompt', 'rationale'].forEach((field) => {
+    if (config[field]?.required && !getContent(model[field])) {
+      errors[field] = 'This field is required.';
+    }
+  });
+
+  const nbOfResponseAreas = ((markup || '').match(/\{\{(\d+)\}\}/g) || []).length;
+  const nbOfChoices = (choices || []).length;
+  const emptyResponseAreas = Object.values(correctResponse)?.filter((response) => !response);
+
+  if (emptyResponseAreas.length) {
+    errors.correctResponseError = 'There should be a choice defined for each response area.';
+  }
+
+  if (nbOfResponseAreas > maxResponseAreas) {
+    errors.responseAreasError = `No more than ${maxResponseAreas} response areas should be defined.`;
+  } else if (nbOfResponseAreas < 1) {
+    errors.responseAreasError = 'There should be at least 1 response area defined.';
+  }
+
+  if (nbOfChoices < minChoices) {
+    errors.choicesError = `There should be at least ${minChoices} tokens defined.`;
+  } else if (nbOfChoices > maxChoices) {
+    errors.choicesError = `No more than ${maxChoices} tokens should be defined.`;
+  }
+
+  return errors;
+};

package/src/controller/utils.ts

@@ -0,0 +1,50 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/controller/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { cloneDeep, reduce } from 'lodash-es';
+
+const replaceHtmlRegex = /<(?!img)[^>]*>?/gm;
+
+export const getAllCorrectResponses = ({ correctResponse, alternateResponses }) => {
+  return reduce(
+    correctResponse || {},
+    (obj, val, key) => {
+      obj.possibleResponses[key] = [val];
+
+      if (alternateResponses && alternateResponses[key]) {
+        obj.possibleResponses[key] = [...obj.possibleResponses[key], ...cloneDeep(alternateResponses[key])];
+      }
+
+      if (
+        obj.numberOfPossibleResponses === undefined ||
+        obj.numberOfPossibleResponses > obj.possibleResponses[key].length
+      ) {
+        obj.numberOfPossibleResponses = obj.possibleResponses[key].length;
+      }
+
+      return obj;
+    },
+    {
+      possibleResponses: {},
+      numberOfPossibleResponses: undefined,
+    },
+  );
+};
+
+export const choiceIsEmpty = (choice) => {
+  if (choice) {
+    const { value = '' } = choice;
+    const withoutEmptyTags = value.replace(replaceHtmlRegex, '') || '';
+
+    return withoutEmptyTags.trim() === '';
+  }
+
+  return false;
+};

package/src/delivery/index.ts

@@ -0,0 +1,266 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/drag-in-the-blank/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import { EnableAudioAutoplayImage as EnableAudioAutoplayImageImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const EnableAudioAutoplayImage = unwrapReactInteropSymbol(EnableAudioAutoplayImageImport, 'EnableAudioAutoplayImage') || unwrapReactInteropSymbol(renderUi.EnableAudioAutoplayImage, 'EnableAudioAutoplayImage');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import { ModelSetEvent, SessionChangedEvent } from '@pie-element/shared-player-events';
+import Main from './main.js';
+
+export const isComplete = (session, model, audioComplete, elementContext) => {
+  const { autoplayAudioEnabled, completeAudioEnabled, responseAreasToBeFilled } = model || {};
+
+  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {
+    if (elementContext) {
+      const audio = elementContext.querySelector('audio');
+      const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+      // only require audio completion if audio exists and is inside the prompt
+      if (audio && isInsidePrompt) {
+        return false;
+      }
+    }
+  }
+
+  if (!session || !session.value) {
+    return false;
+  }
+
+  const filledResponseAreas = Object.values(session.value || {}).filter((val) => !!val).length;
+
+  return filledResponseAreas >= responseAreasToBeFilled;
+};
+
+export default class DragInTheBlank extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+    this._audioInitialized = false;
+    this.audioComplete = false;
+    this._root = null;
+  }
+
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(
+      new ModelSetEvent(
+        this.tagName.toLowerCase(),
+        isComplete(this._session, this._model, this.audioComplete, this),
+        !!this._model,
+      ),
+    );
+    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+    this._audioInitialized = false;
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  _render: any = () => {
+    if (this._model && this._session) {
+      let elem = React.createElement(Main, {
+        model: this._model,
+        value: this._session.value,
+        onChange: this.changeSession,
+      });
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(elem);
+      setTimeout(() => renderMath(this), 0);
+    }
+  };
+
+  dispatchChangedEvent: any = () => {
+    this.dispatchEvent(
+      new SessionChangedEvent(
+        this.tagName.toLowerCase(),
+        isComplete(this._session, this._model, this.audioComplete, this),
+      ),
+    );
+  };
+
+  changeSession: any = (value) => {
+    this.session.value = value;
+    this.session.selector = 'Mouse';
+
+    this.dispatchChangedEvent();
+    this._render();
+  };
+
+  _createAudioInfoToast() {
+    const info = document.createElement('div');
+    info.id = 'play-audio-info';
+
+    Object.assign(info.style, {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'white',
+      zIndex: '1000',
+      cursor: 'pointer',
+    });
+
+    const img = document.createElement('img');
+    img.src = EnableAudioAutoplayImage;
+    img.alt = 'Click anywhere to enable audio autoplay';
+    img.width = 500;
+    img.height = 300;
+
+    info.appendChild(img);
+    return info;
+  }
+
+  connectedCallback() {
+    this._render();
+
+    // Observation:  audio in Chrome will have the autoplay attribute,
+    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
+    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
+    const observer = new MutationObserver((mutationsList, observer) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          if (this._audioInitialized) return;
+          const audio = this.querySelector('audio');
+          const isInsidePrompt = audio && audio.closest('#preview-prompt');
+
+          if (!this._model) return;
+          if (!this._model.autoplayAudioEnabled) return;
+          if (audio && !isInsidePrompt) return;
+          if (!audio) return;
+
+          const info = this._createAudioInfoToast();
+          const container = this.querySelector('#main-container');
+          const enableAudio = () => {
+            if (this.querySelector('#play-audio-info')) {
+              audio.play();
+              container.removeChild(info);
+            }
+
+            document.removeEventListener('click', enableAudio);
+          };
+
+          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
+          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
+          setTimeout(() => {
+            if (audio.paused && !this.querySelector('#play-audio-info')) {
+              // add info message as a toast to enable audio playback
+              container.appendChild(info);
+              document.addEventListener('click', enableAudio);
+            } else {
+              document.removeEventListener('click', enableAudio);
+            }
+          }, 500);
+
+          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
+          const handlePlaying = () => {
+            //timestamp when auto-played audio started playing
+            this._session.audioStartTime = this._session.audioStartTime || new Date().getTime();
+
+            const info = this.querySelector('#play-audio-info');
+            if (info) {
+              container.removeChild(info);
+            }
+
+            audio.removeEventListener('playing', handlePlaying);
+          };
+
+          audio.addEventListener('playing', handlePlaying);
+
+          // we need to listen for the ended event to update the isComplete state
+          const handleEnded = () => {
+            //timestamp when auto-played audio completed playing
+            this._session.audioEndTime = this._session.audioEndTime || new Date().getTime();
+
+            let { audioStartTime, audioEndTime, waitTime } = this._session;
+            if (!waitTime && audioStartTime && audioEndTime) {
+              // waitTime is elapsed time the user waited for auto-played audio to finish
+              this._session.waitTime = audioEndTime - audioStartTime;
+            }
+
+            this.audioComplete = true;
+            this.dispatchChangedEvent();
+            audio.removeEventListener('ended', handleEnded);
+          };
+
+          audio.addEventListener('ended', handleEnded);
+
+          // store references to remove later
+          this._audio = audio;
+          this._handlePlaying = handlePlaying;
+          this._handleEnded = handleEnded;
+          this._enableAudio = enableAudio;
+          // set to true to prevent multiple initializations
+          this._audioInitialized = true;
+
+          observer.disconnect();
+        }
+      });
+    });
+
+    observer.observe(this, { childList: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._enableAudio);
+
+    if (this._audio) {
+      this._audio.removeEventListener('playing', this._handlePlaying);
+      this._audio.removeEventListener('ended', this._handleEnded);
+      this._audio = null;
+    }
+
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}