@anantagnanam/lms 0.2.0 → 0.3.0

package/dist/admin.js

@@ -1,4 +1,4 @@
-import { r as PLUGIN_ID, t as API_BASE } from "./constants-Cnx7k82Z.js";
+import { r as PLUGIN_ID, t as API_BASE } from "./constants-DyQbwNbP.js";
 import { assignmentSchema, courseDataSchema, lessonSchema, moduleSchema, questionSchema, quizSchema, settingsSchema } from "./schemas.js";
 import { n as enrollmentCsvLines, t as enrollmentCsvHeader } from "./csv-DKq_4OWU.js";
 import { useEffect, useState } from "react";
@@ -1117,6 +1117,83 @@ function ContentPicker({ value, onChange }) {
 		})
 	] });
 }
+function RubricEditor({ assignment, update }) {
+	const rubric = assignment.rubric ?? [];
+	const change = (criteria, removed = false) => {
+		const maxPoints = criteria.length ? criteria.reduce((sum, item) => sum + item.maxPoints, 0) : assignment.maxPoints;
+		update({
+			...assignment,
+			rubric: criteria,
+			maxPoints,
+			passingPoints: removed ? Math.min(assignment.passingPoints, maxPoints) : assignment.passingPoints
+		});
+	};
+	return /* @__PURE__ */ jsxs("section", { children: [
+		/* @__PURE__ */ jsx("h3", { children: "Grading rubric" }),
+		/* @__PURE__ */ jsx("p", { children: "Describe what learners should demonstrate. Criterion points add up to the assignment maximum. Submitted work keeps its original rubric." }),
+		rubric.map((criterion, index) => /* @__PURE__ */ jsxs("fieldset", {
+			className: "lms-resource",
+			children: [
+				/* @__PURE__ */ jsxs("legend", { children: ["Criterion ", index + 1] }),
+				/* @__PURE__ */ jsx(Field, {
+					label: "Criterion title",
+					children: /* @__PURE__ */ jsx("input", {
+						required: true,
+						maxLength: 200,
+						value: criterion.title,
+						onChange: (event) => change(rubric.map((item) => item.id === criterion.id ? {
+							...item,
+							title: event.target.value
+						} : item))
+					})
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: "What earns these points",
+					children: /* @__PURE__ */ jsx("textarea", {
+						rows: 3,
+						maxLength: 2e3,
+						value: criterion.description,
+						onChange: (event) => change(rubric.map((item) => item.id === criterion.id ? {
+							...item,
+							description: event.target.value
+						} : item))
+					})
+				}),
+				/* @__PURE__ */ jsx(Field, {
+					label: "Maximum criterion points",
+					children: /* @__PURE__ */ jsx("input", {
+						type: "number",
+						required: true,
+						min: 1,
+						max: 1e3 - (assignment.maxPoints - criterion.maxPoints),
+						step: 1,
+						value: criterion.maxPoints,
+						onChange: (event) => change(rubric.map((item) => item.id === criterion.id ? {
+							...item,
+							maxPoints: Number(event.target.value)
+						} : item))
+					})
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					danger: true,
+					onClick: () => change(rubric.filter((item) => item.id !== criterion.id), true),
+					children: ["Remove criterion ", index + 1]
+				})
+			]
+		}, criterion.id)),
+		/* @__PURE__ */ jsx(Button, {
+			disabled: rubric.length >= 20 || rubric.length > 0 && assignment.maxPoints >= 1e3,
+			onClick: () => change([...rubric, {
+				id: crypto.randomUUID(),
+				title: "New criterion",
+				description: "",
+				maxPoints: rubric.length ? Math.min(10, 1e3 - assignment.maxPoints) : assignment.maxPoints
+			}]),
+			children: rubric.length ? "Add criterion" : "Add grading rubric"
+		}),
+		/* @__PURE__ */ jsx("p", { children: rubric.length ? `${rubric.length} ${rubric.length === 1 ? "criterion" : "criteria"} · ${assignment.maxPoints} points total (maximum 1000). Review the passing points when changing scores.` : "Without a rubric, graders enter a single overall score." })
+	] });
+}
 function LessonEditor({ lesson, previewUrl, update, remove }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
@@ -1377,6 +1454,8 @@ function LessonEditor({ lesson, previewUrl, update, remove }) {
 							children: /* @__PURE__ */ jsx("input", {
 								type: "number",
 								min: 1,
+								max: 1e3,
+								readOnly: Boolean(lesson.assignment.rubric?.length),
 								value: lesson.assignment.maxPoints,
 								onChange: (event) => update({ assignment: {
 									...lesson.assignment,
@@ -1389,6 +1468,7 @@ function LessonEditor({ lesson, previewUrl, update, remove }) {
 							children: /* @__PURE__ */ jsx("input", {
 								type: "number",
 								min: 1,
+								max: lesson.assignment.maxPoints,
 								value: lesson.assignment.passingPoints,
 								onChange: (event) => update({ assignment: {
 									...lesson.assignment,
@@ -1419,6 +1499,10 @@ function LessonEditor({ lesson, previewUrl, update, remove }) {
 							allowResubmission: event.target.checked
 						} })
 					}), "Allow another submission after a failing grade"]
+				}),
+				/* @__PURE__ */ jsx(RubricEditor, {
+					assignment: lesson.assignment,
+					update: (assignment) => update({ assignment })
 				})
 			]
 		}),
@@ -2056,7 +2140,9 @@ function AssignmentsPage() {
 	}, !!courseId);
 	const [selected, setSelected] = useState();
 	const [points, setPoints] = useState(0);
+	const [rubricScores, setRubricScores] = useState([]);
 	const [feedback, setFeedback] = useState("");
+	const rubricTotal = rubricScores.reduce((sum, item) => sum + item.points, 0);
 	const action = useAction();
 	const grade = (event) => {
 		event.preventDefault();
@@ -2067,7 +2153,7 @@ function AssignmentsPage() {
 				lessonId: selected.lessonId,
 				userId: selected.userId,
 				submissionId: selected.id,
-				points,
+				...selected.rubric?.length ? { rubricScores } : { points },
 				feedback
 			}, "POST");
 			setSelected(void 0);
@@ -2107,7 +2193,59 @@ function AssignmentsPage() {
 					/* @__PURE__ */ jsxs("form", {
 						onSubmit: grade,
 						children: [
-							/* @__PURE__ */ jsx(Field, {
+							selected.rubric?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("p", { children: "Score each criterion using the rubric saved with this submission." }),
+								selected.rubric.map((criterion) => {
+									const score = rubricScores.find((item) => item.criterionId === criterion.id);
+									const updateScore = (values) => setRubricScores((items) => items.map((item) => item.criterionId === criterion.id ? {
+										...item,
+										...values
+									} : item));
+									return /* @__PURE__ */ jsxs("fieldset", {
+										className: "lms-resource",
+										children: [
+											/* @__PURE__ */ jsx("legend", { children: criterion.title }),
+											/* @__PURE__ */ jsx("p", {
+												className: "lms-body",
+												children: criterion.description
+											}),
+											/* @__PURE__ */ jsx(Field, {
+												label: `Points for ${criterion.title} (out of ${criterion.maxPoints})`,
+												children: /* @__PURE__ */ jsx("input", {
+													type: "number",
+													required: true,
+													min: 0,
+													max: criterion.maxPoints,
+													step: 1,
+													value: score.points,
+													onChange: (event) => updateScore({ points: Number(event.target.value) })
+												})
+											}),
+											/* @__PURE__ */ jsx(Field, {
+												label: `Feedback for ${criterion.title}`,
+												children: /* @__PURE__ */ jsx("textarea", {
+													rows: 3,
+													maxLength: 2e3,
+													value: score.feedback,
+													onChange: (event) => updateScore({ feedback: event.target.value })
+												})
+											})
+										]
+									}, criterion.id);
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									role: "status",
+									children: [
+										"Total: ",
+										rubricTotal,
+										"/",
+										selected.maxPoints,
+										" · Passing grade:",
+										" ",
+										selected.passingPoints
+									]
+								})
+							] }) : /* @__PURE__ */ jsx(Field, {
 								label: `Points out of ${selected.maxPoints}`,
 								help: `Passing grade: ${selected.passingPoints}`,
 								children: /* @__PURE__ */ jsx("input", {
@@ -2123,6 +2261,7 @@ function AssignmentsPage() {
 								label: "Feedback",
 								children: /* @__PURE__ */ jsx("textarea", {
 									rows: 6,
+									maxLength: 1e4,
 									value: feedback,
 									onChange: (event) => setFeedback(event.target.value)
 								})
@@ -2164,18 +2303,39 @@ function AssignmentsPage() {
 					rel: "noopener noreferrer",
 					children: "Open attachment ↗"
 				}) }),
-				item.status === "graded" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", { children: [
-					item.points,
-					"/",
-					item.maxPoints,
-					" points"
-				] }), /* @__PURE__ */ jsx("p", {
-					className: "lms-body",
-					children: item.feedback
-				})] }) : /* @__PURE__ */ jsx(Button, {
+				item.status === "graded" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("p", { children: [
+						item.points,
+						"/",
+						item.maxPoints,
+						" points"
+					] }),
+					/* @__PURE__ */ jsx("p", {
+						className: "lms-body",
+						children: item.feedback
+					}),
+					(item.rubric ?? []).map((criterion) => {
+						const score = item.rubricScores?.find((entry) => entry.criterionId === criterion.id);
+						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("strong", { children: [
+							criterion.title,
+							": ",
+							score?.points ?? "—",
+							"/",
+							criterion.maxPoints
+						] }), score?.feedback && /* @__PURE__ */ jsx("p", {
+							className: "lms-body",
+							children: score.feedback
+						})] }, criterion.id);
+					})
+				] }) : /* @__PURE__ */ jsx(Button, {
 					onClick: () => {
 						setSelected(item);
 						setPoints(0);
+						setRubricScores((item.rubric ?? []).map((criterion) => ({
+							criterionId: criterion.id,
+							points: 0,
+							feedback: ""
+						})));
 						setFeedback("");
 					},
 					children: "Review & grade"