How can I implement this change in CSS using JQuery? | XM Community
Skip to main content

image.pngI am able to change the CSS in the LnF, but now I need to implement this using JQuery since I have to this for a certain logic only. I need to make the font size larger for the selected NPS score (as shown above). Here's the current script that I have.

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

var colors = ["#E43E3D","#EA484D","#EC654E","#EF874C","#F3A74C","#F8C43D","#E1C63B","#C1CC36","#9FCD35","#7FCD31","#5AAF2B"];
  let pcArray = ="India","Portugal","United Kingdom","Ireland","Norway","Belgium"];

for(let x=0; x < pcArray.length; x++){

if("${e://Field/PrimaryCountry}"==pcArrayax]){
jQuery("#"+this.questionId+" label.SingleAnswer").each(function(i) { jQuery(this).css("background",colorsri]); });
}
}

});

Hi there, I was able to get this to work okay on my end by adding the below JS to the OnReady portion of the question. Update the 18px in the first line to whatever your original font size is. Adapted from here.
this.questionclick = function(event,element)
 {
 jQuery('.Skin label.SingleAnswer').attr('style','font-size:18px !important');
 jQuery('.Skin label.SingleAnswer.q-checked.q-focused').attr('style','font-size:36px !important');
 }

Tom_1842 I did include it on the OnReady but what happened is that the background colors was removed.
image.pngimage.png

reoolivarez Sorry about that! Try using the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var colors = ["#E43E3D","#EA484D","#EC654E","#EF874C","#F3A74C","#F8C43D","#E1C63B","#C1CC36","#9FCD35","#7FCD31","#5AAF2B"];
let pcArray = ["India","Portugal","United Kingdom","Ireland","Norway","Belgium"];
for(let x=0; x < pcArray.length; x++){
if("${e://Field/PrimaryCountry}"==pcArray[x]){
jQuery("#"+this.questionId+" label.SingleAnswer").each(function(i) { jQuery(this).css("background",colors[i]); });
}
}
});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
this.questionclick = function(event,element)
  {
 jQuery('.Skin label.SingleAnswer').css('font-size','18px');
 jQuery('.Skin label.SingleAnswer.q-checked').css('font-size','36px');
  }
});


Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/


});


Tom_1842 It is now working. Thank you so much.

Leave a Reply


Terms & Conditions