Hide radio button for one multiple choice option only in one block | XM Community
Skip to main content

Hello,

I have a task for which I need to present 4 images next to each other horizontally, under the question text. I did this by writing the question text, and inserting the 4 images as multiple choice question answer options. The leftmost (first) option is not actually an option, but is a ‘target’ the other three need to be compared to. I want to hide the first radio button for these questions so that it is obvious that image is not an answer option. I tried CSS, however I cannot apply that to just one block of my survey. I tried JavaScript, however I have not been successful. I would appreciate any insight into this!

Thank you!

Hi ​@baharsener ,

 

You can achieve this by using the below Javascript and CSS.

JS:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
    boxes = document.querySelectorAll("eclass*=radio]");
    boxes>0].hide();
    boxesr1].disable();

});

 

CSS: (Question Text HTML View):

<style type="text/css">#QID54-2-label {
    padding-top: 20px;
    padding-bottom: 20px;
    background: white;}
</style>

 

Change the QID, as per the order of the options you have provided.

 


@Akash B A thank you so much for your response! When I use the first (JavaScript code) I can disable the radio, however it still displays as a radio. I also tried the CSS, but my goal is not to hide the question text (there is no text, just an image) only the radio button! Do you know how I may be able to fully hide it? 


@baharsener Use this code, change the QID to yours. (only work with flat and morden layouts)

Qualtrics.SurveyEngine.addOnload(function () {
const radioLabel = document.querySelector('labelbfor="QR~QID6~2"].q-radio');
boxes = document.querySelectorAll("lclass*=radio]");
boxesx0].hide();
boxesx1].disable();
radioLabel.style.visibility = 'hidden';
});

Let me know if it work


Hi ​@baharsener ,

 

Apologies if I was not clear. The CSS is for removing the background of the radio button not for the text. So, the CSS provided, paste it in HTML View and change the QID according to the options.

 

Also the layout which I have used is Classic.

 

 

 

Result:

 

Hope this helps.


Hi ​@Akash B A ​@Nam Nguyen !

Thank you both for your willingness to help me! Unfortunately I am still having the issue, I am attaching screenshots to double-check what I am doing is correct!

The steps I took:

First, I downloaded my data to see the question ID’s, the first question I have has QID320. I noticed that in your example code snippets, these ID’s had additional numbers next to them, so I went to preview the questions, and right clicked on the question to ‘inspect’ and look at the page code. I saw that the question was labelled as “QR~QID320~16”

I tried both solutions with and without this additional number, however, it did not work (my theme is ‘flat’). I am attaching screenshots just to make sure that I tried to implement this correctly. 

 

  • HTML CSS solution: (without additional number)
  • HTML CSS solution (with additional number):
  • JavaScript solution (without additional number):
  • JavaScript solution (with additional number):

     

I tried to match the syntax in the example screenshots you have provided, however I am not entirely sure what these additional numbers mean, which is why I tried multiple different ways, however my radio button is still visible. I appreciate any insight into this!

Thank you,

Bahar


  • JavaScript solution (with additional number):

     

@baharsener You made a typo, it’s style not sty;e . Just copy/paste my code in the previous response and change the ID and yes you should inspect them to find the right element.

Scroll down a bit and you will see the radio button is what’s being targeted

 


Leave a Reply