How to hide columns in RANKING question using JS? | XM Community
Skip to main content

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.

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");

})

}

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?

https://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.

https://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).
image.pngThis 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

Studentproblems , 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");

})

}

https://community.qualtrics.com/XMcommunity/discussion/comment/41284#Comment_41284Thanks seems to have worked perfectly. Thanks so much.

Leave a Reply


Terms & Conditions