@pie-element/multiple-choice 0.1.0

package/dist/print/index.js

@@ -0,0 +1,44 @@
+import e from "../delivery/main.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/cloneDeep.js";
+import n from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/debounce.js";
+import r from "react";
+import { createRoot as i } from "react-dom/client";
+import a from "debug";
+import { renderMath as o } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/print/index.tsx
+var s = a("pie-element:multiple-choice:print"), c = (e, n) => {
+	let r = n.role === "instructor";
+	return e.prompt = e.promptEnabled === !1 ? void 0 : e.prompt, e.teacherInstructions = r && e.teacherInstructionsEnabled !== !1 ? e.teacherInstructions : void 0, e.showTeacherInstructions = r, e.alwaysShowCorrect = r, e.mode = r ? "evaluate" : e.mode, e.disabled = !0, e.animationsDisabled = !0, e.lockChoiceOrder = !0, e.choicesLayout = e.choicesLayout || "vertical", e.choices = t(e.choices).map((t) => (t.rationale = r && e.rationaleEnabled !== !1 ? t.rationale : void 0, t.hideTick = r, t.feedback = void 0, t)), e.keyMode = e.choicePrefix || "letters", e;
+}, l = class extends HTMLElement {
+	constructor() {
+		super(), this._options = null, this._model = null, this._session = [], this._root = null, this._rerender = n(() => {
+			if (this._model && this._session) {
+				let t = c(this._model, this._options), n = this._options && r.createElement(e, {
+					model: t,
+					session: {},
+					options: this._options
+				});
+				this._root ||= i(this), this._root.render(n), requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						s("render complete - render math"), o(this);
+					});
+				});
+			} else s("skip");
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		});
+	}
+	set options(e) {
+		this._options = e;
+	}
+	set model(e) {
+		this._model = e, this._rerender();
+	}
+	connectedCallback() {}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { l as default };

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@pie-element/multiple-choice",
+  "version": "0.1.0",
+  "description": "React implementation of multiple-choice element synced from pie-elements",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/correct-answer-toggle": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@pie-lib/translator": "0.1.0",
+    "classnames": "^2.2.5",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.8.1",
+    "react-transition-group": "^4.4.5",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./delivery": {
+      "development": "./src/delivery/index.ts",
+      "types": "./dist/delivery/index.d.ts",
+      "default": "./dist/delivery/index.js"
+    },
+    "./author": {
+      "development": "./src/author/index.ts",
+      "types": "./dist/author/index.d.ts",
+      "default": "./dist/author/index.js"
+    },
+    "./controller": {
+      "development": "./src/controller/index.ts",
+      "types": "./dist/controller/index.d.ts",
+      "default": "./dist/controller/index.js"
+    },
+    "./print": {
+      "development": "./src/print/index.tsx",
+      "types": "./dist/print/index.d.ts",
+      "default": "./dist/print/index.js"
+    }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "typescript": "^5.9.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "bun x vite build && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "demo": "bun x vite --mode demo",
+    "test": "bun x vitest run"
+  }
+}

package/src/author/defaults.ts

