Okay, I think it would be easier to use a small jQuery plugin and some CSS to move the drop-downs around.
1) For each group of drop-downs, create a text-display question for the group title followed by the six drop-downs and a long-text.
1) Make a new copy of your template and add the following to the end of template.js. This plugin will:
- find a text-display question
- hide the following drop-downs questions
- move the drop-downs into a table in the text-display question
- add column titles that you define in the plugin call (see below)
// A custom plugin to display several dropdowns side-by-side
// Author - Tony Partner
(function( $ ){
$.fn.alignDropdowns = function(options) {
// The defaults, extended and modified with any passed in the function call - no defaults for this plugin
var opts = $.extend( {
//xx: '';
}, options);
return this.each(function(i) {
if($(this).hasClass('boilerplate')) {
var thisQuestion = $(this);
var ddGroup = (i);
var bID = $(thisQuestion).attr('id').split('question')[1];
// Add some classes
$(thisQuestion).addClass('alignedDropdowns');
$(thisQuestion).nextAll('.list-dropdown').each(function(i){
if(i < opts.dropdownCount) {
$(this).addClass('dd-group-'+ddGroup+' dd-'+i+'');
}
else {
return false;
}
});
$(thisQuestion).nextAll('.text-long:eq(0)').addClass('dd-long-text dd-long-text-'+ddGroup+'');
// Hide the dropdown questions
$('.dd-group-'+ddGroup).hide();
// Insert a table for the dropdowns
$('input:hidden[id$="X'+bID+'"]').parent().append('<table class="ddTable ddTable-'+bID+'"><thead><tr></tr></thead><tbody><tr></tr></tbody></table>');
// Insert the column labels
$(opts.columnLabels).each(function(i){
$('table.ddTable-'+bID+' thead tr').append('<th>'+this+'</th>');
});
// Insert the dropdowns
$('.dd-group-'+ddGroup+' select').each(function(i, el){
$('table.ddTable-'+bID+' tbody tr').append('<td></td>');
$('table.ddTable-'+bID+' tbody td:eq('+i+')').append(el);
});
// Equalize column widths
$('table.ddTable-'+bID+' th, table.ddTable-'+bID+' td').css({ 'width':100/opts.dropdownCount+'%' });
}
});
};
})( jQuery );
2) Add the following script to the source of a question on the page. This will call the plugin with two parameters:
- the number of drop-downs in each group (6, in this case)
- a comma-separated list of column titles
This example applies the plugin to all text-displays on a page but could be used for specific questions.
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Apply the "alignDropdowns" plugin to all text-display questions on the page
$('.boilerplate').alignDropdowns({
columnLabels: [
'Pressure',
'Impact distance',
'Functional Impact',
'Resistance',
'Recovery time',
'Confidence'
],
dropdownCount: 6
});
});
</script>
3) Add the following styles to the end of template.css (these are for the default template):
/** alignDropdowns plugin styles **/
table.innerframe {
min-width: 850px;
}
.question-wrapper {
width: 95%;
}
.ddTable {
border-collapse: collapse;
width: 100%;
}
.ddTable th,
.ddTable td {
text-align: center;
padding: 3px;
}
.ddTable th {
font-weight: bold;
font-size: 90%;
}
.ddTable td select {
width: 100%;
}
Here is a sample survey with the plugin call in the source of the first question in the first group.
And a screenshot:
