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

package/dist/delivery/multiple-choice.js

@@ -0,0 +1,244 @@
+import e from "./choice.js";
+import t from "react";
+import n from "prop-types";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, color as o, transformDataHeadings as s } from "@pie-lib/render-ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@pie-lib/correct-answer-toggle";
+import d from "classnames";
+import { styled as f } from "@mui/material/styles";
+import p from "@mui/material/Box";
+import m from "@pie-lib/translator";
+//#region src/delivery/multiple-choice.tsx
+function h(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function g(e, t) {
+	return !e || h(e) ? e : h(e.default) ? e.default : t && h(e[t]) ? e[t] : t && h(e[t]?.default) ? e[t].default : e;
+}
+var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "Collapsible") || g(x.Collapsible, "Collapsible"), y = r, b = y.default, x = b && typeof b == "object" ? b : y, { translator: S } = m, C = f(p)({
+	color: o.text(),
+	backgroundColor: o.background(),
+	"& *": { "-webkit-font-smoothing": "antialiased" },
+	position: "relative",
+	"& legend": { border: "none !important" }
+}), w = f("h2")(({ theme: e }) => ({
+	display: "block",
+	fontSize: "inherit",
+	margin: "0",
+	fontWeight: "normal",
+	paddingBottom: e.spacing(2)
+})), T = f(p)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), E = f(p)({
+	display: "flex",
+	flexDirection: "row",
+	flexWrap: "wrap"
+}), D = f(p)({ display: "grid" }), O = f("fieldset")({
+	border: "0px",
+	padding: "0.01em 0 0 0",
+	margin: "0px",
+	minWidth: "0px"
+}), k = f("h3")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), A = f("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), j = class extends t.Component {
+	static propTypes = {
+		className: n.string,
+		mode: n.oneOf([
+			"gather",
+			"view",
+			"evaluate"
+		]),
+		choiceMode: n.oneOf(["radio", "checkbox"]),
+		keyMode: n.oneOf([
+			"numbers",
+			"letters",
+			"none"
+		]),
+		choices: n.array,
+		partLabel: n.string,
+		prompt: n.string,
+		teacherInstructions: n.string,
+		session: n.object,
+		disabled: n.bool,
+		onChoiceChanged: n.func,
+		responseCorrect: n.bool,
+		correctResponse: n.array,
+		choicesLayout: n.oneOf([
+			"vertical",
+			"grid",
+			"horizontal"
+		]),
+		gridColumns: n.string,
+		alwaysShowCorrect: n.bool,
+		animationsDisabled: n.bool,
+		language: n.string,
+		selectedAnswerBackgroundColor: n.string,
+		selectedAnswerStrokeColor: n.string,
+		selectedAnswerStrokeWidth: n.string,
+		hoverAnswerBackgroundColor: n.string,
+		hoverAnswerStrokeColor: n.string,
+		hoverAnswerStrokeWidth: n.string,
+		onShowCorrectToggle: n.func,
+		isSelectionButtonBelow: n.bool,
+		minSelections: n.number,
+		maxSelections: n.number,
+		autoplayAudioEnabled: n.bool,
+		customAudioButton: {
+			playImage: n.string,
+			pauseImage: n.string
+		},
+		options: n.object,
+		baseHeadingLevel: n.number,
+		includeSrHeading: n.bool
+	};
+	constructor(e) {
+		super(e), this.state = {
+			showCorrect: this.props.options && this.props.alwaysShowCorrect || !1,
+			maxSelectionsErrorState: !1
+		}, this.onToggle = this.onToggle.bind(this), this.groupName = `mc-group-${Math.random().toString(36).slice(2, 10)}`;
+	}
+	isSelected(e) {
+		let t = this.props.session && this.props.session.value;
+		return t && t.indexOf && t.indexOf(e) >= 0;
+	}
+	handleChange = (e) => {
+		let { value: t, checked: n } = e.target, { maxSelections: r, onChoiceChanged: i, session: a } = this.props;
+		a.value && a.value.length >= r && (this.setState({ maxSelectionsErrorState: n }), n) || i({
+			value: t,
+			selected: n,
+			selector: "Mouse"
+		});
+	};
+	onToggle = () => {
+		this.props.mode === "evaluate" && this.setState({ showCorrect: !this.state.showCorrect }, () => {
+			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
+		});
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		!e.correctResponse && this.state.showCorrect !== !1 && this.setState({ showCorrect: !1 }, () => {
+			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
+		}), e.options && e.alwaysShowCorrect && this.state.showCorrect !== !0 && this.setState({ showCorrect: !0 }, () => {
+			this.props.onShowCorrectToggle && this.props.onShowCorrectToggle();
+		});
+	}
+	indexToSymbol(e) {
+		return this.props.keyMode === "numbers" ? `${e + 1}` : this.props.keyMode === "letters" ? String.fromCharCode(97 + e).toUpperCase() : "";
+	}
+	getCorrectness = (e = {}) => {
+		let t = e.correct, n = this.isSelected(e.value);
+		if (this.state.showCorrect) return t ? "correct" : void 0;
+		if (t) return n ? "correct" : "incorrect";
+		if (n) return "incorrect";
+	};
+	getChecked(e) {
+		return this.props.options && this.props.alwaysShowCorrect || this.state.showCorrect && this.props.mode === "evaluate" ? e.correct || !1 : this.isSelected(e.value);
+	}
+	renderHeading() {
+		let { mode: e, choiceMode: t, includeSrHeading: n, baseHeadingLevel: r, partLabel: i } = this.props;
+		if (!(!i && n !== !1) || e !== "gather") return null;
+		let a = r ? Math.min(6, r) : 2;
+		return /* @__PURE__ */ c(k.withComponent(`h${a}`), { children: t === "radio" ? "Multiple Choice Question" : "Multiple Select Question" });
+	}
+	render() {
+		let { mode: t, disabled: n, className: r, choices: i = [], choiceMode: a, gridColumns: o, partLabel: f, prompt: m, responseCorrect: h, teacherInstructions: g, alwaysShowCorrect: y, animationsDisabled: b, language: x, isSelectionButtonBelow: k, minSelections: j, maxSelections: M, autoplayAudioEnabled: N, session: P, customAudioButton: F, options: I, baseHeadingLevel: L } = this.props, { showCorrect: R, maxSelectionsErrorState: z } = this.state, B = t === "evaluate", V = B && !h, H = o > 1 ? { gridTemplateColumns: `repeat(${o}, 1fr)` } : void 0, U = P.value && P.value.length || 0, W = (() => {
+			if (!L) return;
+			let e = 1;
+			return f && (e += 1), Math.min(6, L + e);
+		})(), G = (e) => e && W ? s(e, W) : e, K = /* @__PURE__ */ c(_, {
+			tagName: "div",
+			className: "prompt",
+			defaultClassName: "teacher-instructions",
+			prompt: g
+		}), q = () => j && M ? j === M ? S.t("translation:multipleChoice:minmaxSelections_equal", {
+			lng: x,
+			minSelections: j
+		}) : S.t("translation:multipleChoice:minmaxSelections_range", {
+			lng: x,
+			minSelections: j,
+			maxSelections: M
+		}) : j ? S.t("translation:multipleChoice:minSelections", {
+			lng: x,
+			minSelections: j
+		}) : "", J = this.props.choicesLayout === "grid" ? D : this.props.choicesLayout === "horizontal" ? E : p;
+		return /* @__PURE__ */ l(C, {
+			id: "main-container",
+			className: d(r, "multiple-choice"),
+			children: [
+				f && /* @__PURE__ */ c(w, {
+					as: L ? `h${Math.min(6, L + 1)}` : "h2",
+					children: f
+				}),
+				this.renderHeading(),
+				g && /* @__PURE__ */ c(T, { children: b ? K : /* @__PURE__ */ c(v, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: K
+				}) }),
+				/* @__PURE__ */ l(O, {
+					role: a === "radio" ? "radiogroup" : "group",
+					children: [
+						/* @__PURE__ */ c(_, {
+							className: "prompt",
+							defaultClassName: "prompt",
+							prompt: G(m),
+							tagName: "legend",
+							autoplayAudioEnabled: N,
+							customAudioButton: F
+						}),
+						!(I && y) && /* @__PURE__ */ c(u, {
+							show: V,
+							toggled: R,
+							onToggle: this.onToggle.bind(this),
+							language: x
+						}),
+						/* @__PURE__ */ c(J, {
+							style: H,
+							children: i.map((t, r) => /* @__PURE__ */ c(e, {
+								choicesLayout: this.props.choicesLayout,
+								selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
+								selectedAnswerStrokeColor: this.props.selectedAnswerStrokeColor,
+								selectedAnswerStrokeWidth: this.props.selectedAnswerStrokeWidth,
+								hoverAnswerBackgroundColor: this.props.hoverAnswerBackgroundColor,
+								hoverAnswerStrokeColor: this.props.hoverAnswerStrokeColor,
+								hoverAnswerStrokeWidth: this.props.hoverAnswerStrokeWidth,
+								gridColumns: o,
+								choice: t,
+								index: r,
+								choicesLength: i.length,
+								showCorrect: R,
+								isEvaluateMode: B,
+								choiceMode: a,
+								disabled: n,
+								tagName: this.groupName,
+								onChoiceChanged: this.handleChange,
+								hideTick: t.hideTick,
+								checked: this.getChecked(t),
+								correctness: B ? this.getCorrectness(t) : void 0,
+								displayKey: this.indexToSymbol(r),
+								isSelectionButtonBelow: k
+							}, `choice-${r}`))
+						})
+					]
+				}),
+				a === "checkbox" && U < j && /* @__PURE__ */ c(A, { children: q() }),
+				a === "checkbox" && z && /* @__PURE__ */ c(A, { children: S.t(`translation:multipleChoice:maxSelections_${M === 1 ? "one" : "other"}`, {
+					lng: x,
+					maxSelections: M
+				}) })
+			]
+		});
+	}
+};
+j.defaultProps = { session: { value: [] } };
+//#endregion
+export { j as default };

package/dist/delivery/session-updater.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/session-updater.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 updateSessionValue(session: any, choiceMode: any, data: any): void;
+export declare function updateSessionMetadata(session: any, metadata: any): void;

package/dist/delivery/session-updater.js

@@ -0,0 +1,9 @@
+//#region src/delivery/session-updater.ts
+function e(e, t, n) {
+	e.value = e.value || [], t === "checkbox" && (n.selected ? e.value = Array.from(new Set([...e.value, n.value])) : e.value = e.value.filter((e) => e !== n.value)), t === "radio" && (n.selected ? e.value = [n.value] : e.value = []), e.selector = n.selector;
+}
+function t(e, t) {
+	e.audioStartTime = e.audioStartTime || t.audioStartTime, e.audioEndTime = e.audioEndTime || t.audioEndTime, !e.waitTime && e.audioStartTime && e.audioEndTime && (e.waitTime = e.audioEndTime - e.audioStartTime);
+}
+//#endregion
+export { t as updateSessionMetadata, e as updateSessionValue };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for multiple-choice element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;