@schoolio/player 1.2.0 → 1.2.2

package/README.md

@@ -1,6 +1,11 @@
 # @schoolio/player
 
-A React component for loading and playing quizzes from Quiz Engine.
+React components for loading quizzes and displaying attempt results from Quiz Engine.
+
+## Components
+
+- **QuizPlayer** - Interactive quiz-taking component
+- **AttemptViewer** - Displays quiz attempt results with detailed breakdown
 
 ## Installation
 
@@ -138,6 +143,90 @@ await client.updateAttempt(attempt.id, {
 });
 ```
 
+---
+
+## AttemptViewer
+
+The `AttemptViewer` component displays quiz attempt results with a summary and detailed question-by-question breakdown.
+
+### Usage
+
+```tsx
+import { AttemptViewer } from '@schoolio/player';
+
+function MyResultsPage() {
+  return (
+    <AttemptViewer
+      attemptId={123}
+      apiBaseUrl="https://your-quiz-engine-url.com"
+    />
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `attemptId` | `number` | Yes | The ID of the quiz attempt to display |
+| `apiBaseUrl` | `string` | Yes | Base URL of your Quiz Engine API |
+| `title` | `string` | No | Optional title (reserved for future use) |
+
+### API Endpoint Required
+
+The component expects this endpoint:
+
+```
+GET {apiBaseUrl}/api/quiz-attempts/{attemptId}/results
+```
+
+**Response format:**
+
+```json
+{
+  "attempt": {
+    "id": 123,
+    "quizId": 1,
+    "score": 80,
+    "totalQuestions": 10,
+    "correctAnswers": 8,
+    "timeTaken": 300,
+    "completedAt": "2025-01-02T10:00:00Z",
+    "answers": { "1": "selected_answer", "2": "another_answer" }
+  },
+  "questions": [
+    {
+      "id": 1,
+      "questionText": "What is 2+2?",
+      "questionType": "multiple_choice",
+      "options": ["3", "4", "5"],
+      "correctAnswer": "4",
+      "explanation": "Basic addition"
+    }
+  ]
+}
+```
+
+### Styling
+
+The component uses 100% width to fill its parent container. Wrap it in a sized container to control dimensions:
+
+```tsx
+<div style={{ maxWidth: '800px', margin: '0 auto' }}>
+  <AttemptViewer attemptId={123} apiBaseUrl="https://api.example.com" />
+</div>
+```
+
+### Features
+
+- **Summary cards** showing score, questions count, and time taken
+- **Detailed breakdown** of each question with correct/incorrect indicators
+- **Explanations** displayed for each question when available
+- **Purple theme** (#6721b0) matching the QuizPlayer design
+- **Responsive layout** that adapts to container width
+
+---
+
 ## License
 
 MIT

package/dist/index.js

@@ -1,9 +1,37 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AttemptViewer: () => AttemptViewer,
+  QuizApiClient: () => QuizApiClient,
+  QuizPlayer: () => QuizPlayer,
+  calculateScore: () => calculateScore,
+  checkAnswer: () => checkAnswer,
+  createAnswerDetail: () => createAnswerDetail,
+  formatTime: () => formatTime
+});
+module.exports = __toCommonJS(index_exports);
 
 // src/QuizPlayer.tsx
+var import_react = require("react");
 
 // src/api.ts
 var QuizApiClient = class {
@@ -143,6 +171,9 @@ function formatTime(seconds) {
   const secs = seconds % 60;
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 }
+
+// src/QuizPlayer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var defaultStyles = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
@@ -203,6 +234,14 @@ var defaultStyles = {
     borderColor: "#6721b0",
     backgroundColor: "#f3e8ff"
   },
+  optionCorrect: {
+    borderColor: "#22c55e",
+    backgroundColor: "#f0fdf4"
+  },
+  optionIncorrect: {
+    borderColor: "#ef4444",
+    backgroundColor: "#fef2f2"
+  },
   input: {
     width: "100%",
     padding: "12px 16px",
@@ -268,7 +307,7 @@ var defaultStyles = {
   }
 };
 function Spinner({ size = 16, color = "#ffffff" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
       style: {
@@ -280,7 +319,7 @@ function Spinner({ size = 16, color = "#ffffff" }) {
         borderRadius: "50%",
         animation: "spin 0.8s linear infinite"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
     }
   );
 }
@@ -298,25 +337,25 @@ function QuizPlayer({
   onProgress,
   className
 }) {
-  const [quiz, setQuiz] = react.useState(null);
-  const [attempt, setAttempt] = react.useState(null);
-  const [currentQuestionIndex, setCurrentQuestionIndex] = react.useState(0);
-  const [answers, setAnswers] = react.useState(/* @__PURE__ */ new Map());
-  const [answersDetail, setAnswersDetail] = react.useState([]);
-  const [isSubmitting, setIsSubmitting] = react.useState(false);
-  const [isNavigating, setIsNavigating] = react.useState(false);
-  const [isCompleted, setIsCompleted] = react.useState(false);
-  const [result, setResult] = react.useState(null);
-  const [error, setError] = react.useState(null);
-  const [isLoading, setIsLoading] = react.useState(true);
-  const [elapsedSeconds, setElapsedSeconds] = react.useState(0);
-  const apiClient = react.useRef(null);
-  const timerRef = react.useRef(null);
-  const startTimeRef = react.useRef(Date.now());
-  react.useEffect(() => {
+  const [quiz, setQuiz] = (0, import_react.useState)(null);
+  const [attempt, setAttempt] = (0, import_react.useState)(null);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = (0, import_react.useState)(0);
+  const [answers, setAnswers] = (0, import_react.useState)(/* @__PURE__ */ new Map());
+  const [answersDetail, setAnswersDetail] = (0, import_react.useState)([]);
+  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
+  const [isNavigating, setIsNavigating] = (0, import_react.useState)(false);
+  const [isCompleted, setIsCompleted] = (0, import_react.useState)(false);
+  const [result, setResult] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const [elapsedSeconds, setElapsedSeconds] = (0, import_react.useState)(0);
+  const apiClient = (0, import_react.useRef)(null);
+  const timerRef = (0, import_react.useRef)(null);
+  const startTimeRef = (0, import_react.useRef)(Date.now());
+  (0, import_react.useEffect)(() => {
     apiClient.current = new QuizApiClient({ baseUrl: apiBaseUrl, authToken });
   }, [apiBaseUrl, authToken]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     async function initialize() {
       if (!apiClient.current) return;
       try {
@@ -363,7 +402,7 @@ function QuizPlayer({
     }
     initialize();
   }, [quizId, lessonId, assignLessonId, courseId, childId, parentId, onError]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!isLoading && !isCompleted && !error) {
       startTimeRef.current = Date.now();
       timerRef.current = setInterval(() => {
@@ -376,7 +415,7 @@ function QuizPlayer({
       }
     };
   }, [isLoading, isCompleted, error]);
-  react.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (quiz && onProgress) {
       onProgress({
         currentQuestion: currentQuestionIndex + 1,
@@ -386,11 +425,11 @@ function QuizPlayer({
     }
   }, [currentQuestionIndex, answers.size, quiz, onProgress]);
   const currentQuestion = quiz?.questions[currentQuestionIndex];
-  const handleAnswerChange = react.useCallback((value) => {
+  const handleAnswerChange = (0, import_react.useCallback)((value) => {
     if (!currentQuestion) return;
     setAnswers((prev) => new Map(prev).set(currentQuestion.id, value));
   }, [currentQuestion]);
-  const handleNext = react.useCallback(async () => {
+  const handleNext = (0, import_react.useCallback)(async () => {
     if (!quiz || !attempt || !currentQuestion || !apiClient.current) return;
     const selectedAnswer2 = answers.get(currentQuestion.id);
     if (selectedAnswer2 === void 0) return;
@@ -417,12 +456,12 @@ function QuizPlayer({
       setCurrentQuestionIndex((prev) => prev + 1);
     }
   }, [quiz, attempt, currentQuestion, answers, answersDetail, currentQuestionIndex]);
-  const handlePrevious = react.useCallback(() => {
+  const handlePrevious = (0, import_react.useCallback)(() => {
     if (currentQuestionIndex > 0) {
       setCurrentQuestionIndex((prev) => prev - 1);
     }
   }, [currentQuestionIndex]);
-  const handleSubmit = react.useCallback(async () => {
+  const handleSubmit = (0, import_react.useCallback)(async () => {
     if (!quiz || !attempt || !apiClient.current) return;
     setIsSubmitting(true);
     try {
@@ -469,55 +508,55 @@ function QuizPlayer({
     }
   }, [quiz, attempt, currentQuestion, answers, answersDetail, onComplete, onError]);
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.loading, children: "Loading quiz..." }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.error, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.error, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
       "Error: ",
       error
     ] }) }) });
   }
   if (isCompleted && result) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.results, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.resultScore, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.results, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.resultScore, children: [
         result.score,
         "%"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.resultLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.resultLabel, children: [
         result.correctAnswers,
         " of ",
         result.totalQuestions,
         " correct"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...defaultStyles.resultLabel, marginTop: "8px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...defaultStyles.resultLabel, marginTop: "8px" }, children: [
         "Time: ",
         formatTime(result.timeSpentSeconds)
       ] })
     ] }) });
   }
   if (!quiz || !currentQuestion) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.error, children: "No quiz data available" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: defaultStyles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.error, children: "No quiz data available" }) });
   }
   const selectedAnswer = answers.get(currentQuestion.id);
   const isLastQuestion = currentQuestionIndex === quiz.questions.length - 1;
   const progressPercent = (currentQuestionIndex + 1) / quiz.questions.length * 100;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: defaultStyles.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.title, children: quiz.title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.timer, children: formatTime(elapsedSeconds) })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: defaultStyles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.title, children: quiz.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.timer, children: formatTime(elapsedSeconds) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.progress, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.progress, children: [
         "Question ",
         currentQuestionIndex + 1,
         " of ",
         quiz.questions.length
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...defaultStyles.progressFill, width: `${progressPercent}%` } }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.question, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.questionText, children: currentQuestion.question }),
-      (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.question, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.questionText, children: currentQuestion.question }),
+      (currentQuestion.type === "single" || currentQuestion.type === "true-false") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
           style: {
@@ -529,9 +568,9 @@ function QuizPlayer({
         },
         idx
       )) }),
