Pick, Group, and Rank Question - how to dynamically count down items left to rank? | XM Community
Skip to main content

I have a pick, group, and rank question with 32 items, set to display stacked so as not to overwhelm the survey-taker. I would like to have a counter on the page that indicates how many items are remaining in the stack (they must rank all items). There are two groups the items can be ranked into. I haven’t found much information on the forums about using JS with pick, group, and rank questions, so I’m a little lost. So far I have the following, which I don’t think is working:

	var group1count=jQuery("#" +this.questionId+"group0 li").length; 
	var group2count=jQuery("#" +this.questionId+"group1 li").length; 
	var remaining = 32 - group1count - group2count
	Qualtrics.SurveyEngine.setEmbeddedData( 'remaining_n', remaining);

Here is a screenshot of how the question looks on the page (the stack of items has a length of 32 before any ranking occurs, and we want somewhere on the page to show how many are left in a dynamic way):

If anyone can give me some pointers on a) how to get the length of the stacked items and have this update every time a new item is moved to a group, and b) how to have this value displayed somewhere on the page, I would be very grateful!


Thank you very much

Hi ​@hilaryk 

I can help you with the code below, which will allow you to display the value above the question text. Let me know if this works for you.

 

Qualtrics.SurveyEngine.addOnload(function() {
    var totalItems = 32; 

    
    var counterDiv = document.createElement("div");
    counterDiv.id = "remainingCount";
    counterDiv.style.fontWeight = "bold";
    counterDiv.style.marginTop = "10px";
    counterDiv.style.fontSize = "16px";
    counterDiv.style.color = "#333";
    jQuery("#" + this.getQuestionInfo().QuestionID).prepend(counterDiv);

  
    function updateRemaining() {
        var group0Count = jQuery("#" + this.getQuestionInfo().QuestionID + " #group0 li").length;
        var group1Count = jQuery("#" + this.getQuestionInfo().QuestionID + " #group1 li").length;
        
        var remaining = totalItems - (group0Count + group1Count);
        jQuery("#remainingCount").text("Items remaining to rank: " + remaining);

       
        Qualtrics.SurveyEngine.setEmbeddedData('remaining_n', remaining);
    }
    updateRemaining.call(this);
    jQuery("#" + this.getQuestionInfo().QuestionID + " .sortable").on("sortupdate", updateRemaining.bind(this));
});

Hi,

I wouldn’t use an embedded data field for this, and i would add the counter directly in the question’s text to support translations.

Something like this:

English question:

Question text.<br />
<br />
Items remaining to rank: <span id="remainingCounter"></span>

French question:

Texte de la question.<br />
<br />
Éléments restant à classer : <span id="remainingCounter"></span>

Javascript:

Qualtrics.SurveyEngine.addOnload(function () {

    var questionId = this.questionId;
    var itemsUlId = questionId + "items";

    function updateCounter() {
        var remaining = jQuery("#" + itemsUlId + " li").length;
        jQuery("#remainingCounter").text(remaining);
    }

    updateCounter();

    jQuery("#" + questionId + " .PGRSortable").on("sortupdate", function () {
        updateCounter();
    });

});

 

Hi ​@hilaryk 

I can help you with the code below, which will allow you to display the value above the question text. Let me know if this works for you.

 

Qualtrics.SurveyEngine.addOnload(function() {
    var totalItems = 32; 

    
    var counterDiv = document.createElement("div");
    counterDiv.id = "remainingCount";
    counterDiv.style.fontWeight = "bold";
    counterDiv.style.marginTop = "10px";
    counterDiv.style.fontSize = "16px";
    counterDiv.style.color = "#333";
    jQuery("#" + this.getQuestionInfo().QuestionID).prepend(counterDiv);

  
    function updateRemaining() {
        var group0Count = jQuery("#" + this.getQuestionInfo().QuestionID + " #group0 li").length;
        var group1Count = jQuery("#" + this.getQuestionInfo().QuestionID + " #group1 li").length;
        
        var remaining = totalItems - (group0Count + group1Count);
        jQuery("#remainingCount").text("Items remaining to rank: " + remaining);

       
        Qualtrics.SurveyEngine.setEmbeddedData('remaining_n', remaining);
    }
    updateRemaining.call(this);
    jQuery("#" + this.getQuestionInfo().QuestionID + " .sortable").on("sortupdate", updateRemaining.bind(this));
});

Thank you so much for taking the time to help! I ended up using vgayraud’s solution because it seemed simpler, but I appreciate having a second option :)

Hi,

I wouldn’t use an embedded data field for this, and i would add the counter directly in the question’s text to support translations.

Something like this:

English question:

Question text.<br />
<br />
Items remaining to rank: <span id="remainingCounter"></span>

French question:

Texte de la question.<br />
<br />
Éléments restant à classer : <span id="remainingCounter"></span>

Javascript:

Qualtrics.SurveyEngine.addOnload(function () {

    var questionId = this.questionId;
    var itemsUlId = questionId + "items";

    function updateCounter() {
        var remaining = jQuery("#" + itemsUlId + " li").length;
        jQuery("#remainingCounter").text(remaining);
    }

    updateCounter();

    jQuery("#" + questionId + " .PGRSortable").on("sortupdate", function () {
        updateCounter();
    });

});

 

Amazing, thank you so much! I really, really appreciate your help! This would have taken me hours to figure out, and clearly I was on a more complicated track than I needed to be trying to use embedded data. This worked perfectly, thank you!

Leave a Reply


Terms & Conditions