@instructure/quiz-interactions/src/components/common/docs/ErrorFormatting.md

A React UI component Library for quiz interaction types.

# Error Formatting

Error formatting follows a tree pattern where ever node will have the option to
display errors or dig deeper into its children.

## Example Interaction Data

```
{interactionData: {choices: {foo: ‘bar’}}}
```

Suppose in the above example that the choice `foo`'s answer of `bar` is too short
and a validation error is thrown in whatever validation framework is used to validate
the data. The response back to indicate this error would need to be as follows:

```
{
    interactionData: {
        children: {
            choices: {
                children: {
                    foo: {
                        errors: ['this choice is too short!']
                    }
                }
            }
        }
    }
}
```

For each key in a hash there is a possible children and error key, with the
children consisting of key of the child keys of the object the parent.

If it is an error at a non-leaf level (for example, choices had errors):

```
{
    interactionData: {
        children: {
            choices: {
                errors: ['you need a correct choice'],
                children: {...}
            }
        }
    }
}
```

To be clear, if you want to access a key of a hash, you first have to wrap it in
children. Presumably by looking at the keys in interactionData or scoringData you
can figure out the format