Hi, Sarah,
(moving the "other" field to another column in the array)
Well, this is easy to understand.
You see these lines in the javascript
Code:
// Move the text inputs
$('tr.answers-list', thisQuestion).each(function(i) {
var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
$('td.answer-item:last input[type="radio"]', this).css({
'position': 'absolute',
'left': '-9999em'
});
$('td.answer-item:last', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
});
Twice there is a 'td.answer-item:last'. So you can imagine here the column is defined (initially the last one)
But there are other "selectors" like ':first', ':odd', ..., and ':eq(x)'
As ':last' selects the last element, ':first' selects the first element, ':eq(x)' selects the xth element (starting with 0)
Here an overview
[url]
www.w3schools.com/jquery/jquery_ref_selectors.asp
[/url]
Therefore you only have to change the lines above to
Code:
// Move the text inputs
$('tr.answers-list', thisQuestion).each(function(i) {
var thisCode = $(this).attr('id').split('X')[2].split(q1ID)[1];
$('td.answer-item:eq(3) input[type="radio"]', this).css({
'position': 'absolute',
'left': '-9999em'
});
$('td.answer-item:eq(3)', this).removeClass('radio-item').addClass('inserted-text-item').append($('input[type="text"][id$="X'+q2ID+thisCode+'"]', nextQuestion));
});
Now something else.
1. Your first question
It is not very appealing to display all ten options right at the start.
a. You may display step by step, meaning, if one row is filled the next appears.
Thjis is easy to do by a subquestion relevance
'!is_empty(akteur_SQ001)' in the second subquestion
'!is_empty(akteur_SQ002)' in the third subquestion
...
b. There is a really nice way to display with buttons to add a new akteur.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
// A function to add or remove rows of a multiple-short-text question
function varLengthArray(qID) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Akteur hinzufügen';
var removeContent = '[-] Akteur löschen';
// Insert the buttons
$('#question'+qID+' .subquestion-list').append('<div id="addButton'+qID+'" class="control-button btn btn-primary">'+addContent+'</div><div id="removeButton'+qID+'" class="control-button btn btn-danger">'+removeContent+'</div>');
// Style the elements - you can modify here if you wish
$('#question'+qID+' .control-button').css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();
// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});
// Function to add a row, also shows the Remove element and hides the
function addRow(qID) {
$('#question'+qID+' .answer-item:hidden:first').show();
$('div#removeButton'+qID).show();
if ($('#question'+qID+' .answer-item:visible').length == $('#question'+qID+' .answer-item').length) {
$('div#addButton'+qID).hide();
}
}
// Function to remove a row and clear the input value
function removeRow(qID) {
$('#question'+qID+' .answer-item:visible:last').hide();
$('#question'+qID+' .answer-item:hidden input[type="text"]').each(function(i) {
$(this).val('').trigger('keyup');
});
$( 'div#addButton'+qID ).show();
if ($('#question'+qID+' .answer-item:visible').length == 1) {
$('div#removeButton'+qID).hide();
}
}
// Just some initialization stuff
// Initially hide all except first row or any rows with populated inputs
$('#question'+qID+' .answer-item input[type="text"]:not(:first)').each(function(i) {
if($.trim($(this).val()) == '') {
$(this).closest('.answer-item').hide();
}
if ($('#question'+qID+' .answer-item:visible').length > 1) {
// $('div#removeButton'+qID).show();
}
});
}
// Call the function with a question ID
varLengthArray({QID});
});
</script>
2. This question
a. You see there are different widths of the columns.
Done by these small snippets (javascript and css)
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
});
</script>
Code:
<style type="text/css">.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column-0 { width: 22%; }
.custom-array table.subquestion-list thead .column-1 { width: 12%; }
.custom-array table.subquestion-list thead .column-2 { width: 12%; }
.custom-array table.subquestion-list thead .column-3 { width: 12%; }
.custom-array table.subquestion-list thead .column-4 { width: 30%; }
.custom-array table.subquestion-list thead .column-5 { width: 12%; }
</style>
b. In my opinion this is a multipunch question.
If you may select both 'Wohnraum' and 'Klima' (by clicking 'both') there is no reason that you couldn't select both 'Klima' and some 'other'.
But this is not possible because you use a normal array.
3. Frage 11.
If there was a contact anybody is able to answer this question about intensity.
Without contact you click the exclusive option "no contact".
No need to explain 'if no contact, please, leave empty'.
4. General you should consider to use '<wbr># instaed of your hard coded linefeeds which destroy the text on smaller devices
Now you got a lot of ideas.
Last but not least:
Here the sample survey
Joffm
