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

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) => voidvalue: 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) => voidvalue: The value of the Input element. | | onToggleLinkType | func | | true | Callback fired when the Select value is changed.Signature:function(value: LinkTypeEnum) => voidvalue: 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) => voidvalue: 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) => voidvalue: The value of the Input element for Total Score. | | onToggleScoring | func | | true | Callback fired when the Switch value is changed.Signature:function(value: bool) => voidvalue: 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) => voidvalue: 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 | 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. |

| 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) => voidid: 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) => voidid: 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) => voidfiles: 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) => voidname: 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) => voidname: 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) => voidname: 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 | 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) => voidvalue: 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 | 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) => voidvalue: 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. |

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) => voidvalue: 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. |

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