I think for #2, in order to maintain vertical alignment, you will need to insert a table and move the answer elements into table rows.
Wrap the French and English portions of the sub-question labels in <span> elements with classes "label-fr" and "label-en"
Add this script to the question text:
![]()
Sample survey attached:
Wrap the French and English portions of the sub-question labels in <span> elements with classes "label-fr" and "label-en"
Add this script to the question text:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Insert a table
$('.subquestion-list', thisQuestion).after('<table class="bilingual-list" />');
// Insert table rows
$('.question-item', thisQuestion).each(function(i) {
$('.bilingual-list', thisQuestion).append('<tr class="inserted-row-'+i+'">\
<td class="inserted-label-fr" />\
<td class="inserted-answer" />\
<td class="inserted-label-en" />\
</tr>');
$('.inserted-row-'+i+' .inserted-answer', thisQuestion).append(this);
$('.inserted-row-'+i+' .inserted-label-fr', thisQuestion).append($('.label-fr', this));
$('.inserted-row-'+i+' .inserted-label-en', thisQuestion).append($('.label-en', this));
});
// Some styling
$('table.bilingual-list', thisQuestion).css({
'width': 'auto'
});
$('table.bilingual-list td', thisQuestion).css({
'padding-top': '5px',
'padding-bottom': '5px'
});
$('td.inserted-answer .question-item', thisQuestion).css({
'margin': '0',
'padding-left': '40px'
});
$('td.inserted-answer .label-clickable', thisQuestion).css({
'display': 'none'
});
});
</script>
Sample survey attached: