How do I use javascript to change the options in a rank order question? | XM Community
Skip to main content

I want to set the choice text of a rank order question using javascript, and I cannot set it manually because it depends on the user’s response on a previous question. I already managed to save the information I need in an embedded data, so I just need to know what is the code to set it to the choices on load? I’ve been looking for a couple of days and I can’t figure out how to access and set the choice text using javascript. The number of choices will also ideally be set programmatically. I know exactly what I need to do but I just can’t find the code to access and modify it anywhere. Do I need to use something like jQuery("#QID4" + (some command that I don’t know])? Any guidance would be appreciated.

update: I was able to change the text with the first block of code from this page: https://stackoverflow.com/questions/51736930/carry-forward-new-rank-order-from-pick-group-rank-selected-choices-to-slider

 

I haven’t tested it fully so I don’t know if the data will turn out properly yet. I’m still trying to figure out how to change the number of choices

Final update to the problem:

In the end I wasn’t able to find how you’re supposed to dynamically add to the flex table and update everything properly, and the solution I ended with basically just making a loop and change the text descriptions but not the variable values, as follows:

document.getElementById(qid).innerHTML = choicesii];

 

But if I tried to get the choice values, it will return the old default value instead of the programmed one that the users will see. The workaround I had for this was to just read the plain text values for the rank and description into an embedded data in the addOnPageSubmit function:

var e = document.getElementById("QR~" + this.questionId + "~" + id);
result.push(e.querySelector(".rank").textContent + ": " 
           + e.querySelector(".label").querySelector("label").innerHTML);

Qualtrics.SurveyEngine.setEmbeddedData('data', result.join('. '));

 

I also wasn’t able to figure out how to add an entry to the flex table and have everything still work, so my original idea of adding an element if there’s more choices than the setting was scrapped. The workaround I had for this one was to start with a large number of choices like 50, and then hiding the extra ones. Again, this remove function only removes the web element that shows this value, but the value itself is still stored somewhere that I don’t know how to access:

for (i = 50; i > numChoices; i--) {
            document.getElementById("QR~" + this.questionId + "~" + i).remove();
        }

The thing that made this task incredibly difficult is the lack of information on the rank order question type. I couldn’t find how to work with it anywhere. If anybody knows where to find this information, or can create a guide on how to do it properly, it would be immensely helpful. 

The JS Question API helps to an extent, but it is not enough for even slightly more niche operations.

Leave a Reply


Terms & Conditions