The mcSubChoices function enables the addition of sub-choices to a multi-select multiple choice question. When a primary choice is selected, the sub-choices for the primary choice are displayed and can be selected. Optional exclusive options allow the multi-select to act like a single single select.
Here is a quick video demonstration:
Features include:
This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.
Add the mcSubChoices function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided mcSubChoices function JS:
<script>/*Paste mcSubChoices function JS here*/</script>
Alternatively, paste the mcSubChoices function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.
The requirements for the multiple choice question are:
Create a choice group for each primary choice (parent) and its sub-choices (children). There should be one parent choice per choice group.
Do NOT hide the choice group title. That will be handled by the mcSubChoices function.
The choice group selection must be set to 'Multiple Answer Within Question' (the default).
The choices within the choice group may be randomized if desired.
To specify a choice as a primary choice (parent), put the choice text inside a span with the class parent
. For example:
<span class="parent">Parent choice text</span>
To make a group (parent and it's children) exclusive to other groups and choices, add the class exGroup
to the parent. For example:
<span class="parent exGroup">Parent choice text</span>
To make sub-choices within a group exclusive (single select), add the class exChild
to the parent. For example:
<span class="parent exChild">Parent choice text</span>
To make both group and sub-choices exclusive add both classes to the parent:
<span class="parent exGroup exChild">Parent choice text</span>
To anchor a sub-choice (child) when a choice group is randomized, put the choice text inside a span with the class anchor
. For example:
<span class="anchor">Other</span>
Add JS to call the mcSubChoices function to apply it to the multiple choice question as follows:
Qualtrics.SurveyEngine.addOnload(function() { mcSubChoices(this); });
To override the default options, specify the desired options is the second function argument as an object. For example:
Qualtrics.SurveyEngine.addOnload(function() { mcSubChoices(this,{subDeselect:false,subIndent:'20px'}); });
align is a string that specifies the alignment of the choice text.
Default: 'left'
subDeselect is a boolean that specifies if sub-choices (children) should be automatically deselected when the primary choice (parent) is deselected. When subDeselect is false, the parent cannot be deselected unless all the children are already deselected.
Default: true
subIndent is a string that specifies how much the sub-choices (children) should be indented.
Default: "10px"