mtreinik / rubric

A tool for creating interactive assessment rubrics

Rubric - simplify giving formative feedback

Rubric is a tool for creating interactive assessment rubrics.

Assessment rubrics

A rubric is a set of criteria used to evaluate students' responses.

This tool allows teachers to create rubrics and fill them out.

Here the emphasis is not on grading but giving feedback to the student with an easy and efficient tool.

Design principles

• User can create, save and open their own rubrics
• User can create feedback based on a rubric
• User can export feedback to Google Docs
• Works in a browser
• No server needed

Development

TODO

• rename app on heroku
• unselect after copy-pasting
• add documentation
• aria tags for accessibility

Developing and building Rubric

Install dependencies:

nvm use
yarn install

Run development server:

cd client
yarn install
yarn start

Run UI tests:

cd client
yarn test

Build production site:

yarn build

Technology

Rubric is developed by using many tools:

• The app is coded in the TypeScript programming language.

• Packages are managed with Yarn, which runs on Node.js.

• The UI is built with the React library and uses Material-UI components, Material Design icons and the Roboto Font.

• The UI is provided in English and Finnish with react-i18next internationaliation framework.

• The app is tested automatically with Jest and Enzyme, which use ts-jest, enzyme-adapter-react-16 and enzyme-to-json to test React components with tests coded in TypeScript and compare the results against JSON snapshots.

• Code is analysed and formatted with ESLint and Prettier.

• The app is bundled with webpack and the bundle size is analyzed with Webpack Bundle Analyzer.

• Webpack loads TypeScript code with ts-loader and resolves and injects CSS files with css-loader and style-loader.

• The built app is hosted by a small Express server.

• App development with live reloading is done with webpack-dev-server.

• App state is manipulated with the help of the optics-ts optics library.

• Files uploaded by user are validated with the ajv JSON Schema validator.

• HTML input given by user is sanitized with DOMPurify.