rank order text box | XM Community
Skip to main content

Hi,
does anyone from the community, know how to make the rank order question in the text box format, automatically rank when the user clicks on the text box?
This code bellow in js, I used it for many years, and now I don't know why, it stopped working

Thank you very much

Qualtrics.SurveyEngine.addOnload(function()
{
var maxRank = 3;
var currentRank = 1;
 
 $$('#'+this.questionId+' .QuestionBody input').each(function(el) {$(el).observe('click', function(event) {
  if(currentRank > maxRank)
   currentRank = xx ;
  event.toElement.value = currentRank++;
 })});
var questionID = this.questionId;
$('resetButton').observe('click', function(event) {currentRank = 1; console.log($$('#'+questionID+' .QuestionBody input'));$$('#'+questionID+' .QuestionBody input').each(function(el) {el.value = ""});});




});

I can't find anything about an observe() function in the jQuery documentation. Also, do you know what the double dollar signs are for? If you're looking for jQuery, Qualtrics had already reserved the single dollar sign when it decided to implement jQuery automatically, so you call jQuery now by using the keyword 'jQuery'.
I reformatted your code to look like the following:
Qualtrics.SurveyEngine.addOnload(function () {
    var maxRank = 3;
    var currentRank = 1;
    var questionID = this.questionId;


    jQuery('#' + questionID + ' .QuestionBody input').each(function (el) {
        jQuery(el).observe('click', function (event) {
            if (currentRank > maxRank)
                currentRank = xx;
            event.toElement.value = currentRank++;
        })
    });
    
    jQuery('resetButton').observe('click', function (event) { currentRank = 1; console.log(jQuery('#' + questionID + ' .QuestionBody input')); jQuery('#' + questionID + ' .QuestionBody input').each(function (el) { el.value = "" }); });
});
I tried plugging it into a Rank Order question, but that's where I'm getting the "jQuery(...).observe is not a function". What was the observe() doing for you? Watching the choices and the element called 'resetButton'? (and did you created a button called resetButton?)

I think that code will run if we figure out what event you want to capture and plug it in place of the .observe() function (both places).


Hi Jeremy, thanks for trying to help me
I don't know why this .Observe in the code,
this script was created by a qualtrics technician 6 years ago, today he doesn't work there anymore, and now qualtrics has by default no longer help questions involving js codes,

about the ResetButon, yes I have a button that when clicking on it clears the data entered, so that the user can restart the classification

I changed the $$ for Jquery, and for me it still doesn't work 😕, for you it ran? it could be a problem with my browser not reading the codes in js ?however, I tested it on all my browsers and none ran
Thanks a lot.


I definitely think the code will need to change just based on it's age. I was getting an error around the observe function not being a thing, though I couldn't find documentation to support it being deprecated, it's definitely not a jQuery function, which is how it appeared to be called.
I was working on swapping out the .QuestionBody Input for a different way to detect and loop through the choices available. Once I figure that out, we should be golden; I'll simply apply the same fix to the resetButton code. Give me a bit (maybe today or sometime tomorrow) and I'll see if I can get a working script.


Hi Jeremy, 
ok, many thanks,


Alright, Paulo , here's what I've got so far.
Qualtrics.SurveyEngine.addOnload(function () {
    var maxRank = 3;
    var currentRank = 1;
    var questionID = this.questionId;

    jQuery('#' + questionID + '\\\\~RO').children().on("click", function () {
console.log('currentRank: ' + currentRank)
        if (currentRank > maxRank)
            currentRank = xx;
        //event.toElement.value = currentRank++;
    });
});
I tested this on a rank order question I created. A few things: I'm not sure how you want to handle the event bit; it was supported with sobject].observe(), but that's been deprecated and event is only supported by a few mouse events (onmouseenter, onmouseleave, onmouseout, and onmouseover events; source). See if this works with your RO question. You should see the currentRank written out to your console on each RO choice click.


Hi JeremyK ,
I copied the code to the RO question, but it is still not accepting mouse click for automatic ranking, see my test link:
https://qeurope.eu.qualtrics.com/jfe/preview/SV_2fZcdOu9rhLrf6K?Q_CHL=preview&Q_SurveyVersionID=current

