JavaScript Basics
What do I need to know to start using JavaScript?
HTML forms the basis of any JavaScript and hence good to average knowledge about HTML basics is essential.In addition to that, understanding of basic JavaScript - the syntax, the basic statements, the conditional statements and the data types, is required.
When should I consider using JavaScript validation on the question?
There are multiple scenarios where JavaScript validation could be extremely handy and useful to solve your complex validation problems. For instance :
- You want to validate complex questions like flex matrix, conjoint, heatmap etc, where system validations would be limited.
- Where you would want to validate the question based on response to prior questions in the survey.
- Do client side validation so the request is not submitted to the server.
- Very specific/ custom validation on any question type. For instance you want only people who select 1 option from first 5 choices and 1 option from second 5 choices to multiple choice question to proceed.
What are the possible validations I can achieve with this feature
If you are a average to good JavaScript programmer you can solve any validation problem with this feature. A novice to JS could learn the basics and should be able to use the feature to solve straight forward validation problems in the survey.
How do I set up the custom JS validation? Any Example I can see?
Here is a use case that explains how to set up a simple JS validation script on the question. Lets assume that in the below mentioned survey we dont want to show people 'Mastercard' option for question 2 on page 2 who have selected 'Weekly' for Q1 which is on Page 1 of the survey.
Step 1 :We will need to set the Pre JS validation script on question Q2 to solve this problem.
-
Click on the Setting link for the question to enable/ write the Pre JS validation script for the question
6. Screenshot
-
Enable/ Write Pre JavaScript validation script.
7. Screenshot
-
This is what the respondent will see if he selects 'Weekly' for Q1
8. Screenshot
I am trying to validate a question that is on the 5th page of the survey, Can I refer to the question that is on the first page as its shown in the example
Yes. You can refer to all the questions that are loaded prior to the question that you are setting the validation on. The values are carried through to the finish page of the survey.
When writing a custom JavaScript on the question can I refer to previous question responses that are not on the same page ?
How can I refer to use the response to prior questions in the survey ?
You can refer the responses to following question types. Where number in the top right corner would be the question code for that question
Multiple Choice Single Select
1. Screenshot
Multiple Choice Many Select
2. Screenshot
Image Rating (Rate One or More Images)
3. Screenshot
Multi-Point Scales
4. Screenshot
Dynamic Lookup Table
5. Screenshot
Pre JavaScript validation
What is pre-javascript validation?
Any code placed in this section will be executed when the page is loaded and hence the name pre-javascript validation. This allows us the facility to do validation checks before the page is displayed to the user. This is helpful when hiding questions/options or auto coding (auto punch) a question is the requirement.
Post JavaScript validation
What is Post - JavaScript Validation?
Post - JavaScript validation allows us to execute a JavaScript code after the respondents hits the submit/continue button. This is helpful under circumstances where the survey flow needs to be adjusted as per the answers to question(s) or cases where some additional information has to be passed to the custom variables based on the answers.
hideQuestion
Purpose |
You can use this hideQuestion Javascript method to hide question |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.hideQuestion("<Question Code>"); |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can hide whole question using following syntax
$survey.hideQuestion("Q1"); |
||||||
Example 2 |
You can hide question row using following syntax
$survey.hideQuestion("Q1_1"); |
||||||
Supported Question Types |
All Questions. Hide Question RowMulti-Point Scales Checkbox/Multi-Select Spreadsheet Van Westendorp - Price Sensitivity |
showQuestion
Purpose |
You can use this showQuestion Javascript method to show question |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.showQuestion("<Question Code>"); |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can show whole question using following syntax
$survey.showQuestion("Q1"); |
||||||
Example 2 |
You can show question row using following syntax
$survey.showQuestion("Q1_1"); |
||||||
Supported Question Types |
Show Question
All Questions. Show Question RowMulti-Point Scales Checkbox/Multi-Select Spreadsheet Van Westendorp - Price Sensitivity |
hideOption
Purpose |
You can use this hideOption Javascript method to hide answer option |
|||||||||
---|---|---|---|---|---|---|---|---|---|---|
Syntax |
$survey.hideOption ("<Question Code>", <Option Index>); |
|||||||||
Parameters |
* - Mandatory parameter |
|||||||||
Example 1 |
You can hide answer option using following syntax
$survey.hideOption("Q1",1); |
|||||||||
Supported Question Types |
|
showOption
Purpose |
You can use this showOption Javascript method to show answer option |
|||||||||
---|---|---|---|---|---|---|---|---|---|---|
Syntax |
$survey.showOption ("<Question Code>", <Option Index>); |
|||||||||
Parameters |
* - Mandatory parameter |
|||||||||
Example 1 |
You can show answer option using following syntax
$survey.showOption("Q1",1); |
|||||||||
Supported Question Types |
|
setOptionSelected
Purpose |
You can use this setOptionSelected Javascript method to auto select the option and respondent if required can change it |
||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Syntax |
Single Select : $survey.setOptionSelected ("<Question Code>", <Option Index>); Multi Select : $survey.setOptionSelected ("<Question Code>", <Option Index Array>); |
||||||||||||
Parameters |
* - Mandatory parameter |
||||||||||||
Example 1 |
You can select single answer option using following syntax
$survey.setOptionSelected("Q1",1); |
||||||||||||
Example 2 |
You can select multiple answer option using following syntax
$survey.setOptionSelected("Q1",[1,3]); |
||||||||||||
Supported Question Types |
|
getSelectedOption
Purpose |
You can use this getSelectedOption Javascript method to get the text associated with selected option. |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.getSelectedOption("<Question Code >") - Return value : String |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can get the answer text of selected option(Dropdown/Radio/Checkbox) using following syntax
$survey.getSelectedOption("Q1"); |
||||||
Supported Question Types |
|
getSelectedOptions
Purpose |
You can use this getSelectedOptions Javascript method to get the text array associated with selected option(Dropdown/Radio/Checkbox). |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.getSelectedOptions("<Question Code >") - Return value : String Array |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can get the answer text array of selected option using following syntax
$survey.getSelectedOptions("Q1"); |
||||||
Supported Question Types |
|
getSelectedOptionIndex
Purpose |
You can use this getSelectedOptionIndex Javascript method to get the option index associated with selected option(DropDown/Radio/Checkbox). |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.getSelectedOptionIndex("<Question Code >") - Return value : Integer |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can get the option index selected answer using following syntax
$survey.getSelectedOptionIndex("Q1"); |
||||||
Supported Question Types |
|
getSelectedOptionsIndex
Purpose |
You can use this getSelectedOptionsIndex Javascript method to get the array of option index associated with selected options(DropDown/Radio/Checkbox). |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.getSelectedOptionsIndex("<Question Code >") - Return value : Integer Array |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can get the array of option index selected answers using following syntax
$survey.getSelectedOptionsIndex("Q1"); |
||||||
Supported Question Types |
|
getSelectedCount
Purpose |
You can use this getSelectedCount Javascript method to get total count of selected options (Radio/Checkbox/DropDown). |
||||||
---|---|---|---|---|---|---|---|
Syntax |
$survey.getSelectedCount("<Question Code >") - Return value : Integer |
||||||
Parameters |
* - Mandatory parameter |
||||||
Example 1 |
You can get et total count of selected options using following syntax
$survey.getSelectedCount("Q1"); |
||||||
Supported Question Types |
|
updateCustomVariable
Purpose |
You can use this updateCustomVariable Javascript method to update custom variable value. |
|||||||||
---|---|---|---|---|---|---|---|---|---|---|
Syntax |
$survey.updateCustomVariable("<Custom Variable Index>", "<Value>") |
|||||||||
Parameters |
* - Mandatory parameter |
|||||||||
Example 1 |
You can update custom variable value using following syntax
$survey.updateCustomVariable(1, "Weekly"); |