@schoolio/player 1.4.3 → 1.4.4

package/dist/index.mjs

@@ -158,15 +158,16 @@ function checkAnswer(question, selectedAnswer) {
       return { isCorrect, pointsEarned: isCorrect ? points : 0 };
     }
     case "essay":
-    case "assessment":
       return { isCorrect: false, pointsEarned: 0 };
+    case "assessment":
+      return { isCorrect: true, pointsEarned: points };
     default:
       return { isCorrect: false, pointsEarned: 0 };
   }
 }
 function createAnswerDetail(question, selectedAnswer) {
   const { isCorrect, pointsEarned } = checkAnswer(question, selectedAnswer);
-  return {
+  const detail = {
     questionId: question.id,
     questionText: question.question,
     questionType: question.type,
@@ -178,6 +179,14 @@ function createAnswerDetail(question, selectedAnswer) {
     explanation: question.explanation,
     hint: question.hint
   };
+  if (question.type === "sorting") {
+    detail.items = question.items;
+    detail.correctOrder = question.correctOrder;
+  } else if (question.type === "matrix") {
+    detail.leftItems = question.leftItems;
+    detail.rightItems = question.rightItems;
+  }
+  return detail;
 }
 function calculateScore(answers) {
   const totalPoints = answers.reduce((sum, a) => sum + a.points, 0);
@@ -1316,6 +1325,13 @@ var defaultStyles = {
     backgroundColor: "#fef2f2",
     borderColor: "#ef4444"
   },
+  feedbackNeutral: {
+    backgroundColor: "#f0f9ff",
+    borderColor: "#0ea5e9"
+  },
+  feedbackTitleNeutral: {
+    color: "#0369a1"
+  },
   feedbackTitle: {
     fontSize: "16px",
     fontWeight: "600",
@@ -1336,6 +1352,290 @@ var defaultStyles = {
     lineHeight: "1.5"
   }
 };
+function SortingDragDrop({ items, currentOrder, correctOrder, showFeedback, onOrderChange }) {
+  const [draggedIndex, setDraggedIndex] = useState3(null);
+  const [dragOverIndex, setDragOverIndex] = useState3(null);
+  const handleDragStart = (e, position) => {
+    if (showFeedback) return;
+    setDraggedIndex(position);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", position.toString());
+  };
+  const handleDragOver = (e, position) => {
+    e.preventDefault();
+    if (showFeedback) return;
+    e.dataTransfer.dropEffect = "move";
+    setDragOverIndex(position);
+  };
+  const handleDragLeave = () => {
+    setDragOverIndex(null);
+  };
+  const handleDrop = (e, toPosition) => {
+    e.preventDefault();
+    if (showFeedback) return;
+    const fromPosition = parseInt(e.dataTransfer.getData("text/plain"), 10);
+    if (fromPosition !== toPosition) {
+      const newOrder = [...currentOrder];
+      const [movedItem] = newOrder.splice(fromPosition, 1);
+      newOrder.splice(toPosition, 0, movedItem);
+      onOrderChange(newOrder);
+    }
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+  return /* @__PURE__ */ jsx3("div", { style: defaultStyles.options, children: currentOrder.map((itemIndex, position) => {
+    const isCorrectPosition = correctOrder?.[position] === itemIndex;
+    const isDragging = draggedIndex === position;
+    const isDragOver = dragOverIndex === position;
+    let itemStyle = {
+      ...defaultStyles.option,
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      cursor: showFeedback ? "default" : "grab",
+      opacity: isDragging ? 0.5 : 1,
+      transition: "all 0.2s ease",
+      transform: isDragOver && !showFeedback ? "scale(1.02)" : "scale(1)"
+    };
+    if (showFeedback) {
+      if (isCorrectPosition) {
+        itemStyle = { ...itemStyle, ...defaultStyles.optionCorrect };
+      } else {
+        itemStyle = { ...itemStyle, ...defaultStyles.optionIncorrect };
+      }
+    } else if (isDragOver) {
+      itemStyle = { ...itemStyle, borderColor: "#6366f1", backgroundColor: "#eef2ff" };
+    }
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: itemStyle,
+        "data-testid": `sorting-item-${position}`,
+        draggable: !showFeedback,
+        onDragStart: (e) => handleDragStart(e, position),
+        onDragOver: (e) => handleDragOver(e, position),
+        onDragLeave: handleDragLeave,
+        onDrop: (e) => handleDrop(e, position),
+        onDragEnd: handleDragEnd,
+        children: [
+          !showFeedback && /* @__PURE__ */ jsx3("div", { style: {
+            cursor: "grab",
+            padding: "4px",
+            display: "flex",
+            alignItems: "center",
+            color: "#9ca3af"
+          }, children: /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "19", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "19", r: "1" })
+          ] }) }),
+          showFeedback && /* @__PURE__ */ jsx3("div", { style: {
+            display: "flex",
+            alignItems: "center",
+            color: isCorrectPosition ? "#22c55e" : "#ef4444"
+          }, children: isCorrectPosition ? /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx3("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+            /* @__PURE__ */ jsx3("polyline", { points: "22 4 12 14.01 9 11.01" })
+          ] }) : /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx3("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+            /* @__PURE__ */ jsx3("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+          ] }) }),
+          /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: items[itemIndex] }),
+          /* @__PURE__ */ jsx3("span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx3(TextToSpeech, { text: items[itemIndex], size: "sm" }) })
+        ]
+      },
+      itemIndex
+    );
+  }) });
+}
+function MatchingDragDrop({ leftItems, rightItems, currentMatches, correctMatches, showFeedback, onMatchChange }) {
+  const [draggedItem, setDraggedItem] = useState3(null);
+  const [dragOverLeft, setDragOverLeft] = useState3(null);
+  const matchedRightItems = Object.values(currentMatches);
+  const unmatchedRightItems = rightItems.filter((item) => !matchedRightItems.includes(item));
+  const handleDragStart = (e, rightItem) => {
+    if (showFeedback) return;
+    setDraggedItem(rightItem);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", rightItem);
+  };
+  const handleDragOver = (e, leftItem) => {
+    e.preventDefault();
+    if (showFeedback) return;
+    e.dataTransfer.dropEffect = "move";
+    setDragOverLeft(leftItem);
+  };
+  const handleDragLeave = () => {
+    setDragOverLeft(null);
+  };
+  const handleDrop = (e, leftItem) => {
+    e.preventDefault();
+    if (showFeedback) return;
+    const rightItem = e.dataTransfer.getData("text/plain");
+    if (rightItem) {
+      const newMatches = { ...currentMatches };
+      Object.keys(newMatches).forEach((key) => {
+        if (newMatches[key] === rightItem) {
+          delete newMatches[key];
+        }
+      });
+      newMatches[leftItem] = rightItem;
+      onMatchChange(newMatches);
+    }
+    setDraggedItem(null);
+    setDragOverLeft(null);
+  };
+  const handleDragEnd = () => {
+    setDraggedItem(null);
+    setDragOverLeft(null);
+  };
+  const handleClearMatch = (leftItem) => {
+    if (showFeedback) return;
+    const newMatches = { ...currentMatches };
+    delete newMatches[leftItem];
+    onMatchChange(newMatches);
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: "200px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "14px", fontWeight: "600", color: "#6b7280", marginBottom: "4px" }, children: "Match these items:" }),
+      leftItems.map((leftItem, idx) => {
+        const matchedRight = currentMatches[leftItem];
+        const correctMatch = correctMatches?.[leftItem];
+        const isCorrect = matchedRight === correctMatch;
+        const isDragOver = dragOverLeft === leftItem;
+        let rowStyle = {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          padding: "12px 16px",
+          border: "2px dashed #e5e7eb",
+          borderRadius: "8px",
+          backgroundColor: "#ffffff",
+          minHeight: "56px",
+          transition: "all 0.2s ease"
+        };
+        if (showFeedback) {
+          rowStyle.borderStyle = "solid";
+          if (isCorrect) {
+            rowStyle = { ...rowStyle, borderColor: "#22c55e", backgroundColor: "#f0fdf4" };
+          } else {
+            rowStyle = { ...rowStyle, borderColor: "#ef4444", backgroundColor: "#fef2f2" };
+          }
+        } else if (isDragOver) {
+          rowStyle = { ...rowStyle, borderColor: "#6366f1", backgroundColor: "#eef2ff", borderStyle: "solid" };
+        } else if (matchedRight) {
+          rowStyle = { ...rowStyle, borderStyle: "solid", borderColor: "#22c55e" };
+        }
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: rowStyle,
+            "data-testid": `matrix-row-${idx}`,
+            onDragOver: (e) => handleDragOver(e, leftItem),
+            onDragLeave: handleDragLeave,
+            onDrop: (e) => handleDrop(e, leftItem),
+            children: [
+              /* @__PURE__ */ jsx3("span", { style: { flex: 1, fontWeight: "500" }, children: leftItem }),
+              /* @__PURE__ */ jsx3("span", { style: { color: "#6b7280" }, children: "\u2192" }),
+              matchedRight ? /* @__PURE__ */ jsxs3("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                padding: "6px 12px",
+                backgroundColor: showFeedback ? isCorrect ? "#dcfce7" : "#fee2e2" : "#e0e7ff",
+                borderRadius: "6px",
+                fontSize: "14px"
+              }, children: [
+                /* @__PURE__ */ jsx3("span", { children: matchedRight }),
+                !showFeedback && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: () => handleClearMatch(leftItem),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "2px",
+                      display: "flex",
+                      color: "#6b7280"
+                    },
+                    "aria-label": "Remove match",
+                    children: /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                ),
+                showFeedback && (isCorrect ? /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#ef4444", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] }))
+              ] }) : /* @__PURE__ */ jsx3("span", { style: { color: "#9ca3af", fontSize: "14px", fontStyle: "italic" }, children: "Drop here" }),
+              showFeedback && !isCorrect && correctMatch && /* @__PURE__ */ jsxs3("span", { style: { color: "#166534", fontSize: "13px", marginLeft: "8px" }, children: [
+                "(Correct: ",
+                correctMatch,
+                ")"
+              ] })
+            ]
+          },
+          idx
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: "200px", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "14px", fontWeight: "600", color: "#6b7280", marginBottom: "4px" }, children: "Drag to match:" }),
+      unmatchedRightItems.length > 0 ? unmatchedRightItems.map((rightItem, idx) => {
+        const isDragging = draggedItem === rightItem;
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              border: "2px solid #e5e7eb",
+              borderRadius: "8px",
+              backgroundColor: "#ffffff",
+              cursor: showFeedback ? "default" : "grab",
+              opacity: isDragging ? 0.5 : 1,
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              transition: "all 0.2s ease"
+            },
+            draggable: !showFeedback,
+            onDragStart: (e) => handleDragStart(e, rightItem),
+            onDragEnd: handleDragEnd,
+            "data-testid": `draggable-right-${idx}`,
+            children: [
+              !showFeedback && /* @__PURE__ */ jsx3("div", { style: { color: "#9ca3af", display: "flex" }, children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "5", r: "1" }),
+                /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "12", r: "1" }),
+                /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "19", r: "1" }),
+                /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "5", r: "1" }),
+                /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "12", r: "1" }),
+                /* @__PURE__ */ jsx3("circle", { cx: "15", cy: "19", r: "1" })
+              ] }) }),
+              /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: rightItem })
+            ]
+          },
+          idx
+        );
+      }) : /* @__PURE__ */ jsx3("div", { style: {
+        padding: "16px",
+        textAlign: "center",
+        color: "#22c55e",
+        fontSize: "14px"
+      }, children: "All items matched!" })
+    ] })
+  ] });
+}
 function Spinner({ size = 16, color = "#ffffff" }) {
   return /* @__PURE__ */ jsx3(
     "span",
@@ -2212,14 +2512,123 @@ function QuizPlayer({
           },
           idx
         )) }),
