@lms-elements/test-task NPM

@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'

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

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

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} />

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

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.