how to change option button into images(thumbs-up) | XM Community
Skip to main content
Question

how to change option button into images(thumbs-up)

  • March 11, 2024
  • 15 replies
  • 445 views

Forum|alt.badge.img+2

Dear all,

I would like to design a study that ask people to thumbs-up/down a message, so the logic of this is the same as multiple choices, but I just want to make the option button as an image- thumbs-up image. I will capture what I want to examine in the following: 

I'm wondering if anyone are good at this or can provide some suggestions? thanks so much!

15 replies

praveengeorgeix
QPN Level 4 ●●●●
Forum|alt.badge.img+11
  • QPN Level 4 ●●●●
  • 99 replies
  • March 11, 2024

you can replace the answer buttons with images. it wont give the exact feel of a custom thumps up button ibn the shape.


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 11, 2024

you can replace the answer buttons with images. it wont give the exact feel of a custom thumps up button ibn the shape.

 

thank you so much for your reply! that was what I initially think about, and then I found the icon is not the same and resembles the twitter features(likes), so I'm wondering whether some scripts may help on making this better. 

 


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • 306 replies
  • March 12, 2024

Hi @biyingwudanny , try using different icons available on google.

Something like - Icon 1 or Icon 2


praveengeorgeix
QPN Level 4 ●●●●
Forum|alt.badge.img+11
  • QPN Level 4 ●●●●
  • 99 replies
  • March 12, 2024

@biyingwudanny there is a way of using fa-fa fonts from awesome fonts using css inside javascript. But its a log process to try it out and not sure whether it will work.


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

Hi @biyingwudanny , try using different icons available on google.

Something like - Icon 1 or Icon 2

thank you for your kind response, I tried some! and I realised the problem may not be the icon(I actually use the format of png in the picture) but the setting of the “option button”, the grey part behind the thumbs-up cannot be eliminated.


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • 306 replies
  • March 12, 2024

Hi @biyingwudanny try using Modern layout, this will eliminate the grey part. Change it from the survey ‘look & feel section’.


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

@biyingwudanny there is a way of using fa-fa fonts from awesome fonts using css inside javascript. But its a log process to try it out and not sure whether it will work.

thanks for recommendation! as I'm not that familiar with javascript in web, I did not successfully insert, not sure why. but the reference is useful

https://fontawesome.com/icons/thumbs-up?f=classic&s=solid


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

Hi @biyingwudanny try using Modern layout, this will eliminate the grey part. Change it from the survey ‘look & feel section’.

thank you! and the modern style becomes like this 🤔

 


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • 306 replies
  • March 12, 2024

@biyingwudanny can you apply the below code in the question Javascript. It will hide the radio buttons/small squares.

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId+" .q-radio").css("visibility","hidden");
});


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

@biyingwudanny can you apply the below code in the question Javascript. It will hide the radio buttons/small squares.

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#"+this.questionId+" .q-radio").css("visibility","hidden");
});

thank you! but for some reason it’s not working and nothing changes. may I wonder If others working?


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • 306 replies
  • March 12, 2024

@biyingwudanny which layout are you using?


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

@biyingwudanny which layout are you using?

still modern one?


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • 306 replies
  • March 12, 2024

@biyingwudanny yes with the Modern layout and the JS code, it worked for me.

 


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

@biyingwudanny yes with the Modern layout and the JS code, it worked for me.

o no! that’s weird! sorry for asking again, 

Or should I replace "+this.questionId+" as "+Q212+". my question ID is Q212


Forum|alt.badge.img+2
  • Author
  • Level 1 ●
  • 8 replies
  • March 12, 2024

@biyingwudanny yes with the Modern layout and the JS code, it worked for me.

o no! that’s weird! sorry for asking again, 

Or should I replace "+this.questionId+" as "+Q212+". my question ID is Q212

 

thank you omkarkewat! to specify, the code is recognised by the system, but for some reason not reflecting in the radios. I'm wondering if I didn’t do something right?