+        currentQuestion.type === "sorting" && currentQuestion.items && /* @__PURE__ */ jsx3(
+          SortingDragDrop,
+          {
+            items: currentQuestion.items,
+            currentOrder: Array.isArray(selectedAnswer) ? selectedAnswer : currentQuestion.items.map((_, i) => i),
+            correctOrder: currentQuestion.correctOrder,
+            showFeedback,
+            onOrderChange: handleAnswerChange
+          }
+        ),
+        currentQuestion.type === "matrix" && currentQuestion.leftItems && currentQuestion.rightItems && /* @__PURE__ */ jsx3(
+          MatchingDragDrop,
+          {
+            leftItems: currentQuestion.leftItems,
+            rightItems: currentQuestion.rightItems,
+            currentMatches: typeof selectedAnswer === "object" && selectedAnswer !== null && !Array.isArray(selectedAnswer) ? selectedAnswer : {},
+            correctMatches: currentQuestion.correctMatches,
+            showFeedback,
+            onMatchChange: handleAnswerChange
+          }
+        ),
+        currentQuestion.type === "assessment" && /* @__PURE__ */ jsx3("div", { style: defaultStyles.options, children: (() => {
+          const scaleType = currentQuestion.scaleType || "likert";
+          if (scaleType === "yes-no") {
+            const options = ["Yes", "No"];
+            return options.map((option, idx) => {
+              const isSelected = selectedAnswer === option;
+              let optionStyle = { ...defaultStyles.option };
+              if (isSelected) {
+                optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+              }
+              return /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    ...optionStyle,
+                    cursor: showFeedback ? "default" : "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  onClick: () => !showFeedback && handleAnswerChange(option),
+                  "data-testid": `assessment-option-${option.toLowerCase()}`,
+                  children: /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: option })
+                },
+                idx
+              );
+            });
+          }
+          if (scaleType === "rating") {
+            const min = currentQuestion.scaleMin || 1;
+            const max = currentQuestion.scaleMax || 5;
+            const ratings = Array.from({ length: max - min + 1 }, (_, i) => min + i);
+            return /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap", justifyContent: "center" }, children: ratings.map((rating) => {
+              const isSelected = selectedAnswer === rating;
+              return /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: () => !showFeedback && handleAnswerChange(rating),
+                  disabled: showFeedback,
+                  style: {
+                    width: "48px",
+                    height: "48px",
+                    borderRadius: "50%",
+                    border: isSelected ? "2px solid #6721b0" : "2px solid #e5e7eb",
+                    backgroundColor: isSelected ? "#f3e8ff" : "#ffffff",
+                    cursor: showFeedback ? "not-allowed" : "pointer",
+                    fontSize: "18px",
+                    fontWeight: "600",
+                    color: isSelected ? "#6721b0" : "#374151"
+                  },
+                  "data-testid": `assessment-rating-${rating}`,
+                  children: rating
+                },
+                rating
+              );
+            }) });
+          }
+          const likertOptions = [
+            "Strongly Disagree",
+            "Disagree",
+            "Neutral",
+            "Agree",
+            "Strongly Agree"
+          ];
+          return likertOptions.map((option, idx) => {
+            const isSelected = selectedAnswer === option;
+            let optionStyle = { ...defaultStyles.option };
+            if (isSelected) {
+              optionStyle = { ...optionStyle, ...defaultStyles.optionSelected };
+            }
+            return /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  ...optionStyle,
+                  cursor: showFeedback ? "default" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px"
+                },
+                onClick: () => !showFeedback && handleAnswerChange(option),
+                "data-testid": `assessment-likert-${idx}`,
+                children: /* @__PURE__ */ jsx3("span", { style: { flex: 1 }, children: option })
+              },
+              idx
+            );
+          });
+        })() }),
         showFeedback && currentAnswerDetail && /* @__PURE__ */ jsxs3("div", { style: {
           ...defaultStyles.feedback,
-          ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
+          ...currentQuestion.type === "assessment" ? defaultStyles.feedbackNeutral : currentAnswerDetail.isCorrect ? defaultStyles.feedbackCorrect : defaultStyles.feedbackIncorrect
         }, children: [
           /* @__PURE__ */ jsx3("div", { style: {
             ...defaultStyles.feedbackTitle,
-            ...currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
-          }, children: currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
+            ...currentQuestion.type === "assessment" ? defaultStyles.feedbackTitleNeutral : currentAnswerDetail.isCorrect ? defaultStyles.feedbackTitleCorrect : defaultStyles.feedbackTitleIncorrect
+          }, children: currentQuestion.type === "assessment" ? "\u2713 Response recorded" : currentAnswerDetail.isCorrect ? "\u2713 Correct!" : "\u2717 Incorrect" }),
           currentQuestion.explanation && /* @__PURE__ */ jsx3("div", { style: defaultStyles.feedbackExplanation, children: currentQuestion.explanation })
         ] })
       ] }),
