Rank top 3 from a list of six options | XM Community
Skip to main content
Solved

Rank top 3 from a list of six options

  • May 20, 2019
  • 20 replies
  • 7363 views

HWYoung
Forum|alt.badge.img
Hello, I've tried searching, and found one person asking the same as me, but the JavaScript suggested in the answer doesn't work. I have six options for a question, and I want to ask people to select their top three from these options, in ranked order. The previous survey software we used would let us do this by using a lickert scale, but only showing 1, 2, and 3 as column headers, and limiting the number of options that could be selected. Unfortunately, I can't find a way to do this on Qualtrics. The closest I've come is a drag and drop rank order, but this includes all six options, or a lickert scale from 1 to 3, but I can't restrict answers to just three options. I feel I must be missing something, as this is a common type of question, but I am totally stumped as to how to get this to work. Any help is much appreciated. EDIT: I've so far got to putting 1 through 3 as the statements and the options as the scale points in a matrix table and then transposing it. However, this still allows people to select two ranks for one option, nor does it allow for an 'Other - please specify' option with the ability to write in an answer.

Best answer by TomG

You can use a Pick/Group/Rank question with one group and Must Select at least 3 and no more than 3 OR a Rank Order question with Text box and Must Rank Between at least 3 and no more than 3. You could also use a Rank Order question with Radio buttons and Must Rank Between, then hide the 4, 5, and 6 columns with JavaScript. EDIT Oct 2021: People still seem to be struggling with the JS to hide the Rank Order Radio Button columns. Here it is: ``` Qualtrics.SurveyEngine.addOnload(function() { var max = 5; //max number to rank var q = jQuery("#"+this.questionId); q.find(".Answers th").slice(max).hide(); q.find("tbody tr").each(function() { jQuery(this).find("td").slice(max).hide(); }); }); ```

20 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • Answer
  • May 20, 2019
You can use a Pick/Group/Rank question with one group and Must Select at least 3 and no more than 3 OR a Rank Order question with Text box and Must Rank Between at least 3 and no more than 3. You could also use a Rank Order question with Radio buttons and Must Rank Between, then hide the 4, 5, and 6 columns with JavaScript. EDIT Oct 2021: People still seem to be struggling with the JS to hide the Rank Order Radio Button columns. Here it is: ``` Qualtrics.SurveyEngine.addOnload(function() { var max = 5; //max number to rank var q = jQuery("#"+this.questionId); q.find(".Answers th").slice(max).hide(); q.find("tbody tr").each(function() { jQuery(this).find("td").slice(max).hide(); }); }); ```

HWYoung
Forum|alt.badge.img
  • Author
  • May 20, 2019
Hi @TomG, Thanks for your help. Is there a resource for finding a JS script that would let me hide these options? I'm afraid I'm nothing near a coding whiz!

  • May 4, 2020

Hi HWYoung and TomG
I had the exact same question! I would also be very much interested to know how to hide/delete the remaining columns with JavaScript.
Thanks!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • May 5, 2020

@DeboMart,
Cells in a matrix column have a class, so you can hide all elements with that class to hide a column. The first scale column has the class c4. Therefore, the fourth scale column would have the class c7. So:
jQuery("#"+this.questionId+" .c7").hide();


Forum|alt.badge.img+1
  • June 9, 2020

https://www.qualtrics.com/community/discussion/comment/24959#Comment_24959Hi Tom, can this be done with rows also?
for example in a matrix type question if i wish to hide a row


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • June 9, 2020

@Rahul - Yes, you can hide rows. For example, to hide the third row:
jQuery("#"+this.questionId+" tr.ChoiceRow").eq(2).hide();


Forum|alt.badge.img+1

https://www.qualtrics.com/community/discussion/comment/24959#Comment_24959Hello Tom,
I've tried your solution, but can't get it to work. Would you be so kind to check the script below? Are there any variables that I should change (e.g. "this.questionId")?
Qualtrics.SurveyEngine.addOnload(function()
{ jQuery("#"+this.questionId+" .c7").hide()
});
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*/
});


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • November 3, 2020

