<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-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: 'January', 
        2: 'February', 
        3: 'March', 
        4: 'April', 
        5: 'May', 
        6: 'June', 
        7: 'July', 
        8: 'August', 
        9: 'September', 
        10: 'October', 
        11: 'November', 
        12: 'December'
      };
      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
    $('.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);
      });
    });
 
    // 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="">-- Please Choose --</option> \
              <option value="Not started">Not started</option> \
              <option value="In progress">In progress</option> \
              <option value="Completed">Completed</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: 'January', 
        2: 'February', 
        3: 'March', 
        4: 'April', 
        5: 'May', 
        6: 'June', 
        7: 'July', 
        8: 'August', 
        9: 'September', 
        10: 'October', 
        11: 'November', 
        12: 'December'
      };
      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>