How to create a Multiple Choice Question with Sub-options

Sometimes it can be helpful to have a single multiple choice question, but with some sub-answers displayed only if the parent item is chosen. Here's an example:

This can be accomplished with a special JavaScript trick:
1. First you must create a custom template, because you need to add a script to it. This is easy to do:
a) Go to Configuration->Template editor
b) Select the template you want to use for your survey. If you a using a core template, you'll need to create a copy -- just select the template, click Copy, and give the template a name.
c) Select your custom template from the Template drop down in the template editor
d) On the right side of the screen, under JavaScript files, select scripts/template.js and copy this at the very end of the file in the editor window:
// A function to handle "secondary" checkboxes
function secondaryCheckboxes(qID, primaryPosition, secondaryCount) {
	// Identify the elements
	var thisQuestion = $('#question'+qID);
	$('div.question-item', thisQuestion).parent().addClass('answer-row');
	var primaryRow = $('div.question-item:eq('+(primaryPosition-1)+')', thisQuestion).closest('.answer-row');
	var primaryInput = $('input.checkbox', primaryRow);
	var secondaryRows = primaryRow.nextAll('div.answer-row:lt('+(secondaryCount)+')');
	var secondaryInputs = $('input.checkbox', secondaryRows);
	// Indent the secondaries
	secondaryRows.css({ 'margin-left':'2.5em' });
	// Initial states of the secondary answers
	if (primaryInput.prop('checked') == false ) {
	// A listener on the primary answer to show or hide secondary answers (event) { 
		// Hide/show the secondary answers accordingly
		if (!$(this).is(':checked')) {
			secondaryInputs.prop('checked', false);
			secondaryInputs.each(function(i) {
				checkconditions(this.value,, this.type);
		else {; 

e) Click Save beneath the editor to save your changes 

2. Next, go edit your multiple choice question
a) Watch this step by step video to guide you through how to set up your question:

b) Here's the JavaScript used in the above video walkthrough:
$(document).ready(function() {
     // Sub-question 4 is primary followed by 6 secondaries
     secondaryCheckboxes({QID}, 4, 6);
c) Remember that you want to replace the 4 with the position from the top, of your parent option, and replace the 6 with the number of questions after your parent option, that are associated with the parent. 
d) You can set multiple parent/child options by repeating the secondary options like this:
$(document).ready(function() {
     // Sub-question 4 is primary followed by 6 secondaries
     secondaryCheckboxes({QID}, 4, 6);
     secondaryCheckboxes({QID}, 15, 13);


Trusted by ...

previous arrow
next arrow