How to customize the question and answer option alignment?

The easiest way would be to emulate the online delivery platform in a three choice MC question text's html, hide the choice structure, and add event handlers to the radio buttons to select the corresponding MC choice when clicked.

Thanks for your reply Tom. Still this look complicated for me. Because, I wish to show both of them in the same page and it should not be activated by any clicks. I would like to have an image on the left and choice on the right like the image. People should be able to click and provide their response.

Maybe I missed the point, but I assumed the three choices were two-day shipping, expedited shipping and free shipping and clicking one of those choices would answer the question. That's what the solution I outlined would do.

Since I am not well versed with Javascript. I didn't get your answer. I shall play around with it. Thanks for your time Tom.

https://www.qualtrics.com/community/discussion/comment/33063#Comment_33063Dear Tom,
I performed the task based on your suggestions. I have hid the choice structure using JavaScript and then I have shown the choices (defined by HTML). However, the radio buttons are not shown in the survey, do I miss something?
 

Situation text

The theme CSS is probably hiding the radio buttons since they normally aren't shown in modern Qualtrics themes. You can remedy that by adding a class to your radio inputs then adding a CSS rule to display that class as appropriate.

https://www.qualtrics.com/community/discussion/comment/33121#Comment_33121Hi Tom, sorry to bother you. I added class to the radio buttons and defined the class in CSS style sheet. However, still the problem persist!

.test {
display: inline !important;
}
 

https://www.qualtrics.com/community/discussion/comment/33063#Comment_33063Dear Tom, I could not fix the event handler part. I have set value for the HTML radio button (that I created) and trying to check the radio button of the MC choice structure using the HTML radio button value.
I used this Java Script to test the value of the HTML radio button. It is working fine, now how should I use this value to get the MC choice structure of the question selected using event handlers?
Here is my code:
Qualtrics.SurveyEngine.addOnReady (function() {
$("input[name$='choice']").change(function() {
    var test = $(this).val();
if(test == 1) {
      alert('yes');
//your code to select MC option 1
        } 
   else if (test == 2){
   alert('no');  
//your code to select MC option 2
   }
});
 });

In Qualtrics $ is prototypejs, not jQuery. Change $ to jQuery.

I tried my best but I failed! What is the issue with my jQuery code to

Qualtrics.SurveyEngine.addOnChange (function() {
jQuery("input[name$='choice']").change(function() {
//choice is from the HTML
    var test = jQuery(this).val();
if(test == 1) {
      alert('yes');
       jQuery('input[name=QR~QID141~8]:checked', '.ChoiceStructure').val() //this one does not work but alert works!
        } 
   else if (test == 2){
   alert('no');
      jQuery('input[name=QR~QID141~9]:checked', '.ChoiceStructure').val() ///this one does not work but alert works!
   }
});
 });

You have a number of issues: wrong selectors, val() is wrong function, and tildes need to be escaped. Try:
if(test == 1) {
  jQuery('.ChoiceStructure input').first().prop("checked",true);
} 
else if (test == 2) {
  jQuery('.ChoiceStructure input').last().prop("checked",true);
}

Thanks Tom. The above code did work. However, I fixed it with this code.

Qualtrics.SurveyEngine.addOnReady (function() {

jQuery("input[name$='choice']").click(function() {
    var test = jQuery(this).val();
    jQuery("div.image").hide();
    jQuery("#carbon"+test).show();
   if(test == 1) {  
radiobtn = document.getElementById("QR~QID141~8");
       radiobtn.checked = true;
        } 
   else if (test == 2){
radiobtn = document.getElementById("QR~QID141~9");
       radiobtn.checked = true;
    }

});
  });