eat-js-sdk 1.4.7 → 2.0.1
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 +112 -23
- package/package.json +82 -79
- package/dist/eat-prompt-builder.mjs +0 -23909
package/README.md
CHANGED
|
@@ -1,40 +1,129 @@
|
|
|
1
|
-
#
|
|
1
|
+
# EAT UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A Svelte-based UI component library for educational assessment tools (EAT). This library provides interactive components for multiple choice questions (MCQ), type-in interactions, categorisation, and dropdown interactions.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- 🎯 **Multiple Interaction Types**: MCQ, Type-in, Categorise, and Dropdown interactions
|
|
8
|
+
- 📱 **Responsive Design**: Mobile-first approach with desktop optimizations
|
|
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
|
|
8
14
|
|
|
9
15
|
## Installation
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
```sh
|
|
18
|
+
# Install dependencies using bun
|
|
19
|
+
bun install
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Developing
|
|
23
|
+
|
|
24
|
+
Start the development server:
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
bun run dev
|
|
12
28
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
npm install
|
|
29
|
+
# or start the server and open the app in a new browser tab
|
|
30
|
+
bun run dev --open
|
|
16
31
|
```
|
|
17
32
|
|
|
18
|
-
##
|
|
33
|
+
## Building
|
|
19
34
|
|
|
20
|
-
|
|
21
|
-
#convert tailwind css to native css and build JS app
|
|
22
|
-
npm run build
|
|
35
|
+
To create a production version of the library:
|
|
23
36
|
|
|
24
|
-
|
|
37
|
+
```sh
|
|
38
|
+
bun run build
|
|
39
|
+
```
|
|
25
40
|
|
|
26
|
-
|
|
27
|
-
<script src="<path/dist/eat-prompt-builder.mjs>" type="module">
|
|
41
|
+
Preview the production build:
|
|
28
42
|
|
|
29
|
-
|
|
30
|
-
|
|
43
|
+
```sh
|
|
44
|
+
bun run preview
|
|
31
45
|
```
|
|
32
46
|
|
|
33
|
-
##
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
47
|
+
## Testing
|
|
48
|
+
|
|
49
|
+
Run tests with Vitest:
|
|
50
|
+
|
|
51
|
+
```sh
|
|
52
|
+
bun run test
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Project Structure
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
src/
|
|
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
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## Usage Example
|
|
72
|
+
|
|
73
|
+
```svelte
|
|
74
|
+
<script>
|
|
75
|
+
import { InteractionBuilder } from 'eat-ui'
|
|
76
|
+
|
|
77
|
+
const interactionData = {
|
|
78
|
+
interactionType: 'multipleChoiceInteraction',
|
|
79
|
+
rubric: 'Select the correct answer',
|
|
80
|
+
prompt: 'What is 2 + 2?',
|
|
81
|
+
// ... other interaction properties
|
|
82
|
+
}
|
|
83
|
+
</script>
|
|
37
84
|
|
|
38
|
-
|
|
39
|
-
https://unpkg.com/eat-js-sdk@<version>/dist/eat-prompt-builder.mjs
|
|
85
|
+
<InteractionBuilder {...interactionData} />
|
|
40
86
|
```
|
|
87
|
+
|
|
88
|
+
## Key Components
|
|
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.
|
|
97
|
+
|
|
98
|
+
### Composables
|
|
99
|
+
|
|
100
|
+
- `useMCQ` - MCQ interaction logic
|
|
101
|
+
- `useStimulusData` - Stimulus data processing
|
|
102
|
+
- `useFeedbackData` - Feedback display logic
|
|
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
|
|
121
|
+
|
|
122
|
+
## Tech Stack
|
|
123
|
+
|
|
124
|
+
- **Framework**: SvelteKit
|
|
125
|
+
- **Language**: TypeScript
|
|
126
|
+
- **Styling**: Tailwind CSS + SCSS
|
|
127
|
+
- **Testing**: Vitest + Playwright
|
|
128
|
+
- **Package Manager**: Bun
|
|
129
|
+
- **Linting**: ESLint
|
package/package.json
CHANGED
|
@@ -1,85 +1,88 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
"name": "Earl Anthony Bequillo",
|
|
13
|
-
"email": "earl.bequillo@cambridge.org"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"name": "Carl Lewi Godoy",
|
|
17
|
-
"email": "carl.godoy@cambridge.org"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"name": "Joven Ferdinand Miclat",
|
|
21
|
-
"email": "joven.miclat@cambridge.org"
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"name": "Ramer Mellizas",
|
|
25
|
-
"email": "ramer.mellizas@cambridge.org"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
"name": "Aimer Jay Pedrozo",
|
|
29
|
-
"email": "aimer.pedrozo@cambridge.org"
|
|
30
|
-
}
|
|
31
|
-
],
|
|
32
|
-
"scripts": {
|
|
33
|
-
"dev": "vite dev",
|
|
34
|
-
"build": "npm run build:css && node esbuild-bundle.js",
|
|
35
|
-
"preview": "vite preview",
|
|
36
|
-
"package": "svelte-kit sync && svelte-package && publint",
|
|
37
|
-
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
38
|
-
"prepublishOnly": "npm run build",
|
|
39
|
-
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
40
|
-
"lint": "prettier --check . && eslint .",
|
|
41
|
-
"format": "prettier --write .",
|
|
42
|
-
"build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.scss"
|
|
2
|
+
"name": "eat-js-sdk",
|
|
3
|
+
"version": "2.0.1",
|
|
4
|
+
"change version": "2.0.0",
|
|
5
|
+
"description": "Authoring tool frontend SDK",
|
|
6
|
+
"contributors": [
|
|
7
|
+
{
|
|
8
|
+
"name": "Michael Christopher Abrigos",
|
|
9
|
+
"email": "michael.abrigos@cambridge.org"
|
|
43
10
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"./dist/**/*"
|
|
48
|
-
],
|
|
49
|
-
"peerDependencies": {
|
|
50
|
-
"svelte": "4.0.0"
|
|
11
|
+
{
|
|
12
|
+
"name": "Earl Anthony Bequillo",
|
|
13
|
+
"email": "earl.bequillo@cambridge.org"
|
|
51
14
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"@sveltejs/package": "2.2.3",
|
|
56
|
-
"@typescript-eslint/eslint-plugin": "6.12.0",
|
|
57
|
-
"@typescript-eslint/parser": "6.12.0",
|
|
58
|
-
"autoprefixer": "10.4.16",
|
|
59
|
-
"cssnano": "6.0.1",
|
|
60
|
-
"esbuild": "0.19.7",
|
|
61
|
-
"esbuild-svelte": "0.8.0",
|
|
62
|
-
"eslint": "8.54.0",
|
|
63
|
-
"eslint-config-prettier": "9.0.0",
|
|
64
|
-
"eslint-plugin-svelte": "2.35.1",
|
|
65
|
-
"postcss": "8.4.31",
|
|
66
|
-
"postcss-cli": "10.1.0",
|
|
67
|
-
"postcss-load-config": "4.0.2",
|
|
68
|
-
"prettier": "3.1.0",
|
|
69
|
-
"prettier-plugin-tailwindcss": "0.4.1",
|
|
70
|
-
"publint": "0.1.16",
|
|
71
|
-
"sass": "1.69.5",
|
|
72
|
-
"svelte": "4.2.7",
|
|
73
|
-
"svelte-check": "3.6.2",
|
|
74
|
-
"svelte-dnd-action": "0.9.43",
|
|
75
|
-
"tailwindcss": "3.3.5",
|
|
76
|
-
"tslib": "2.6.2",
|
|
77
|
-
"typescript": "5.3.2",
|
|
78
|
-
"vite": "4.5.0"
|
|
15
|
+
{
|
|
16
|
+
"name": "Carl Lewi Godoy",
|
|
17
|
+
"email": "carl.godoy@cambridge.org"
|
|
79
18
|
},
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
19
|
+
{
|
|
20
|
+
"name": "Joven Ferdinand Miclat",
|
|
21
|
+
"email": "joven.miclat@cambridge.org"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "Ramer Mellizas",
|
|
25
|
+
"email": "ramer.mellizas@cambridge.org"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "Aimer Jay Pedrozo",
|
|
29
|
+
"email": "aimer.pedrozo@cambridge.org"
|
|
84
30
|
}
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"dev": "vite dev",
|
|
34
|
+
"build": "npm run build:css && vite build",
|
|
35
|
+
"build:css": "postcss src/lib/assets/css/app.css -o src/lib/assets/css/main.scss",
|
|
36
|
+
"watch:css": "postcss src/lib/assets/css/app.css -o src/lib/assets/css/main.scss --watch",
|
|
37
|
+
"preview": "vite preview",
|
|
38
|
+
"prepare": "svelte-kit sync || echo ''",
|
|
39
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
40
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
41
|
+
"format": "prettier --write .",
|
|
42
|
+
"lint": "prettier --check . && eslint .",
|
|
43
|
+
"test:unit": "vitest",
|
|
44
|
+
"test": "npm run test:unit -- --run"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@eslint/compat": "^1.4.0",
|
|
48
|
+
"@eslint/js": "^9.36.0",
|
|
49
|
+
"@sveltejs/adapter-auto": "^6.1.0",
|
|
50
|
+
"@sveltejs/kit": "^2.43.2",
|
|
51
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.0",
|
|
52
|
+
"@types/node": "^22",
|
|
53
|
+
"@vitest/browser": "^3.2.4",
|
|
54
|
+
"autoprefixer": "^10.4.21",
|
|
55
|
+
"cssnano": "^7.1.1",
|
|
56
|
+
"eslint": "^9.36.0",
|
|
57
|
+
"eslint-config-prettier": "^10.1.8",
|
|
58
|
+
"eslint-plugin-svelte": "^3.12.4",
|
|
59
|
+
"globals": "^16.4.0",
|
|
60
|
+
"playwright": "^1.55.1",
|
|
61
|
+
"postcss": "^8.5.6",
|
|
62
|
+
"postcss-cli": "^11.0.1",
|
|
63
|
+
"prettier": "^3.6.2",
|
|
64
|
+
"prettier-plugin-svelte": "^3.4.0",
|
|
65
|
+
"sass-embedded": "^1.93.2",
|
|
66
|
+
"svelte": "^5.39.5",
|
|
67
|
+
"svelte-check": "^4.3.2",
|
|
68
|
+
"tailwindcss": "3",
|
|
69
|
+
"typescript": "^5.9.2",
|
|
70
|
+
"typescript-eslint": "^8.44.1",
|
|
71
|
+
"vite": "^7.1.7",
|
|
72
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
73
|
+
"vite-plugin-devtools-json": "^1.0.0",
|
|
74
|
+
"vitest": "^3.2.4",
|
|
75
|
+
"vitest-browser-svelte": "^1.1.0"
|
|
76
|
+
},
|
|
77
|
+
"type": "module",
|
|
78
|
+
"dependencies": {
|
|
79
|
+
"svelte-autosize": "^1.1.5",
|
|
80
|
+
"svelte-dnd-action": "^0.9.65",
|
|
81
|
+
"svelte-viewport-info": "^1.0.3"
|
|
82
|
+
},
|
|
83
|
+
"files": [
|
|
84
|
+
"README.md",
|
|
85
|
+
"package.json",
|
|
86
|
+
"./dist/**/*"
|
|
87
|
+
]
|
|
85
88
|
}
|