# exerslide-plugin-javascriptexercise-layout

> A JavaScript exercise layout for exerslide.

Latest version **1.1.0** (published 2016-09-08) · 0 weekly downloads

## Install

```sh
npm install exerslide-plugin-javascriptexercise-layout
pnpm add exerslide-plugin-javascriptexercise-layout
yarn add exerslide-plugin-javascriptexercise-layout
bun add exerslide-plugin-javascriptexercise-layout
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-09-08 |
| First published | 2016-08-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 434 |
| Author | Felix Kling |
| Maintainers | fkling |

## Links

- npm: https://www.npmjs.com/package/exerslide-plugin-javascriptexercise-layout
- Repository: https://github.com/facebookincubator/exerslide
- Homepage: https://github.com/facebookincubator/exerslide#readme
- Issues: https://github.com/facebookincubator/exerslide/issues
- npm.io page: https://npm.io/package/exerslide-plugin-javascriptexercise-layout

## Dependencies (3)

- [chai](https://npm.io/package/chai.md) ^3.4.1
- [classnames](https://npm.io/package/classnames.md) ^2.1.1
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6

## Recent versions

- 1.1.0 (latest) — 2016-09-08
- 1.0.0 — 2016-08-31
- 1.0.0-rc1 — 2016-08-31

## README

# JavaScriptExercise layout

This layout is intended for interactive JavaScript exercises. It shows a text 
editor to let the visitor input JavaScript and allows to specify validation 
logic to verify the solution.

```
+-----------------------+
|                       |
|   Description         |
|   +---------------+   |
|   |               |   |
|   |Editor         |   |
|   |               |   |
|   +---------------+   |
|   +------+ +-----+    |
|   |Submit| |Reset|    |
|   +------+ +-----+    |
+-----------------------+
```

Code that is inputted in the text editor can be executed and verified. The 
layout makes a special function available to the code in the editor: `log`.  
`log` is a wrapper around `console.log` which also records the values that have 
been passed to it. These values can later be used to validate solutions.

## Layout data

- `description`: Free form text that will be shown above the text editor. Can 
be used to introduce the question / problem.
- `assertion`: JavaScript code to validate the solution. The code has access to 
three variables:

  - `assert`, which is the assertion function. It takes a condition as first 
  argument and a message as second argument.
  - `source`: The text editor input.
  - `output`: An array of values which have been passed to the `log` function.

 With this you can perform simple checks against the input source and logged 
 output.

**Note:** If `assertion` is not present, no "Submit" button is rendered. In 
that case the layout can used as interactive demo.

## Layout content

The content of the slide is expected to be JavaScript and is used as the 
initial input of the text editor.

## Example:

```
---
title: Exercise
layout_data:
  description: |
    Create a local variable with name `foo` and value `42`.
    Use `log(foo)` to log the value of `foo`.
  assertion: |
    assert(
      /var foo\s*=.+;?$/m.test(source),
      "It doesn't look like you have declared a variable (hint: var)."
    );
    assert(output[0] === 42, "Don't forget to log the value");
---
// Create variable

//
log(foo);
```

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