@@ -0,0 +1,168 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/configure/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.
+ */
+
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configure
+ */
+export default {
+  model: {
+    choiceMode: 'checkbox',
+    choicePrefix: 'letters',
+    choices: [],
+    choicesLayout: 'vertical',
+    feedbackEnabled: false,
+    gridColumns: 2,
+    lockChoiceOrder: true,
+    partialScoring: true,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    scoringType: 'auto',
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    selectedAnswerBackgroundColor: 'initial',
+    keyboardEventsEnabled: false,
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    choices: {
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    choicesLayout: {
+      settings: false,
+      label: 'Choices Layout',
+    },
+    gridColumns: {
+      label: 'Grid columns',
+    },
+    answerChoiceCount: 0,
+    addChoiceButton: {
+      settings: true,
+      label: 'Add a Choice',
+    },
+    choiceMode: {
+      settings: true,
+      label: 'Response Type',
+    },
+    choicePrefix: {
+      settings: true,
+      label: 'Choice Labels',
+    },
+    deleteChoice: {
+      settings: true,
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback',
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order',
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring',
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      inputConfiguration: {
+        audio: { disabled: true },
+        video: { disabled: true },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type',
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions',
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    toolbarEditorPosition: {
+      settings: false,
+      label: 'Toolbar Editor Position',
+    },
+    minAnswerChoices: 2,
+    maxAnswerChoices: 5,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 636,
+      choices: 900,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      choices: 300,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false,
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: [],
+    },
+  },
+};

package/src/author/index.ts

@@ -0,0 +1,258 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multiple-choice/configure/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 debug from 'debug';
+import {
+  DeleteImageEvent,
+  InsertImageEvent,
+  ModelUpdatedEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-element/shared-configure-events';
+
+import Main from './main.js';
+import { choiceUtils as utils } from '@pie-lib/config-ui';
+import { defaults } from 'lodash-es';
+
+import sensibleDefaults from './defaults.js';
+
+const log = debug('multiple-choice:configure');
+
+const generateFormattedChoices = (choices, choiceCount = 0) => {
+  if (!choices || choices.length === 0) {
+    let formattedChoices = [];
+
+    for (let i = 0; i < choiceCount; i++) {
+      formattedChoices.push({
+        value: `${i}`,
+        label: '',
+        feedback: {
+          type: 'none',
+          value: '',
+        },
+      });
+    }
+
+    return formattedChoices;
+  }
+
+  return choices;
+};
+
+const prepareCustomizationObject = (config, model) => {
+  const configuration = defaults(config, sensibleDefaults.configuration);
+
+  return {
+    configuration,
+    model: {
+      ...model,
+      choices: generateFormattedChoices(
+        (model && model.choices) || [],
+        configuration && configuration.answerChoiceCount,
+      ),
+    },
+  };
+};
+
+export default class MultipleChoice extends HTMLElement {
+  static createDefaultModel = (model = {}) => {
+    const normalizedModel = utils.normalizeChoices({
+      ...sensibleDefaults.model,
+      ...model,
+      choices: generateFormattedChoices((model && model.choices) || []),
+    });
+
+    // This is used for offering support for old models which have the property "verticalMode"
+    normalizedModel.choicesLayout =
+      model.choicesLayout || (model.verticalMode === false && 'horizontal') || sensibleDefaults.model.choicesLayout;
+
+    return normalizedModel;
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._reactContainer = null;
+    this._model = MultipleChoice.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = MultipleChoice.createDefaultModel(s);
+
+    this._render();
+  }
+
+  set configuration(c) {
+    const info = prepareCustomizationObject(c, this._model);
+
+    this.onModelChanged(info.model);
+
+    const newConfiguration = {
+      ...sensibleDefaults.configuration,
+      ...info.configuration,
+    };
+    this._configuration = newConfiguration;
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (newConfiguration?.language?.enabled) {
+      if (newConfiguration?.languageChoices?.options?.length) {
+        this._model.language = newConfiguration?.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language,
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this._render();
+  }
+
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = m;
+    this._render();
+
+    this.dispatchModelUpdated(reset);
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = prepareCustomizationObject(c, this._model).configuration;
+
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+
+    this._render();
+  }
+
+  /** @param {done, progress, file} handler */
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    console.log('🔧 [multiple-choice-configure] _render - Starting render');
+    console.log('🔧 [multiple-choice-configure] _render - Model:', this._model ? 'present' : 'missing');
+    console.log('🔧 [multiple-choice-configure] _render - Configuration:', this._configuration ? 'present' : 'missing');
+    console.log('🔧 [multiple-choice-configure] _render - Root exists:', !!this._root);
+    log('_render - Starting render');
+    log('_render - Model:', this._model ? 'present' : 'missing');
+    log('_render - Configuration:', this._configuration ? 'present' : 'missing');
+    log('_render - Root exists:', !!this._root);
+
+    try {
+      let element = React.createElement(Main, {
+        model: this._model,
+        configuration: this._configuration,
+        onModelChanged: this.onModelChanged,
+        onConfigurationChanged: this.onConfigurationChanged,
+        disableSidePanel: this._disableSidePanel,
+        imageSupport: {
+          add: this.insertImage.bind(this),
+          delete: this.onDeleteImage.bind(this),
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          delete: this.onDeleteSound.bind(this),
+        },
+      });
+
+      if (!this._root) {
+        console.log('🔧 [multiple-choice-configure] _render - Creating React container');
+        log('_render - Creating React container');
+
+        // Create a container div for React to render into
+        this._reactContainer = document.createElement('div');
+        this._reactContainer.className = 'pie-configure-wrapper';
+        this.appendChild(this._reactContainer);
+
+        console.log('🔧 [multiple-choice-configure] _render - Creating new React root');
+        log('_render - Creating new React root');
+        this._root = createRoot(this._reactContainer);
+        console.log('✅ [multiple-choice-configure] _render - React root created successfully');
+        log('_render - React root created successfully');
+      }
+
+      console.log('🔧 [multiple-choice-configure] _render - Calling root.render()');
+      log('_render - Calling root.render()');
+      this._root.render(element);
+      console.log('✅ [multiple-choice-configure] _render - Render completed successfully');
+      log('_render - Render completed successfully');
+    } catch (error) {
+      console.error('❌ [multiple-choice-configure] Render error:', error);
+      console.error('Error stack:', error.stack);
+      throw error;
+    }
+  }
+
+  connectedCallback() {
+    console.log('🔧 [multiple-choice-configure] connectedCallback - Component connected to DOM');
+    log('connectedCallback - Component connected to DOM');
+    log('connectedCallback - Model:', this._model ? 'present' : 'missing');
+    log('connectedCallback - Configuration:', this._configuration ? 'present' : 'missing');
+  }
+
+  disconnectedCallback() {
+    console.log('🔧 [multiple-choice-configure] disconnectedCallback - Component disconnected from DOM');
+    log('disconnectedCallback - Component disconnected from DOM');
+    if (this._root) {
+      console.log('🔧 [multiple-choice-configure] disconnectedCallback - Unmounting React root');
+      log('disconnectedCallback - Unmounting React root');
+      this._root.unmount();
+      this._root = null;
+    }
+    if (this._reactContainer) {
+      this._reactContainer = null;
+    }
+  }
+}