@lessonkit/react 1.3.1 → 1.5.0

package/dist/chunk-ELGQ4XI3.js

@@ -0,0 +1,271 @@
+import {
+  AssessmentLessonGuard,
+  buildAssessmentHandle,
+  isDevEnvironment,
+  normalizeComponentId,
+  readBooleanField,
+  readNumberField,
+  readStringField,
+  resetAssessmentWarningsForTests,
+  useAssessmentHandleRegistration,
+  useLessonkit,
+  usePluginScoring,
+  useQuizState
+} from "./chunk-7TJQJFYR.js";
+
+// src/runtime/lessonMountRegistry.ts
+var mountCounts = /* @__PURE__ */ new Map();
+var warnedConcurrentLessons = false;
+function registerLessonMount(lessonId) {
+  if (isDevEnvironment() && mountCounts.size > 0 && !mountCounts.has(lessonId) && !warnedConcurrentLessons) {
+    warnedConcurrentLessons = true;
+    console.warn(
+      "[lessonkit] Multiple <Lesson> components are mounted; only one should be active at a time. Set autoCompleteOnUnmount={false} on routed lessons or unmount the previous lesson before showing the next."
+    );
+  }
+  mountCounts.set(lessonId, (mountCounts.get(lessonId) ?? 0) + 1);
+  return () => {
+    const next = (mountCounts.get(lessonId) ?? 1) - 1;
+    if (next <= 0) {
+      mountCounts.delete(lessonId);
+    } else {
+      mountCounts.set(lessonId, next);
+    }
+  };
+}
+function getLessonMountCount(lessonId) {
+  return mountCounts.get(lessonId) ?? 0;
+}
+function resetLessonMountRegistryForTests() {
+  mountCounts.clear();
+  warnedConcurrentLessons = false;
+}
+
+// src/components/Quiz.tsx
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { visuallyHiddenStyle } from "@lessonkit/accessibility";
+import { jsx, jsxs } from "react/jsx-runtime";
+function QuizInner(props, ref) {
+  const { enclosingLessonId } = props;
+  const checkId = useMemo(() => normalizeComponentId(props.checkId, "checkId"), [props.checkId]);
+  const quiz = useQuizState(enclosingLessonId);
+  const { config } = useLessonkit();
+  const { scoreResponse } = usePluginScoring(checkId, enclosingLessonId);
+  const [selected, setSelected] = useState(null);
+  const [selectionCorrect, setSelectionCorrect] = useState(null);
+  const [quizPassed, setQuizPassed] = useState(false);
+  const [completedScore, setCompletedScore] = useState(null);
+  const [completedMaxScore, setCompletedMaxScore] = useState(null);
+  const completedRef = useRef(false);
+  const telemetryReplayedRef = useRef(false);
+  const questionId = useId();
+  const choicesKey = props.choices.join("\0");
+  useEffect(() => {
+    completedRef.current = false;
+    telemetryReplayedRef.current = false;
+    setQuizPassed(false);
+    setSelected(null);
+    setSelectionCorrect(null);
+    setCompletedScore(null);
+    setCompletedMaxScore(null);
+  }, [checkId, props.answer, props.question, choicesKey]);
+  const passed = quizPassed;
+  const resolveScores = () => {
+    const maxScore = completedMaxScore ?? 1;
+    if (quizPassed) {
+      return { score: completedScore ?? maxScore, maxScore };
+    }
+    if (selected !== null && selectionCorrect) {
+      return { score: completedMaxScore ?? maxScore, maxScore };
+    }
+    return { score: 0, maxScore };
+  };
+  const replayTelemetry = (nextSelected, nextCorrect, nextPassed, nextScore, nextMaxScore) => {
+    if (!nextPassed || telemetryReplayedRef.current) return;
+    telemetryReplayedRef.current = true;
+    if (nextSelected !== null) {
+      quiz.answer({
+        checkId,
+        question: props.question,
+        choice: nextSelected,
+        correct: nextCorrect ?? false
+      });
+    }
+    quiz.complete({
+      checkId,
+      score: nextScore,
+      maxScore: nextMaxScore,
+      passingScore: props.passingScore ?? nextMaxScore
+    });
+  };
+  const handle = useMemo(
+    () => buildAssessmentHandle({
+      checkId,
+      getScore: () => resolveScores().score,
+      getMaxScore: () => resolveScores().maxScore,
+      getAnswerGiven: () => selected !== null,
+      resetTask: () => {
+        completedRef.current = false;
+        telemetryReplayedRef.current = false;
+        setQuizPassed(false);
+        setSelected(null);
+        setSelectionCorrect(null);
+        setCompletedScore(null);
+        setCompletedMaxScore(null);
+      },
+      showSolutions: () => {
+      },
+      getXAPIData: () => {
+        const { score, maxScore } = resolveScores();
+        return {
+          checkId,
+          interactionType: "mcq",
+          response: selected ?? void 0,
+          correct: selectionCorrect ?? void 0,
+          score,
+          maxScore
+        };
+      },
+      getCurrentState: () => ({
+        selected,
+        selectionCorrect,
+        quizPassed,
+        completedScore,
+        completedMaxScore
+      }),
+      resume: (state) => {
+        const nextSelected = readStringField(state, "selected");
+        if (typeof nextSelected === "string" || nextSelected === null) setSelected(nextSelected);
+        const nextCorrect = readBooleanField(state, "selectionCorrect");
+        if (nextCorrect === true || nextCorrect === false || nextCorrect === null) {
+          setSelectionCorrect(nextCorrect);
+        }
+        const nextCompletedScore = readNumberField(state, "completedScore");
+        if (typeof nextCompletedScore === "number") setCompletedScore(nextCompletedScore);
+        const nextCompletedMaxScore = readNumberField(state, "completedMaxScore");
+        if (typeof nextCompletedMaxScore === "number") setCompletedMaxScore(nextCompletedMaxScore);
+        const nextPassed = readBooleanField(state, "quizPassed");
+        if (nextPassed === true || nextPassed === false) {
+          setQuizPassed(nextPassed);
+          completedRef.current = nextPassed;
+          if (nextPassed && config.tracking?.replayResumeEvents === true) {
+            const maxScore = nextCompletedMaxScore ?? 1;
+            const score = nextCompletedScore ?? (nextPassed ? maxScore : 0);
+            replayTelemetry(
+              nextSelected ?? null,
+              nextCorrect ?? null,
+              nextPassed,
+              score,
+              maxScore
+            );
+          }
+        }
+      }
+    }),
+    [
+      checkId,
+      completedMaxScore,
+      completedScore,
+      config.tracking?.replayResumeEvents,
+      props.passingScore,
+      props.question,
+      quiz,
+      quizPassed,
+      selected,
+      selectionCorrect
+    ]
+  );
+  useAssessmentHandleRegistration(checkId, handle, ref);
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Quiz", "data-lk-check-id": checkId, children: [
+    /* @__PURE__ */ jsx("p", { id: questionId, children: props.question }),
+    /* @__PURE__ */ jsxs("fieldset", { "aria-labelledby": questionId, children: [
+      /* @__PURE__ */ jsx("legend", { style: visuallyHiddenStyle, children: "Quiz choices" }),
+      props.choices.map((c, i) => /* @__PURE__ */ jsxs("label", { style: { display: "block" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: questionId,
+            value: c,
+            checked: selected === c,
+            disabled: passed && !props.enableRetry,
+            "aria-invalid": selected === c && selectionCorrect === false ? true : void 0,
+            onChange: () => {
+              if (passed && !props.enableRetry) return;
+              setSelected(c);
+              const defaultCorrect = c === props.answer;
+              const scored = scoreResponse(c, defaultCorrect, 1, props.passingScore);
+              setSelectionCorrect(scored.passed);
+              quiz.answer({
+                checkId,
+                question: props.question,
+                choice: c,
+                correct: scored.passed
+              });
+              if (scored.passed && !completedRef.current) {
+                completedRef.current = true;
+                setQuizPassed(true);
+                setCompletedScore(scored.score);
+                setCompletedMaxScore(scored.maxScore);
+                quiz.complete({
+                  checkId,
+                  score: scored.score,
+                  maxScore: scored.maxScore,
+                  passingScore: props.passingScore ?? scored.maxScore
+                });
+              } else if (!scored.passed && props.enableRetry === false && !completedRef.current) {
+                completedRef.current = true;
+                setCompletedScore(scored.score);
+                setCompletedMaxScore(scored.maxScore);
+                quiz.complete({
+                  checkId,
+                  score: scored.score,
+                  maxScore: scored.maxScore,
+                  passingScore: props.passingScore ?? scored.maxScore
+                });
+              }
+            }
+          }
+        ),
+        c
+      ] }, `${questionId}-${i}`))
+    ] }),
+    selected && selectionCorrect !== null ? /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", children: selectionCorrect ? "Correct" : "Try again" }) : null,
+    props.enableRetry && passed ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": "quiz-retry",
+        onClick: () => {
+          completedRef.current = false;
+          telemetryReplayedRef.current = false;
+          setQuizPassed(false);
+          setSelected(null);
+          setSelectionCorrect(null);
+          setCompletedScore(null);
+          setCompletedMaxScore(null);
+        },
+        children: "Try again"
+      }
+    ) : null
+  ] });
+}
+var QuizInnerForwarded = forwardRef(QuizInner);
+var Quiz = forwardRef(function Quiz2(props, ref) {
+  return /* @__PURE__ */ jsx(AssessmentLessonGuard, { blockLabel: "Quiz", checkId: props.checkId, children: (lessonId) => /* @__PURE__ */ jsx(QuizInnerForwarded, { ...props, enclosingLessonId: lessonId, ref }) });
+});
+function KnowledgeCheck(props) {
+  return /* @__PURE__ */ jsx(Quiz, { ...props });
+}
+function resetQuizWarningsForTests() {
+  resetAssessmentWarningsForTests();
+}
+
+export {
+  registerLessonMount,
+  getLessonMountCount,
+  resetLessonMountRegistryForTests,
+  Quiz,
+  KnowledgeCheck,
+  resetQuizWarningsForTests
+};