@schoolio/player 1.1.1 → 1.2.1

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.d.mts

@@ -94,9 +94,20 @@ interface QuizPlayerStyles {
     buttonClassName?: string;
     progressClassName?: string;
 }
+interface AttemptViewerProps {
+    attemptId: string;
+    apiBaseUrl: string;
+    authToken?: string;
+    onError?: (error: Error) => void;
+    className?: string;
+    showExplanations?: boolean;
+    title?: string;
+}
 
 declare function QuizPlayer({ quizId, lessonId, assignLessonId, courseId, childId, parentId, apiBaseUrl, authToken, onComplete, onError, onProgress, className, }: QuizPlayerProps): react_jsx_runtime.JSX.Element;
 
+declare function AttemptViewer({ attemptId, apiBaseUrl, authToken, onError, className, showExplanations, title, }: AttemptViewerProps): react_jsx_runtime.JSX.Element;
+
 interface ApiClientConfig {
     baseUrl: string;
     authToken?: string;
@@ -143,4 +154,4 @@ declare function calculateScore(answers: QuizAnswerDetail[]): {
 };
 declare function formatTime(seconds: number): string;
 
-export { type ApiClientConfig, type AttemptStatus, type ExternalQuizAttempt, type QuestionType, type Quiz, type QuizAnswerDetail, QuizApiClient, QuizPlayer, type QuizPlayerProps, type QuizPlayerStyles, type QuizProgress, type QuizQuestion, type QuizResult, calculateScore, checkAnswer, createAnswerDetail, formatTime };
+export { type ApiClientConfig, type AttemptStatus, AttemptViewer, type AttemptViewerProps, type ExternalQuizAttempt, type QuestionType, type Quiz, type QuizAnswerDetail, QuizApiClient, QuizPlayer, type QuizPlayerProps, type QuizPlayerStyles, type QuizProgress, type QuizQuestion, type QuizResult, calculateScore, checkAnswer, createAnswerDetail, formatTime };

package/dist/index.d.ts

@@ -94,9 +94,20 @@ interface QuizPlayerStyles {
     buttonClassName?: string;
     progressClassName?: string;
 }
+interface AttemptViewerProps {
+    attemptId: string;
+    apiBaseUrl: string;
+    authToken?: string;
+    onError?: (error: Error) => void;
+    className?: string;
+    showExplanations?: boolean;
+    title?: string;
+}
 
 declare function QuizPlayer({ quizId, lessonId, assignLessonId, courseId, childId, parentId, apiBaseUrl, authToken, onComplete, onError, onProgress, className, }: QuizPlayerProps): react_jsx_runtime.JSX.Element;
 
+declare function AttemptViewer({ attemptId, apiBaseUrl, authToken, onError, className, showExplanations, title, }: AttemptViewerProps): react_jsx_runtime.JSX.Element;
+
 interface ApiClientConfig {
     baseUrl: string;
     authToken?: string;
@@ -143,4 +154,4 @@ declare function calculateScore(answers: QuizAnswerDetail[]): {
 };
 declare function formatTime(seconds: number): string;
 
-export { type ApiClientConfig, type AttemptStatus, type ExternalQuizAttempt, type QuestionType, type Quiz, type QuizAnswerDetail, QuizApiClient, QuizPlayer, type QuizPlayerProps, type QuizPlayerStyles, type QuizProgress, type QuizQuestion, type QuizResult, calculateScore, checkAnswer, createAnswerDetail, formatTime };
+export { type ApiClientConfig, type AttemptStatus, AttemptViewer, type AttemptViewerProps, type ExternalQuizAttempt, type QuestionType, type Quiz, type QuizAnswerDetail, QuizApiClient, QuizPlayer, type QuizPlayerProps, type QuizPlayerStyles, type QuizProgress, type QuizQuestion, type QuizResult, calculateScore, checkAnswer, createAnswerDetail, formatTime };

package/dist/index.js

@@ -614,7 +614,309 @@ function QuizPlayer({
     ] })
   ] });
 }
