Rank top 3 from a list of six options | XM Community
Solved

Rank top 3 from a list of six options

HWYoung
Badge
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.
icon

Best answer by TomG 20 May 2019, 15:54

View original

20 replies

TomG
Rank
Userlevel 7
Badge +27
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
Badge
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!
D

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
Rank
Userlevel 7
Badge +27

@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();

R
Userlevel 2
Badge +1

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
Rank
Userlevel 7
Badge +27

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

N
Userlevel 1
Badge +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
Rank
Userlevel 7
Badge +27

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).

N
Userlevel 1
Badge +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.

N
Userlevel 1
Badge +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
Badge

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

S
Badge +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*/

});

S
Badge +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
Rank
Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/41252#Comment_41252I've added JS to the accepted answer.

L
Badge

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

S
Badge

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
Rank
Userlevel 7
Badge +27

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.

R
Badge +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
Rank
Userlevel 7
Badge +27

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.

R
Badge +1

Thank you TomG!!

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

Leave a Reply


Terms & Conditions