@instructure/quiz-interactions/src/components/ordering/README.md

A React UI component Library for quiz interaction types.

---
content_id: "121077955"
title: README
---

# Introduction

The ordering interaction is meant to be able to test if a user
can place certain choices in the correct order.

# Data Format

## properties

Data used to store policy information about how an interaction is delivered.

```js
{
  displayAnswersParagraph: true,
  includeLabels: true,
  topLabel: 'Closest to Sun',
  bottomLabel: 'Furthest from Sun'
}
```

## interactionData

interactionData is a json blob exposed to the teacher for authoring and the student for taking.

This is the custom data for a given interaction in order to know how to display itself.

Example Author interactionData:

<!-- Position is the correct position, the ordering of the array is what is preserved to the user if shuffled is set to `false` -->

```js
{
    choices: {
      uuid1: {id: uuid1, itemBody: 'Mercury'},
      uuid2: {id: uuid2, itemBody: 'Venus'},
      uuid3: {id: uuid3, itemBody: 'Earth'}
    }
  }
```

## userResponse

The user response is a json blob used to store the user's response to an interaction.

Example:

```js
userResponse: {
 value: ['uuid2', 'uuid1', 'uuid3']
}
```

## scoringData

scoringData is a json blob that encodes the methodology on how to produce the score based
on the user's response.

Example:

```js
scoringData: {
 value: ['uuid1', 'uuid2', 'uuid3']
}
```

## scoredData

The scoredData is a json blob representing that represents the userResponse & scoringData
running through the scoring algorithm designed by the interaction.

This data is passed in as a prop into the interaction's Result view.

This is computed through the Scoring Service based on the options for the interaction.

Example:

```js
scoredData: {
 value: ['uuid1', 'uuid2', 'uuid3']
}
```

# Drag and Drop

The Take and Edit components use ReactDnD (https://github.com/gaearon/react-dnd) for
drag and drop. They require a "backend" to enable it. This must be supplied by
the parent application, not this library. In order to enable it for HTML5, the
backend should be required like so:

```jsx
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

function ParentComponent (props) {
  return (
    <DndProvider backend={HTML5Backend}>
      <OrderingView {...props} />
    </DndProvider>
  )
}
```

For DnD to work on mobile properly, the parent app will likely need to supply
a different backend for react DnD. See (https://github.com/yahoo/react-dnd-touch-backend)
for more details.