Merge pull request #7 from agencyenterprise/sandbox

Sandbox

Author: allangirao

README.md

@@ -1,76 +1,91 @@
-# QTI 3.x Renderer - Proof of Concept
+# QTI 3.x Renderer
 
-A framework-agnostic QTI 3.x renderer with a React demo application.
+[**Live Sandbox Demo**](https://agencyenterprise.github.io/qti-3-player/)
+
+A framework-agnostic QTI 3.x renderer with support for multiple frontend frameworks.
 
 ## Structure
 
 ```
 qti-3-player/
 ├── packages/
-│   └── qti-renderer/     # Core renderer library (TypeScript, framework-agnostic)
-└── apps/
-    └── react-demo/        # React sample application
+│   ├── qti-renderer/     # Core renderer library (TypeScript, framework-agnostic)
+│   ├── qti-react/        # React wrapper component
+│   ├── qti-vue/          # Vue wrapper component
+│   └── qti-vanilla/      # Vanilla JS wrapper
+├── sandbox/              # Standalone demo application
+└── stories/              # Storybook examples and stories
 ```
 
-## Core Library (`packages/qti-renderer`)
-
-Framework-agnostic npm package that renders QTI 3.x assessment items to HTML.
+## Packages
 
-### Supported QTI Elements
+### Core Library (`packages/qti-renderer`)
 
-- `<assessmentItem>` - Root element
-- `<itemBody>` - Question content container
-- `<choiceInteraction>` - Multiple choice interaction
-- `<prompt>` - Question text
-- `<simpleChoice>` - Individual choice options
+Framework-agnostic npm package that renders QTI 3.x assessment items to HTML with full response processing support.
 
-### API
+**API:**
 
 ```typescript
 import { QtiRenderer } from '@qti-renderer/core';
 
 const renderer = new QtiRenderer(qtiXmlString);
-renderer.mount(containerElement);
-const responses = renderer.getResponses(); // Record<string, string | string[]>
+renderer.render(containerElement);
 ```
 
-### Design Decisions
+**Features:**
+
+- XML validation against QTI 3.0 schema
+- Response processing with conditional logic
+- Outcome variable management (RESPONSE)
+- Feedback display (inline and modal)
+- Response state management
+
+## Supported QTI Elements
+
+See [QTI Support Documentation](docs/qti_support/README.md) for a complete checklist of supported elements and attributes.
+
+## Design Decisions
 
 - Uses `DOMParser` for XML parsing (no external dependencies)
 - Renders to vanilla DOM elements (framework-agnostic)
 - Maintains response state internally
 - Uses semantic HTML (`fieldset`, `legend`, `label`) for accessibility
 - Registry pattern for extensible element rendering
+- Event-driven response processing
 
-## React Demo (`apps/react-demo`)
+## Development
 
-Sample React application demonstrating QTI renderer usage.
+### Running Storybook
 
-### Usage
+```bash
+npm install
+npm run dev
+```
+
+This will start Storybook on `http://localhost:6006` with examples for React, Vue, and Vanilla JS.
 
-```tsx
-import { QtiItem } from './QtiItem';
+### Building
 
-<QtiItem xml={qtiXmlString} onResponseChange={(responses) => console.log(responses)} />
+```bash
+npm run build
 ```
 
-### Running
+Builds all packages in the monorepo.
+
+### Sandbox
+
+The sandbox provides a standalone demo application:
 
 ```bash
+cd sandbox
 npm install
 npm run dev
 ```
 
-## Limitations
-
-This is a proof of concept with the following limitations:
+## Current Limitations
 
-- **No response processing** - Only renders questions, doesn't grade them
 - **No scoring** - No calculation or evaluation of responses
-- **No adaptive behavior** - Static rendering only
-- **No feedback** - No correct/incorrect feedback display
-- **No test structure** - Only single items, no tests/sections
-
-## QTI 3.x Support
-
-Targets QTI 3.x specification structure and syntax. Uses `responseIdentifier` and supports `maxChoices` attribute for single/multiple selection.
+- **No test structure** - Only single assessment items, no tests/sections
+- **Limited interaction types** - Currently supports `choice-interaction` (single and multiple choice)
+- **Partial expression support** - Basic expressions like `match` and `correct` are supported, but not all QTI expressions
+- **No adaptive behavior** - Static rendering only, no adaptive item selection

sandbox/index.html

@@ -7,6 +7,10 @@
   </head>
   <body>
     <div id="app">
+      <header class="app-header">
+        <h1>QTI 3 Player Sandbox</h1>
+        <a href="https://github.com/agencyenterprise/qti-3-player/tree/main/docs/qti_support" target="_blank">QTI Support Docs</a>
+      </header>
       <div class="container">
         <div class="editor-pane">
           <h2>QTI XML Input</h2>

sandbox/src/style.css

@@ -21,13 +21,39 @@ body {
   padding: 0;
 }
 
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  background-color: #1a1a1a;
+  border-bottom: 1px solid #444;
+  height: 60px;
+  box-sizing: border-box;
+}
+
+.app-header h1 {
+  font-size: 1.2rem;
+  margin: 0;
+}
+
+.app-header a {
+  color: #646cff;
+  text-decoration: none;
+}
+
+.app-header a:hover {
+  text-decoration: underline;
+}
+
 .container {
   display: flex;
-  height: 100%;
+  height: calc(100% - 60px);
   width: 100%;
 }
 
-.editor-pane, .preview-pane {
+.editor-pane,
+.preview-pane {
   flex: 1;
   padding: 20px;
   display: flex;
@@ -57,7 +83,6 @@ body {
 
 .editor-pane textarea {
   flex: 1;
-  width: 100%;
   resize: none;
   background-color: #2d2d2d;
   color: #e0e0e0;
@@ -107,14 +132,15 @@ body {
 #qti-container {
   width: 100%;
   height: 100%;
-  
+
   /* Strong reset to isolate from outer styles */
   all: initial;
   display: block; /* Restore block display after all: initial */
-  
+
   /* Re-apply desired base styles for the player */
   text-align: left;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-size: 16px;
   line-height: 1.5;
   color: #212529;