quiz-interactions

---

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!

yarn add quiz-interactions

Development

Copy the repo:

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

Run

yarn

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

Current peer dependencies:

yarn add react-dnd@^2.2.4

And then run

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:

yarn test

or to have tests running while in active development:

yarn run test:watch

Linting

Run yarn 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.

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:

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

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 in your application.

Customization

Coming soon. For now see the ApplyTheme component docs.

Browser Support

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

Contribute

See the contributing guidelines for details.

License

MIT