# playground-exercise

> Custom element to create code exercises for typescript on the web, using playground-elements

Latest version **0.1.3** (published 2023-10-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install playground-exercise
pnpm add playground-exercise
yarn add playground-exercise
bun add playground-exercise
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2023-10-26 |
| First published | 2023-10-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | guillem.cordoba |

## Links

- npm: https://www.npmjs.com/package/playground-exercise
- Repository: https://github.com/guillemcordoba/playground-exercise
- Homepage: https://github.com/guillemcordoba/playground-exercise#readme
- Issues: https://github.com/guillemcordoba/playground-exercise/issues
- npm.io page: https://npm.io/package/playground-exercise

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^2.0.0
- [@mdi/js](https://npm.io/package/@mdi/js.md) ^7.3.67
- [playground-elements](https://npm.io/package/playground-elements.md) ^0.18.1
- [@shoelace-style/shoelace](https://npm.io/package/@shoelace-style/shoelace.md) ^2.11.0

## Recent versions

- 0.1.3 (latest) — 2023-10-26
- 0.1.2 — 2023-10-25
- 0.1.1 — 2023-10-25
- 0.1.0 — 2023-10-25

## README

# playground-exercise

Custom element to create code exercises for typescript on the web, using playground-elements.

## Installation

```bash
npm install playground-exercise
```

## Usage

1. Import the element:

```js
import 'playground-exercise';
```

Now the `playground-exercise` is registered and available in your HTML.

You can use it like this: 

```html
    <playground-exercise>
      <script type="sample/ts" filename="index.ts">
        // Write here the initial code that the students will encounter when seeing the exercise
        export function someCode() {
          return 1;
        }
      </script>
      <script type="sample/js" filename="test.ts">
        import { someCode } from './index.js';
        import { assert } from './assert.js';

        // Write here the test for the exercise
        // Don't change the name or signature of this function
        export async function test() {
          const a = someCode();
          assert.equal(a, 1, "Some clear message about why this error ocurred");
        }
      </script>
    </playground-exercise>
```

You can theme it following the same instructions from [playground-elements](https://github.com/google/playground-elements#themes).

---
_Source: https://npm.io/package/playground-exercise · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._