<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);
            });
        });
      
          // Insert the sliders
        $('.answer-item.column-1 input[type="text"]', thisQuestion).each(function(i) {
            $(this).closest('td').addClass('with-slider');
            var thisValue = $(this).val();
 
            $(this).bootstrapSlider({
                'min': -5,
                'max': 5,
                'step': 0.1,
                'range': false,
                'value': Number(thisValue),
                'tooltip': 'always'
            });
 
            // Initialization stuff
            if(thisValue == '') {
                $(this).val('');
                $(this).closest('td').find('.tooltip').hide();
            }
            else {
                updateCallOut($(this).closest('td'));
            }
        });
 
        // A function to update the slider callout
        function updateCallOut(el) {
            var thisTooltip = $(el).find('.tooltip');
            //$('.tooltip-inner', thisTooltip).text(callOutText);
            thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
        }
 
        // Listener on sliders
        $('td.with-slider .slider').on('mousedown', function(event, ui) {
            updateCallOut($(this).closest('td'));
        });            
        $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
            updateCallOut($(this).closest('td'));
            checkconditions($(this).val(), $(this).attr('name'), 'text');
        });
 
        // Listener on resizing (override the bootstrap callout behaviour)
        $(window).resize(function() {
            $('td.with-slider', thisQuestion).each(function(i) {
                if($('input[type="text"]', this).val() != '') {
                    updateCallOut(this);
                }
            });
        });
        
        // Define the slider left/right labels
        var sliderLeftLabels = ['-5', '-5','-5','-5','-5'];
        var sliderRightLabels = ['+5', '+5', '+5', '+5', '+5'];
        
        // Insert slider left/right labels
        $('td.with-slider', thisQuestion).append('<div class="left-text"></div><div class="right-text"></div>');
        $('.left-text', thisQuestion).each(function(i) {
            $(this).text(sliderLeftLabels[i]);
        });
        $('.right-text', thisQuestion).each(function(i) {
            $(this).text(sliderRightLabels[i]);
        });
 
        // Some clean-up styles for the sliders (could be placed in template.css)
        $('thead th, .answer-item.column-1', thisQuestion).css({
            'text-align': 'center'
        });
        $('.slider.slider-horizontal', thisQuestion).css({
            'margin': '1.7em auto 1em'
        });
        $('.slider-selection', thisQuestion).css({
            'background': 'transparent none',
            'box-shadow': 'none'
        });
        $('.slider-handle', thisQuestion).css({
            'top': '-4px'
        });
        $('.left-text, .right-text', thisQuestion).css({
            'margin-top': '-0.5em',
            'font-size': '90%'
        });
        $('.left-text', thisQuestion).css({
            'float': 'left'
        });
        $('.right-text', thisQuestion).css({
            'float': 'right'
        });
 
        // 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">Ja</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">Nein</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': '25px 10px 0 20px'
        });
        $('.answer-item.column-2 label', thisQuestion).css({
            'padding': '0'
        });
        $('.answer-item.column-2 .radio-label', thisQuestion).css({
            'padding-left': '3px',
            'margin-right': '3px'
        });
        
        // Randomize the array rows
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }
        var tr = $('tr.subquestion-list', thisQuestion).detach().toArray();
        shuffleArray(tr);
        $.each(tr, function(i, el) {
            $('table.subquestion-list tbody', thisQuestion).first().append(el);
        });
            
        // 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(){    
 
        // 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();
 
        // Define the select element (dropdown)
        var select1 = '<select class="inserted-select"> \
                            <option value="">-- Bitte, wählen --</option> \
                            <option value="Europa">Europa</option> \
                            <option value="Afrika">Afrika</option> \
                            <option value="Asien">Asien</option> \
                            <option value="Amerika">Amerika</option> \
                            <option value="Australien">Australien</option> \
                        </select>';
 
        // Insert the select elements into column 2
        $('.answer-item.column-2').append(select1);
 
        // Initial dropdown values in column 2 (if the question has already been answered)
        $('.answer-item.column-2 input[type="text"]').each(function(i){
            if($.trim($(this).val()) != '') {
                $(this).closest('td').find('.inserted-select').val($.trim($(this).val()));
            }
        });
 
        // Listener on the dropdowns (insert selected values into hidden text input)
        $('.inserted-select').change(function() {
            var thisInput = $(this).closest('td').find('input[type="text"]');
            $(thisInput).val($(this).val());
            checkconditions($(thisInput).val(), $(thisInput).attr('name'), 'text');
        });
        
        
        // Insert the sliders
        $('.answer-item.column-3 input[type="text"]', thisQuestion).each(function(i) {
            $(this).closest('td').addClass('with-slider');
            var thisValue = $(this).val();
            var thisValueArr = thisValue.split(',');
            var sliderValues = [];
            if(thisValueArr.length > 1) {
                $(thisValueArr).each(function(i) {
                    sliderValues.push(Number(this));
                }); 
            }
            else {
                sliderValues = [1, 12];
            }
            
            $(this).bootstrapSlider({
                'min': 1,
                'max': 12,
                'step': 1,
                'range': true,
                'value': sliderValues,
                'tooltip': 'always'
            });
            
            // Initialization stuff
            if(thisValue == '') {
                $(this).val('');
                $(this).closest('td').find('.tooltip').hide();
            }
            else {
                updateCallOut($(this).closest('td'));
            }
        });
            
        // A function to insert months in the slider callout
        function updateCallOut(el) {
            var thisTooltip = $(el).find('.tooltip');
            var thisValueArr = $(el).find('input[type="text"]').val().split(',');
            var months = {
                1: 'Januar', 
                2: 'Februar', 
                3: 'März', 
                4: 'April', 
                5: 'Mai', 
                6: 'Juni', 
                7: 'Juli', 
                8: 'August', 
                9: 'September', 
                10: 'Oktober', 
                11: 'November', 
                12: 'Dezember'
            };
            var startMonth = months[thisValueArr[0]];
            var endMonth = months[thisValueArr[1]];
            var callOutText = startMonth;
            if(startMonth != endMonth) {
                callOutText = startMonth+'-'+endMonth;
            }
            $('.tooltip-inner', thisTooltip).text(callOutText);
            thisTooltip.show().css('margin-left', '-'+(thisTooltip.width()/2)+'px');
        }
        
        // Listener on sliders
        $('td.with-slider .slider').on('mousedown', function(event, ui) {
            updateCallOut($(this).closest('td'));
        });            
        $('td.with-slider input[type="text"]', thisQuestion).on('slide slideStop', function(event, ui) {
            updateCallOut($(this).closest('td'));
            checkconditions($(this).val(), $(this).attr('name'), 'text');
        });
        
        // Listener on resizing (override the bootstrap callout behaviour)
        $(window).resize(function() {
            $('td.with-slider', thisQuestion).each(function(i) {
                if($('input[type="text"]', this).val() != '') {
                    updateCallOut(this);
                }
            });
        });
        
        // Some clean-up styles (could be placed in template.css
        $('select', thisQuestion).css({
            'border': '2px solid #dce4ec',
            'padding': '0.7em',
            'border-radius': '4px'
        });
        $('.slider.slider-horizontal', thisQuestion).css({
            'margin': '1.7em auto 1em'
        });
        $('.slider-handle', thisQuestion).css({
            'top': '-4px'
        });
    });
</script>