Javascript - problem with selected/focused button formatting | XM Community
Skip to main content

Hi,
I am using the Qualtrics classic layout, and have applied some Javascript to transform an NPS question from the standard square boxes, to some circles. It is also controlling the colour formatting of the response options (screenshot, and Javascript below).
The issue I am facing is the formatting of the response option when selected. (please note I have auto-advance switched on) I would like it to go deep purple when selected (#512698), however the background colour remains purple. If I click 'back' and return to the page, it is purple, just not when it is first selected and still focused. I thought the second line with q-checked.q-focused would solve this, but it is not.
NB: I also have the following code in the custom CSS, for formatting of the rest of the survey.
Any advice on how to solve would be much appreciated.
User: Javascript for NPS question:
Qualtrics.SurveyEngine.addOnload(function()
{
if("${e://Field/isMobile}"==0){
jQuery("#"+ this.questionId +" label.SingleAnswer").css({"border":"5px solid #FFFFFF","border-radius":"50%","color":"#FFFFFF","font-weight":"bold","background-color":"#CECECE"}) 


jQuery("#"+ this.questionId +" label.SingleAnswer.q-checked.q-focused").css({"border":"5px solid #FFFFFF","border-radius":"50%","color":"#FFFFFF","font-weight":"bold","background-color":"#CECECE"}) 
}

AussieQualtricsUser
Try including the below in custom CSS in look and feel
.Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked.q-focused, .Skin label.SingleAnswer.q-checked {
outline: #512698;
background: #512698;
}
Also, remove background color parameter from your jQuery and second line on q.focused entirely, as shown below.
jQuery("#"+ this.questionId +" label.SingleAnswer").css({"border":"5px solid #FFFFFF","border-radius":"50%","color":"#FFFFFF","font-weight":"bold","background-color":"#CECECE"}) ;
image.png
Hope it helps!

Hi Deepak,
Thanks very much for your answer, it's really appreciated.
This solved it. However I also needed to darken the colour of the unselected answers for this question (but not other questions in the survey) so I added some additional custom CSS to do this, and it's all worked together successfully.
Thanks again for your time looking at this!

Thank you so much Deepak for providing a custom code solution! Your constant impact on the community means the world to our team 🙂

Leave a Reply


Terms & Conditions