The NumberScale question type allows respondents to select a single numeric rating on a scale, typically used to measure attitudes or opinions.

​
Basic Usage

const satisfactionQuestion = new NumberScale({
    id: 'customer_satisfaction',
    text: 'How satisfied are you with our service?',
    min: 1,
    max: 5,
    minLabel: 'Very Unsatisfied',
    maxLabel: 'Very Satisfied',
    required: true
});

​
Parameters

​
id
string
required

Unique identifier for the question.

​
text
string
required

The main question text or statement to be rated.

​
subText
string
default: ""

Additional text to provide context or instructions.

​
required
boolean
default: "true"

Whether the question is required.

​
min
number
default: "1"

The minimum value on the scale.

​
max
number
default: "5"

The maximum value on the scale.

​
minLabel
string
default: ""

Label for the minimum value on the scale.

​
maxLabel
string
default: ""

Label for the maximum value on the scale.

​
customValidation
function

A custom validation function that takes the response as input and returns true if valid, or an error message string if invalid.

​
styles
object

Custom styles to apply to the question. Available keys are:

  • root
  • innerContainer
  • textContainer
  • text
  • subText
  • scaleContainer
  • scaleItem
  • scaleInput
  • scaleCircle
  • scaleNumber
  • scaleLabels
  • errorMessage

​
Data

Response Format

The NumberScale question type returns a single number representing the selected rating:

5

Validation

The NumberScale question validates that:

  1. A rating is selected when required is true.
  2. The selected rating is within the specified range (min to max).
  3. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an error message.

​
Methods

The NumberScale question type inherits methods from the base Element class and implements some specific methods:

​
setResponse
function

Set the response for the question.

Parameters:

  • value (number): The selected rating
numberScaleQuestion.setResponse(4);
​
validate
function

Validate the current response against the question’s rules.

Returns:

  • An object with isValid (boolean) and errorMessage (string) properties.
const { isValid, errorMessage } = numberScaleQuestion.validate();
​
updateSelectedStyles
function

Update the styles of the selected rating option. This is called automatically when a response is set.

numberScaleQuestion.updateSelectedStyles();

​
Example

Here’s an example of how to create a customized Number Scale question:

const customizedQuestion = new NumberScale({
    id: 'work_life_balance',
    text: 'Rate your work-life balance.',
    subText: 'Consider your overall satisfaction with your current work-life balance.',
    min: 0,
    max: 10,
    minLabel: 'Poor',
    maxLabel: 'Excellent',
    required: true,
    customValidation: (response) => {
        if (response < 3) {
            return 'We recommend discussing your work-life balance with your manager.';
        }
        return true;
    },
    styles: {
        root: { 
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        text: { 
            color: '#2c3e50',
            fontSize: '1.2em',
            fontWeight: 'bold'
        },
        subText: {
            fontStyle: 'italic',
            color: '#7f8c8d'
        },
        scaleContainer: {
            marginTop: '15px'
        },
        scaleItem: {
            margin: '0 5px'
        },
        scaleCircle: {
            transition: 'all 0.3s ease',
            '&:hover': {
                backgroundColor: '#d0d0d0',
            }
        },
        scaleNumber: {
            fontWeight: 'bold'
        },
        scaleLabels: {
            marginTop: '10px',
            fontSize: '0.9em'
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});
Number EntryOpen End