Hello,
I have a carry forward list of 8 choices but we only need to rank 5. Client wants a grid view so I am using buttons approach but this automatically creates 8 columns (from 1 to 8 in accordance to the number of choices).
Since we are only ranking 5, I just want to show 5 columns.
I tried the following:
$("header~rank~6").hide();
$("header~rank~7").hide();
$("header~rank~8").hide();
$("QID25~6~0").hide();
$("QID25~6~1").hide();
$("QID25~6~2").hide();
$("QID25~6~3").hide();
$("QID25~6~4").hide();
$("QID25~6~5").hide();
$("QID25~6~6").hide();
$("QID25~6~7").hide();
$("QID25~7~0").hide();
$("QID25~7~1").hide();
$("QID25~7~2").hide();
$("QID25~7~3").hide();
$("QID25~7~4").hide();
$("QID25~7~5").hide();
$("QID25~7~6").hide();
$("QID25~7~7").hide();
$("QID25~8~0").hide();
$("QID25~8~1").hide();
$("QID25~8~2").hide();
$("QID25~8~3").hide();
$("QID25~8~4").hide();
$("QID25~8~5").hide();
$("QID25~8~6").hide();
$("QID25~8~7").hide();
But it only hides the headers. It is still keeping the input buttons.
I also tried with a $(td).eq(4).hide(); approach but did not work as well.
Any suggestions on how to accomplish this?
Thank you.
How to hide columns in RANKING question using JS?
Best answer by rondev
Use the below code:
for(var i=5;i<=7;i++){
jQuery(".ChoiceStructure .Answers").find("th:eq("+i+")").css("visibility","collapse");
jQuery(".ChoiceStructure tbody tr").each(function(){
jQuery(this).find("td:eq("+i+")").css("visibility","collapse");
})
}
+22Use the below code:
for(var i=5;i<=7;i++){
jQuery(".ChoiceStructure .Answers").find("th:eq("+i+")").css("visibility","collapse");
jQuery(".ChoiceStructure tbody tr").each(function(){
jQuery(this).find("td:eq("+i+")").css("visibility","collapse");
})
}
This worked great! Thank you very much.
One more thing, if I wanted to modify the header text, for example:
First Choice, Second Choice, Third Choice, Fourth Choice, and Fifth Choice
I tried:
$("header~rank~1").html("First Choice");
but does not recognize an .html() function.
Any suggestion for this?
+22https://www.qualtrics.com/community/discussion/comment/30208#Comment_30208Use the below code and update array as required:
var arr = ["First choice", "Second choice", "Third choice", "Fourth choice", "Fifth choice"];
for(var i = 0 ; i
jQuery(".ChoiceStructure .Answers").find("th:eq("+i+")").html(arr[i]);
}
Great! Thank you very much for your help.
+1https://community.qualtrics.com/XMcommunity/discussion/comment/30206#Comment_30206rondev the code seems to work great but when I add it, it seems to apply to all questions not just the one I added it to (please refer to screenshot below).
This is the code I have inputted solely in the above question:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
for(var i=2;i<=5;i++){
jQuery(".ChoiceStructure .Answers").find("th:eq("+i+")").css("visibility","collapse");
jQuery(".ChoiceStructure tbody tr").each(function(){
jQuery(this).find("td:eq("+i+")").css("visibility","collapse");
})
}
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
May you please provide your assistance
+22Studentproblems , try below code:
var qid = this.questionId;
for(var i=5;i<=7;i++){
jQuery("#"+qid+" .ChoiceStructure .Answers").find("th:eq("+i+")").css("visibility","collapse");
jQuery("#"+qid+" .ChoiceStructure tbody tr").each(function(){
jQuery(this).find("td:eq("+i+")").css("visibility","collapse");
})
}
+1https://community.qualtrics.com/XMcommunity/discussion/comment/41284#Comment_41284Thanks seems to have worked perfectly. Thanks so much.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.