Custom Questions

It can help you to build some React custom question components for creating, editing and answering questions.

You can use it to build a questionnaire app

---

Quick Guide

• Installation
• License
• Usage
• Some Enumerations
  • AnswerTypeEnum
  • LinkTypeEnum
  • ViewTypeEnum
• Components
  • AnswerTypeSelector
  • LinkAnswer
  • Scoring
  • TextAnswer
  • UploaderAnswer
  • EditChoiceItems
  • SingleChoiseAnswer
  • MultiChoiseAnswer
  • QuestionGroup
  • AnswerGroup
• Changelog

Installation

custom-questions is available as an npm package.

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

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

License

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

Usage

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.

Some Enumerations

AnswerTypeEnum

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.

LinkTypeEnum

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.

ViewTypeEnum

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.

Components

AnswerTypeSelector

You can use it to switch different answer types.

Import

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

Props

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.

LinkAnswer

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

Import

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

Props

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.
readonly	boolean	false	false	If true, the Input is read only.
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.

Scoring

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

Import

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

Props

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.

TextAnswer

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

Import

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

Props

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.
readonly	boolean	false	false	If true, the Input is read only.
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.

UploaderAnswer

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

Import

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

File Props

Name	Type	Default	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.

Props

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 fileKeyis 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 fileKeyis 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.

EditChoiceItems

You can use it to create/edit choices.

Import

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

Choice Item Props

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.

Props

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.
readonly	boolean	false	false	If true, the choice item is read only.

SingleChoiseAnswer

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

Import

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

Props

Name	Type	Default	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.

MultiChoiseAnswer

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

Import

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

Props

Name	Type	Default	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 checkedcheckbox elements.
viewType	ViewTypeEnum		true	If preview or edit you can preview the checkbox component; If answer you can do multiple select.

QuestionGroup

You can use it to create/edit a question.

Import

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

Props

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.
readonly	boolean	false	false	If true, the Input is read only.
scoring	ScoringProps		false	See props of Scoring. Required if showScoring is true.
showScoring	boolean	false	false	If true, the Scoring will be rendered.

AnswerGroup

You can use it to render a component for answering.

Import

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

Props

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.

Changelog

If you have recently updated, please read the changelog for details of what has changed.