Skip to main content

JavaScript examples

  • Updated

A JavaScript syntax can be written in any page in order to add more complex features for questions and answers. In order to activate a JavaScript field, click the button "<>" on the page bar:

mceclip0.png

Below you can find examples of the most used features.

 

Restricts open answer to numbers only

Question type: Open text.

Example: An open question for age. 

How to apply the script to your survey? No changes needed.

$("input.custom-text").keyup(function () {
var test = /\D/;
if (test.test($(this).val())) {
$(this).val($(this).val().replace(/\D/g, ""));
}
});

 

Limits character length

Question type: Open text.

Example: A respondent can write in 20 characters at most. 

How to apply the script to your survey? Change the value of the character limit (marked red).

$("input.custom-text").prop('maxlength','20');

 

Adds suffix for an open ended field

Question type: Open text.

Example: A question of how much money a respondent spends. 

How to apply the script to your survey?

Step 1. Change the suffix text (marked red).

$('<span> EUR</span>').insertAfter($("input.custom-text"))

Step 2. Add survey styling in the Design tab and change the question code.

#p_Q1_1 {
width: 25% !important;
display: inline-block;
margin-left: 33%;
}

 

Recodes open number answers to ranges

Question types: Open text and Single choice.

Example: Recode open age answers (Text) to age groups (Single choice).

How to apply the script to your survey? Change the page code of the open text question, change the question codes of the open text and single choice questions, and change the answer codes of the single choice question (marked red).

(response.answers).forEach((answer) => {
if (answer.pageCode == 'PAGE4' && answer.questionCode === 'DEM2A') {
let age = parseInt(answer.value);

if (age >= 18 && age <= 24) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '1') {
$(this).prop('checked', true);
}
});
}
if (age >= 25 && age <= 34) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '2') {
$(this).prop('checked', true);
}
});
}
if (age >= 35 && age <= 44) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '3') {
$(this).prop('checked', true);
}
});
}
if (age >= 45 && age <= 54) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '4') {
$(this).prop('checked', true);
}
});
}
if (age >= 55 && age <= 64) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '5') {
$(this).prop('checked', true);
}
});
}
if (age >= 65 && age <= 74) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '6') {
$(this).prop('checked', true);
}
});
}
if (age >= 75 && age <= 80) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '7') {
$(this).prop('checked', true);
}
});
}
if (age < 18 || age > 80) {
$('input[name="p[DEM2]"').each(function() {
if ($(this).val() == '8') {
$(this).prop('checked', true);
}
});
}
}
});
$('#p_DEM2').parent().addClass('d-none');
$('#p_DEM2').addClass('d-none');
$('#p_next').click();

 

Recodes closed answers to ranges

Question types: Single choice or Multiple choice.

Example: Recode small regions into lager regions.

How to apply the script to your survey? Change the page code of the open text question, change the question codes of the open text and single choice questions, and change the answer codes of the single choice question (marked red).

(response.answers).forEach((answer) => {
if (answer.pageCode == 'PAGE3' && answer.questionCode === 'Q3') {
let previous = answer.code;

if (previous == "1" || previous == "2") {
$('input[name="p[Q4]"').each(function() {
if ($(this).val() == '1') {
$(this).prop('checked', true);
}
});
}
if (previous == "3" || previous == "4") {
$('input[name="p[Q4]"').each(function() {
if ($(this).val() == '2') {
$(this).prop('checked', true);
}
});
}
if (previous == "5" || previous == "6") {
$('input[name="p[Q4]"').each(function() {
if ($(this).val() == '3') {
$(this).prop('checked', true);
}
});
}
}
});
$('#p_Q4').parent().addClass('d-none');
$('#p_Q4').addClass('d-none');
$('#p_next').click();

 

Recodes single matrix answers to a multiple choice question 

Question types: Single choice matrix and Multiple choice.

Example: Q1 is a single choice matrix question with a list of brands that should be evaluated in 5-point scale (1 - very bad, 5 - very good). Q2 is a hidden question where all the brands that were evaluated as 4 (good) or 5 (very good) should be automatically selected.

How to apply the script to your survey? Change the page code, the question code and the answer codes of the matrix question, and the question code of the multiple choice question (marked red). Set Q2 as not required question in the toggle in case none of the brands are automatically selected.

var checkboxes = document.querySelectorAll(".form-check > input")

response.answers.forEach((answer) => {
if(answer.pageCode == "PAGE1" && answer.questionCode == "Q1") {
if(answer.columnCode == "4" || answer.columnCode == "5") {
checkboxes[Number(answer.rowCode)-1].click();
}
}
})

$('#p_Q2').parent().addClass('d-none');
$('#p_Q2').addClass('d-none');
$('#p_next').click();

 

Restricts maximum number of answers (when there ARE NO exclusive options)

Question type: Multiple choice.

Example: Maximum there answers can be selected.

How to apply the script to your survey? Change how many maximum answers can be chosen in let max_number_options (marked red).

let max_number_options = 3; 
$('div.form-check input:checkbox').on('click',function(){ 
let checked_options = $('div.form-check input:checkbox:checked').length; 
if(checked_options == max_number_options){ 
$('div.form-check input:checkbox:not(:checked)').attr('disabled', true); 
} else { 
$('div.form-check input:checkbox').attr('disabled', false); 
} 
});

 

Restricts maximum number of answers (when there IS an exclusive option)

Question type: Multiple choice.

Example: Maximum there answers can be selected, excluding "None of these" when there are 8 answer options (including "None of these").

How to apply the script to your survey? Change the values in totalAnswerCount, in allowedMaxCheckedCount, and the question code (marked red).

