Pick, Group, and Rank Question - how to dynamically count down items left to rank?

Question

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

vgayraud · Accepted Answer

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.

Items remaining to rank: French question:Texte de la question.

Éléments restant à classer : 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(); });});

gPandey_715 · Answer

Hi ​@hilarykI 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));});

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded