Show a Random Set of Text/Instruction Fields

You may have noticed that when setting up your survey page to randomly show a set of questions, text/instruction fields are not included! But of course, there's always a way to hack it with some JavaScript, so here we go!

Check it out in an example survey!

OR

Add a survey with this script to your account!

We'll be using the following SurveyGizmo features in this example:

• Text/Instructions
• JavaScript Action

Setup

If you have multiple text/instruction fields and need to randomly show some specific number of those to the respondent, just add the following script to a JavaScript action on the same page!

$(document).ready(function() {
    var numToShow = 1; //Change this number to how many fields we need to show

    /*-----Don't touch anything below this line-----*/
    var textEls = $('.sg-type-instruction');
    var randIndices = [];

    for (var i = 0; i < numToShow; i++) {
        var randIndex = Math.floor(Math.random() * textEls.length);
        do {
            randIndex = Math.floor(Math.random() * textEls.length);
        } while (randIndices.indexOf(randIndex) !== -1);

        randIndices.push(randIndex);
    }
    //console.log(randIndices);
    textEls.each(function(i, el) {
        if (randIndices.indexOf(i) === -1) {
            el.remove();
            //console.log('set for removal: #' + i);
        }
    });
});

Required Customizations

Specify the number of elements you want to show in the highlighted portion of the script. In the above script, 1 random Text/Instruction will be shown to the respondent.

Record which text element was shown

If you'd like to also know which element was shown to the respondent, the following JavaScript will populate a Textbox question with which text/instruction/s are displayed.

Check it out in an example survey!

OR

Add a survey with this script to your account!

$(document).ready(function() {
	var numToShow = 2; //Change this number to how many fields we need to show
  
  /*-----Don't touch anything below this line-----*/
	var textEls = $('.sg-type-instruction');
	var randIndices = [];
  var shownArr = [];
  var shownStr;
	
	for (var i = 0; i < numToShow; i++) {
		var randIndex = Math.floor(Math.random() * textEls.length);
		do {
			randIndex = Math.floor(Math.random() * textEls.length);
		} while (randIndices.indexOf(randIndex) !== -1);
		
		randIndices.push(randIndex);
	}
	//console.log(randIndices);
	textEls.each(function(i, el) {
		if (randIndices.indexOf(i) === -1) {
			$(this).remove();
			//console.log('set for removal: #' + i);
		} else {
			var classArr = $(this).attr('class').split(' ');
			//Fix for Preview
			if (classArr.indexOf('sg-cc-hook') !== -1) classArr.splice(classArr.indexOf('sg-cc-hook'), 1);
			var shownClass = classArr[classArr.length - 1];
			shownArr.push(shownClass);
		}
	});
  	shownStr = shownArr.join(',');
  	$('.shown').find('input[type="text"]').val(shownStr);
});

Required Customizations

In this script you will also need to make the following customizations:

• Specify the number of elements you want to show in the highlighted portion of the script. In the above script, 2 random Text/Instruction will be shown to the respondent.
• A unique CSS Class Name to each text element (this is what will show up in your reporting).
• A textbox question with a CSS Class Name of sg-hide shown. sg-hide will hide the question on the page; in our example survey this is displayed  shown will be used by the script so we can write to it. What we're actually doing is printing a comma-separated list of the custom classes of the text elements that were shown to the respondent.