@schoolio/player 1.2.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schoolio/player",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Quiz Player component for loading and playing quizzes, and attempts from Quiz Engine",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",