<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>

<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>