@pie-element/multiple-choice 13.3.4 → 13.3.5-ng.0

package/dist/browser/print/index.js

@@ -0,0 +1,43 @@
+import { F as e, M as t, Vt as n } from "../Radio-Bbu0BH_k.js";
+import { t as r } from "../main-DahQxQZC.js";
+import { c as i, l as a } from "../dist-CHbLnyuX.js";
+import o from "react";
+import { createRoot as s } from "react-dom/client";
+var c = (0, (/* @__PURE__ */ n(e(), 1)).default)("pie-element:multiple-choice:print"), l = (e, t) => {
+	let n = t.role === "instructor";
+	return e.prompt = e.promptEnabled === !1 ? void 0 : e.prompt, e.teacherInstructions = n && e.teacherInstructionsEnabled !== !1 ? e.teacherInstructions : void 0, e.showTeacherInstructions = n, e.alwaysShowCorrect = n, e.mode = n ? "evaluate" : e.mode, e.disabled = !0, e.animationsDisabled = !0, e.lockChoiceOrder = !0, e.choicesLayout = e.choicesLayout || "vertical", e.choices = a(e.choices).map((t) => (t.rationale = n && e.rationaleEnabled !== !1 ? t.rationale : void 0, t.hideTick = n, t.feedback = void 0, t)), e.keyMode = e.choicePrefix || "letters", e;
+}, u = class extends HTMLElement {
+	constructor() {
+		super(), this._options = null, this._model = null, this._session = [], this._root = null, this._rerender = i(() => {
+			if (this._model && this._session) {
+				let e = l(this._model, this._options), n = this._options && o.createElement(r, {
+					model: e,
+					session: {},
+					options: this._options
+				});
+				this._root ||= s(this), this._root.render(n), requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						c("render complete - render math"), t(this);
+					});
+				});
+			} else c("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 { u as default };
+
+//# sourceMappingURL=index.js.map

package/dist/browser/print/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/print/index.tsx"],"sourcesContent":["// @ts-nocheck\n/**\n * @synced-from pie-elements/packages/multiple-choice/src/print.js\n * @auto-generated\n *\n * This file is automatically synced from pie-elements and converted to TypeScript.\n * Manual edits will be overwritten on next sync.\n * To make changes, edit the upstream JavaScript file and run sync again.\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { cloneDeep, debounce } from '@pie-element/shared-lodash';\nimport Main from '../delivery/main.js';\nimport { renderMath } from '@pie-element/shared-math-rendering-mathjax';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n  model.teacherInstructions =\n    instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n  model.showTeacherInstructions = instr;\n  model.alwaysShowCorrect = instr;\n  model.mode = instr ? 'evaluate' : model.mode;\n\n  model.disabled = true;\n  model.animationsDisabled = true;\n  model.lockChoiceOrder = true;\n  model.choicesLayout = model.choicesLayout || 'vertical';\n\n  const choices = cloneDeep(model.choices);\n\n  model.choices = choices.map((c) => {\n    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;\n    c.hideTick = instr;\n    c.feedback = undefined;\n    return c;\n  });\n\n  model.keyMode = model.choicePrefix || 'letters';\n\n  return model;\n};\n\nexport default class MultipleChoicePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              model: printModel,\n              session: {},\n              options: this._options,\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          // Use double requestAnimationFrame so React has committed to the DOM before we render math\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              log('render complete - render math');\n              renderMath(this);\n            });\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;AAiBA,IAAM,KAAA,IAAA,wBAAA,EAAA,CAAA,QAAA,CAAY,mCAAmC,GAU/C,KAAqB,GAAO,MAAS;CACzC,IAAM,IAAQ,EAAK,SAAS;CAyB5B,OAvBA,EAAM,SAAS,EAAM,kBAAkB,KAAuB,KAAA,IAAf,EAAM,QACrD,EAAM,sBACJ,KAAS,EAAM,+BAA+B,KAAQ,EAAM,sBAAsB,KAAA,GACpF,EAAM,0BAA0B,GAChC,EAAM,oBAAoB,GAC1B,EAAM,OAAO,IAAQ,aAAa,EAAM,MAExC,EAAM,WAAW,IACjB,EAAM,qBAAqB,IAC3B,EAAM,kBAAkB,IACxB,EAAM,gBAAgB,EAAM,iBAAiB,YAI7C,EAAM,UAFU,EAAU,EAAM,OAEhB,CAAA,CAAQ,KAAK,OAC3B,EAAE,YAAY,KAAS,EAAM,qBAAqB,KAAQ,EAAE,YAAY,KAAA,GACxE,EAAE,WAAW,GACb,EAAE,WAAW,KAAA,GACN,EACR,GAED,EAAM,UAAU,EAAM,gBAAgB,WAE/B;AACT,GAEqB,IAArB,cAAiD,YAAY;CAC3D,cAAc;EAMZ,AALA,MAAM,GACN,KAAK,WAAW,MAChB,KAAK,SAAS,MACd,KAAK,WAAW,CAAC,GACjB,KAAK,QAAQ,MACb,KAAK,YAAY,QACT;GACJ,IAAI,KAAK,UAAU,KAAK,UAAU;IAChC,IAAM,IAAa,EAAkB,KAAK,QAAQ,KAAK,QAAQ,GAEzD,IACJ,KAAK,YACL,EAAM,cAAc,GAAM;KACxB,OAAO;KACP,SAAS,CAAC;KACV,SAAS,KAAK;IAChB,CAAC;IAOH,AALA,AACE,KAAK,UAAQ,EAAW,IAAI,GAE9B,KAAK,MAAM,OAAO,CAAO,GAEzB,4BAA4B;KAC1B,4BAA4B;MAE1B,AADA,EAAI,+BAA+B,GACnC,EAAW,IAAI;KACjB,CAAC;IACH,CAAC;GACH,OACE,EAAI,MAAM;EAEd,GACA,IACA;GAAE,SAAS;GAAO,UAAU;EAAK,CACnC;CACF;CACA,IAAI,QAAQ,GAAG;EACb,KAAK,WAAW;CAClB;CAEA,IAAI,MAAM,GAAG;EAEX,AADA,KAAK,SAAS,GACd,KAAK,UAAU;CACjB;CAEA,oBAAoB,CAAC;CAErB,uBAAuB;EACrB,AAAI,KAAK,SACP,KAAK,MAAM,QAAQ;CAEvB;AACF"}

package/dist/controller/defaults.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/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.
+ */
+declare const _default: {
+    choiceMode: string;
+    choicePrefix: string;
+    choices: never[];
+    choicesLayout: string;
+    feedbackEnabled: boolean;
+    gridColumns: number;
+    lockChoiceOrder: boolean;
+    partialScoring: boolean;
+    prompt: string;
+    promptEnabled: boolean;
+    rationale: string;
+    rationaleEnabled: boolean;
+    scoringType: string;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    toolbarEditorPosition: string;
+    selectedAnswerBackgroundColor: string;
+    selectedAnswerStrokeColor: string;
+    selectedAnswerStrokeWidth: string;
+    hoverAnswerBackgroundColor: string;
+    hoverAnswerStrokeColor: string;
+    hoverAnswerStrokeWidth: string;
+    keyboardEventsEnabled: boolean;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,29 @@
+//#region src/controller/defaults.ts
+var e = {
+	choiceMode: "checkbox",
+	choicePrefix: "letters",
+	choices: [],
+	choicesLayout: "vertical",
+	feedbackEnabled: !1,
+	gridColumns: 2,
+	lockChoiceOrder: !0,
+	partialScoring: !0,
+	prompt: "",
+	promptEnabled: !0,
+	rationale: "",
+	rationaleEnabled: !0,
+	scoringType: "auto",
+	studentInstructionsEnabled: !0,
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	toolbarEditorPosition: "bottom",
+	selectedAnswerBackgroundColor: "initial",
+	selectedAnswerStrokeColor: "initial",
+	selectedAnswerStrokeWidth: "initial",
+	hoverAnswerBackgroundColor: "initial",
+	hoverAnswerStrokeColor: "initial",
+	hoverAnswerStrokeWidth: "initial",
+	keyboardEventsEnabled: !1
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/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.
+ */
+export declare function createDefaultModel(model?: {}): Promise<unknown>;
+export declare const normalize: (question: any) => any;
+/**
+ *
+ * @param {*} question
+ * @param {*} session
+ * @param {*} env
+ * @param {*} updateSession - optional - a function that will set the properties passed into it on the session.
+ */
+export declare function model(question: any, session: any, env: any, updateSession: any): Promise<{
+    disabled: boolean;
+    mode: any;
+    prompt: any;
+    choicesLayout: any;
+    gridColumns: any;
+    choiceMode: any;
+    keyMode: any;
+    choices: any;
+    responseCorrect: any;
+    language: any;
+    extraCSSRules: any;
+    fontSizeFactor: any;
+    isSelectionButtonBelow: any;
+    selectedAnswerBackgroundColor: any;
+    selectedAnswerStrokeColor: any;
+    selectedAnswerStrokeWidth: any;
+    hoverAnswerBackgroundColor: any;
+    hoverAnswerStrokeColor: any;
+    hoverAnswerStrokeWidth: any;
+    minSelections: any;
+    maxSelections: any;
+    keyboardEventsEnabled: any;
+    autoplayAudioEnabled: any;
+    completeAudioEnabled: any;
+    customAudioButton: any;
+}>;
+export declare const getScore: (config: any, session: any) => number;
+/**
+ * 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 declare const getLogTrace: (model: any, session: any, env: any) => string[];
+/**
+ *
+ * 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 {*} session
+ * @param {Object} env
+ */
+export declare function outcome(model: any, session: any, env: any): Promise<unknown>;
+export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,129 @@
+import { isResponseCorrect as e } from "./utils.js";
+import t from "./defaults.js";
+import { isEmpty as n } from "@pie-element/shared-lodash";
+import { getShuffledChoices as r, lockChoices as i, partialScoring as a } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var o = (e, t, n) => (r) => {
+	let { role: i, mode: a } = t || {}, o = {
+		label: r.label,
+		value: r.value
+	};
+	if (i === "instructor" && (a === "view" || a === "evaluate") ? o.rationale = e.rationaleEnabled ? r.rationale : null : o.rationale = null, a === "evaluate" && (o.correct = !!r.correct, e.feedbackEnabled)) {
+		let e = r.feedback && r.feedback.type || "none";
+		e === "default" ? o.feedback = n[r.correct ? "correct" : "incorrect"] : e === "custom" && (o.feedback = r.feedback.value);
+	}
+	return o;
+};
+function s(e = {}) {
+	return new Promise((n) => n({
+		...t,
+		...e
+	}));
+}
+var c = (e) => {
+	let { verticalMode: n, choicesLayout: r, ...i } = e || {};
+	return {
+		...t,
+		...i,
+		choicesLayout: r || n === !1 && "horizontal" || t.choicesLayout
+	};
+};
+async function l(t, n, a, s) {
+	let l = c(t), u = Object.assign({
+		correct: "Correct",
+		incorrect: "Incorrect"
+	}, l.defaultFeedback), d = (l.choices || []).map(o(l, a, u));
+	i(l, n, a) || (d = await r(d, n, s, "value"));
+	let f = {
+		disabled: a.mode !== "gather",
+		mode: a.mode,
+		prompt: l.promptEnabled ? l.prompt : null,
+		choicesLayout: l.choicesLayout,
+		gridColumns: l.gridColumns,
+		choiceMode: l.choiceMode,
+		keyMode: l.choicePrefix,
+		choices: d,
+		responseCorrect: a.mode === "evaluate" ? e(l, n) : void 0,
+		language: l.language,
+		extraCSSRules: l.extraCSSRules,
+		fontSizeFactor: l.fontSizeFactor,
+		isSelectionButtonBelow: l.isSelectionButtonBelow,
+		selectedAnswerBackgroundColor: l.selectedAnswerBackgroundColor || "initial",
+		selectedAnswerStrokeColor: l.selectedAnswerStrokeColor || "initial",
+		selectedAnswerStrokeWidth: l.selectedAnswerStrokeWidth || "initial",
+		hoverAnswerBackgroundColor: l.hoverAnswerBackgroundColor || "initial",
+		hoverAnswerStrokeColor: l.hoverAnswerStrokeColor || "initial",
+		hoverAnswerStrokeWidth: l.hoverAnswerStrokeWidth || "initial",
+		minSelections: l.minSelections,
+		maxSelections: l.maxSelections,
+		keyboardEventsEnabled: l.keyboardEventsEnabled,
+		autoplayAudioEnabled: l.autoplayAudioEnabled,
+		completeAudioEnabled: l.completeAudioEnabled,
+		customAudioButton: l.customAudioButton
+	}, { role: p, mode: m } = a || {};
+	return p === "instructor" && (m === "view" || m === "evaluate") ? f.teacherInstructions = l.teacherInstructionsEnabled ? l.teacherInstructions : null : f.teacherInstructions = null, f;
+}
+var u = (e, t) => {
+	if (!t || n(t)) return 0;
+	let r = t.value || [], i = (e.choices || []).filter((e) => e.correct), a = r.reduce((e, t) => e + +!!i.find((e) => e.value === t), 0);
+	i.length < r.length && (a -= r.length - i.length, a < 0 && (a = 0));
+	let o = i.length ? a / i.length : 0;
+	return parseFloat(o.toFixed(2));
+}, d = (e, t, n) => {
+	let r = [], i = t?.value || [], o = e.choiceMode === "radio" ? "multiple-choice (radio)" : "multiple-select (checkbox)";
+	r.push(`Question type: ${o}.`), i.length ? r.push(`Student selected ${i.length} answer(s): ${i.join(", ")}.`) : r.push("Student did not select any answers.");
+	let s = (e.choices || []).filter((e) => e.correct), c = s.map((e) => e.value);
+	if (r.push(`${s.length} correct answer(s) are defined for this question.`), i.length) {
+		let e = i.filter((e) => c.includes(e)), t = i.filter((e) => !c.includes(e));
+		r.push(`Student selected ${e.length} correct and ${t.length} incorrect answer(s).`);
+	}
+	let l = a.enabled(e, n) && e.choiceMode !== "radio" ? "partial scoring" : "all-or-nothing scoring";
+	r.push(`Score calculated using ${l}.`);
+	let d = u(e, t);
+	return r.push(`Final score: ${d}.`), r;
+};
+function f(e, t, r) {
+	return new Promise((i) => {
+		if (!t || n(t)) i({
+			score: 0,
+			empty: !0,
+			traceLog: ["Student did not select any answers. Score is 0."]
+		});
+		else {
+			let n = d(e, t, r), o = u(e, t);
+			i({
+				score: a.enabled(e, r) && e.choiceMode !== "radio" ? o : +(o === 1),
+				empty: !1,
+				traceLog: n
+			});
+		}
+	});
+}
+var p = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { choices: t } = e || { choices: [] };
+		n({
+			id: "1",
+			value: t.filter((e) => e.correct).map((e) => e.value)
+		});
+	} else n(null);
+}), m = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), h = (e = {}, t = {}) => {
+	let { choices: r } = e, { minAnswerChoices: i = 2, maxAnswerChoices: a } = t, o = [...r || []].reverse(), s = {}, c = {}, l = {};
+	["teacherInstructions", "prompt"].forEach((n) => {
+		t[n]?.required && !m(e[n]) && (l[n] = "This field is required.");
+	});
+	let u = !1, d = 0;
+	o.forEach((e, n) => {
+		let { correct: r, value: i, label: a, rationale: l } = e;
+		r && (u = !0, d++), m(a) ? o.slice(n + 1).some((e) => e.label === a) && (s[i] = "Content should be unique.") : s[i] = "Content should not be empty.", t.rationale?.required && !m(l) && (c[i] = "This field is required.");
+	});
+	let f = (r || []).length;
+	if (f < i ? l.answerChoices = `There should be at least ${i} choices defined.` : f > a && (l.answerChoices = `No more than ${a} choices should be defined.`), !u) l.correctResponse = "No correct response defined.";
+	else {
+		let { maxSelections: t, choiceMode: n } = e;
+		n !== "radio" && t != null && d > t && (l.correctResponse = `The number of correct answers (${d}) exceeds max selections (${t}). Students won't be able to select all correct answers.`);
+	}
+	return n(s) || (l.choices = s), n(c) || (l.rationale = c), l;
+};
+//#endregion
+export { p as createCorrectResponseSession, s as createDefaultModel, d as getLogTrace, u as getScore, l as model, c as normalize, f as outcome, h as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @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.
+ */
+export declare const getCorrectResponse: (choices: any) => any;
+export declare const isResponseCorrect: (question: any, session: any) => any;

package/dist/controller/utils.js

@@ -0,0 +1,8 @@
+import { isEqual as e } from "@pie-element/shared-lodash";
+//#region src/controller/utils.ts
+var t = (e) => e.filter((e) => e.correct).map((e) => e.value).sort(), n = (n, r) => {
+	let i = t(n.choices);
+	return r && e((r.value || []).sort(), i);
+};
+//#endregion
+export { t as getCorrectResponse, n as isResponseCorrect };

package/dist/delivery/choice-input.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/choice-input.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';
+export declare const StyledFormControlLabel: any;
+export declare const StyledCheckbox: (props: any) => React.JSX.Element;
+export declare const StyledRadio: (props: any) => React.JSX.Element;
+export declare class ChoiceInput extends React.Component {
+    static propTypes: {
+        choiceMode: PropTypes.Requireable<string>;
+        displayKey: PropTypes.Requireable<string>;
+        checked: PropTypes.Validator<boolean>;
+        correctness: PropTypes.Requireable<string>;
+        disabled: PropTypes.Validator<boolean>;
+        feedback: PropTypes.Requireable<string>;
+        label: PropTypes.Validator<string>;
+        rationale: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+        tagName: PropTypes.Requireable<string>;
+        hideTick: PropTypes.Requireable<boolean>;
+        isEvaluateMode: PropTypes.Requireable<boolean>;
+        choicesLayout: PropTypes.Requireable<string>;
+        isSelectionButtonBelow: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        rationale: null;
+        checked: boolean;
+        isEvaluateMode: boolean;
+    };
+    constructor(props: any);
+    onToggleChoice(event: any): void;
+    generateChoiceId(): string;
+    handleKeyDown: any;
+    render(): React.JSX.Element;
+}
+export default ChoiceInput;

package/dist/delivery/choice-input.js

@@ -0,0 +1,280 @@
+import { clsx as e } from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import t from "./feedback-tick.js";
+import n from "react";
+import r from "prop-types";
+import * as i from "@pie-lib/render-ui";
+import { Feedback as a, PreviewPrompt as o, color as s } from "@pie-lib/render-ui";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { styled as d } from "@mui/material/styles";
+import f from "@mui/material/Box";
+import p from "@mui/material/FormControlLabel";
+import m from "@mui/material/Checkbox";
+import h from "@mui/material/Radio";
+//#region src/delivery/choice-input.tsx
+function g(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function _(e, t) {
+	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
+}
+var v = _(o, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(a, "Feedback") || _(S.Feedback, "Feedback"), b = i, x = b.default, S = x && typeof x == "object" ? x : b, C = "multiple-choice-component", w = d(f)({
+	display: "flex",
+	alignItems: "center",
+	backgroundColor: s.background()
+}), T = d(f)({
+	display: "flex",
+	alignItems: "center",
+	backgroundColor: s.background(),
+	flex: 1,
+	"& .MuiFormControlLabel-root": { marginLeft: "-14px" },
+	"& label": {
+		color: s.text(),
+		"& > span": { fontSize: "inherit" },
+		"& > .MuiButtonBase-root": { padding: "12px" }
+	}
+}), E = d("span")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "center",
+	"& > span": { marginLeft: `-${e.spacing(1)}` }
+})), D = d("span")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), O = d(p)({
+	"& .MuiFormControlLabel-label": {
+		color: `${s.text()} !important`,
+		backgroundColor: s.background(),
+		letterSpacing: "normal"
+	},
+	"&.Mui-disabled *": { cursor: "not-allowed !important" }
+}), k = (e, t) => ({ [`&.${C}`]: { color: `var(--choice-input-${e}, ${t}) !important` } }), A = (e) => {
+	let t = (t) => e ? `${e}-${t}` : t;
+	return {
+		[t("root")]: {
+			...k("color", s.text()),
+			...e === "correct" ? k("correct-color", s.text()) : {},
+			...e === "incorrect" ? k("incorrect-color", s.incorrect()) : {}
+		},
+		[t("checked")]: {
+			...e === "correct" ? k("correct-selected-color", s.correct()) : {},
+			...e === "incorrect" ? k("incorrect-checked", s.incorrect()) : {},
+			...e ? {} : k("selected-color", s.primary())
+		},
+		[t("disabled")]: {
+			...k("disabled-color", s.text()),
+			...e === "correct" ? k("correct-disabled-color", s.disabled()) : {},
+			...e === "incorrect" ? k("incorrect-disabled-color", s.disabled()) : {},
+			opacity: .6,
+			cursor: "not-allowed !important",
+			pointerEvents: "initial !important"
+		},
+		focusVisibleUnchecked: {
+			outline: `2px solid ${s.keyBoardFocusIndicator()}`,
+			backgroundColor: "transparent"
+		},
+		focusVisibleChecked: {
+			outline: `2px solid ${s.keyBoardFocusIndicator()}`,
+			backgroundColor: "transparent"
+		}
+	};
+}, j = d(m, { shouldForwardProp: (e) => e !== "correctness" })(({ correctness: e }) => {
+	let t = A(e), n = (t) => e ? `${e}-${t}` : t;
+	return {
+		[`&.${C}`]: {
+			...t[n("root")],
+			"&.Mui-checked": t[n("checked")],
+			"&.Mui-disabled": e ? {} : t[n("disabled")],
+			"&:hover:not(.Mui-disabled) svg": {
+				boxShadow: `0px 0px 0px 2px ${s.keyBoardFocusIndicator()}`,
+				borderRadius: "4px"
+			}
+		},
+		"&.Mui-focusVisible": {
+			"&:not(.Mui-checked)": t.focusVisibleUnchecked,
+			"&.Mui-checked": t.focusVisibleChecked
+		}
+	};
+}), M = (e) => {
+	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, onKeyDown: s, inputRef: c } = e;
+	return /* @__PURE__ */ l(j, {
+		id: o,
+		slotProps: { input: { ref: c } },
+		onKeyDown: s,
+		disableRipple: !0,
+		checked: n,
+		onChange: r,
+		disabled: i,
+		value: a,
+		correctness: t,
+		className: C
+	});
+}, N = d(h, { shouldForwardProp: (e) => e !== "correctness" })(({ correctness: e }) => {
+	let t = A(e), n = (t) => e ? `${e}-${t}` : t;
+	return {
+		[`&.${C}`]: {
+			...t[n("root")],
+			"&.Mui-checked": t[n("checked")],
+			"&.Mui-disabled": e ? {} : t[n("disabled")],
+			"&.Mui-focusVisible:not(.Mui-checked)": t.focusVisibleUnchecked,
+			"&.Mui-focusVisible.Mui-checked": t.focusVisibleChecked,
+			"&:hover:not(.Mui-disabled) svg": {
+				boxShadow: `0px 0px 0px 2px ${s.keyBoardFocusIndicator()}`,
+				borderRadius: "50%"
+			}
+		},
+		"&.Mui-focusVisible": {
+			"& input": { outline: 0 },
+			"& .MuiTouchRipple-root": { display: "none" }
+		}
+	};
+}), P = (e) => {
+	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, tagName: s, inputRef: c } = e;
+	return /* @__PURE__ */ l(N, {
+		id: o,
+		slotProps: { input: { ref: c } },
+		disableRipple: !0,
+		checked: n,
+		onChange: r,
+		disabled: i,
+		value: a,
+		correctness: t,
+		className: C,
+		name: s
+	});
+}, F = class extends n.Component {
+	static propTypes = {
+		choiceMode: r.oneOf(["radio", "checkbox"]),
+		displayKey: r.string,
+		checked: r.bool.isRequired,
+		correctness: r.string,
+		disabled: r.bool.isRequired,
+		feedback: r.string,
+		label: r.string.isRequired,
+		rationale: r.string,
+		onChange: r.func.isRequired,
+		value: r.string.isRequired,
+		className: r.string,
+		tagName: r.string,
+		hideTick: r.bool,
+		isEvaluateMode: r.bool,
+		choicesLayout: r.oneOf([
+			"vertical",
+			"grid",
+			"horizontal"
+		]),
+		isSelectionButtonBelow: r.bool
+	};
+	static defaultProps = {
+		rationale: null,
+		checked: !1,
+		isEvaluateMode: !1
+	};
+	constructor(e) {
+		super(e), this.onToggleChoice = this.onToggleChoice.bind(this), this.choiceId = this.generateChoiceId(), this.descId = `${this.choiceId}-desc`;
+	}
+	onToggleChoice(e) {
+		this.props.onChange(e);
+	}
+	generateChoiceId() {
+		return "choice-" + (Math.random() * 1e4).toFixed();
+	}
+	handleKeyDown = (e) => {
+		let { choiceMode: t } = this.props;
+		if (t !== "checkbox") return;
+		let n = e.key === "ArrowDown", r = e.key === "ArrowUp";
+		if (!n && !r) return;
+		e.preventDefault();
+		let i = document.getElementById(this.choiceId);
+		if (!i) return;
+		let a = i.closest("fieldset");
+		if (!a) return;
+		let o = Array.from(a.querySelectorAll("input[type=\"checkbox\"]")), s = o.findIndex((e) => e === i);
+		if (s === -1) return;
+		let c = o[n ? s + 1 : s - 1];
+		c && c.focus();
+	};
+	render() {
+		let { choiceMode: n, disabled: r, displayKey: i, feedback: a, label: o, correctness: s, className: d, rationale: f, hideTick: p, isEvaluateMode: m, choicesLayout: h, value: g, checked: _, tagName: b, isSelectionButtonBelow: x } = this.props, S = n === "checkbox" ? M : P, k = n === "checkbox" ? "checkbox" : "radio-button", A = {
+			...h === "horizontal" && { [`& .${C}`]: {
+				padding: "8px",
+				margin: "4px 0 4px 4px"
+			} },
+			...x && h !== "grid" && { "& > label": { alignItems: "flex-start" } },
+			...x && h === "grid" && {
+				justifyContent: "center",
+				"& > label": { alignItems: "center" }
+			}
+		}, j = typeof o == "string" && (o.includes("<math") || o.includes("\\(") || o.includes("\\[") || o.includes("<img") || o.includes("data-latex") || o.includes("data-raw") || o.includes("<mjx-container")), N = i ? /* @__PURE__ */ l(D, {
+			id: this.descId,
+			children: j ? `Pick the answer below, ${i}` : i
+		}) : null, F = /* @__PURE__ */ l(c, { children: i && !x ? /* @__PURE__ */ u(w, {
+			component: "span",
+			children: [/* @__PURE__ */ u("span", {
+				"aria-hidden": "true",
+				children: [
+					i,
+					".",
+					"\xA0"
+				]
+			}), /* @__PURE__ */ l(v, {
+				className: "prompt-label",
+				prompt: o,
+				tagName: "span"
+			})]
+		}) : /* @__PURE__ */ l(v, {
+			className: "prompt-label",
+			prompt: o,
+			tagName: "span"
+		}) }), I = {
+			disabled: r,
+			checked: _,
+			correctness: s,
+			tagName: b,
+			value: g,
+			id: this.choiceId,
+			onChange: this.onToggleChoice,
+			onKeyDown: this.handleKeyDown,
+			...N ? { "aria-describedby": this.descId } : {}
+		}, L = x ? /* @__PURE__ */ u(E, { children: [
+			N,
+			/* @__PURE__ */ l(S, {
+				...I,
+				style: { padding: 0 }
+			}),
+			/* @__PURE__ */ l("span", {
+				"aria-hidden": "true",
+				children: i ? `${i}.` : ""
+			})
+		] }) : /* @__PURE__ */ u(c, { children: [N, /* @__PURE__ */ l(S, { ...I })] });
+		return /* @__PURE__ */ u("div", {
+			className: e(d, "corespring-" + k, "choice-input"),
+			children: [
+				/* @__PURE__ */ u(w, { children: [!p && m && /* @__PURE__ */ l(t, { correctness: s }), /* @__PURE__ */ l(T, {
+					className: "checkbox-holder",
+					sx: A,
+					children: /* @__PURE__ */ l(O, {
+						label: F,
+						value: g,
+						htmlFor: this.choiceId,
+						labelPlacement: x ? "top" : void 0,
+						control: L
+					})
+				})] }),
+				f && /* @__PURE__ */ l(v, {
+					className: "rationale",
+					defaultClassName: "rationale",
+					prompt: f
+				}),
+				/* @__PURE__ */ l(y, {
+					feedback: a,
+					correctness: s
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { F as ChoiceInput, F as default, M as StyledCheckbox, O as StyledFormControlLabel, P as StyledRadio };

package/dist/delivery/choice.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/choice.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';
+export declare class Choice extends React.Component {
+    static propTypes: {};
+    state: {
+        isHovered: boolean;
+    };
+    handleMouseEnter: any;
+    handleMouseLeave: any;
+    onChange: any;
+    render(): React.JSX.Element;
+}
+export default Choice;