+var defaultStyles2 = {
+  container: {
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    width: "100%",
+    padding: "20px",
+    backgroundColor: "#ffffff",
+    borderRadius: "12px",
+    boxSizing: "border-box"
+  },
+  header: {
+    marginBottom: "24px",
+    borderBottom: "1px solid #e5e7eb",
+    paddingBottom: "20px"
+  },
+  summaryGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+    gap: "16px"
+  },
+  summaryCard: {
+    padding: "12px",
+    backgroundColor: "#f9fafb",
+    borderRadius: "8px",
+    textAlign: "center"
+  },
+  summaryValue: {
+    fontSize: "20px",
+    fontWeight: "600",
+    color: "#6721b0",
+    marginBottom: "2px"
+  },
+  summaryLabel: {
+    fontSize: "10px",
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  questionsList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px"
+  },
+  questionCard: {
+    padding: "16px",
+    border: "2px solid #e5e7eb",
+    borderRadius: "8px"
+  },
+  questionCardCorrect: {
+    borderColor: "#22c55e",
+    backgroundColor: "#f0fdf4"
+  },
+  questionCardIncorrect: {
+    borderColor: "#ef4444",
+    backgroundColor: "#fef2f2"
+  },
+  questionHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: "12px"
+  },
+  questionNumber: {
+    fontSize: "12px",
+    color: "#6b7280",
+    fontWeight: "500"
+  },
+  questionBadge: {
+    padding: "4px 8px",
+    borderRadius: "4px",
+    fontSize: "12px",
+    fontWeight: "600"
+  },
+  badgeCorrect: {
+    backgroundColor: "#dcfce7",
+    color: "#166534"
+  },
+  badgeIncorrect: {
+    backgroundColor: "#fee2e2",
+    color: "#991b1b"
+  },
+  questionText: {
+    fontSize: "16px",
+    fontWeight: "500",
+    marginBottom: "12px",
+    color: "#111827"
+  },
+  answerSection: {
+    fontSize: "14px",
+    marginBottom: "8px"
+  },
+  answerLabel: {
+    fontWeight: "600",
+    color: "#6b7280",
+    marginRight: "8px"
+  },
+  studentAnswer: {
+    color: "#111827"
+  },
+  correctAnswer: {
+    color: "#166534"
+  },
+  points: {
+    fontSize: "13px",
+    color: "#6b7280",
+    marginTop: "8px"
+  },
+  explanation: {
+    marginTop: "12px",
+    padding: "12px",
+    backgroundColor: "#f3e8ff",
+    borderRadius: "6px",
+    fontSize: "14px",
+    color: "#581c87"
+  },
+  loading: {
+    textAlign: "center",
+    padding: "40px 20px"
+  },
+  spinner: {
+    display: "inline-block",
+    width: "32px",
+    height: "32px",
+    border: "3px solid #e5e7eb",
+    borderTopColor: "#6721b0",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite"
+  },
+  error: {
+    textAlign: "center",
+    padding: "40px 20px",
+    color: "#ef4444"
+  },
+  retryButton: {
+    marginTop: "16px",
+    padding: "12px 24px",
+    backgroundColor: "#6721b0",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: "8px",
+    fontSize: "16px",
+    fontWeight: "500",
+    cursor: "pointer"
+  }
+};
+var spinnerKeyframes = `
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;
+function formatAnswer(answer) {
+  if (answer === null || answer === void 0) {
+    return "No answer";
+  }
+  if (typeof answer === "string") {
+    return answer;
+  }
+  if (Array.isArray(answer)) {
+    return answer.join(", ");
+  }
+  if (typeof answer === "object") {
+    return Object.entries(answer).map(([k, v]) => `${k} \u2192 ${v}`).join(", ");
+  }
+  return String(answer);
+}
+function AttemptViewer({
+  attemptId,
+  apiBaseUrl,
+  authToken,
+  onError,
+  className,
+  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({
+      baseUrl: apiBaseUrl,
+      authToken
+    });
+    async function fetchAttempt() {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(`${apiBaseUrl}/api/external/quiz-attempts/${attemptId}`, {
+          headers: authToken ? { Authorization: `Bearer ${authToken}` } : {}
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch attempt: ${response.statusText}`);
+        }
+        const data = await response.json();
+        setAttempt(data);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to load attempt";
+        setError(errorMessage);
+        onError?.(err instanceof Error ? err : new Error(errorMessage));
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchAttempt();
+  }, [attemptId, apiBaseUrl, authToken, onError]);
+  const handleRetry = () => {
+    setLoading(true);
+    setError(null);
+    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..." })
+      ] })
+    ] });
+  }
+  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" })
+    ] }) });
+  }
+  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: [
+          scorePercentage,
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: defaultStyles2.summaryLabel, children: "Score" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.summaryValue, children: [
+          correctCount,
+          "/",
+          totalQuestions
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: defaultStyles2.questionsList, children: attempt.answers.map((answer, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          ...defaultStyles2.questionCard,
+          ...answer.isCorrect ? defaultStyles2.questionCardCorrect : defaultStyles2.questionCardIncorrect
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: defaultStyles2.questionHeader, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: defaultStyles2.questionNumber, children: [
+              "Question ",
+              index + 1
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  ...defaultStyles2.questionBadge,
+                  ...answer.isCorrect ? defaultStyles2.badgeCorrect : defaultStyles2.badgeIncorrect
+                },
+                children: answer.isCorrect ? "Correct" : "Incorrect"
+              }
+            )
+          ] }),
+          /* @__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) })
+          ] }),
+          !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) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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:" }),
+            " ",
+            answer.explanation
+          ] })
+        ]
+      },
+      answer.questionId
+    )) })
+  ] });
+}
 
+exports.AttemptViewer = AttemptViewer;
 exports.QuizApiClient = QuizApiClient;
 exports.QuizPlayer = QuizPlayer;
 exports.calculateScore = calculateScore;