@rinxun/custom-questions NPM

custom-questions is available as an npm package.

// with npm
npm install @rinxun/custom-questions

// with yarn
yarn add @rinxun/custom-questions

This project is licensed under the terms of the MIT license.

Here is a quick example to get you started:

TypeScript

import { useState } from 'react';
import { Enums, AnswerGroup, TextAnswerProps } from '@rinxun/custom-questions';

function CustomQuestionDemo() {
  const [textValue, setTextValue] = useState('');
  
  return (
      <AnswerGroup
        answerType={Enums.AnswerTypeEnum.shortText}
        question="What's your name?"
        answer={
          {
            name: 'demo',
            value: textValue,
            onChange: (val: string) => {
              setTextValue(val);
            },
            viewType: Enums.ViewTypeEnum.answer
          } as TextAnswerProps
        }
      />
  )
}

JavaScript

import { useState } from 'react';
import { Enums, AnswerGroup, TextAnswerProps } from '@rinxun/custom-questions';

function CustomQuestionDemo() {
  const [textValue, setTextValue] = useState('');
  
  return (
      <AnswerGroup
        answerType={Enums.AnswerTypeEnum.shortText}
        question="What's your name?"
        answer={
          {
            name: 'demo',
            value: textValue,
            onChange: (val) => {
              setTextValue(val);
            },
            viewType: Enums.ViewTypeEnum.answer
          }
        }
      />
  )
}

We prepared a live and interactive demo for you to get started.

Name	Description
shortText	If you select it, we will render a text input box for you to answer.
longText	If you select it, we will render a text area for you to answer.
upload	If you select it, we will render an uploader for you to upload.
link	If you select it, we will render a link input box for you to type.
singleChoice	If you select it, we will render a radio group for you to pick.
multiChoice	If you select it, we will render a checkbox group for you to pick.

Name	Description
http	Hypertext Transfer Protocol, for loading web pages using hypertext links.
https	Hypertext Transfer Protocol Secure, a secure version of the HTTP protocol.
mailto	A type of HTML link that activates the default mail client on the computer for sending an e-mail.
ftp	File Transfer Protocol, for transferring files between computers.
sftp	Secure File Transfer Protocol, for transferring large files over the web.

Name	Description
answer	If you select it, you can answer the question.
edit	If you select it, you can edit the question.
preview	If you select it, you can preview the answer area.

You can use it to switch different answer types.

import { AnswerTypeSelector } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
label	string	'Select Answer Type'	false	The label of the `Select` element.
onChange	func		true	Callback fired when the `Select` value is changed.Signature:`function(value: AnswerTypeEnum) => void`value: The value of the `Select` element.
value	AnswerTypeEnum		true	The value of the `Select` element, required for a controlled component.
hiddenOptions	Array\<AnswerTypeEnum>	[]	false	The options (answer types) you don't want to show in the options list of the selector.

It will help you to render a URL input component for answering.

import { LinkAnswer } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
disabled	bool	false	false	If `true`, the component is disabled.
label	string		false	The label of the `Input` element.
linkType	LinkTypeEnum		true	The value of the `Select` element, required for a controlled component.
maxLength	number		false	Maximum number of length to type.
minLength	number		false	Minimum number of length to type.
name	string		false	The name of the `Input` element.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onToggleLinkType	func		true	Callback fired when the `Select` value is changed.Signature:`function(value: LinkTypeEnum) => void`value: The value of the `Select` element.
required	bool	false	false	If `true`, the `Input` is required.
value	string		true	The value of the `Input` element, required for a controlled component.
viewType	ViewTypeEnum		true	If `preview`or `edit` you can preview the answer component;If `answer` you can answer the question.

You can use it to define the total score and the pass score.

