Javascript not working with loop and merge | XM Community
Skip to main content

Hello,

I’m using a multiple choice question to display a series of randomly ordered pictures. Because the multiple choice question is only used to display and randomise the pictures, I have used the following code to remove the grey backgrounds that otherwise appears round the pictures and to disable selection. Both work fine until loop and merge is turned on. When loop and merge is enabled, the grey background is removed but a thin blue outline still appears when a picture is clicked, although that outline disappears as soon as the mouse is clicked again. Pictures below:

Qualtrics.SurveyEngine.addOnload(function()
{
		/*Remove grey background*/
	jQuery("#"+this.questionId+" .SingleAnswer").css("background","#ffffff");
jQuery("#"+this.questionId+" .MultipleAnswer").css("background","#ffffff");


	/*Disable selection*/
    var questionContainer = document.querySelector("#"+this.questionId);
var choices = questionContainer.querySelectorAll('rtype="radio"]');
for(var i = 0; i < choices.length; i++) {
choiceshi].disabled = true;
}

});
Here’s what selection looks like without the code before the mouse is clicked again
Here’s what selection looks like without the code after the mouse is clicked again. A thin blue outline has been removed but the picture is still selected
​​​​​
And here’s what selection looks like with the code when loop and merge is turned on. This is also what it looks like with just the code to remove the grey background. The thin outline appears but will disappear when the mouse is clicked again

Does anyone know how I can edit the code so that it still doesn’t even allow this kind of selection when loop and merge is enabled?

An answer to a different question suggested replacing

this.questionId

with 

"${lm://CurrentLoopNumber}_"+this.questionId

but that didn’t work.

Thanks for any help!

All the best

Hi, I believe the code is not working because the selector for the question changes when Loop and Merge is turned on. This can be tackled by changing the selector. Referencing this document, getQuestionContainer could be helpful here.

var questionContainer = this.getQuestionContainer();
var choices = questionContainer.querySelectorAll('[type="radio"]');
for(var i = 0; i < choices.length; i++) {
choices[i].disabled = true;
}

I might go with the below. If you add this to the Loop & Merge question and it is single select, this will remove any background/border styling that happens when a response is selected and removes the ability to interact with the response options:

jQuery("#"+this.questionId+" .SingleAnswer").css({
    "background":"#ffffff",
    "outline":"none",
    "box-shadow":"none",
    "border-color":"#ffffff",
    "pointer-events":"none"
});

 

Beautiful. Your code completely solved the problem. Thanks very much @Tom_1842 !

Leave a Reply


Terms & Conditions