You mentioned mouse events, should I insert them in the function?
thanks a lot!


To be expected, I guess. My RO question looks a little difference than yours. For instance, my

    element looks like this:
     

      Whereas when I preview your survey (SV_2fZcdOu9rhLrf6K), the
        element doesn't have an id, just a class of ChoiceStructure:

          Instead of using my '#QID7~RO', you'll need to change that jQuery to look for your class, '.ChoiceStructure'. I tested this in your preview successfully. This will at least get your jQuery selector working.

          So your rank order matrix question has textboxes with a, b, c, & d to the right. What are you wanting the click to do? What action happens on click? Are your respondents typing numbers in the textboxes and you're wanting the boxes to auto-sort on the value entered?


Hi Jeremy
sorry, I thought it was clear, when clicking on the text box, the mouse click needs to add in the text boxes the numbers 1,2,3 etc, as a way of ranking the options a.b.c.d..


Oh, okay I gotcha. And I assume you need the textboxes for something else as opposed to using the Rank Order Drag and Drop option? That's doing basically the same thing you're trying to accomplish, with just an extra step from the user (dragging instead of clicking). It's a much less complex solution for and end users, so I thought I'd throw it out there. Could probably make your reset button reorder the choices to their original state too if you decide to go that route. I'm playing with the textboxes now, thanks for the clarification onClick!


yes, here in Brazil we use text box ranking a lot, the drag and drop way didn't work very well for our questionnaires,
Many thanks!


Alright, just figured it out!
I created a resetButton in my question HTML and tested the textbox reset as well. The only thing I don't like about my solution is I couldn't figure out how to select the elements using the QuestionId, so I omitted it, but that could cause problems in the future (or maybe now) since the jQuery runs against the entire page. Let me know if you have problems with it, thanks!
Here's my take on a solution:
Qualtrics.SurveyEngine.addOnload(function () {
    var maxRank = 4;
    var currentRank = 1;

    jQuery('.ChoiceStructure').children().on("click", function () {
        if (currentRank <= maxRank) {
            jQuery(this).children("inputtype='text']:first").val(currentRank);
            currentRank = ++currentRank;
        };
    });

    jQuery('#resetButton').on("click", function () {
        jQuery(".ChoiceStructure'role='list']").children().children("inputtype='text']").val("");
        currentRank = 1;
    });
});



Genius, you were brilliant,
it worked and my reset button is working too.. :)

Thanks a Lot!
Paulo


Hi @JeremyK, In the above code if i click on text box twice, the rank will be increased. Can we have Rank and hold functionalities so that, if i double click also, it should be on same rank

 


@Tom_1842 Can you please look into this and let me have a feedback

 

 


Cool code JeremyK! @Naveen1994 I took a look and made some tweaks that I think will solve what you are seeing when double clicking a text box. First, I added a condition on the ChoiceStructure click that checks if the input is empty or not. Only if it is empty will the rank be added and the currentrank incremented. Then I added a blur() so that the input is no longer selected after the rank is added, and pointer-events:none that the input cannot be accessed again. I also added this.questionId to the selectors so that it will be specific to the question. 

First create a Rank Order question set to to Text box and give it 4 choices. Then to add a reset button, use the Rich Content Editor's HTML/Source view to update the question text with the below:

Click to write the question text<br>
<button id="resetButton" class="reset">Reset</button>

Then add the below to the question's JavaScript in the OnReady section:

var qid = this.questionId;
var maxRank = 4;
var currentRank = 1;

jQuery("#"+qid+" .ChoiceStructure").children().on("click", function () {
if (currentRank <= maxRank && jQuery(this).children("inputptype='text']:first").val().length === 0) {
jQuery(this).children("inputptype='text']:first").val(currentRank).blur().css("pointer-events","none");
currentRank = ++currentRank;
};
});

jQuery('#resetButton').on("click", function () {
jQuery("#"+qid+" .ChoiceStructureurole='list']").children().children("inputptype='text']").val("").css("pointer-events","auto");
currentRank = 1;
});

 


Leave a Reply