https://www.qualtrics.com/community/discussion/comment/31620#Comment_31620The code should work as-is. You should:

  1. Add a semi-colon to the end of the command: ...hide();

  2. Check to make sure c7 is the correct class (use the browser's inspect feature).


Forum|alt.badge.img+1

Added the semicolon and tried changing 'c7' into 'c3' and 'c10' but nothing changes. Here's what I have in the Qualtrics editor:
Schermafbeelding 2020-11-03 om 23.28.58.pngI've tried to find something with the inspect feature, but really can't make any sense of that code.
EDIT: in the first line I tried changing 'questionId' into 'QID10' but that didn't work either.


Forum|alt.badge.img+1

I had someone look into it, took him an hour but here we are:
for(var i = 3; i < 100; i++){
jQuery("#"+this.questionId+" tr.Answers th:eq("+i+")").hide();
   jQuery("#"+this.questionId+" .ChoiceStructure tbody tr").find('td:eq('+i+')').hide();

produces the survey below
Schermafbeelding 2020-11-04 om 20.33.26.pngalthough it looks like this in the survey editor
Schermafbeelding 2020-11-04 om 20.36.51.png


HWYoung
Forum|alt.badge.img
  • Author
  • November 12, 2020

Hi Niels,

Thanks for this. We've actually since dropped Qualtrics and gone with another survey platform - partly due to being unable to do this - but I'm sure it'll help others looking to do the same!

Cheers


Forum|alt.badge.img+1

nielsvanderweerdt may you please provide the entire code please. Not so sure in which part of the existing code (provided below) I should add in your code. This would be very helpful please. Also does this keep just 3 radio buttons irrelevant of the numbers of options I have? i.e. I can apply it to all my questions. Thanks in advance

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

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*/

});


Forum|alt.badge.img+1

nielsvanderweerdt malush1412 TomG
The code I am currently using is:

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
let all_radios = this.questionContainer.querySelectorAll(".q-radio");
all_radios[3].hide(); 
all_radios[4].hide(); 
all_radios[5].hide(); 
all_radios[9].hide(); 
all_radios[10].hide(); 
all_radios[11].hide(); 
all_radios[15].hide(); 
all_radios[16].hide(); 
all_radios[17].hide(); 
all_radios[21].hide(); 
all_radios[22].hide(); 
all_radios[23].hide();  
all_radios[27].hide(); 
all_radios[28].hide(); 
all_radios[29].hide();  
all_radios[33].hide(); 
all_radios[34].hide(); 
all_radios[35].hide();  
let all_inputs = this.questionContainer.querySelectorAll("input");
all_inputs[3].disable();
all_inputs[4].disable(); 
all_inputs[5].disable();
all_inputs[9].disable(); 
all_inputs[10].disable(); 
all_inputs[11].disable(); 
all_inputs[15].disable(); 
all_inputs[16].disable(); 
all_inputs[17].disable(); 
all_inputs[21].disable(); 
all_inputs[22].disable(); 
all_inputs[23].disable(); 
all_inputs[27].disable(); 
all_inputs[28].disable(); 
all_inputs[29].disable(); 
all_inputs[33].disable(); 
all_inputs[34].disable(); 
all_inputs[35].disable(); 

});

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*/

});

It has successfully removed my radio buttons (as seen in screenshot below) but not their headings.

image.png
May you kindly provide your assistance. Thanks


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • October 22, 2021

Forum|alt.badge.img
  • January 14, 2022

I tried Nils' code (above) but had to add a brace at the end. That works great. Thank you Nils.👍️
image.png


Forum|alt.badge.img
  • January 25, 2023

Hi TomG,
Is there any way to change the 1, 2,3 to 1st, 2nd, 3rd etc. I am wondering if there is any custom code.


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • January 26, 2023

https://community.qualtrics.com/XMcommunity/discussion/comment/54577#Comment_54577Are you referring to the column headings above the radio buttons. Yes, you can change them with JS.


Forum|alt.badge.img+1

The original code presented here worked like a charm on my situation. Thank you TomG!

My question is about the next step: How can I force the user to answer this question before moving to the next? Hiding the a number of options doesn’t tell the software that the other options don’t exit. For example, I have a list of 18 questions but I want users to rank only 5. The javascript code above did the trick leaving only 5 columns visible. However, when I force the question to be answered, I get a message indicating that the question has not been fully answer because there are another 13 (hidden) columns in which the radio button has not been clicked.

Does any one know the code for this? Thank you very much!


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • May 14, 2023

The original code presented here worked like a charm on my situation. Thank you TomG!

My question is about the next step: How can I force the user to answer this question before moving to the next? Hiding the a number of options doesn’t tell the software that the other options don’t exit. For example, I have a list of 18 questions but I want users to rank only 5. The javascript code above did the trick leaving only 5 columns visible. However, when I force the question to be answered, I get a message indicating that the question has not been fully answer because there are another 13 (hidden) columns in which the radio button has not been clicked.

Does any one know the code for this? Thank you very much!

Add Validation and specify must rank between 5 and 5.


Forum|alt.badge.img+1

Thank you TomG!!

I was so focused on Javascript that I forgot the simple stuff.