---
id: quiz-interactions
---

## Instructure Quiz Interactions [WIP]

A React UI component library currently under development by Instructure Inc.

### Installation

Instructure Quiz Interactions prefers to use [`pnpm`] for javascript
dependency management. Before going further, make sure you have `pnpm`
installed and available on your `$PATH`!

```sh
pnpm add quiz-interactions
```

[`pnpm`]: https://pnpm.io/installation

### Development

Copy the repo:

```
git clone ssh://<username>@gerrit.instructure.com:29418/quiz_interactions
```

Run

```sh
pnpm
```

Additionally, we currently have peer dependencies with quiz_interactions and you may need to manually run `pnpm add`s on those.

Current peer dependencies:

`pnpm add react-dnd@^2.2.4`

And then run

```sh
pnpm run start:watch
```

to get an http server up and running, then go to `http://localhost:8080` to pull up the demo and development site. You will need to be running
the following versions of node/pnpm/npm for the library to work correctly:

```
pnpm version == 9.x.x
npm version == 3.10.x
node version == 6.3.x
```

If things aren't going your way and you just aren't sure why, we have a handy tool to oulet your frustration. Run the following command:

```
./bin/table-flip
```

and watch as your node_modules gets blown and a clean slate is established. If that fails, try something else?

# Publishing

See docs/06-releases.md

### Testing

To run tests:

```sh
pnpm test
```

or to have tests running while in active development:

```sh
pnpm run test:watch
```

### Linting

Run `pnpm run lint` to lint the src dir.

We are using [ESLint](http://eslint.org/).

As a convenience, you can install a pre-push hook for git to prevent pushing eslint failing code to gerrit.

```sh
cp hooks/pre-push.example .git/hooks/pre-push
```

You might need to globally install a few eslint packages, depending on your environment. Here's a start:

```sh
npm install -g eslint babel-eslint eslint-plugin-{format-message,react,mocha,standard,promise} eslint-config-standard{,-react}
```

NOTE: Lint errors will fail the build, so be sure to lint.

#### Debugging

To debug tests, place a `debugger` inside your test. Run `pnpm run test:debug` to bring up Karma's test runner. Debug in the browser as you normally would using the browser's developer tools.

### Usage

```js
import React from 'react'
import Edit from 'instructure-qi/lib/components/essay/Edit'

export default MyTabList = function () {
    return <Edit />
}
```

For the default theme you'll also need to include the ['Lato' font](http://www.google.com/fonts#UsePlace:use/Collection:Lato:300,400,400i,700,700i) in your application.

### Customization

Coming soon. For now see the [ApplyTheme](http://instructure.github.io/instructure-ui/#ApplyTheme) component docs.

### Browser Support

- Internet Explorer 11 and Edge
- Chrome, Safari, Firefox (last two versions)

### Contribute

See the [contributing guidelines](http://instructure.github.io/instructure-ui/#contributing) for details.

### License

[MIT](LICENSE)