$('div.form-check input:checkbox').on('click', function(){
const totalAnswerCount = 8;
let allowedMaxCheckedCount = 3;
let checkedItemCount = 0;
let noneOfTheseCheckbox = $('input[name="p[Q5][]"]').last();

$('input[name="p[Q5][]"]').each(function(index) {
if ($(this).is(':checked') && index < totalAnswerCount - 1) {
checkedItemCount++;
}
});
if (checkedItemCount === allowedMaxCheckedCount) {
$('input[name="p[Q5][]"]').each(function() {
if (false === $(this).is(':checked')) {
$(this).attr('disabled', true);
}
});
}
if (checkedItemCount < allowedMaxCheckedCount) {
$('input[name="p[Q5][]"]').each(function() {
if (false === $(this).is(':checked')) {
$(this).attr('disabled', false);
}
});
}
if (noneOfTheseCheckbox.is(':checked')) {
$('input[name="p[Q5][]"]').each(function(index) {
if (index + 1 < totalAnswerCount) {
$(this).attr('disabled', true);
$(this).prop('checked', false);
}
});
}
noneOfTheseCheckbox.click(function(){
if (!noneOfTheseCheckbox.is(':checked')) {
$('input[name="p[Q5][]"]').each(function(index) {
$('#p_Q5_' + index).attr('disabled', false);
});
}
})
});

 

Makes the last column exclusive in a matrix

Question type: Multiple choice matrix.

Example: 5x5 matrix where the answer in the last column cannot be selected with other answers in the same row.

How to apply the script to your survey? Change the values in rowCount, in columnCount, and the question code (marked red).

$('form').on('click', function () {
let rowCount = 5;
let columnCount = 5;
let questionCode = 'Q1';

for (let row = 1; row <= rowCount; row++) {
let noneOfThese = $('#p_' + questionCode + '_' + row + '_' + (columnCount - 1)).last();

noneOfThese.on('change', function () {
let disabled = false;
if (noneOfThese.is(':checked')) {
disabled = true;
}

for (let column = 0; column < columnCount - 1; column++) {
let checkboxItem = $('#p_' + questionCode + '_' + row + '_' + column);
checkboxItem.attr('disabled', disabled);
if (disabled) {
checkboxItem.prop('checked', false);
}
}
})
}
});

 

"Next" button appears after some time

Question types: All.

Example: A respondent will be able click "Next" button after 30 seconds.

How to apply the script to your survey? Change the value marked red (1 second = 1000).

$('#p_next').hide();
setTimeout(function () {
$('#p_next').show();
}, 30000)

 

Randomly selects one or more options

Question type: Multiple choice.

Example: Three out of seven brands should be randomly selected.

How to apply the script to your survey? Update the list for the var optionArray (e.g. if there are four possible answers (brands) in total, the optionArray should be [0, 1, 2, 3]), and change the i value in the line for (i = 0; i < ... (e.g. if you need two answers (brands) to be randomly selected, there should be i < 2, i.e.: for (i = 0; i < 2; i++) {).

function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}

$('.container').hide();

$('.form-check-input').attr("checked", false);

var optionArray = [0, 1, 2, 3, 4, 5, 6];
shuffle(optionArray);

for (i = 0; i < 3; i++) {
$($('.form-check-input')[optionArray[i]]).attr('checked', true);
};

$('#p_next').click();

 

 

 

Question type: Dropdown list (one question per page)

Question type: Single choice.

Example: A question with a long list of answers, that would be better shown in a dropdown list.

How to apply the script to your survey? No changes needed.

var answer_options = document.querySelectorAll(".form-check");
answer_options.forEach((answer) => {
answer.style.display = "none";
});

var container = document.querySelector(".question");
var labels = document.querySelectorAll(".form-check > label > div > div");
var generated_labels =
"<option selected disabled hidden>Choose an option...</option>";
labels.forEach((label, index) => {
label.style.display = "none";
generated_labels +=
"<option value='index'>" + label.textContent + "</option>";
});

container.innerHTML +=
"<select class='form-control'>" + generated_labels + "</select>";
dropdown = document.querySelector("select.form-control");

dropdown.addEventListener("change", () => {
selected_index = document.querySelector("select.form-control").selectedIndex;
if (selected_index != 0) {
let radio_buttons = document.querySelectorAll(".form-check > input");
radio_buttons[selected_index - 1].click();
}
});

 

Question type: Dropdown list (more than one question per page)

Question types: Single choice.

Example: More than one question at the same page with long lists of answers, that would be better shown in dropdown lists.

How to apply the script to your survey? Change the question codes at the last lines (marked red).

function form_radio_to_dropdown(question_code) {
var answer_options = document.querySelectorAll(
".question.card div#p_" + question_code + " > .form-check"
);

answer_options.forEach((answer) => {
answer.style.display = "none";
});

var container = document.querySelector(
".question:has(div#p_" + question_code + ")"
);

var labels = document.querySelectorAll(
".question.card div#p_" +
question_code +
" > .form-check > label > div > div"
);

var generated_labels =
"<option selected disabled hidden>Choose an option...</option>";
labels.forEach((label, index) => {
label.style.display = "none";
generated_labels +=
"<option value='index'>" + label.textContent + "</option>";
});

container.innerHTML +=
"<select class='form-control'>" + generated_labels + "</select>";

dropdown = document.querySelector(
".question.card:has(div#p_" + question_code + ") > select.form-control"
);

dropdown.addEventListener("change", () => {
selected_index = document.querySelector(
".question.card:has(div#p_" + question_code + ") > select.form-control"
).selectedIndex;

if (selected_index != 0) {
let radio_buttons = document.querySelectorAll(
".question.card div#p_" + question_code + " > .form-check > input"
);

radio_buttons[selected_index - 1].click();
}
});
}

form_radio_to_dropdown("Q1");
form_radio_to_dropdown("Q2");