Solved
How to dynamically show Next button based on a certain number of selections in multi choice question
Hi,
I am dynamically showing statements in a multi-choice question based on the selections of previous questions. At this question, if the number of statements displayed is less than or equal to 5 then they get auto coded and the Next button is auto-submitted. And if the number of statements displayed is more than 5 than the respondent should be able to proceed only after selecting 5 statements. So, I am trying to hide the Next button on Page load and when the number of selection is equal to 5 then the Next button should be displayed. I was able to code the first part when the number of selections in less than or equal to 5 but having issues with the second part and not able to dynamically show the Next button on 5 selections. Below is my code...It would be great if someone could help me solve this issue.
Qualtrics.SurveyEngine.addOnload(function()
{
var qobj1 = this;
this.hideNextButton();
});
Qualtrics.SurveyEngine.addOnReady(function() {
var qobj = this;
var displayedChoices = [];
var selectedChoices = [];
jQuery.each(qobj.getChoices(), function(index, value) {
if(qobj.getChoiceDisplayed(value)) displayedChoices.push(value);
});
jQuery.each(qobj.getChoices(), function(index, value) {
if(qobj.getSelectedChoices(value)) selectedChoices.push(value);
});
if(displayedChoices.length <= 5) {
qobj.setChoiceValue(displayedChoices[0], true);
qobj.setChoiceValue(displayedChoices[1], true);
qobj.setChoiceValue(displayedChoices[2], true);
qobj.setChoiceValue(displayedChoices[3], true);
qobj.setChoiceValue(displayedChoices[4], true);
qobj.showNextButton();
qobj.clickNextButton();
}
if(displayedChoices.length > 5 && selectedChoices.length!=5){
alert("Please select 5 statements");
}
else
qobj.showNextButton();
});
Best answer by TomG
The code I provided was meant to replace ALL your code. So it would be like:
```
Qualtrics.SurveyEngine.addOnReady(function() {
var qobj = this;
qobj.hideNextButton();
var cbs = jQuery("#"+qobj.questionId+" input[type=checkbox]");
if(cbs.length <= 5) {
cbs.prop("checked",true);
qobj.clickNextButton();
}
else {
var numSelected = cbs.filter(":checked").length;
if(numSelected >= 5) qobj.showNextButton();
cbs.click(function() {
numSelected = cbs.filter(":checked").length;
if(numSelected >= 5) qobj.showNextButton();
});
}
});
```
+27You are only counting the number selected when the page loads. You need to use an event handler to count the number of choices selected each time one is selected/unselected. You can use qobj.questionclick for this if you are sticking with the Qualtrics JS API.
Hi Tom,
Thanks for getting back.
I am still finding my way with javascript so not that well versed with the various methods and properties in the Qualtrics JS API. I did know that questionClick event could be used but not sure how to calculate the selections using it. Can you help me with the code/logic here?
Also, does the event.type remain "radio" for multi-select questions too?
+27event.type for multi-select is "checkbox".
I think it would be a lot easier to use jQuery and look at the DOM directly. You can fill in button hide/show details:
```
var cbs = jQuery("#"+this.questionId+" input[type=checkbox]");
var numSelected = cbs.filter(":checked").length;
cbs.click(function() { numSelected = cbs.filter(":checked").length; });
```
I have revised my code a bit but there are still some issues. Did try the hide and show function with the DOM id (NextButton) but it doesn't seem to work.
Qualtrics.SurveyEngine.addOnload(function()
{
var qobj1 = this;
this.hideNextButton();
});
Qualtrics.SurveyEngine.addOnReady(function() {
var qobj = this;
var displayedChoices = [];
var selectedChoices = [];
jQuery.each(qobj.getChoices(), function(index, value) {
if(qobj.getChoiceDisplayed(value)) displayedChoices.push(value);
});
if(displayedChoices.length <= 5) {
qobj.setChoiceValue(displayedChoices[0], true);
qobj.setChoiceValue(displayedChoices[1], true);
qobj.setChoiceValue(displayedChoices[2], true);
qobj.setChoiceValue(displayedChoices[3], true);
qobj.setChoiceValue(displayedChoices[4], true);
qobj.showNextButton();
qobj.clickNextButton();
}
if(displayedChoices.length > 5)
{
this.questionclick = function(event,element){
var cbs = jQuery("#"+this.questionId+" input[type=checkbox]");
var numSelected = cbs.filter(":checked").length;
cbs.click(function() {
numSelected = cbs.filter(":checked").length;
});
if(numSelected.length>=5)
qobj.showNextButton();
}
}
});
+27The code I provided was meant to replace ALL your code. So it would be like:
```
Qualtrics.SurveyEngine.addOnReady(function() {
var qobj = this;
qobj.hideNextButton();
var cbs = jQuery("#"+qobj.questionId+" input[type=checkbox]");
if(cbs.length <= 5) {
cbs.prop("checked",true);
qobj.clickNextButton();
}
else {
var numSelected = cbs.filter(":checked").length;
if(numSelected >= 5) qobj.showNextButton();
cbs.click(function() {
numSelected = cbs.filter(":checked").length;
if(numSelected >= 5) qobj.showNextButton();
});
}
});
```
Hi Tom,
Great solution! I made a small change to the click function as below by which the Next button can toggle if the number of selected options is less than or great than equal to 5. This would prevent the respondent to proceed by selecting less than 5 options after the next button is shown.
cbs.click(function() {
numSelected = cbs.filter(":checked").length;
if(numSelected >= 5)
qobj.showNextButton();
else
qobj.hideNextButton();
});
I had to launch a survey early last week, so I did so by a workaround wherein a dummy question was created before the main question with the same options. This would get auto-coded if the number of selections is less than or equal to 5 and not if the number of options displayed is greater than 5. The choices for the dummy question were hidden and generic info was shown to the respondent. The main question was only shown if there are no selections in the dummy question. So the data file will have 2 sets of variables from dummy and main questions that have to merged during data processing. Not the best solution, but I was short on time and yet to crack my initial script (you had not posted the above until then).
Thanks for your help, Tom! I really appreciate it...
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.