Hi there,
I am trying to create a question with multiple answers depending on the previous answer selected. I have created a drill-down question but I would like the last question to only be displayed if certain answers were selected previously.
Here is a screenshot of the question with all answers selected:
!
And this is a screenshot where the third answer should be hidden as it was not a relevant choice.
!
How do I hide that last answer?
I do believe that a solution can be worked out using Javascript, however I am not familiar with this language and cannot work out how to do it. Could someone please point me in the right direction?
Thanks a lot,
Sarah
Page 1 / 1
Hi ,
I have a JavaScript and CSS which you could use in case your first question would be a standard multiple-choice question (not drop-down list).
JavaScript:
Qualtrics.SurveyEngine.addOnload(function()
{
function display_next (that, ID, choiceID){
var qid = "QID" + ID;
var sid = qid + "Separator";
var sep = document.getElementById(sid);
var nextQ = document.getElementById(qid);
var selectedRecode;
var condition;
that.questionclick = function(event, element) {
if(element.type == "radio")
{ selectedRecode = Number(that.getChoiceRecodeValue(that.getSelectedChoices()));
if(Array.isArray(choiceID)){
condition = choiceID.includes(selectedRecode);}
else{condition = (selectedRecode == choiceID);}
if(condition) {nextQ.style.display = "block";
sep.style.display = "block";}
else{nextQ.style.display = "none";
sep.style.display = "none";}}}
}
display_next (this, 15, [1,3]);
//first number id ID of the question you want to hide
//Second number are choices which will make the second queston visible when selected
});
CSS:
#QID15 {display:none;}
#QID15Separator {display:none;}
Note: You have to find an ID of your second question using the inspector.
I have a JavaScript and CSS which you could use in case your first question would be a standard multiple-choice question (not drop-down list).
JavaScript:
Qualtrics.SurveyEngine.addOnload(function()
{
function display_next (that, ID, choiceID){
var qid = "QID" + ID;
var sid = qid + "Separator";
var sep = document.getElementById(sid);
var nextQ = document.getElementById(qid);
var selectedRecode;
var condition;
that.questionclick = function(event, element) {
if(element.type == "radio")
{ selectedRecode = Number(that.getChoiceRecodeValue(that.getSelectedChoices()));
if(Array.isArray(choiceID)){
condition = choiceID.includes(selectedRecode);}
else{condition = (selectedRecode == choiceID);}
if(condition) {nextQ.style.display = "block";
sep.style.display = "block";}
else{nextQ.style.display = "none";
sep.style.display = "none";}}}
}
display_next (this, 15, [1,3]);
//first number id ID of the question you want to hide
//Second number are choices which will make the second queston visible when selected
});
CSS:
#QID15 {display:none;}
#QID15Separator {display:none;}
Note: You have to find an ID of your second question using the inspector.
Thank you for your reply, however, I do not quite understand how that would work with my example and a multi-choice question since a multi-choice question only has stand-alone answers.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.