Components for test items. Answer and question
npm install @lms-elements/test-task> Components for test tasks construct and solve. It can be used with CustomEditor automatically choose based on form state
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 answerOptions
* 'single' - displays many with answerOptions
* 'open' - displays
* 'detailed' - displays if isTextAvailable and 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;
}
`
` js
import { Answer, IQuestionForStudent, IFormValuesForStudent } from '@lms-elements/test-task'
interface IYourFormProps {
initialvalues: IFormValuesForStudent,
// other stuff
}
const YourForm: React.FC
mutators={{
...arrayMutators,
}}
initialValues={props.initialValues}
>
{({ handleSubmit }): React.ReactElement => {
return (
);
}}
);
`
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 with answerOptions and or for question'binary'
* - displays two with answerOptions 'Верно' and 'Неверно' and or for question'open'
* - displays wuth dropdown with mark partition that turns truthfulness property of question in Form state. it can be ['100 % от оценки', '75 % от оценки', '50 % от оценки', '25 % от оценки']
* - displays two with answerOptions that turns isTextAvailable and isFileAvailable, or for question
> Note that you HAVE TO wrap your WHOLE application into tag
`js
import { Answer, ChooseAnswerName, IQuestionForStudent, IFormValuesForTeacher } from '@lms-elements/test-task'
interface IYourFormProps {
initialValues: IFormValuesForTeacher;
// other stuff
}
const FormLayout: React.FC
return (
)}
);
};
`
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
and set ref porepty to this wrapperTo 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.$3
`js
import { MinimizedQuestion } from '@lms-elements/test-task';
``