node package manager


id: quiz-interactions

Instructure Quiz Interactions [WIP]

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


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


Copy the repo:

git clone ssh://<username>



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:


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


See docs/


To run tests:

yarn test

or to have tests running while in active development:

yarn run test:watch


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.


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.


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.


Coming soon. For now see the ApplyTheme component docs.

Browser Support

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


See the contributing guidelines for details.