quiz-interactions/README.md

A React UI component Library for quiz interaction types.

---
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 [`yarn`] for javascript
dependency management. Before going further, make sure you have `yarn`
installed and available on your `$PATH`!

```sh
yarn add quiz-interactions
```

[`yarn`]: https://yarnpkg.com/lang/en/docs/install/

### Development

Copy the repo:

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

Run

```sh
yarn
```

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

Current peer dependencies:

`yarn add react-dnd@^2.2.4`

And then run

```sh
yarn 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/yarn/npm for the library to work correctly:

```
yarn version == 0.22.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
yarn test
```

or to have tests running while in active development:

```sh
yarn run test:watch
```

### Linting

Run `yarn 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 `yarn 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)