---
id: quiz-interactions
---

Instructure Quiz Interactions [WIP]

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

$3

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

$3

Copy the repo:

`
git clone ssh://@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 adds 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

$3

To run tests:

`sh
pnpm test
`

or to have tests running while in active development:

`sh
pnpm run test:watch
`

$3

Run pnpm run lint to lint the src dir.

We are using ESLint.

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.

$3

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

export default MyTabList = function () {
return
}
``

For the default theme you'll also need to include the 'Lato' font in your application.

$3

Coming soon. For now see the ApplyTheme component docs.

$3

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

$3

See the contributing guidelines for details.

$3

MIT