<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Assign column-specific classes $('table.subquestion-list tr', thisQuestion).each(function(i) { $('> *:gt(0)', this).each(function(i){ $(this).addClass('column-'+(i+1)); $(this).attr('data-column', i+1); }); }); // Hide the text inputs in columns 2 $('.column-2 input[type="text"]', thisQuestion).hide(); // Loop through all column-2 inputs $('.answer-item.column-2 input[type="text"]', thisQuestion).each(function(i) { var thisID = $(this).attr('id'); var thisValue = $(this).val(); // Insert the radios $(this).parent().addClass('radio').append('<span class="inserted-radio-wrapper">\ <input id="'+thisID+'-Y" class="radio" value="Y" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-Y">Yes</label>\ </span>\ <span class="inserted-radio-wrapper">\ <input id="'+thisID+'-N" class="radio" value="N" name="'+thisID.replace(/answer/, '')+'_radio" type="radio">\ <label class="control-label radio-label" for="'+thisID+'-N">No</label>\ </span>'); // Initial radio states $(this).closest('td').find('input[type="radio"][value="'+thisValue+'"]').prop('checked', true); }); // Listener on the radios $('.answer-item.column-2 input[type="radio"]', thisQuestion).on('click', function() { var thisInput = $(this).closest('td').find('input[type="text"]'); $(this).closest('td').find('input[type="text"]').val($(this).val()); checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text'); }); // Some clean-up styles for the radios (could be placed in template.css) $('thead th, .answer-item.column-2', thisQuestion).css({ 'text-align': 'center' }); $('.answer-item.column-2 .inserted-radio-wrapper', thisQuestion).css({ 'display': 'inline-block', 'margin': '0px 0px 0 0px', 'padding-left':'20px' }); $('.answer-item.column-2 label', thisQuestion).css({ 'padding': '0' }); $('.answer-item.column-2 .radio-label', thisQuestion).css({ 'padding-left': '3px', 'margin-right': '3px', 'padding':'0px 0px 0px 3px', 'margin-left':'10px' }); // Fix up the row background colours var rowIndex = 0; $('table.subquestion-list tbody tr', thisQuestion).each(function(i){ rowIndex ++; $(this).removeClass('array1, array2'); if(rowIndex % 2 == 0) { $(this).addClass('array1'); } else { $(this).addClass('array2'); } }); }); </script>

<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var thisQuestion = $('#question{QID}'); // Insert selects into last column $('.answer-item:last-child', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">Please choose...</option>\ <option value="1">Option 1</option>\ <option value="2">Option 2</option>\ <option value="2">Option 3</option>\ <option value="2">Option 4</option>\ </select>'); // Listeners $('.inserted-select', thisQuestion).on('change', function(i) { var thistextInput = $(this).closest('.answer-item').find('input:text'); if($(this).val() != '') { $(thistextInput).val($.trim($('option:selected', this).text())).trigger('change'); } else { $(this).closest('.answer-item').find('input:text').val('').trigger('change'); } checkconditions($(thistextInput).attr('value'), $(thistextInput).attr('name'), $(thistextInput).attr('type')); }); // Returning to page $('.with-select input:text', thisQuestion).each(function(i) { var thisCell = $(this).closest('.answer-item'); var inputText = $.trim($(this).val()); var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val(); $('select.inserted-select', thisCell).val(selectval); }); // Clean-up styles $('select.inserted-select', thisQuestion).css({ 'max-width': '100%' }); $('.with-select input:text', thisQuestion).css({ 'position': 'absolute', 'left': '-9999em' }); }); </script>

<script type="text/javascript" charset="utf-8"> $(document).ready(function() { var thisQuestion = $('#question{QID}'); // Insert selects into last column $('.answer-item:nth-child(2)', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\ <option value="">Please choose...</option>\ <option value="1">Option 1</option>\ <option value="2">Option 2</option>\ <option value="2">Option 3</option>\ <option value="2">Option 4</option>\ </select>'); // Listeners $('.inserted-select', thisQuestion).on('change', function(i) { var thistextInput = $(this).closest('.answer-item').find('input:text'); if($(this).val() != '') { $(thistextInput).val($.trim($('option:selected', this).text())).trigger('change'); } else { $(this).closest('.answer-item').find('input:text').val('').trigger('change'); } checkconditions($(thistextInput).attr('value'), $(thistextInput).attr('name'), $(thistextInput).attr('type')); }); // Returning to page $('.with-select input:text', thisQuestion).each(function(i) { var thisCell = $(this).closest('.answer-item'); var inputText = $.trim($(this).val()); var selectval = $('select.inserted-select option', thisCell).filter(function () { return $(this).html() == inputText; }).val(); $('select.inserted-select', thisCell).val(selectval); }); // Clean-up styles $('select.inserted-select', thisQuestion).css({ 'max-width': '100%' }); $('.with-select input:text', thisQuestion).css({ 'position': 'absolute', 'left': '-9999em' }); }); </script>