Hi there, I'm trying to design a choice experiment in limesurvey. I'd like to fulfill the following table in the system, and the question type is multiple choice. I was wondering may I create those table directly in limesurvey?I saw some answers about how to design a choice question in forums (first paste the HTML table to display the question, and then the javascript part). The thing is the question type in the examples is Array, however the question type in my case is Multiple Choice.
  If it's not possible to insert a row in such a table, then using the Bootstrap Buttons as the question theme seems an alternative. However, it seems not able to set the 8 (the number of the options in my case) buttons in a row, which probably would cause inconvenience for respondents.I was wondering can I align every subquestion to the relevant column in the table in this case?Besides, the following picture shows an attempt in the system which is also attached, here the maximum number of buttons in a row was set as 4. 
 
 If anyone could provide some help or guidance that would be greatly appreciated. Thank you in advance!Xueting

You will need to insert an HTML table in the question text and move the radios into the table via JavaScript. Here is a similar solution - forums.limesurvey.org/forum/design-issue...-radio-button#185622 .

Thank you for your quick reply. I've seen the similar solution you provided, but as I mentioned, the question type was Array. I was wondering is there any example where the question type is Multiple Choice? Thank you in advance for any assistance provided!
Xueting

I forgot to mention the version is 3.25.21

Can you attach a small sample survey (.lss file) containing only that question?

Sure, please find in the attachment.
 
Unfortunately, there is a failure on moving the radios into the table via JavaScript. I was wondering what seems to be the problem?
It's my first time to use limesurvey and javascript, everything is new for me. Thank you for your patience!

The codes I used are:<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">              <tbody>                             <tr>                                           <td colspan="2" style="text-align: center;" width="10%"> </td>                                           <td bgcolor="#308737" style="text-align: center;" width="12%"><br /><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 1</strong></span><br /> </span></td>                                           <td bgcolor="#308737" style="text-align: center;" width="12%"><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 2</strong></span> </span></td>              <td bgcolor="#308737" style="text-align: center;" width="12%"><br /><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 3</strong></span><br /> </span></td>                                           <td bgcolor="#308737" style="text-align: center;" width="12%"><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 4</strong></span> </span></td>              <td bgcolor="#308737" style="text-align: center;" width="12%"><br /><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 5</strong></span><br /> </span></td>                                           <td bgcolor="#308737" style="text-align: center;" width="12%"><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 6</strong></span> </span></td>   <td bgcolor="#308737" style="text-align: center;" width="12%"><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>Option 7</strong></span> </span></td>                                           <td bgcolor="#308737" style="text-align: center;" width="12%"><span style="color:#ffffff;font-size:20px;"><span style="color:#ffffff;font-size:20px;"><strong>None of them</strong></span> </span></td>                             </tr>                             <tr>              <td bgcolor="#c1c1c1" colspan="2" style="text-align: center;"><span style="font-size:14px;">Attribute type</span>                                           </td>                                           </td>                                           <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 1</strong></span></td>                                         <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 2</strong></span></td>                         <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 3</strong></span></td>                      <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 4</strong></span></td>                                <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 5</strong></span></td>                       <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 6</strong></span></td>                           <td bgcolor="#f2f2f2" style="text-align: center;"><span style="font-size:20px;"><strong> Attribute 7</strong></span></td>                                           <td style="text-align: center;" width="37%"><span style="font-size:20px;"><span style="font-size:20px;"><strong> </strong></span> </span></td>                              </tr>                             <tr>                                           <td bgcolor="#c1c1c1" colspan="2" style="text-align: center;"><span style="font-size:14px;">Make a choice </span></td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                                           <td bgcolor="#308737" style="text-align: center;"> </td>                             </tr>              </tbody></table><script type="text/javascript" charset="utf-8">                                        $(document).on('ready pjax:scriptcomplete',function(){                              // Identify this question                             var thisQuestion = $('#question{QID}');                              // Move the radios                             $('.question-text table:eq(0) tr:last td:eq(1)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion));                             $('.question-text table:eq(0) tr:last td:eq(2)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion));                             $('.question-text table:eq(0) tr:last td:eq(3)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(2) *', thisQuestion));                            $('.question-text table:eq(0) tr:last td:eq(4)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(3) *', thisQuestion));                             $('.question-text table:eq(0) tr:last td:eq(5)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(4) *', thisQuestion));                             $('.question-text table:eq(0) tr:last td:eq(6)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(5) *', thisQuestion));                            $('.question-text table:eq(0) tr:last td:eq(7)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(6) *', thisQuestion));                             $('.question-text table:eq(0) tr:last td:eq(', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(7) *', thisQuestion));                              // Some classes for presentation                             $('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio');                             $('.question-text table:eq(0) .radio-item label', thisQuestion).show();                                                         // Click event on the table cells                             $('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) {                                           $('input:radio', this).trigger('click');                             });                             $('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) {                                           e.stopPropagation();                             });                                                         // Clean-up styles                             $('.answer-container', thisQuestion).hide();                             $('.question-text table:eq(0) .label-text', thisQuestion).remove();                             $('.question-text table:eq(0) .radio-text', thisQuestion).css({                                           'cursor': 'pointer'                             });                             $('td.radio', thisQuestion).css({                                           'display': 'table-cell',                                           'padding': '5px'                             });    });</script>

Hi,
1. There were no answer options in your array question
2. There were 8 subquestions, but there should be only one, the dummy subquestion.
3. Your javascript seemed to contain no linefeeds.
Therefore the first "//" commented out the whole rest of the script

If you structure your script 
add eight answer options
remove the subquestions except one

you will get this
 

 
Joffm

And your idea to use an array(numbers) with checkbox layout:
No javascript needed, only three lines of css

 
 

And after some improvements of your HTML code

 

To add:
This multiple option is not usable on smartphones.
But generally I think that this layout of a question isn't suitable to be answered on smartphones.

Joffm

Thank you Joffm for your quick reply! I really appreciate your help in resolving the problem.The thing is in array question, after following your suggestions, I got the table below, which looks different from what you showed, so I suppose there might be some problems in my script. (By the way, there were linefeeds in my javascript, but they were gone automatically in the reply area. Thus, my adjustments this time are only 1. adding eight answer options; 2. removing the subquestions except one.)
  Also, I was wondering in the Multiple Choice question, is it possible to move radios into the table? Since I suppose Array question probably will not work in my case where multiple choices allowed.And if it’s convenient, could you send me the lss. File you revised please?

Thank you in advance.
Xueting

Easy to understand.
1. In your original HTML of the table the column widths did not sum up to 100. And you see the width of the last column?
2. Obviously, you have to set the label width of the array to the same value as the first column of your table.

Joffm

Thank you for your prompt reply!
I'll check with the width issue then.
And what about my another question, I was wondering in the Multiple Choice question, is it possible to move radios into the table? Since I suppose Array question probably will not work in my case where multiple choices allowed.
Thank you in advance.
Xueting