@pie-element/multiple-choice 13.2.0-next.22 → 13.2.1-next.0

package/dist/delivery/choice-input.js

@@ -0,0 +1,272 @@
+import e from "./feedback-tick.js";
+import t from "react";
+import n from "prop-types";
+import * as r from "@pie-lib/render-ui";
+import { Feedback as i, PreviewPrompt as a, color as o } from "@pie-lib/render-ui";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "classnames";
+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 = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "Feedback") || _(S.Feedback, "Feedback"), b = r, x = b.default, S = x && typeof x == "object" ? x : b, C = "multiple-choice-component", w = d(f)({
+	display: "flex",
+	alignItems: "center",
+	backgroundColor: o.background()
+}), T = d(f)({
+	display: "flex",
+	alignItems: "center",
+	backgroundColor: o.background(),
+	flex: 1,
+	"& .MuiFormControlLabel-root": { marginLeft: "-14px" },
+	"& label": {
+		color: o.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: `${o.text()} !important`,
+		backgroundColor: o.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", o.text()),
+			...e ? {} : { "&:hover": { color: `${o.primaryLight()} !important` } },
+			...e === "correct" ? k("correct-color", o.text()) : {},
+			...e === "incorrect" ? k("incorrect-color", o.incorrect()) : {}
+		},
+		[t("checked")]: {
+			...e === "correct" ? k("correct-selected-color", o.correct()) : {},
+			...e === "incorrect" ? k("incorrect-checked", o.incorrect()) : {},
+			...e ? {} : k("selected-color", o.primary())
+		},
+		[t("disabled")]: {
+			...k("disabled-color", o.text()),
+			...e === "correct" ? k("correct-disabled-color", o.disabled()) : {},
+			...e === "incorrect" ? k("incorrect-disabled-color", o.disabled()) : {},
+			opacity: .6,
+			cursor: "not-allowed !important",
+			pointerEvents: "initial !important"
+		},
+		focusVisibleUnchecked: {
+			outline: `2px solid ${o.keyBoardFocusIndicator()}`,
+			backgroundColor: "transparent"
+		},
+		focusVisibleChecked: {
+			outline: `2px solid ${o.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")]
+		},
+		"&.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: l } = e;
+	return /* @__PURE__ */ c(j, {
+		id: o,
+		slotProps: { input: { ref: l } },
+		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": {
+			"& input": { outline: 0 },
+			"&:not(.Mui-checked)": t.focusVisibleUnchecked,
+			"&.Mui-checked": t.focusVisibleChecked
+		}
+	};
+}), P = (e) => {
+	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, tagName: s, inputRef: l } = e;
+	return /* @__PURE__ */ c(N, {
+		id: o,
+		slotProps: { input: { ref: l } },
+		disableRipple: !0,
+		checked: n,
+		onChange: r,
+		disabled: i,
+		value: a,
+		correctness: t,
+		className: C,
+		name: s
+	});
+}, F = class extends t.Component {
+	static propTypes = {
+		choiceMode: n.oneOf(["radio", "checkbox"]),
+		displayKey: n.string,
+		checked: n.bool.isRequired,
+		correctness: n.string,
+		disabled: n.bool.isRequired,
+		feedback: n.string,
+		label: n.string.isRequired,
+		rationale: n.string,
+		onChange: n.func.isRequired,
+		value: n.string.isRequired,
+		className: n.string,
+		tagName: n.string,
+		hideTick: n.bool,
+		isEvaluateMode: n.bool,
+		choicesLayout: n.oneOf([
+			"vertical",
+			"grid",
+			"horizontal"
+		]),
+		isSelectionButtonBelow: n.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: t, disabled: n, displayKey: r, feedback: i, label: a, correctness: o, className: d, rationale: f, hideTick: p, isEvaluateMode: m, choicesLayout: h, value: g, checked: _, tagName: b, isSelectionButtonBelow: x } = this.props, S = t === "checkbox" ? M : P, k = t === "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 a == "string" && (a.includes("<math") || a.includes("\\(") || a.includes("\\[") || a.includes("<img") || a.includes("data-latex") || a.includes("data-raw") || a.includes("<mjx-container")), N = r ? /* @__PURE__ */ c(D, {
+			id: this.descId,
+			children: j ? `Pick the answer below, ${r}` : r
+		}) : null, F = /* @__PURE__ */ c(s, { children: r && !x ? /* @__PURE__ */ l(w, {
+			component: "span",
+			children: [/* @__PURE__ */ l("span", {
+				"aria-hidden": "true",
+				children: [
+					r,
+					".",
+					"\xA0"
+				]
+			}), /* @__PURE__ */ c(v, {
+				className: "prompt-label",
+				prompt: a,
+				tagName: "span"
+			})]
+		}) : /* @__PURE__ */ c(v, {
+			className: "prompt-label",
+			prompt: a,
+			tagName: "span"
+		}) }), I = {
+			disabled: n,
+			checked: _,
+			correctness: o,
+			tagName: b,
+			value: g,
+			id: this.choiceId,
+			onChange: this.onToggleChoice,
+			onKeyDown: this.handleKeyDown,
+			...N ? { "aria-describedby": this.descId } : {}
+		}, L = x ? /* @__PURE__ */ l(E, { children: [
+			N,
+			/* @__PURE__ */ c(S, {
+				...I,
+				style: { padding: 0 }
+			}),
+			/* @__PURE__ */ c("span", {
+				"aria-hidden": "true",
+				children: r ? `${r}.` : ""
+			})
+		] }) : /* @__PURE__ */ l(s, { children: [N, /* @__PURE__ */ c(S, { ...I })] });
+		return /* @__PURE__ */ l("div", {
+			className: u(d, "corespring-" + k, "choice-input"),
+			children: [
+				/* @__PURE__ */ l(w, { children: [!p && m && /* @__PURE__ */ c(e, { correctness: o }), /* @__PURE__ */ c(T, {
+					className: "checkbox-holder",
+					sx: A,
+					children: /* @__PURE__ */ c(O, {
+						label: F,
+						value: g,
+						htmlFor: this.choiceId,
+						labelPlacement: x ? "top" : void 0,
+						control: L
+					})
+				})] }),
+				f && /* @__PURE__ */ c(v, {
+					className: "rationale",
+					defaultClassName: "rationale",
+					prompt: f
+				}),
+				/* @__PURE__ */ c(y, {
+					feedback: i,
+					correctness: o
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { F as default };

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;

package/dist/delivery/choice.js

@@ -0,0 +1,105 @@
+import e from "./choice-input.js";
+import t from "react";
+import n from "prop-types";
+import { jsx as r } from "react/jsx-runtime";
+import { styled as i } from "@mui/material/styles";
+import a from "@mui/material/Box";
+//#region src/delivery/choice.tsx
+var o = i(a, { shouldForwardProp: (e) => e !== "noBorder" && e !== "horizontalLayout" })(({ theme: e, noBorder: t, horizontalLayout: n }) => ({
+	paddingTop: e.spacing(2.5),
+	paddingBottom: `calc(${e.spacing(1)} + 2px)`,
+	paddingLeft: `calc(${e.spacing(1)} + 2px)`,
+	paddingRight: `calc(${e.spacing(1)} + 2px)`,
+	borderBottom: t ? "none" : `1px solid ${e.palette.grey[300]}`,
+	...n && {
+		paddingRight: e.spacing(2.5),
+		"& label": { marginRight: e.spacing(1) }
+	}
+})), s = class extends t.Component {
+	static propTypes = {};
+	state = { isHovered: !1 };
+	handleMouseEnter = () => {
+		let { disabled: e, checked: t } = this.props;
+		!e && !t && this.setState({ isHovered: !0 });
+	};
+	handleMouseLeave = () => {
+		this.setState({ isHovered: !1 });
+	};
+	onChange = (e) => {
+		let { disabled: t, onChoiceChanged: n } = this.props;
+		t || n(e);
+	};
+	render() {
+		let { choice: t, index: n, choicesLength: i, showCorrect: a, isEvaluateMode: s, choiceMode: c, disabled: l, checked: u, correctness: d, displayKey: f, choicesLayout: p, gridColumns: m, isSelectionButtonBelow: h, selectedAnswerBackgroundColor: g, selectedAnswerStrokeColor: _, selectedAnswerStrokeWidth: v, hoverAnswerBackgroundColor: y, hoverAnswerStrokeColor: b, hoverAnswerStrokeWidth: x, tagName: S } = this.props, { isHovered: C } = this.state, w = "choice" + (n === i - 1 ? " last" : ""), T = !s || a ? "" : t.feedback, E = {
+			...t,
+			checked: u,
+			choiceMode: c,
+			disabled: l,
+			feedback: T,
+			correctness: d,
+			displayKey: f,
+			index: n,
+			choicesLayout: p,
+			gridColumns: m,
+			onChange: this.onChange,
+			isEvaluateMode: s,
+			isSelectionButtonBelow: h,
+			selectedAnswerStrokeColor: _,
+			selectedAnswerStrokeWidth: v,
+			tagName: S
+		}, D = (e) => {
+			if (!e) return "2px";
+			let t = String(e).trim();
+			return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+		}, O = _ && _ !== "initial", k = b && b !== "initial", A = "transparent", j = "2px", M = "initial";
+		(O || k) && (u && O ? (A = _, j = v) : C && !l && k && (A = b, j = x)), u && g && g !== "initial" ? M = g : C && !l && y && y !== "initial" && (M = y);
+		let N = O || k, P = N ? {
+			border: `${D(j)} solid ${A}`,
+			borderRadius: "8px"
+		} : {}, F = n === i - 1 || p !== "vertical" || N, I = p === "horizontal";
+		return /* @__PURE__ */ r("div", {
+			className: w,
+			style: {
+				backgroundColor: M === "initial" ? "initial" : M,
+				...P
+			},
+			onMouseEnter: this.handleMouseEnter,
+			onMouseLeave: this.handleMouseLeave,
+			children: /* @__PURE__ */ r(o, {
+				component: "div",
+				noBorder: F,
+				horizontalLayout: I,
+				children: /* @__PURE__ */ r(e, { ...E })
+			})
+		}, n);
+	}
+};
+s.propTypes = {
+	choiceMode: n.oneOf(["radio", "checkbox"]),
+	choice: n.object,
+	disabled: n.bool.isRequired,
+	onChoiceChanged: n.func,
+	index: n.number,
+	choicesLength: n.number,
+	showCorrect: n.bool,
+	isEvaluateMode: n.bool,
+	checked: n.bool,
+	correctness: n.string,
+	displayKey: n.string,
+	choicesLayout: n.oneOf([
+		"vertical",
+		"grid",
+		"horizontal"
+	]),
+	gridColumns: n.string,
+	selectedAnswerBackgroundColor: n.string,
+	selectedAnswerStrokeColor: n.string,
+	selectedAnswerStrokeWidth: n.string,
+	hoverAnswerBackgroundColor: n.string,
+	hoverAnswerStrokeColor: n.string,
+	hoverAnswerStrokeWidth: n.string,
+	tagName: n.string,
+	isSelectionButtonBelow: n.bool
+};
+//#endregion
+export { s as default };

package/dist/delivery/feedback-tick.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/feedback-tick.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';
+declare class FeedbackTick extends React.Component {
+    static propTypes: {
+        correctness: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    getIncorrectIcon: () => React.JSX.Element;
+    getCorrectIcon: () => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default FeedbackTick;

package/dist/delivery/feedback-tick.js

@@ -0,0 +1,104 @@
+import e from "react";
+import t from "prop-types";
+import { color as n } from "@pie-lib/render-ui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import o from "@mui/material/Box";
+import { CSSTransition as s, TransitionGroup as c } from "react-transition-group";
+//#region src/delivery/feedback-tick.tsx
+var l = a(o)({
+	width: "33px",
+	height: "33px",
+	"& svg": {
+		position: "absolute",
+		display: "inline-block",
+		width: "33px",
+		height: "33px",
+		verticalAlign: "middle",
+		"& hide": { display: "none" }
+	}
+}), u = a("svg")({
+	"& .incorrect-fill": { fill: `var(--feedback-incorrect-bg-color, ${n.incorrect()})` },
+	"& .correct-fill": { fill: `var(--feedback-correct-bg-color, ${n.correct()})` }
+}), d = a("div")({
+	position: "relative",
+	"&.feedback-tick-enter": {
+		opacity: "0",
+		left: "-50px"
+	},
+	"&.feedback-tick-enter-active": {
+		opacity: "1",
+		left: "0px",
+		transition: "left 500ms ease-in 200ms, opacity 500ms linear 200ms"
+	},
+	"&.feedback-tick-exit": {
+		opacity: "1",
+		left: "0px"
+	},
+	"&.feedback-tick-exit-active": {
+		opacity: "0",
+		left: "-50px",
+		transition: "left 300ms ease-in, opacity 300ms"
+	}
+}), f = class extends e.Component {
+	static propTypes = { correctness: t.string };
+	constructor(t) {
+		super(t), this.nodeRef = e.createRef();
+	}
+	getIncorrectIcon = () => /* @__PURE__ */ r(u, {
+		preserveAspectRatio: "xMinYMin meet",
+		x: "0px",
+		y: "0px",
+		viewBox: "0 0 44 40",
+		style: { enableBackground: "new 0 0 44 40" },
+		children: /* @__PURE__ */ i("g", { children: [/* @__PURE__ */ r("rect", {
+			x: "11",
+			y: "17.3",
+			transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
+			className: "incorrect-fill",
+			width: "16.6",
+			height: "3.7"
+		}), /* @__PURE__ */ r("rect", {
+			x: "17.4",
+			y: "10.7",
+			transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
+			className: "incorrect-fill",
+			width: "3.7",
+			height: "16.6"
+		})] })
+	}, "1");
+	getCorrectIcon = () => /* @__PURE__ */ r(u, {
+		preserveAspectRatio: "xMinYMin meet",
+		version: "1.1",
+		x: "0px",
+		y: "0px",
+		viewBox: "0 0 44 40",
+		style: { enableBackground: "new 0 0 44 40" },
+		children: /* @__PURE__ */ r("polygon", {
+			className: "correct-fill",
+			points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+		})
+	}, "2");
+	render() {
+		let { correctness: e } = this.props, t = e === "incorrect" ? this.getIncorrectIcon() : e === "correct" ? this.getCorrectIcon() : null;
+		return /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(c, { children: e && /* @__PURE__ */ r(s, {
+			nodeRef: this.nodeRef,
+			classNames: {
+				enter: "feedback-tick-enter",
+				enterActive: "feedback-tick-enter-active",
+				exit: "feedback-tick-exit",
+				exitActive: "feedback-tick-exit-active"
+			},
+			timeout: {
+				enter: 700,
+				exit: 300
+			},
+			children: /* @__PURE__ */ r(d, {
+				ref: this.nodeRef,
+				children: t
+			})
+		}) }) });
+	}
+};
+//#endregion
+export { f as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/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 const isComplete: (session: any, model: any, audioComplete: any, elementContext: any) => boolean;
+export default class MultipleChoice extends HTMLElement {
+    constructor();
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    onShowCorrectToggle(): void;
+    setLangAttribute(): void;
+    set model(s: any);
+    get session(): any;
+    get options(): any;
+    set options(o: any);
+    set baseHeadingLevel(level: any);
+    set includeSrHeading(value: any);
+    set session(s: any);
+    _onChange(data: any): void;
+    _createAudioInfoToast(): HTMLDivElement;
+    connectedCallback(): void;
+    enableKeyboardEvents(): void;
+    _initPlayerObserver(): void;
+    _disconnectPlayerObserver(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles global keyboard events for selecting or toggling multiple-choice answers.
+     * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.
+     * Ensures valid key presses toggle or select the appropriate choice based on the model.
+     */
+    handleKeyDown(event: any): void;
+}