npm package: @lms-elements/test-task
Description: Components for test items. Answer and question
Author: Vadim Khizhnyakov
Latest version: 3.3.8

# @lms-elements/test-task

> Components for test tasks construct and solve. It can be used with `CustomEditor` automatically choose based on form state

## Answer

`IFormValuesForStudent` - interface of Form values

`IQuestionForStudent` - interface of question object that contains in Form state like `IQuestion[]`

`Answer` - component that displays different Fields depending on type of answer

* `'multiple'` - displays many `<Checkbox />` with `answerOptions`
* `'single'` - displays many `<input type="radio" />` with `answerOptions`
* `'open'` - displays `<textarea />`
* `'detailed'` - displays `<textarea />` if `isTextAvailable` and `<Title />` to load file if `isFileAvailable`
* `'binary'` - similar as single but always two options "true" and "false". !!! typeof "true" and "false" === 'string'

``` js
export type answerType = 'multiple' | 'binary' | 'open' | 'detailed' | 'single';

export interface IAnswerProps {
    /**
     * final-form field name
     */
    name: string;
    /**
     * determines how component will use question and answerOptions
     */
    withEditor?: boolean;
}
```

### Usage

``` js
import { Answer, IQuestionForStudent, IFormValuesForStudent } from '@lms-elements/test-task'

interface IYourFormProps {
    initialvalues: IFormValuesForStudent,
    // other stuff
}

const YourForm: React.FC<IYourFormProps> = (props) => (
    <Form
        onSubmit={props.onSubmit}
        mutators={{
            ...arrayMutators,
        }}
        initialValues={props.initialValues}
    >
        {({ handleSubmit }): React.ReactElement => {
            return (
                <form onSubmit={handleSubmit}>
                    <FieldArray name="questions">
                        {({ fields: questions }: FieldArrayRenderProps<IQuestionForStudent, HTMLInputElement>) =>
                            questions.map((name, index) => (
                                <Answer key={index} name={name} withEditor={withEditor} />
                            ))
                        }
                    </FieldArray>
                    <Button size="m" view={ButtonViewEnum.action} type="submit">
                        Submit
                    </Button>
                </form>
            );
        }}
    </Form>
);
```

### ExpandedQuestion

`createDefaultQuestion` - utility to create default instance of IQuestion object

`IFormValuesForTeacher` - interface of Form values

`IQuestionForTeacher` - interface of question object that contains in Form state like `IQuestion[]`

`ExpandedQuestion` - component that displays needed form fields depending on question type

```js
type questionType = 'multiple' | 'binary' | 'open' | 'detailed';

interface IExpandedQuestionProps {
    type: questionType; // type of question
    name: string; // name of IQuestionForTeacher object in your Form state
    multipleCheckboxesValidators?: ((value: boolean) => undefined | string)[];
    detailedCheckboxesValidators?: ((value: boolean) => undefined | string)[];
}

```

* `'multiple'` - displays many `<Checkbox />` with `answerOptions` and `<textarea />` or `<CustomEditor />` for question
* `'binary'` - displays two `<input type="radio" />` with `answerOptions` 'Верно' and 'Неверно' and `<textarea />` or `<CustomEditor />` for question
* `'open'` - displays `<input type="text" />` wuth dropdown with mark partition that turns `truthfulness` property of question in Form state. it can be `['100 % от оценки', '75 % от оценки', '50 % от оценки', '25 % от оценки']`
* `'detailed'` - displays two `<input type="radio" />` with `answerOptions` that turns `isTextAvailable` and `isFileAvailable`, `<textarea />` or `<CustomEditor />` for question

### Usage

> Note that you HAVE TO wrap your WHOLE application into tag `<DndProvider backend={HTML5Backend} />`

```js
import { Answer, ChooseAnswerName, IQuestionForStudent, IFormValuesForTeacher } from '@lms-elements/test-task'

interface IYourFormProps {
    initialValues: IFormValuesForTeacher;
    // other stuff
}

const FormLayout: React.FC<IYourFormProps> = (props) => {
    return (
        <DndProvider backend={HTML5Backend}> {/* note that you HAVE TO wrap your WHOLE application into this tag */}
            <div>
                <Form onSubmit={props.onSubmit} mutators={{ ...arrayMutators }} initialValues={initialValues}>
                    {({ handleSubmit }) => (
                        <form onSubmit={handleSubmit}>
                            <FieldArray name="questions">
                                {({ fields }: FieldArrayRenderProps<IQuestionForStudent, HTMLInputElement>) =>
                                    fields.map((name, index) => (
                                        <div key={name} style={{ marginTop: '32px' }}>
                                            <ExpandedQuestion
                                                name={name}
                                                type={fields.value[index].type}
                                            />
                                        </div>
                                    ))
                                }
                            </FieldArray>
                            <Button size="m" view={ButtonViewEnum.action} type="submit">
                                Submit
                            </Button>
                        </form>
                    )}
                </Form>
            </div>
        </DndProvider>
    );
};
```

### MinimizedQuestion

`MinimizedQuestion` - component that displays small tip about question with specific type

```js
type questionType = 'multiple' | 'binary' | 'open' | 'detailed';

interface IMinimizedQuestionProps {
    type: questionType; // type of question
}
```

If you want to use `MinimizedQuestion` as dragable component wrap it in for example `<div>` and set `ref` porepty to this wrapper

To turn `MinimizedQuestion` into `ExpandedQuestion` on drag to some specific area just make `MinimizedQuestion` dissapeared or kind of it and push new instance of `IQuestionForTeacher` into Form state. Use `createDefaultQuestion` in this case.

### Usage

```js
import { MinimizedQuestion } from '@lms-elements/test-task';

<MinimizedQuestion type={type} />
```