@lms-elements/test-task
v3.3.8
Published
Components for test items. Answer and question
Downloads
261
Readme
@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 />
withanswerOptions
'single'
- displays many<input type="radio" />
withanswerOptions
'open'
- displays<textarea />
'detailed'
- displays<textarea />
ifisTextAvailable
and<Title />
to load file ifisFileAvailable
'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 />
withanswerOptions
and<textarea />
or<CustomEditor />
for question'binary'
- displays two<input type="radio" />
withanswerOptions
'Верно' and 'Неверно' and<textarea />
or<CustomEditor />
for question'open'
- displays<input type="text" />
wuth dropdown with mark partition that turnstruthfulness
property of question in Form state. it can be['100 % от оценки', '75 % от оценки', '50 % от оценки', '25 % от оценки']
'detailed'
- displays two<input type="radio" />
withanswerOptions
that turnsisTextAvailable
andisFileAvailable
,<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.
Usage
import { MinimizedQuestion } from '@lms-elements/test-task';
<MinimizedQuestion type={type} />