Changing images for each specific "gauge" question | XM Community
Skip to main content

Hi all! 

 

I am using a code to change the image of the “gauge” type of questions, by using custom CSS. I managed to change the images for all question. However, I would like each question to have its own set of image. The code I am using is: 

 

.JFEScope .SS .TenGauge{width:240px;height:164px}

.JFEScope .SS .TenGauge.SS0{background:url(https://imgur.com/ODWWEsh.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS1{background:url(https://imgur.com/lcz92bR.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS2{background:url(https://imgur.com/Gd0Bker.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS3{background:url(https://imgur.com/nEHp80w.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS4{background:url(https://imgur.com/UZWzDV0.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS5{background:url(https://imgur.com/FgJCavw.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS6{background:url(https://imgur.com/0RFbGw8.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS7{background:url(https://imgur.com/SWVRosI.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS8{background:url(https://imgur.com/GLNNIx1.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS9{background:url(https://imgur.com/d2ubR5C.jpg) no-repeat;background-size: 240px 164px;}

.JFEScope .SS .TenGauge.SS10{background:url(https://imgur.com/okGdtVB.jpg) no-repeat;background-size: 240px 164px;}

 

 

How do I write it for it to apply to one specific question? Is it possible to do it with multiple specific questions? I’ve read somewhere that I had to add the ID question and I did, but it’s not working… 

 

Thanks in advance ! 

You could try applying the CSS via the ID instead of the class name. Try adding the below CSS to the Style section of the survey's Look & Feel, updating the QID with the QID from your survey:

.JFEScope .SS .TenGauge{
width:240px !important;
height:164px !important;
}

#Image_QR\~QID20\@0 {
background:url(https://imgur.com/ODWWEsh.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@1 {
background:url(https://imgur.com/lcz92bR.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@2 {
background:url(https://imgur.com/Gd0Bker.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@3 {
background:url(https://imgur.com/nEHp80w.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@4 {
background:url(https://imgur.com/UZWzDV0.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@5 {
background:url(https://imgur.com/FgJCavw.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@6 {
background:url(https://imgur.com/0RFbGw8.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@7 {
background:url(https://imgur.com/SWVRosI.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@8 {
background:url(https://imgur.com/GLNNIx1.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@9 {
background:url(https://imgur.com/d2ubR5C.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

#Image_QR\~QID20\@10 {
background:url(https://imgur.com/okGdtVB.jpg) no-repeat !important;
background-size: 240px 164px !important;
}

 

It works ! Thank you so much! 

Leave a Reply


Terms & Conditions