eat-js-sdk 2.0.32 → 2.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -101
- package/package.json +1 -1
- package/dist/interaction-builder.mjs +0 -18455
package/README.md
CHANGED
|
@@ -1,129 +1,67 @@
|
|
|
1
|
-
#
|
|
1
|
+
# eat-js-sdk
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Education Authoring Tool SDK built with SvelteKit
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Requirements
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
- 🎨 **Customizable Templates**: Flexible template system with two-column and single-column layouts
|
|
10
|
-
- 🖼️ **Rich Media Support**: Images, videos, and audio with captions and accessibility features
|
|
11
|
-
- ♿ **Accessible**: Built with accessibility in mind
|
|
12
|
-
- 🎭 **Feedback System**: Comprehensive feedback with comparison tables and result displays
|
|
13
|
-
- 💅 **Styled with Tailwind CSS**: Easily customizable styling
|
|
7
|
+
- Bun (recommended package manager for development)
|
|
8
|
+
- Node 20 (for deployment)
|
|
14
9
|
|
|
15
10
|
## Installation
|
|
16
11
|
|
|
17
|
-
|
|
18
|
-
# Install dependencies using bun
|
|
19
|
-
bun install
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Developing
|
|
12
|
+
Use the package manager [bun](https://bun.sh/) for development or [npm](https://www.npmjs.com/) to install.
|
|
23
13
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
bun run dev
|
|
14
|
+
```bash
|
|
15
|
+
#install dependencies
|
|
16
|
+
bun install
|
|
28
17
|
|
|
29
|
-
#
|
|
30
|
-
|
|
18
|
+
#or using npm
|
|
19
|
+
npm install
|
|
31
20
|
```
|
|
32
21
|
|
|
33
|
-
##
|
|
34
|
-
|
|
35
|
-
To create a production version of the library:
|
|
22
|
+
## Usage
|
|
36
23
|
|
|
37
|
-
```
|
|
24
|
+
```bash
|
|
25
|
+
#convert tailwind css to native css and build JS app
|
|
38
26
|
bun run build
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
Preview the production build:
|
|
42
27
|
|
|
43
|
-
|
|
44
|
-
|
|
28
|
+
#or using npm
|
|
29
|
+
npm run build
|
|
45
30
|
```
|
|
46
31
|
|
|
47
|
-
##
|
|
48
|
-
|
|
49
|
-
Run tests with Vitest:
|
|
32
|
+
## Test in local
|
|
50
33
|
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## Project Structure
|
|
34
|
+
```html
|
|
35
|
+
#add script
|
|
36
|
+
<script src="<path/dist/interaction-builder.mjs>" type="module"></script>
|
|
56
37
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
├── lib/
|
|
60
|
-
│ ├── components/ # Reusable UI components
|
|
61
|
-
│ │ ├── common/ # Common components (Media, Modal, Skeleton, etc.)
|
|
62
|
-
│ │ ├── interaction/ # Interaction-specific components (MCQ, etc.)
|
|
63
|
-
│ │ └── template/ # Template components (PromptContainer, Feedback, etc.)
|
|
64
|
-
│ ├── composables/ # Composition functions for shared logic
|
|
65
|
-
│ ├── constants/ # Application constants and enums
|
|
66
|
-
│ ├── core/ # Core functionality (factory, registry, data loading)
|
|
67
|
-
│ ├── stores/ # Svelte stores for state management
|
|
68
|
-
│ └── types/ # TypeScript type definitions
|
|
38
|
+
#add the component
|
|
39
|
+
<interaction-builder />
|
|
69
40
|
```
|
|
70
41
|
|
|
71
|
-
##
|
|
42
|
+
## Development
|
|
72
43
|
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
import { InteractionBuilder } from 'eat-ui'
|
|
44
|
+
```bash
|
|
45
|
+
#start dev server from consuming platform and then,
|
|
76
46
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
rubric: 'Select the correct answer',
|
|
80
|
-
prompt: 'What is 2 + 2?',
|
|
81
|
-
// ... other interaction properties
|
|
82
|
-
}
|
|
83
|
-
</script>
|
|
84
|
-
|
|
85
|
-
<InteractionBuilder {...interactionData} />
|
|
47
|
+
#start development server
|
|
48
|
+
bun run build
|
|
86
49
|
```
|
|
87
50
|
|
|
88
|
-
##
|
|
89
|
-
|
|
90
|
-
### PromptContainer
|
|
91
|
-
|
|
92
|
-
Orchestrates template sections with clean separation of concerns. Handles rubric, prompt, stimulus (text/media), and interaction layout.
|
|
93
|
-
|
|
94
|
-
### InteractionBuilder
|
|
95
|
-
|
|
96
|
-
Main entry point for building interactions. Automatically selects the appropriate interaction type based on configuration.
|
|
51
|
+
## Publish
|
|
97
52
|
|
|
98
|
-
|
|
53
|
+
```bash
|
|
54
|
+
#publish app
|
|
55
|
+
npm publish
|
|
99
56
|
|
|
100
|
-
|
|
101
|
-
-
|
|
102
|
-
|
|
103
|
-
- `usePrompt` - Prompt state management
|
|
104
|
-
|
|
105
|
-
## TypeScript Support
|
|
106
|
-
|
|
107
|
-
This project is fully typed with TypeScript. Key types include:
|
|
108
|
-
|
|
109
|
-
- `InteractionType` - Supported interaction types
|
|
110
|
-
- `Stimulus` - Media and text stimulus configuration
|
|
111
|
-
- `FeedbackData` - Feedback structure
|
|
112
|
-
- `ViewTemplate` - Template configuration
|
|
113
|
-
|
|
114
|
-
## Contributing
|
|
115
|
-
|
|
116
|
-
1. Follow the existing code structure and patterns
|
|
117
|
-
2. Maintain type safety with TypeScript
|
|
118
|
-
3. Write tests for new features
|
|
119
|
-
4. Keep components focused and composable
|
|
120
|
-
5. Document complex logic with comments
|
|
57
|
+
#Package url
|
|
58
|
+
https://unpkg.com/eat-js-sdk@<version>/dist/interaction-builder.mjs
|
|
59
|
+
```
|
|
121
60
|
|
|
122
61
|
## Tech Stack
|
|
123
62
|
|
|
124
|
-
-
|
|
125
|
-
-
|
|
126
|
-
-
|
|
127
|
-
-
|
|
128
|
-
-
|
|
129
|
-
- **Linting**: ESLint
|
|
63
|
+
- SvelteKit 2 with Svelte 5
|
|
64
|
+
- TypeScript
|
|
65
|
+
- Tailwind CSS 3
|
|
66
|
+
- Vitest + Playwright
|
|
67
|
+
- svelte-dnd-action (custom fork)
|