Skip to main content

Kinesis Support

All the topics, resources needed for Kinesis.

FocusVision Knowledge Base

Radio and Checkbox Examples

This page covers customizations, examples, and demos for the Radio, Checkbox & Pulldown question types.

For more general information on this question type, see Question Types. For commonly used data validation, see the Response Validation article.

1:  Exclusive Checkbox

Exclusive checkbox options are already built in to Kinesis and can be applied for single questions from the Question Properties screen. The following javascript will clear all checkbox answers on screen if an exclusive option is checked and must be applied within a Custom HTML range. You must add class="none" to the checkbox option that is exclusive and then place the following code to the bottom of your custom HTML range.

<script type="text/javascript"><!--
var $choices;  
function exclusiveChoices()  
{  
$choices = jQuery('input[type="checkbox"]');  
$choices.click(clickEvent);  
jQuery('.none').click(clickEvent);  
}    

function clickEvent(event)  
{  
var inputElement = event.target;  
if(inputElement.className=="none")  
{  
$choices.prop('checked', false);  
}  
else
{  
jQuery(".none").prop('checked', false);  
}  
}    
jQuery(document).ready(exclusiveChoices);
// --></script>

2:  Filter Radio Choices Based on Checkbox Responses

This approach can be useful when there are dozens of choices and writing a display condition for each individual one can be time consuming. Use the following Javascript functions in an Extra Text question on the same page of the "source" and "target" questions.

<script type="text/Javascript">
// identifies the whole box containing the INPUT element
function WholeBox(el) {
  return $(el).parents("tr td div").parent().parent();
}

$(document).ready(function() {
  // hides entire set of choices
  $(WholeBox($("[name='Qtarget']"))).hide();

  // binds action to 'change' event
  $("[name='Qsource[]']").change(function() {

    // finds choice ID and related element
    var id = $(this).attr("value");
    var el = WholeBox($("[name='Qtarget'][value='"+id+"']"));

    // toggles target based on source state
    if ($(this).is(':checked'))
      { $(el).show(); }
    else
      { $(el).hide(); }
  });
});
</script>

If the questions are on different pages the following alternate method can be used, with Qsourcelist being a Text question, placed on the same page as Qtarget, hidden with a display condition of 'false', and containing this expression as Default Answer:

return implode("," , $Qsource);
<script type="text/Javascript">
// identifies and returns the row containing the whole INPUT element
function ChoiceRow(el) {
  return $(el).parents("tr td div").parent().parent();
}

$(document).ready(function() {
  // rebuilds the array from the list
  var myArray = $("#Qsourcelist").val().split(',');

  // loops the array and hides the target choice(s) as needed
  for (id = 1; id <= myArray.length; id++) {
    if (myArray[id-1] == "0") {
      ChoiceRow($("[name='Qtarget'][value='"+id+"']")).hide();
    }
  }
});
</script>

3:  Clearing Radio Responses Across Matrix Table

In this scenario, a Matrix Table is composed of a number of rows built from a Radio question containing, say, 4 choices. The following code will detect if there are multiple selections for the same choice (column) in multiple questions (rows) - in addition to removing the last selected one - and provide a button to optionally reset all selections made for a choice (column) across multiple questions (rows).

<input type="button" value="Reset" onclick="ResetColumns();">
<script type="text/Javascript">
function DetectMultiple(column) {
  $("input:radio[value='"+column+"']").on('click', function() {
       if ($("input:radio[value='"+column+"']:checked").length > 1) {
      alert("Too many selections in column "+column);
      $("*:focus").prop("checked", false);
    }
  });
}

function ResetAll(column) {
  $("input:radio[value='"+column+"']:checked").prop('checked', false);
}

function ResetColumns() {
  for(i = 1; i <= 4; i++) {
    ResetAll(i);
  }
}

$(document).ready(function() {
  for(i = 1; i <= 4; i++) {
    DetectMultiple(i);
  }
});
</script>

4:  Assign Priority to Radio or Checkbox Selection

In this example, several options are selected, but we must place priority on specific choices for our followup questions.

Q4 is a checkbox question consisting of 32 brands and a "None of the above" option. There are four primary brands in this list and 28 other/secondary brands. Primary brands are designated as choices 16, 18, 19, and 29.
In Q6, a table consisting of the same 32 brands will show at MOST four brands. If any of the primary brands are selected in Q4 then those should be shown. If less than four primary brands are selected in Q4 then the script should randomly select from the secondary brands until a maximum of four brands are selected.

To accomplish this, copy Q4 and rename the duplicate to Q4brands. Then, on the advanced tab of the question's properties select "Default answer from value or condition", set the question's display status to "Never", and use the following script as your default answer condition:

#condition so this DAC only runs if the respondent did not select "none of the above"
if (array_sum($Q4)>=1 and $Q4[33]==0)
{
	#creates array with maximum number of choices - specify max # of choices
	$USER_choices = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32);
	#$USER_choices = range(1,32,1); //function not yet supported. May be supported down the road.

	#creates array for primary brands - specify primary choice numbers here
	$USER_primary = array(16,18,19,29);

	#creates array for secondary brand - do not change
	$USER_secondary = array_diff($USER_choices, $USER_primary);

	#maximum number of choices to choose
	$USER_max = 4;
	
	#creates arrays for selection in code below - do not change
	$USER_sselected = array();
	$USER_pselected = array();
	
	#loop to check if any primaries are selected
	foreach ($USER_primary as $USER_choice)
	{
		#check Q4 to see if each of the primary choices are checked
		if ($Q4[$USER_choice]==1) 
		{
			#if primary choice is checked, push into pselected array
			array_push($USER_pselected, $USER_choice);
		}
	}

	#loop to check if any secondaries are selected, only checked if <MAX number of selections made
	if (count($USER_pselected)<$USER_max AND array_sum($Q4)>count($USER_pselected)) 
	{
		foreach ($USER_secondary as $USER_choice)
		{
			#check Q4 to see if each of the secondary choices are checked
			if ($Q4[$USER_choice]==1) 
			{
				#if secondary choice is checked, push into sselected array
				array_push($USER_sselected, $USER_choice);
			}
		}
		#randomizes secondaries
		shuffle($USER_sselected);
	}

	#merges the secondaries at the end of the primary array
	$USER_merge = array_merge($USER_pselected,$USER_sselected);

	#trims array to MAX number of selections
	$USER_final = array_slice($USER_merge,0,$USER_max);

	#sorts the array
	asort($USER_final);
	
	#returns max selection in array format
	return $USER_final;
}
else return false;

5:  Filter Pulldowns with Search Input

Places an input text box immediately before a pulldown question that can be used to search for and automatically punch an option.

VIEW DEMO

Requires the following id tag to be set within the "Input element extra tags" field in the pulldown questions Advanced Properties tab:

id="realitems"

Then modify the question "Surrounding HTML" to the following:

~QTEXT~ Search: <input id="realtxt" onkeyup="searchSel();" type="text"> ~QUESTION~
<script type="text/javascript"><!--
function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('realitems').options;
  var temp = "";
  for(var i=0;i<output.length;i++) {
	temp = output[i].text.toLowerCase();
    if(temp.indexOf(input)==0){
      output[i].selected=true;
      }
    if(input==''){
      output[0].selected=true;
      }
  }
}
// --></script>
  • Was this article helpful?