@pie-element/inline-dropdown 0.1.0

package/src/author/response-area.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/configure/src/response-area.jsx
+ * @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 ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+
+const ResponseArea: any = styled('div')(({ theme }) => ({
+  paddingBottom: theme.spacing(2.5),
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+class ResponseAreaComponent extends React.Component {
+  static propTypes = {
+    editableHtmlProps: PropTypes.object.isRequired,
+    responseAreasError: PropTypes.string,
+    responseAreaChoicesError: PropTypes.string,
+  };
+
+  componentDidMount() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = ReactDOM.findDOMNode(this);
+
+    renderMath(domNode);
+  }
+
+  render() {
+    const { editableHtmlProps, responseAreasError, responseAreaChoicesError } = this.props;
+
+    return (
+      <ResponseArea>
+        <EditableHtml {...editableHtmlProps} />
+        {responseAreasError && <ErrorText>{responseAreasError}</ErrorText>}
+        {responseAreaChoicesError && <ErrorText>{responseAreaChoicesError}</ErrorText>}
+      </ResponseArea>
+    );
+  }
+}
+
+export default ResponseAreaComponent;

package/src/author/utils.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/configure/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.
+ */
+
+export const generateValidationMessage = (config) => {
+  const { maxResponseAreas, maxResponseAreaChoices } = config;
+
+  const responseAreasMessage =
+    '\nThere should be at least 1 ' +
+    (maxResponseAreas ? `and at most ${maxResponseAreas} ` : '') +
+    'response area' +
+    (maxResponseAreas ? 's' : '') +
+    ' defined.' +
+    (maxResponseAreaChoices
+      ? `\nThere should be at most ${maxResponseAreaChoices} choices defined per response area.`
+      : '');
+
+  const message = 'Validation requirements:' + responseAreasMessage;
+
+  return message;
+};
+
+export const getPluginProps = (props = {}, baseInputConfiguration = {}) => ({
+  ...baseInputConfiguration,
+  ...props,
+});

package/src/controller/defaults.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/controller/src/defaults.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.
+ */
+
+export default {
+  alternateResponse: {},
+  choiceRationaleEnabled: true,
+  choices: {},
+  disabled: false,
+  displayType: 'block',
+  markup: '',
+  mode: 'gather',
+  prompt: '',
+  promptEnabled: true,
+  rationale: '',
+  rationaleEnabled: true,
+  shuffle: true,
+  studentInstructionsEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+};

package/src/controller/index.ts

@@ -0,0 +1,340 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/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, map, reduce } from 'lodash-es';
+import { lockChoices, getShuffledChoices, partialScoring } from '@pie-element/shared-controller-utils';
+import defaults from './defaults.js';
+
+import { getAllCorrectResponses } from './utils.js';
+
+const getFeedback = (correct) => {
+  if (correct) {
+    return 'correct';
+  }
+
+  return 'incorrect';
+};
+
+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);
+  const { value = {} } = session || {};
+  let choices = reduce(
+    normalizedQuestion.choices,
+    (obj, area, key) => {
+      obj[key] = map(area, (choice) => choice);
+
+      return obj;
+    },
+    {},
+  );
+
+  let feedback = {};
+
+  if (env.mode === 'evaluate') {
+    const allCorrectResponses = getAllCorrectResponses(normalizedQuestion);
+    const respAreaLength = Object.keys(allCorrectResponses).length;
+    let correctResponses = 0;
+
+    for (let i = 0; i < respAreaLength; i++) {
+      const result = reduce(
+        allCorrectResponses,
+        (obj, choices, key) => {
+          const answer = (value && value[key]) || '';
+          const correctChoice = choices[i] || '';
+          const isCorrect = answer && correctChoice && correctChoice === answer;
+
+          obj.feedback[key] = getFeedback(isCorrect);
+
+          if (isCorrect) {
+            obj.correctResponses += 1;
+          }
+
+          return obj;
+        },
+        { correctResponses: 0, feedback: {} },
+      );
+
+      if (result.correctResponses >= correctResponses) {
+        correctResponses = result.correctResponses;
+        feedback = result.feedback;
+      }
+
+      if (result.correctResponses === respAreaLength) {
+        break;
+      }
+    }
+  }
+
+  const lockChoiceOrder = lockChoices(normalizedQuestion, session, env);
+
+  if (!lockChoiceOrder) {
+    const shuffledValues = {};
+    const keys = Object.keys(choices);
+
+    const us = (part) => (id, element, update) => {
+      return new Promise((resolve) => {
+        shuffledValues[part] = update.shuffledValues;
+        resolve();
+      });
+    };
+
+    let i;
+
+    for (i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const storedValues = session?.shuffledValues?.[key];
+
+      choices[key] = await getShuffledChoices(
+        choices[key],
+        // the shuffledValues structure was updated to an object like { choice_key: [] }
+        // and we need to override shuffledValues if it's not an array
+        { shuffledValues: Array.isArray(storedValues) ? storedValues : [] },
+        us(key),
+        'value',
+      );
+    }
+
+    if (!isEmpty(shuffledValues)) {
+      if (session && updateSession && typeof updateSession === 'function') {
+        updateSession(session.id, session.element, {
+          shuffledValues,
+        }).catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error('update session failed', e);
+        });
+      }
+    }
+  }
+
+  let teacherInstructions = null;
+  let rationale = null;
+
+  const choicesWillNullRationales = (Object.keys(choices) || []).reduce((acc, currentValue) => {
+    acc[currentValue] = (choices[currentValue] || []).map((choice) => ({
+      ...choice,
+      rationale: null,
+    }));
+
+    return acc;
+  }, {});
+
+  if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+    rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;
+    teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
+
+    choices = normalizedQuestion.choiceRationaleEnabled ? normalizedQuestion.choices : choicesWillNullRationales;
+  } else {
+    rationale = null;
+    teacherInstructions = null;
+    choices = choicesWillNullRationales;
+  }
+
+  const out = {
+    disabled: env.mode !== 'gather',
+    mode: env.mode,
+    prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
+    displayType: normalizedQuestion.displayType,
+    markup: normalizedQuestion.markup,
+    choices,
+    feedback,
+
+    responseCorrect: env.mode === 'evaluate' ? getScore(normalizedQuestion, session) === 1 : undefined,
+    rationale,
+    teacherInstructions,
+    language: normalizedQuestion.language,
+    extraCSSRules: normalizedQuestion.extraCSSRules,
+  };
+
+  return out;
+}
+
+export const getScore = (config, session) => {
+  const { value = {} } = session || {};
+  const maxScore = config && config.choices ? Object.keys(config.choices).length : 0;
+  const allCorrectResponses = getAllCorrectResponses(config);
+  let correctCount = 0;
+
+  for (let i = 0; i < maxScore; i++) {
+    const result = reduce(
+      allCorrectResponses,
+      (total, choices, key) => {
+        const answer = (value && value[key]) || '';
+        const correctChoice = choices[i] || '';
+
+        if (correctChoice && answer && correctChoice === answer) {
+          return total;
+        }
+
+        return total - 1;
+      },
+      maxScore,
+    );
+
+    if (result > correctCount) {
+      correctCount = result;
+    }
+
+    if (result === maxScore) {
+      break;
+    }
+  }
+
+  const str = (correctCount / maxScore).toFixed(2);
+
+  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 allCorrectResponses = getAllCorrectResponses(model);
+  const responseAreaKeys = Object.keys(allCorrectResponses);
+  const totalAreas = responseAreaKeys.length;
+  
+  traceLog.push(`${totalAreas} dropdown response area(s) defined in this question.`);
+  
+  if (value && Object.keys(value).length > 0) {
+    const selectedAreas = Object.entries(value).filter(([key, val]) => val && val.trim()).length;
+    traceLog.push(`Student selected options in ${selectedAreas} out of ${totalAreas} dropdown(s).`);
+    
+    responseAreaKeys.forEach((areaKey) => {
+      const studentSelection = (value && value[areaKey]) || '';
+      const correctOptions = allCorrectResponses[areaKey] || [];
+      
+      if (studentSelection.trim()) {
+        traceLog.push(`Dropdown ${parseInt(areaKey) + 1}: student selected '${studentSelection}' (correct options: [${correctOptions.map(opt => `'${opt}'`).join(', ')}]).`);
+      } else {
+        traceLog.push(`Dropdown ${parseInt(areaKey) + 1}: no selection made (correct options: [${correctOptions.map(opt => `'${opt}'`).join(', ')}]).`);
+      }
+    });
+  } else {
+    traceLog.push('Student did not make any selections in the dropdowns.');
+  }
+
+  const partialScoringEnabled = partialScoring.enabled(model, env);
+  traceLog.push(
+    `Scoring method: ${
+      partialScoringEnabled ? 'partial scoring' : 'all-or-nothing scoring'
+    }.`
+  );
+
+  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 make any selections in the dropdowns. 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 : Math.floor(score),
+        empty: false,
+        traceLog
+      });
+    }
+  });
+}
+
+export const createCorrectResponseSession = (question, env) => {
+  return new Promise((resolve) => {
+    if (env.mode !== 'evaluate' && env.role === 'instructor') {
+      const { choices } = question;
+      const value = {};
+
+      if (choices) {
+        Object.keys(choices).forEach((key, i) => {
+          const correctChoices = choices[key] && choices[key].filter((c) => c.correct);
+
+          value[i] = correctChoices && correctChoices[0].value;
+        });
+      }
+
+      resolve({
+        id: '1',
+        value,
+      });
+    } 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 { markup, choices } = model;
+  const { maxResponseAreas, maxResponseAreaChoices } = 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;
+
+  if (nbOfResponseAreas > maxResponseAreas) {
+    errors.responseAreasError = `No more than ${maxResponseAreas} response areas should be defined.`;
+  } else if (nbOfResponseAreas < 1) {
+    errors.responseAreasError = 'There should be defined at least 1 response area.';
+  }
+
+  (Object.keys(choices) || []).forEach((choiceKey) => {
+    if (choices[choiceKey] && choices[choiceKey].length > maxResponseAreaChoices) {
+      errors.responseAreaChoicesError = `No more than ${maxResponseAreaChoices} choices per response area should be defined.`;
+    }
+  });
+
+  return errors;
+};

package/src/controller/utils.ts

@@ -0,0 +1,36 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/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 { forEach } from 'lodash-es';
+
+export const getAllCorrectResponses = ({ choices, alternateResponse }) => {
+  alternateResponse = alternateResponse || {};
+  const correctAnswers = {};
+
+  forEach(choices, (respArea, key) => {
+    if (!correctAnswers[key]) {
+      correctAnswers[key] = [];
+    }
+
+    if (respArea) {
+      respArea.forEach((choice) => {
+        if (choice.correct) {
+          correctAnswers[key].push(choice.value);
+
+          if (alternateResponse[key]) {
+            correctAnswers[key] = [...correctAnswers[key], ...alternateResponse[key]];
+          }
+        }
+      });
+    }
+  });
+
+  return correctAnswers;
+};

package/src/delivery/index.ts

@@ -0,0 +1,100 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/inline-dropdown/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 { ModelSetEvent, SessionChangedEvent } from '@pie-element/shared-player-events';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+import InlineDropdown from './inline-dropdown.js';
+
+export default class RootInlineDropdown extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(
+      new ModelSetEvent(this.tagName.toLowerCase(), this.session && !!this.session.value, !!this._model),
+    );
+
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  setLangAttribute() {
+    const language = this._model && typeof this._model.language ? this._model.language : '';
+    const lang = language ? language.slice(0, 2) : 'en';
+    this.setAttribute('lang', lang);
+  }
+
+  _render: any = () => {
+    if (this._model && this._session) {
+      let elem = React.createElement(InlineDropdown, {
+        model: this._model,
+        prompt: this._model.prompt,
+        rationale: this._model.rationale,
+        teacherInstructions: this._model.teacherInstructions,
+        disabled: this._model.disabled,
+        displayType: this._model.displayType,
+        markup: this._model.markup,
+        mode: this._model.mode,
+        choices: this._model.choices,
+        value: this._session.value,
+        feedback: this._model.feedback,
+        language: this._model.language,
+        onChange: this.changeSession,
+      });
+
+      this.setLangAttribute();
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(elem);
+      queueMicrotask(() => {
+        renderMath(this);
+      });
+    }
+  };
+
+  dispatchChangedEvent: any = () => {
+    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.session && !!this.session.value));
+  };
+
+  changeSession: any = (value) => {
+    this.session.value = value;
+    this.dispatchChangedEvent();
+    this._render();
+  };
+
+  connectedCallback() {
+    this.setAttribute('aria-label', 'Inline Dropdown Question');
+    this.setAttribute('role', 'region');
+
+    this._render();
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}