@pie-element/multiple-choice 13.1.1-next.0 → 13.2.0-next.1

package/dist/print/index.js

@@ -1,44 +0,0 @@
-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/src/author/main.tsx

@@ -1,509 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/configure/src/main.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 PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import {
-  AlertDialog,
-  InputContainer,
-  ChoiceConfiguration,
-  settings,
-  layout,
-  choiceUtils as utils,
-} from '@pie-lib/config-ui';
-import { color } from '@pie-lib/render-ui';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Info from '@mui/icons-material/Info';
-import { merge } from 'lodash-es';
-import { generateValidationMessage } from './utils.js';
-
-const { Panel, toggle, radio, dropdown } = settings;
-
-const MAX_CHOICES = 9;
-
-const PromptHolder: any = styled(InputContainer)(({ theme }) => ({
-  width: '100%',
-  paddingTop: theme.spacing(2),
-  marginBottom: theme.spacing(2),
-}));
-
-const RationaleHolder: any = styled(InputContainer)(({ theme }) => ({
-  flex: 1,
-  marginTop: theme.spacing(1.5),
-  paddingTop: theme.spacing(2),
-  marginLeft: theme.spacing(3.5),
-}));
-
-const ChoiceConfigurationHolder: any = styled(InputContainer)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  marginBottom: theme.spacing(1),
-  width: '100%',
-}));
-
-
-const AddButton: any = styled(Button)(({ theme }) => ({
-  marginTop: theme.spacing(1),
-  float: 'right',
-}));
-
-const DisableButton: any = styled(AddButton)({
-  cursor: 'not-allowed',
-  pointerEvents: 'all',
-  backgroundColor: color.disabled(),
-  '&:hover': {
-    backgroundColor: color.disabled(),
-  },
-  '&:focus': {
-    backgroundColor: color.disabled(),
-  },
-});
-
-const FlexContainer: any = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const TitleText: any = styled(Typography)(({ theme }) => ({
-  fontSize: theme.typography.fontSize + 2,
-  marginRight: theme.spacing(1),
-}));
-
-const StyledTooltip: any = styled(Tooltip)(({ theme }) => ({
-  '& .MuiTooltip-tooltip': {
-    fontSize: theme.typography.fontSize - 2,
-    whiteSpace: 'pre',
-    maxWidth: '500px',
-  },
-}));
-
-const ErrorText: any = styled('div')(({ theme }) => ({
-  fontSize: theme.typography.fontSize - 2,
-  color: theme.palette.error.main,
-  paddingTop: theme.spacing(1),
-}));
-
-const Design = (props) => {
-  const {
-    model,
-    configuration,
-    onPromptChanged,
-    onChoiceChanged,
-    onRemoveChoice,
-    onAddChoice,
-    imageSupport,
-    uploadSoundSupport,
-    onChangeModel,
-    onConfigurationChanged,
-    onTeacherInstructionsChanged,
-  } = props;
-
-  const {
-    addChoiceButton = {},
-    contentDimensions = {},
-    feedback = {},
-    deleteChoice = {},
-    choiceMode = {},
-    choicePrefix = {},
-    partialScoring = {},
-    lockChoiceOrder = {},
-    teacherInstructions = {},
-    studentInstructions = {},
-    rationale = {},
-    scoringType = {},
-    sequentialChoiceLabels = {},
-    settingsPanelDisabled,
-    choicesLayout,
-    spellCheck = {},
-    gridColumns,
-    maxImageWidth = {},
-    maxImageHeight = {},
-    prompt = {},
-    withRubric = {},
-    mathMlOptions = {},
-    language = {},
-    languageChoices = {},
-  } = configuration || {};
-  let { maxAnswerChoices } = configuration || {};
-  const {
-    limitChoicesNumber,
-    teacherInstructionsEnabled,
-    rationaleEnabled,
-    feedbackEnabled,
-    promptEnabled,
-    spellCheckEnabled,
-    choices,
-    errors,
-    toolbarEditorPosition,
-    extraCSSRules,
-  } = model || {};
-
-  const {
-    answerChoices: answerChoicesError,
-    choices: choicesErrors,
-    correctResponse: correctResponseError,
-    prompt: promptError,
-    rationale: rationaleErrors,
-    teacherInstructions: teacherInstructionsError,
-  } = errors || {};
-  const nrOfColumnsAvailable = choices?.length ? Array.from({ length: choices.length }, (_, i) => `${i + 1}`) : [];
-
-  const { baseInputConfiguration = {} } = configuration;
-  const toolbarOpts = {
-    position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',
-  };
-
-  // if old property is used, set maxAnswerChoices to 9
-  if (limitChoicesNumber) {
-    maxAnswerChoices = MAX_CHOICES;
-  }
-
-  const getPluginProps = (props = {}) => ({
-    ...baseInputConfiguration,
-    ...props,
-  });
-
-  const validationMessage = generateValidationMessage(configuration);
-  const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-  const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-  const addChoiceButtonTooltip =
-    maxAnswerChoices && choices?.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '';
-
-  const panelSettings = {
-    choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
-    'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
-    choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
-    partialScoring: partialScoring.settings && toggle(partialScoring.label),
-    lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
-    feedbackEnabled: feedback.settings && toggle(feedback.label),
-    choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
-    gridColumns:
-      choicesLayout.settings &&
-      model.choicesLayout === 'grid' &&
-      nrOfColumnsAvailable.length > 0 &&
-      dropdown(gridColumns.label, nrOfColumnsAvailable),
-    'language.enabled': language.settings && toggle(language.label, true),
-    language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
-  };
-
-  const panelProperties = {
-    teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-    studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
-    promptEnabled: prompt.settings && toggle(prompt.label),
-    rationaleEnabled: rationale.settings && toggle(rationale.label),
-    spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-    scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
-    rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
-  };
-
-  return (
-    <layout.ConfigLayout
-      dimensions={contentDimensions}
-      hideSettings={settingsPanelDisabled}
-      extraCSSRules={extraCSSRules}
-      classes={{}}
-      settings={
-        <Panel
-          model={model}
-          onChangeModel={onChangeModel}
-          configuration={configuration}
-          onChangeConfiguration={onConfigurationChanged}
-          groups={{
-            Settings: panelSettings,
-            Properties: panelProperties,
-          }}
-        />
-      }
-    >
-      {teacherInstructionsEnabled && (
-        <PromptHolder label={teacherInstructions.label}>
-            <EditableHtml
-              markup={model.teacherInstructions || ''}
-              onChange={onTeacherInstructionsChanged}
-              imageSupport={imageSupport}
-              nonEmpty={false}
-              disableUnderline
-              error={teacherInstructionsError}
-              toolbarOpts={toolbarOpts}
-              pluginProps={getPluginProps(configuration?.teacherInstructions?.inputConfiguration)}
-              spellCheck={spellCheckEnabled}
-              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
-              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
-              uploadSoundSupport={uploadSoundSupport}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
-        </PromptHolder>
-      )}
-
-      {promptEnabled && (
-        <PromptHolder label={prompt.label}>
-            <EditableHtml
-              markup={model.prompt}
-              onChange={onPromptChanged}
-              imageSupport={imageSupport}
-              nonEmpty={false}
-              disableUnderline
-              error={promptError}
-              toolbarOpts={toolbarOpts}
-              pluginProps={getPluginProps(configuration?.prompt?.inputConfiguration)}
-              spellCheck={spellCheckEnabled}
-              maxImageWidth={maxImageWidth && maxImageWidth.prompt}
-              maxImageHeight={maxImageHeight && maxImageHeight.prompt}
-              uploadSoundSupport={uploadSoundSupport}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-            {promptError && <ErrorText>{promptError}</ErrorText>}
-        </PromptHolder>
-      )}
-
-      <FlexContainer>
-        <TitleText component={'div'}>
-          Choices
-        </TitleText>
-        <StyledTooltip
-          disableFocusListener
-          disableTouchListener
-          placement={'right'}
-          title={validationMessage}
-        >
-          <Info fontSize={'small'} color={'primary'} />
-        </StyledTooltip>
-      </FlexContainer>
-
-      {choices.map((choice, index) => (
-        <ChoiceConfigurationHolder key={`choice-${index}`}>
-          <ChoiceConfiguration
-            key={index}
-            index={index + 1}
-            useLetterOrdering={model.choicePrefix === 'letters'}
-            mode={model.choiceMode}
-            data={choice}
-            defaultFeedback={{}}
-            imageSupport={imageSupport}
-            disableImageAlignmentButtons={true}
-            onDelete={() => onRemoveChoice(index)}
-            onChange={(c) => onChoiceChanged(index, c)}
-            allowFeedBack={feedbackEnabled}
-            allowDelete={deleteChoice.settings}
-            noLabels
-            pluginOpts={getPluginProps(configuration?.choices?.inputConfiguration)}
-            toolbarOpts={toolbarOpts}
-            spellCheck={spellCheckEnabled}
-            error={choicesErrors?.[choice.value] || null}
-            noCorrectAnswerError={correctResponseError}
-            maxImageWidth={(maxImageWidth && maxImageWidth.choices) || defaultImageMaxWidth}
-            maxImageHeight={(maxImageHeight && maxImageHeight.choices) || defaultImageMaxHeight}
-            uploadSoundSupport={uploadSoundSupport}
-            mathMlOptions={mathMlOptions}
-          />
-
-          {rationaleEnabled && (
-            <RationaleHolder key={`rationale-${index}`} label={rationale.label}>
-                <EditableHtml
-                  markup={choice.rationale || ''}
-                  onChange={(c) => onChoiceChanged(index, { ...choice, rationale: c })}
-                  imageSupport={imageSupport}
-                  error={rationaleErrors?.[choice.value] || null}
-                  toolbarOpts={toolbarOpts}
-                  pluginProps={getPluginProps(configuration?.rationale?.inputConfiguration)}
-                  spellCheck={spellCheckEnabled}
-                  maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
-                  maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
-                  uploadSoundSupport={uploadSoundSupport}
-                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                  mathMlOptions={mathMlOptions}
-                />
-                {rationaleErrors?.[choice.value] && (
-                  <ErrorText>{rationaleErrors?.[choice.value]}</ErrorText>
-                )}
-            </RationaleHolder>
-          )}
-        </ChoiceConfigurationHolder>
-      ))}
-
-      {correctResponseError && <ErrorText>{correctResponseError}</ErrorText>}
-      {answerChoicesError && <ErrorText>{answerChoicesError}</ErrorText>}
-
-      {addChoiceButton.settings && (
-        <StyledTooltip title={addChoiceButtonTooltip}>
-          {maxAnswerChoices && choices?.length >= maxAnswerChoices ? (
-            <DisableButton
-              variant="contained"
-              color="primary"
-              onClick={onAddChoice}
-              disabled
-            >
-              {addChoiceButton.label}
-            </DisableButton>
-          ) : (
-            <AddButton
-              variant="contained"
-              color="primary"
-              onClick={onAddChoice}
-            >
-              {addChoiceButton.label}
-            </AddButton>
-          )}
-        </StyledTooltip>
-      )}
-    </layout.ConfigLayout>
-  );
-};
-
-export class Main extends React.Component {
-  static propTypes = {
-    model: PropTypes.object.isRequired,
-    configuration: PropTypes.object.isRequired,
-    disableSidePanel: PropTypes.bool,
-    onModelChanged: PropTypes.func.isRequired,
-    onConfigurationChanged: PropTypes.func.isRequired,
-    imageSupport: PropTypes.shape({
-      add: PropTypes.func.isRequired,
-      delete: PropTypes.func.isRequired,
-    }),
-  };
-
-  state = { showWarning: false };
-
-  onRemoveChoice: any = (index) => {
-    const { model, configuration, onModelChanged } = this.props;
-    const { minAnswerChoices } = configuration || {};
-
-    if (minAnswerChoices && model.choices.length === minAnswerChoices) {
-      this.setState({ showWarning: true });
-
-      return;
-    }
-
-    model.choices.splice(index, 1);
-    onModelChanged(model);
-  };
-
-  onAddChoice: any = () => {
-    const { model, configuration, onModelChanged } = this.props;
-    let { maxAnswerChoices } = configuration || {};
-    const { limitChoicesNumber } = model || {};
-
-    // if old property is used, set maxAnswerChoices to 9
-    if (limitChoicesNumber) {
-      maxAnswerChoices = MAX_CHOICES;
-    }
-
-    if (maxAnswerChoices && model.choices.length >= maxAnswerChoices) {
-      return;
-    }
-
-    model.choices.push({
-      label: '',
-      value: utils.firstAvailableIndex(
-        model.choices.map((c) => c.value),
-        0,
-      ),
-      feedback: { type: 'none' },
-    });
-
-    onModelChanged(model);
-  };
-
-  onChoiceChanged: any = (index, choice) => {
-    const { model, onModelChanged } = this.props;
-
-    if (choice.correct && model.choiceMode === 'radio') {
-      model.choices = model.choices.map((c) => merge({}, c, { correct: false }));
-    }
-
-    model.choices.splice(index, 1, choice);
-    onModelChanged(model);
-  };
-
-  onPromptChanged: any = (prompt) => {
-    this.props.onModelChanged({
-      ...this.props.model,
-      prompt,
-    });
-  };
-
-  onTeacherInstructionsChanged: any = (teacherInstructions) => {
-    this.props.onModelChanged({
-      ...this.props.model,
-      teacherInstructions,
-    });
-  };
-
-  onModelChanged: any = (model, key) => {
-    const { onModelChanged } = this.props;
-
-    switch (key) {
-      case 'choiceMode': {
-        let value = model.choiceMode;
-
-        if (value === 'radio') {
-          let correctFound = false;
-
-          model.choices = model.choices.map((c) => {
-            if (correctFound) {
-              c.correct = false;
-
-              return c;
-            }
-
-            if (c.correct) {
-              correctFound = true;
-            }
-
-            return c;
-          });
-        }
-
-        onModelChanged(model, true);
-        break;
-      }
-
-      default:
-        onModelChanged(model);
-        break;
-    }
-  };
-
-  render() {
-    const { configuration: { minAnswerChoices } = {} } = this.props;
-    const { showWarning } = this.state;
-
-    return (
-      <React.Fragment>
-        <AlertDialog
-          open={showWarning}
-          title="Warning"
-          text={`There can't be less than ${minAnswerChoices || 0} choices.`}
-          onConfirm={() => this.setState({ showWarning: false })}
-        />
-        <Design
-          {...this.props}
-          onChangeModel={this.onModelChanged}
-          onRemoveChoice={this.onRemoveChoice}
-          onChoiceChanged={this.onChoiceChanged}
-          onAddChoice={this.onAddChoice}
-          onPromptChanged={this.onPromptChanged}
-          onTeacherInstructionsChanged={this.onTeacherInstructionsChanged}
-        />
-      </React.Fragment>
-    );
-  }
-}
-
-export default Main;

package/src/author/utils.ts

@@ -1,25 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/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 { minAnswerChoices, maxAnswerChoices } = config;
-
-  const answerChoicesMessage =
-    `\nThere should be at least ${minAnswerChoices} ` +
-    (maxAnswerChoices ? `and at most ${maxAnswerChoices} ` : '') +
-    'answer choices defined.' +
-    '\nEvery answer choice should be non-blank and unique.';
-
-  const correctAnswerMessage = '\nA correct answer must be defined.';
-
-  const message = 'Validation requirements:' + answerChoicesMessage + correctAnswerMessage;
-
-  return message;
-};

package/src/controller/utils.ts

@@ -1,22 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/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 { isEqual } from 'lodash-es';
-
-export const getCorrectResponse = (choices) =>
-  choices
-    .filter((c) => c.correct)
-    .map((c) => c.value)
-    .sort();
-
-export const isResponseCorrect = (question, session) => {
-  let correctResponse = getCorrectResponse(question.choices);
-  return session && isEqual((session.value || []).sort(), correctResponse);
-};