import { Scoring } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
exceededErrText	string	'Pass Score should be less than the Total Score'	false	The error message when Pass Score is greater then Total Score.
onChangePassScore	func		true	Callback fired when the Pass Score `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element for Pass Score.
onChangeTotalScore	func		true	Callback fired when the Total Score `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element for Total Score.
onToggleScoring	func		true	Callback fired when the `Switch` value is changed.Signature:`function(value: bool) => void`value: The value of the `Switch` element.
passScore	string \| number		true	The value of the `Input` element for Pass Score.
passScoreLabel	string	'Pass Score'	false	The label of the `Input` element for Pass Score.
totalScore	string \| number		true	The value of the `Input` element for Total Score.
totalScoreLabel	string	'Total Score'	false	The label of the `Input` element for Total Score.
turnOffScoring	bool		true	The value of the `Switch` element.
turnOffScoringLabel	string	'Turn off scoring'	false	The label of the `Switch` element.

It will help you to render a text input component for answering..

import { TextAnswer } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
answerType	AnswerTypeEnum		true	`shortText` or `longText`.
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
disabled	bool	false	false	If `true`, the component is disabled.
label	string		false	The label of the `Input` element.
maxLength	number		false	Maximum number of length to type.
name	string		false	The name of the `Input` element.
minLength	number		false	Minimum number of length to type.
onBlur	func		true	Callback fired when the `Input` value is blurred.
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
onFocus	func		true	Callback fired when the `Input` value is focused.
placeholder	string	'Type your answer here...'	false	The placeholder of the `Input` element.
required	bool	false	false	If `true`, the `Input` is required.
value	string		true	The value of the `Input` element, required for a controlled component.
viewType	ViewTypeEnum		true	If `preview`or `edit` you can preview the answer component;If `answer` you can answer the question.

It will help you to render a Uploader component for uploading files.

import { UploaderAnswer } from '@rinxun/custom-questions';

Name	Type	Required	Description
id	string\|number	true	The unique id of the file.
fileName	string	true	The name of the file.
fileKey	string	false	The unique key of the file, like from AWS S3.

Name	Type	Default	Required	Description
chooseFileText	string	'Choose a file'	false	The text of the Choose button.
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
dropFileText	string	'Drop files here'	false	The text of the Drop File Area.
files	Array\<FileProps>		true	See File Props above.
maxSize	number	5 (MB)	false	Maximum of the uploading file size, UOM is `MB`.
multiple	boolean	false	false	If `true` then you can upload multiple files
onDownload	func		true	Callback fired when downloaded the file.Signature:`function(id: string) => void`id: The unique id of the file, but if `fileKey`is not null/undefined, here you will get the `fileKey` instead of the `id`.
onRemove	func		true	Callback fired when removed the file.Signature:`function(id: string) => void`id: The unique id of the removing file, but if `fileKey`is not null/undefined, here you will get the `fileKey` instead of the `id`.
onUpload	func		true	Callback fired when uploaded a file.Signature:`function(files: Array<File>, index?: number) => void`files: Acceptable files you uploaded.index: If more than 1 `Uploader` in the same page, you can define the `index`.
sizeExceededErrText	string	Your file exceed the max size of x MB.	false	The alert message when you uploaded a size exceeded file.`x` is the maximum of the uploading file size, if you set the `maxSize` that's it, otherwise, default to 5.
viewType	ViewTypeEnum		true	If `preview`or `edit` you can preview the `Uploader` component;If `answer` you can upload files.
warmingTips	string	'Documents can be uploaded in pdf, xls, doc & jpeg formats. Maximum size allowed is x MB.'	false	The tip of the `Uploader` as helper text.`x` is the maximum of the uploading file size, if you set the `maxSize` that's it, otherwise, default to 5.
wrongFileTypeErrText	string	'The type of the file you uploaded is not accepted, please reupload!'	false	The alert message when you uploaded an unacceptable file.

You can use it to create/edit choices.

import { EditChoiceItems } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
correctAnswer	bool		false	If `true` that means this answer is the correct one.Required when `needDefineCorrectAnswer` (in the next table) is `true`.
label	string	'Choice x'	false	The label of the `Input`.`x` is an index number.
name	string		true	The name of the `Input`. Also it is the unique id of the choice item.
value	string		true	The value of the `Input`.

