​@OBh, 

Since the choice labels have a for attribute, you can hide the question body and move the choice labels into your table. Make your choices vertical and give the cells in the last row of your table the class “lastRow”, then:

Qualtrics.SurveyEngine.addOnReady(function() {
	var q = jQuery(this.questionContainer);
	q.find(".QuestionBody").hide();
	var labels = q.find("label.SingleAnswer").css("text-align","center");
	q.find(".lastRow").each(function(i) { jQuery(this).append(labels[i]); });
});

Thank you for the response. ! I am having one trouble. In the data, it is all coming as “Purchase”. I need to have “Purchase” in all as my advisor told me to replace “Purchase Option X” with “Purchase” to make it realistic. So, is there anyway to record the choices distinctly in the data and analysis tab?

Additionally, it is possible to show the “Purchase” as buttons of some color? Currently the question is coming as follows:

 

It works for me, so I’m not sure what you are looking at. A simple test is to pipe the selected recode on the next page.

The for attribute links the label element to the input radio element, so that when the label is clicked the radio button is checked.

​@TomG yes I was making an error in looking. So I edited my answer, because the choice is visible. Thanks for your response. Could you help me with the two small fixes?

Button: I was trying with the following code in the answer choices in the multiple choice answer. But now I am unable to click it to get a response. 

<button id="myButton" >Purchase</button>

In Classic layout the label acts as a button, so you don’t need to add another one. If you are adding it for some other purpose, then stating the purpose may help me suggest an alternative.

No it is for the same purpose i.e., record a response. So my layout is “classic”.  Something to make it look different and not the same skin color in the table. Make it come out. 

[Also, any suggestion on how to differentiate choices in the data and analysis tab? They are all coming as “Purchase” ?]

It looks like below:

I was trying to make it look like a button. I tried the following but the buttons are just functioning like a picture. 

You can use css to style the buttons. Include your table cell class (.lastRow) in the rule. For example:

.Skin .lastRow label.SingleAnswer { background-color:lightblue; }

To change how the choice appear in Data & Analysis, in the question editor select ‘Recode Values’, check ‘Variable naming’ and change them to whatever you want appear in Data & Analysis.

Thank you for your response. I tried your suggestion and it changed the color of the button. But it is still occupying the whole cell of the table. I wanted to create some while space around it, to make it look like a button. Something similar to the below. 

Is that possible? 

“To change how the choice appear in Data & Analysis, in the question editor select ‘Recode Values’, check ‘Variable naming’ and change them to whatever you want appear in Data & Analysis.” => This worked perfectly. Thank you so much. 

Changing the background color was just an example. Using the same rule  you can apply other styles, like:

.Skin .lastRow label.SingleAnswer { 
	margin: 2px 5px;
	border: 1px solid;
}

Thank you so much. It was very helpful.