https://github.com/teammaestro/stencil-scorm-viewer
Stencil component for viewing SCORM e-learning courses offline.
https://github.com/teammaestro/stencil-scorm-viewer
scorm scorm2004 stenciljs web-components
Last synced: about 1 year ago
JSON representation
Stencil component for viewing SCORM e-learning courses offline.
- Host: GitHub
- URL: https://github.com/teammaestro/stencil-scorm-viewer
- Owner: TeamMaestro
- License: gpl-3.0
- Created: 2018-08-07T18:19:47.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2021-03-09T16:58:10.000Z (over 5 years ago)
- Last Synced: 2025-04-03T12:02:10.264Z (about 1 year ago)
- Topics: scorm, scorm2004, stenciljs, web-components
- Language: TypeScript
- Size: 76.2 KB
- Stars: 5
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Hive Stencil SCORM Viewer
Web component that allows you to render SCORM (e-learning) courses in your web (and Ionic native) applications. Injects custom event hooks and binding to support **offline** tracking of courses without a 3rd party library.
The SCORM course __must__ be served on the same origin (host:port) as the consuming application to avoid cross-frame injection.
## Installation
- `npm install @teamhive/stencil-scorm-viewer`
## Usage
- ``
### Angular (6+) / Ionic (4+)
In your `angular.json` file add the following assets matcher in your `projects.app.architect.build.options.assets` collection:
```
{
"glob": "**/*",
"input": "node_modules/@teamhive/stencil-scorm-viewer/dist/scormviewer",
"output": "./scormviewer"
}
```
In your main `AppModule` (i.e. `app.module.ts`) add the following import statement:
```
import '@teamhive/stencil-scorm-viewer/dist/scormviewer';
```
### Events
|Event|Description|
:---:|:---:
|`onSetValue`|Emitted when the course captures form data. Locally tracks data to `courseData` object.|
|`onCommit`|Emitted when a value is committed to the API.|
|`onInitiailize`|Emitted when the course initializes against the LMS.|
|`onFinish`|Emitted when the course finishes.|
|`onTerminate`|Emitted when the course is terminated.|
---
## Development
### Local Development
- `npm i`
- `npm run start`
_Note_: You will need to drop SCORM assets into `www/` to test in the browser.
### Building the Stencil Component
- `npm run build`
- `npm publish` or `npm pack` for local deployments
### Testing
- `npm run test`
## Contributors
[
](https://github.com/sean-perkins) |
:---:
|[Sean Perkins](https://github.com/sean-perkins)|