-      currentQuestion.type === "multiple" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
+      currentQuestion.type === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.options, children: currentQuestion.options?.map((option, idx) => {
         const selected = Array.isArray(selectedAnswer) && selectedAnswer.includes(option);
-        return /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             style: {
@@ -551,7 +590,7 @@ function QuizPlayer({
           idx
         );
       }) }),
-      (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ jsxRuntime.jsx(
+      (currentQuestion.type === "free" || currentQuestion.type === "essay") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "textarea",
         {
           style: { ...defaultStyles.input, minHeight: currentQuestion.type === "essay" ? "150px" : "60px" },
@@ -560,7 +599,7 @@ function QuizPlayer({
           placeholder: "Type your answer here..."
         }
       ),
-      currentQuestion.type === "fill" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      currentQuestion.type === "fill" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: defaultStyles.options, children: currentQuestion.blanks?.map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
         {
           style: defaultStyles.input,
@@ -575,8 +614,8 @@ function QuizPlayer({
         idx
       )) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles.buttons, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: defaultStyles.buttons, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           style: {
@@ -588,7 +627,7 @@ function QuizPlayer({
           children: "Previous"
         }
       ),
-      isLastQuestion ? /* @__PURE__ */ jsxRuntime.jsx(
+      isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           style: {
@@ -597,9 +636,9 @@ function QuizPlayer({
           },
           onClick: handleSubmit,
           disabled: isSubmitting || selectedAnswer === void 0,
-          children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
+          children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Submit Quiz"
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {
           style: {
@@ -608,12 +647,16 @@ function QuizPlayer({
           },
           onClick: handleNext,
           disabled: isNavigating || selectedAnswer === void 0,
-          children: isNavigating ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 16, color: "#9ca3af" }) : "Next"
+          children: isNavigating ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { size: 16, color: "#9ca3af" }) : "Next"
         }
       )
     ] })
   ] });
 }