Name	Type	Default	Required	Description
answerType	AnswerTypeEnum		true	Which kind of component you want to render for the answer.
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
correctAnswerIconTipText	string	'Toggle it as correct / incorrect answer'	false	The tooltip text of the tick icon button.
maxItems	number		false	Maximum number of items to add, it must be greater than 2.If `null` then unlimited.
maxItemsTipText	string	'A maximum of x choices can be set!'	false	A warming tip to tell users the maximum number of items to add. Only be displayed when `maxItems` is not `null`.`x` is the `maxItem` value.
needDefineCorrectAnswer	bool		false	If `true` that means you have to define correct answers.At this moment, `onToggleCorrectAnswer` and `correctAnswer` are required.
onAddMore	func		true	Callback fired when the Add More button is clicked.Signature:`function() => void`
onChange	func		true	Callback fired when the `Input` value is changed.Signature:`function(name: string, value: string) => void`name: The name of the `Input` element.value: The value of the `Input` element.
onRemove	func		true	Callback fired when removed the choice item.Signature:`function(name: string) => void`name: The name of the `Input` element.
onToggleCorrectAnswer	func		false	Callback fired when toggle the tick icon button at the end of the choice item.Signature:`function(name: string) => void`name: The name of the `Input` element.Required when `needDefineCorrectAnswer` is true.
options	Array\<ChoiceItemProps>		true	See Choice Item Props above.The length of options must be greater than 2.

It will help you to render a radio group component for answering.

import { SingleChoiseAnswer } from '@rinxun/custom-questions';

Name	Type	Required	Description
color	string (keyword, rgb, hex, etc)	false	The main color of the component.
name	string	false	The name of the `RadioGroup` element.
options	Array\<{ label: string; value: string }>	true	The radio options for rendering.
onChange	func	true	Callback fired when the `Radio` value is changed.Signature:`function(value: string) => void`value: The value of the selected `Radio` element.
value	string	true	The selected value of the `RadioGroup` element.
viewType	ViewTypeEnum	true	If `preview`or `edit` you can preview the `RadioGroup` component;If `answer` you can do single select.

It will help you to render a checkbox group component for answering.

import { MultiChoiseAnswer } from '@rinxun/custom-questions';

Name	Type	Required	Description
color	string (keyword, rgb, hex, etc)	false	The main color of the component.
name	string	false	The name of the `Form` element.
onChange	func	true	Callback fired when the `Radio` value is changed.Signature:`function(value: string, checked: boolean) => void`value: The value of the checked `checkbox` element.checked: if `true` that means the checkbox is checked, otherwise, unchecked.
options	Array\<{ label: string; value: string }>	true	The checkbox options for rendering.
value	Array\<string>	true	The values of all checked`checkbox` elements.
viewType	ViewTypeEnum	true	If `preview`or `edit` you can preview the `checkbox` component;If `answer` you can do multiple select.

You can use it to create/edit a question.

import { QuestionGroup } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
answerType	AnswerTypeSelectorProps		true	See props of `AnswerTypeSelector` .
choices	EditChoiceItemsProps		true	See props of `EditChoiceItems`.
color	string (keyword, rgb, hex, etc)		false	The main color of the component.
inputLabel	string	'Preview'	false	The label of the `TextAnswer` and `LinkAnswer` .
onChangeQuestion	func		true	Callback fired when the `Input` value is changed.Signature:`function(value: string) => void`value: The value of the `Input` element.
question	string		true	The value of the Question `Input` element.
questionLabel	string	'Enter Question'	false	The label of the Question `Input` element.
scoring	ScoringProps		false	See props of `Scoring`. Required if `showScoring` is `true`.
showScoring	boolean	false	false	If `true`, the `Scoring` will be rendered.

You can use it to render a component for answering.

import { AnswerGroup } from '@rinxun/custom-questions';

Name	Type	Default	Required	Description
answer	LinkAnswerProps \| TextAnswerProps \| UploaderAnswerProps \| SingleChoiceAnswerProps \| MultiChoiceAnswerProps		true	See the corresponding props above.
answerType	AnswerTypeEnum		true	Which kind of component you want to render for the answer.
question	string		true	The text to describe the question.
required	boolean	false	false	If `true` the red asterisk would be shown next to the question.