open-index/open-npm huggingface dataset:
npm package: @openlearning/create-widget
Description: Create a new OpenLearning widget project with all necessary boilerplate
Author: OpenLearning
Latest version: 1.2.0

# @openlearning/create-widget

Scaffold a new OpenLearning widget project with all necessary boilerplate.

## Usage

```bash
npm create @openlearning/widget@latest my-widget
```

Or with pnpm:

```bash
pnpm create @openlearning/widget my-widget
```

## What It Creates

The scaffolding tool generates a complete widget project structure:

```
my-widget/
├── src/
│   ├── components/
│   │   ├── LearnerView.tsx
│   │   └── SetupView.tsx
│   ├── entries/
│   │   ├── learner.tsx
│   │   └── setup.tsx
│   ├── data.ts
│   ├── types.ts
│   ├── DevApp.tsx
│   ├── devMain.tsx
│   └── index.css
├── learner.html
├── setup.html
├── index.html (dev server)
├── package.json
├── tsconfig.json
├── vite.config.ts
├── eslint.config.js
└── README.md
```

## Next Steps

After creating a new widget:

```bash
cd my-widget
pnpm install
pnpm dev
```

Then edit the components in `src/components/` to implement your widget's learner and setup interfaces.

## Project Structure

- **`src/components/`** - React components for learner and setup views
- **`src/entries/`** - Widget entry points (created automatically by framework)
- **`src/types.ts`** - Define your widget's config type
- **`src/data.ts`** - Default configuration for your widget
- **`html/`** - Production HTML templates
- **`index.html`** - Development server entry point

The framework handles all parent communication, config state management, and DOM rendering automatically.

## Development

```bash
pnpm dev    # Start dev server
pnpm build  # Build for production
```

## Framework

This tool uses [@openlearning/widget-framework](../widget-framework) for all widget functionality. See its documentation for details on the parent message protocol, hooks, and component props.
npm package: @openlearning/xapi
Description: xAPI and CMI5 Library for OpenLearning Widgets
Author: David Collien
Latest version: 1.0.1

# xApi Client Library for OpenLearning

Install:

```
npm install @openlearning/xapi --save 
```

Usage:

```javascript
import {
  initTinCan,
  initCmi5,

  saveActivityState,
  retrieveActivityState,
  
  sendCompleted,
  sendPassed,
  sendFailed,
  sendTerminated,
  sendAttachments,

  getDuration
} from "@openlearning/xapi";
```

The webpage will be loaded with query string arguments that configure the LRS connection.
The `initCmi5` or `initTinCan` functions return the configuration loaded after the launch has initialised.

e.g.

```javascript
initCmi5().then((config) => {
  // retrieve the mastery score
  const masteryScore = config.launchData.masteryScore;
});
```

Once an LRS connection is configured, this config can be used with the other functions,
e.g. to mark this activity as completed:
```javascript
// mark as completed
sendCompleted(config);

// mark as passed
sendPassed(config);

// mark as failed
sendFailed(config);
```

Or to set a score:

```javascript
// send a passing scaled score
sendPassed(config, { scaled: 0.95 });

// send a failing raw score
sendFailed(config, { min: 0, max: 10, raw: 3 })

```
Or to send file URLs to OpenLearning as attachments that can then be shared by the learner:
```javascript
// publish (replace) attachments (default, last argument is optional)
sendAttachments(config, [{
  contentType: "text/plain",
  display: "attachment.txt",
  description: "A text file written by the learner",
  fileUrl: "https://www.example.com/attachment.txt"
}], "published");

// publish (replace) attachments and specify a thumbnail URL
sendAttachments(config, [{
  contentType: "text/plain",
  display: "attachment.txt",
  description: "A text file written by the learner",
  fileUrl: "https://www.example.com/attachment.txt"
}], "published", "https://www.example.com/thumbnail.png");

// append attachments
sendAttachments(config, [{
  contentType: "text/plain",
  display: "attachment.txt",
  description: "A text file written by the learner",
  fileUrl: "https://www.example.com/attachment.txt"
}], "attached");
```

Activity State can also be set and retrieved for the current user of this activity:

```javascript
// store state (for the activity and current user)
saveActivityState(config, stateId, state);

// retrieve state (for the activity and current user)
retrieveActivityState(config, stateId).then((state) => {
  console.log(state);
});

```

## Standalone Bundle

If you're not using npm and want to just use a `<script>` tag:

```html
<script src="./bundle/openlearning-xapi.js"></script>
```

will define:
```javascript
window.xApi = {
  initTinCan,
  initCmi5,

  saveActivityState,
  retrieveActivityState,
  
  sendCompleted,
  sendPassed,
  sendFailed,
  sendTerminated,
  sendAttachments,

  getDuration
};
```

## Development

Build the `./dist` folder:
```
npm run build
```

Build the standalone bundle: `./bundle/openlearning-xapi.js`:
```
npm run bundle
```