+
+// src/AttemptViewer.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var defaultStyles2 = {
   container: {
     fontFamily: "system-ui, -apple-system, sans-serif",
@@ -628,6 +671,12 @@ var defaultStyles2 = {
     borderBottom: "1px solid #e5e7eb",
     paddingBottom: "20px"
   },
+  title: {
+    fontSize: "24px",
+    fontWeight: "600",
+    marginBottom: "16px",
+    color: "#111827"
+  },
   summaryGrid: {
     display: "grid",
     gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
@@ -787,11 +836,11 @@ function AttemptViewer({
   showExplanations = true,
   title
 }) {
-  const [attempt, setAttempt] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  react.useEffect(() => {
-    new QuizApiClient({
+  const [attempt, setAttempt] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    const apiClient = new QuizApiClient({
       baseUrl: apiBaseUrl,
       authToken
     });
@@ -823,49 +872,49 @@ function AttemptViewer({
     window.location.reload();
   };
   if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.container, className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: spinnerKeyframes }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.loading, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.spinner }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "16px", color: "#6b7280" }, children: "Loading attempt..." })
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.container, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: spinnerKeyframes }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.loading, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.spinner }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "16px", color: "#6b7280" }, children: "Loading attempt..." })
       ] })
     ] });
   }
   if (error || !attempt) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.container, className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.error, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "18px", fontWeight: "500" }, children: "Failed to load attempt" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "8px", color: "#6b7280" }, children: error }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: defaultStyles2.retryButton, onClick: handleRetry, children: "Try Again" })
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.container, className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.error, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { fontSize: "18px", fontWeight: "500" }, children: "Failed to load attempt" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginTop: "8px", color: "#6b7280" }, children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: defaultStyles2.retryButton, onClick: handleRetry, children: "Try Again" })
     ] }) });
   }
   const scorePercentage = attempt.score ?? 0;
   const correctCount = attempt.correctAnswers ?? 0;
   const totalQuestions = attempt.totalQuestions;
   const timeSpent = attempt.timeSpentSeconds ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.container, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: spinnerKeyframes }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryGrid, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.container, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: spinnerKeyframes }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.header, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryGrid, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryValue, children: [
           scorePercentage,
           "%"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.summaryLabel, children: "Score" })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Score" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryValue, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryValue, children: [
           correctCount,
           "/",
           totalQuestions
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.summaryLabel, children: "Correct" })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Correct" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.summaryValue, children: formatTime(timeSpent) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.summaryLabel, children: "Time" })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryValue, children: formatTime(timeSpent) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.summaryLabel, children: "Time" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.questionsList, children: attempt.answers.map((answer, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.questionsList, children: attempt.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "div",
       {
         style: {
@@ -873,12 +922,12 @@ function AttemptViewer({
           ...answer.isCorrect ? defaultStyles2.questionCardCorrect : defaultStyles2.questionCardIncorrect
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.questionHeader, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: defaultStyles2.questionNumber, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.questionHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: defaultStyles2.questionNumber, children: [
               "Question ",
               index + 1
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "span",
               {
                 style: {
@@ -889,23 +938,23 @@ function AttemptViewer({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.questionText, children: answer.questionText }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.answerSection, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles2.answerLabel, children: "Your answer:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles2.studentAnswer, children: formatAnswer(answer.selectedAnswer) })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: defaultStyles2.questionText, children: answer.questionText }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.answerSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.answerLabel, children: "Your answer:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.studentAnswer, children: formatAnswer(answer.selectedAnswer) })
           ] }),
-          !answer.isCorrect && answer.correctAnswer && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.answerSection, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles2.answerLabel, children: "Correct answer:" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: defaultStyles2.correctAnswer, children: formatAnswer(answer.correctAnswer) })
+          !answer.isCorrect && answer.correctAnswer && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.answerSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.answerLabel, children: "Correct answer:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: defaultStyles2.correctAnswer, children: formatAnswer(answer.correctAnswer) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.points, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.points, children: [
             answer.pointsEarned,
             " / ",
             answer.points,
             " points"
           ] }),
-          showExplanations && answer.explanation && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.explanation, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Explanation:" }),
+          showExplanations && answer.explanation && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: defaultStyles2.explanation, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Explanation:" }),
             " ",
             answer.explanation
           ] })
@@ -915,13 +964,14 @@ function AttemptViewer({
     )) })
   ] });
 }
-
-exports.AttemptViewer = AttemptViewer;
-exports.QuizApiClient = QuizApiClient;
-exports.QuizPlayer = QuizPlayer;
-exports.calculateScore = calculateScore;
-exports.checkAnswer = checkAnswer;
-exports.createAnswerDetail = createAnswerDetail;
-exports.formatTime = formatTime;
-//# sourceMappingURL=index.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AttemptViewer,
+  QuizApiClient,
+  QuizPlayer,
+  calculateScore,
+  checkAnswer,
+  createAnswerDetail,
+  formatTime
+});
 //# sourceMappingURL=index.js.map