@@ -2541,7 +2950,7 @@ function QuizPlayer({
         lessonId,
         courseId,
         answerResult: showFeedback && currentAnswerDetail ? {
-          wasIncorrect: !currentAnswerDetail.isCorrect,
+          wasIncorrect: currentQuestion.type !== "assessment" && !currentAnswerDetail.isCorrect,
           selectedAnswer: typeof selectedAnswer === "string" ? selectedAnswer : Array.isArray(selectedAnswer) ? selectedAnswer.join(", ") : void 0,
           correctAnswer: typeof currentQuestion.correctAnswer === "string" ? currentQuestion.correctAnswer : Array.isArray(currentQuestion.correctAnswer) ? currentQuestion.correctAnswer.join(", ") : void 0,
           explanation: currentQuestion.explanation
@@ -2749,10 +3158,31 @@ var spinnerKeyframes = `
     to { transform: rotate(360deg); }
   }
 `;
-function formatAnswer(answer) {
+function formatAnswer(answer, questionType, items, leftItems) {
   if (answer === null || answer === void 0) {
     return "No answer";
   }
+  if (questionType === "sorting" && Array.isArray(answer)) {
+    const indices = answer;
+    if (items && items.length > 0) {
+      return indices.map((idx, pos) => `${pos + 1}. ${items[idx] ?? `Item ${idx + 1}`}`).join(", ");
+    }
+    return indices.map((idx, pos) => `Position ${pos + 1}: Item ${idx + 1}`).join(", ");
+  }
+  if (questionType === "matrix" && typeof answer === "object" && !Array.isArray(answer)) {
+    const matches = answer;
+    if (leftItems && leftItems.length > 0) {
+      return leftItems.map((left) => {
+        const right = matches[left];
+        return `${left} \u2192 ${right || "No answer"}`;
+      }).join(", ");
+    }
+    const entries = Object.entries(matches);
+    if (entries.length === 0) {
+      return "No answer";
+    }
+    return entries.map(([left, right]) => `${left} \u2192 ${right || "No answer"}`).join(", ");
+  }
   if (typeof answer === "string") {
     return answer;
   }
@@ -2764,6 +3194,15 @@ function formatAnswer(answer) {
   }
   return String(answer);
 }
+function formatCorrectSortingAnswer(items, correctOrder) {
+  return correctOrder.map((idx, pos) => `${pos + 1}. ${items[idx] ?? `Item ${idx + 1}`}`).join(", ");
+}
+function formatCorrectMatrixAnswer(correctMatches, leftItems) {
+  if (leftItems && leftItems.length > 0) {
+    return leftItems.map((left) => `${left} \u2192 ${correctMatches[left] || "N/A"}`).join(", ");
+  }
+  return Object.entries(correctMatches).map(([left, right]) => `${left} \u2192 ${right}`).join(", ");
+}
 function AttemptViewer({
   attemptId,
   apiBaseUrl,
@@ -2900,11 +3339,11 @@ function AttemptViewer({
           /* @__PURE__ */ jsx4("div", { style: defaultStyles2.questionText, children: answer.questionText }),
           /* @__PURE__ */ jsxs4("div", { style: defaultStyles2.answerSection, children: [
             /* @__PURE__ */ jsx4("span", { style: defaultStyles2.answerLabel, children: "Your answer:" }),
-            /* @__PURE__ */ jsx4("span", { style: defaultStyles2.studentAnswer, children: formatAnswer(answer.selectedAnswer) })
+            /* @__PURE__ */ jsx4("span", { style: defaultStyles2.studentAnswer, children: formatAnswer(answer.selectedAnswer, answer.questionType, answer.items, answer.leftItems) })
           ] }),
           !answer.isCorrect && answer.correctAnswer && /* @__PURE__ */ jsxs4("div", { style: defaultStyles2.answerSection, children: [
             /* @__PURE__ */ jsx4("span", { style: defaultStyles2.answerLabel, children: "Correct answer:" }),
-            /* @__PURE__ */ jsx4("span", { style: defaultStyles2.correctAnswer, children: formatAnswer(answer.correctAnswer) })
+            /* @__PURE__ */ jsx4("span", { style: defaultStyles2.correctAnswer, children: answer.questionType === "sorting" && answer.items && answer.correctOrder ? formatCorrectSortingAnswer(answer.items, answer.correctOrder) : answer.questionType === "matrix" && answer.correctAnswer && typeof answer.correctAnswer === "object" && !Array.isArray(answer.correctAnswer) ? formatCorrectMatrixAnswer(answer.correctAnswer, answer.leftItems) : formatAnswer(answer.correctAnswer, answer.questionType, answer.items, answer.leftItems) })
           ] }),
           /* @__PURE__ */ jsxs4("div", { style: defaultStyles2.points, children: [
             answer.pointsEarned,