How to customise the numeric inputs to set a range of values or to be whole numbers?


All numeric inputs can have settings applied to them to restrict the values that may be entered by respondents.

Some common examples include setting a:

  • Minimum value
  • Maximum value
  • Step (e.g. to allow only whole numbers, one could set the step to 1)

These settings need to be set using survey customisation via JavaScript.

Steps to add properties to numeric inputs:

The customisation code will have two parts, first a selector that indicates which question we wish to customise, and second, the properties we wish to apply.

The selector:

For numeric input questions, the selector will be of the form:

$("#additionalQuestions[QUESTION-NUMBER]-short-answer")

Where [QUESTION-NUMBER] needs to be replaced by the auto-assigned question number of the question we’re customising. This can be found in the question list (either on the Additional questions tab, or Questions tab).

If you change the order of the questions in your survey, your question numbers may change, and you will need to update your code.

For example, here Q3 is the question we want to customise, so our selector will be: $("#additionalQuestions3-short-answer")

The Q3 for customising numeric input

For Van Westendorp questions, the selector does not require a question number and will apply to all Van Westendorp inputs: $("input[name*='[vw]'][type='number']")

The properties

Now that we have the selector created, we can apply the desired properties, these will be added, one at a time, and may include:


  • Setting a minimum value using .prop(‘min’, [MIN-VALUE]), where [MIN-VALUE] is the desired minimum. For example:
    • Minimum of 0: $("#additionalQuestions3-short-answer").prop(‘min’,0);
    • Minimum of 25: $("#additionalQuestions3-short-answer").prop(‘min’,25);

  • Setting a maximum value using .prop(‘max’, [MAX-VALUE]), where [MAX-VALUE] is the desired maximum. For example:
    • Maximum of 999: $("#additionalQuestions3-short-answer").prop(‘max’,999);

  • Setting the step using .prop(‘step’,[STEP-VALUE]), where [STEP-VALUE] is the desired step. For example:
    • Step of 1 (whole numbers only): $("#additionalQuestions3-short-answer").prop(‘step’,1);
    • Step of 100 (multiple of 100 only): $("#additionalQuestions3-short-answer").prop(‘step’,100);.
    • Note, if you set a min value of 33, and a step of 100, acceptable values will be 33, 133, 233, etc.

  • Combining properties: you can chain multiple properties together. For example:
    • Setting a min of 0, max of 100, and step of 5: $("#additionalQuestions3-short-answer").prop(‘min’,0).prop(‘max’,100).prop(‘step’,5);.
    • This will only allow values of 0, 5, 10, …, 90, 95, 100.
Remember to end your line of code with a semicolon (;).

Adding the customisation

  1. At the bottom of your experiment setting, click the Other actions button.

  2. Select Customisation in the options shown.

Select the customisation
  1. A pop-up window will appear showing the following code:
The customisation window
  1. Paste the code from above into the function (within the curly braces { })
Adding the customisation code
  1. You can add notes on lines starting with //, this may be useful especially if customising multiple inputs within one survey.
Test, test, test. All customisations should be thoroughly tested before data collections begins.