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!

pnpm add quiz-interactions

Development

Copy the repo:

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

Run

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

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:

pnpm test

or to have tests running while in active development:

pnpm run test:watch

Linting

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.

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 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

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