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

<p><strong>10. Wie wichtig sind die nachfolgenden General Management-Kompetenzen <u>bezogen auf Ihre aktuelle Führungsposition?</u></strong></p>
<script type="text/javascript" charset="utf-8">
 
// Script zuum Einfügen der Checkboxen anstelle der Textfelder und Einstellen der Exclusivität
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Column-specific classes
    $('tr.subquestion-list', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
    // Insert checkboxes
    $('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5', thisQuestion).addClass('custom-checkbox-item');
    $('.custom-checkbox-item', thisQuestion).each(function(i) {
      var thisID = $('input:text:eq(0)', this).attr('id');
      $('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
      if($('input:text:eq(0)', this).val() == 'Y') {
        $('input:checkbox:eq(0)', this).prop('checked', true);
      }
      $(this).removeClass('text-item').addClass('checkbox-item');
      $('input:text:eq(0)', this).remove();
    });
 
    // Identify exclusive items
    $('.answer-item.column-1, .answer-item.column-2, .answer-item.column-3, .answer-item.column-4, .answer-item.column-5', thisQuestion).addClass('exclusive-item');
 
    // Listeners for exclusive items
    $('.non-exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
      if($(this).is(':checked')) {
        $(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
      }
    });
    $('.non-exclusive-item input:text', thisQuestion).on('keyup change', function(e) {
      if($.trim($(this).val()) != '') {
        $(this).closest('tr.subquestion-list').find('.exclusive-item input:checkbox').prop('checked', false);
      }
    });
    $('.exclusive-item input:checkbox', thisQuestion).on('change', function(e) {
      if($(this).is(':checked')) {
        var thisItem = $(this).closest('.answer-item');
        $(this).closest('tr.subquestion-list').find('.answer-item').not(thisItem).find('input:checkbox').prop('checked', false);
        $(this).closest('tr.subquestion-list').find('input:text').val('');
      }
    });
  });
</script><script type="text/javascript" data-author="Tony Partner">
 
// Script zum Einfügen der Slider in die 6. Spalte der Matrix
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // The column to receive the sliders
    var sliderColumn = 6;
 
    var thisQuestion = $('#question{QID}');
    var nextQuestion = thisQuestion.nextAll('.numeric-multi:eq(0)');
 
     // Hide the next question
    nextQuestion.hide();
 
    //Remove the core array text inputs
    $('tr[id^="javatbd"] .answer-item:nth-child('+(sliderColumn+1)+') input', thisQuestion).remove();
 
 
    // Wait for the sliders to be inititialized
    $('input:text', nextQuestion).on('slideEnabled',function(){
 
      var thisItem = $(this).closest('li');
      var thisItemIndex = thisItem.index();
 
      // Move the slider and add some styling
      $('tr[id^="javatbd"]:eq('+thisItemIndex+') .answer-item:nth-child('+(sliderColumn+1)+')', thisQuestion).append($('.slider-container', thisItem));
      $('tr[id^="javatbd"]:eq('+thisItemIndex+') .slider-container', thisQuestion)
        .removeClass('col-xs-12 col-sm-12')
        .css({
          'display': 'block',
          'padding': '25px 10px 0 10px'
        });
    });
  });
</script><script type="text/javascript" charset="utf-8">
 
// Script zum Einfügen des zusätzlichen Headers
 
  $(document).on('ready pjax:scriptcomplete',function(){
    // Insert the column categories
    $('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
    $('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
      <td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
      <th class="answer-text inserted-header" colspan="5">Zum gegenwärtigen Zeitpunkt<br/>(heute)</th>\
      <th class="answer-text inserted-header" colspan="1"><em>Veränderung</em> der Bedeutung zukünftig<br/>(in 5-10 Jahren)</th>\
    </tr>');
  });
</script><script type="text/javascript">
 
// Script zum Einfügen des Zwischenzeilen
// Beachte: In dieser Matrix wird "subquestion-list" angesprochen, nicht "answers-list", wie in einer eindimensionalen Matrix
 
  $(document).ready(function() {
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Define the sub-heading text strings with tooltip text using the title attribute
    var subHeading1 = '<strong title="Your detailed information for Leadership">Leadership</strong>';
    var subHeading2 = '<strong title="Your detailed information for Academic Environment">Handeln im akademischen Umfeld</strong>';
    var subHeading3 = '<strong title="Your detailed information for Political Environment">Handeln im politischen Umfeld</strong>';
    var subHeading4 = '<strong title="Your detailed information for Strategic Design">Strategisches Gestaltungsvermögen</strong>';
    var subHeading5 = '<strong title="Your detailed information for Business Thinking">Betriebswirtschaftliches Denken und Handeln</strong>';
    var subHeading6 = '<strong title="Your detailed information for Organizational Change">Den organisatorischen Wandel gestalten</strong>';
 
    // Find out the number of columns in the question
    var columnsLength = $('tr.subquestion-list:eq(0) > *', thisQuestion).length;
 
    // Insert the subheadings before the specific subquestions
    $('tr.subquestion-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
    $('tr.subquestion-list:eq(5)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
    $('tr.subquestion-list:eq(10)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>');
    $('tr.subquestion-list:eq(15)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading4+'</th></tr>');
    $('tr.subquestion-list:eq(19)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading5+'</th></tr>');
    $('tr.subquestion-list:eq(24)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading6+'</th></tr>');
 
    // Fix the row classes for styling
    var rowClass = 1;
    $('table.subquestion-list tbody tr', thisQuestion).each(function(i) {
      if($(this).hasClass('sub-header-row')) {
        rowClass = 1;
      } else {
        rowClass++;
        $(this).removeClass('array1 array2');
        if(rowClass % 2 == 0) {
          $(this).addClass('array2');
        } else {
          $(this).addClass('array1');
        }
      }
    });
    // Initialize Bootstrap tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
  });
</script><script type="text/javascript" charset="utf-8">
 
// Script zur Nummeriereung der Spalten für die individuelle Spaltenbreite
 
  $(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('column1-'+i);
      });
    });
  });
</script>
<style type="text/css">/* Individuelle Sapltenbreiten */
  .custom-array table.subquestion-list col {
    width: auto !important;
  }
 
  .custom-array table.subquestion-list thead .column1-0 {  width: 28%; }
  .custom-array table.subquestion-list thead .column1-1 {  width: 45%; }
  .custom-array table.subquestion-list thead .column1-2 {  width: 27%; }
</style>
<style type="text/css">@media (min-width: 768px) {
    .col-md-8 {
      flex: 0 0 auto;
      flex-grow: 0;
      width: 100%;
    }
  }
 
/* Teilfragentexte linksbündig */
  .ls-answers tbody .answertext {
    text-align: left;
  }
 
/* Diverse Anweisungen, um den Slider zu stylen */
  .slider.slider-horizontal {
    width: 100%;
    height: 20px;
  }
  
  .slider-handle {
    background: #007894;
  }
  
  .slider-track {
    background-image: linear-gradient(to bottom, #E2E2E2 ,#E2E2E2);
    background-repeat: repeat-x;
    box-shadow: 0;
    border-radius: 10px;
    position: absolute;
    cursor: pointer;
  }
  
   .slider-selection {
    background-image: linear-gradient(to bottom, #E2E2E2 ,#E2E2E2);
    border-radius: 10px;
  }
  
  /* Change the slider handle color */
.slider-handle.min-slider-handle.round {
  background-color: #007894;
  border: 2px solid #007894;
}
 
 
  .slider.slider-horizontal .slider-track {
    height: 20px;
    width: 100%;
    margin-top: 0;
    top: 0;
    left: 0;
    border-radius: 10px;
  }
 
  .slider-container {
    padding: 2px 2px !important;
  }
 
  /* Tooltip des Sliders, falls er überhaupt angezeigt werden soll */
  .slider .tooltip-inner {
    min-width:10px;
    height:auto;
    padding:3px 3px;
    color:#314A5B;
    text-align:center;
    font-weight:400;
    border-radius:5px;
    border: 1px solid #314A5B;
    background-color:white;
    font-size: 12px;
 }
 
  /* Diverse Anweisungen, um die ursprünglichen Checkboxen wie Radio-Buttons aussehen zu lassen */
  .checkbox-item .ls-label-xs-visibility {
    width: 18px;
    height: 18px;
  }
  .checkbox-item label::before, .checkbox-item label::after {
    border-radius: 50%;
  }
  .checkbox-item label::before {
    border-color: black;
    width:18px;
    height:18px;
  }
  .checkbox-item input[type="checkbox"]:checked + label::after {
    content:"";
    background: #007894;
    padding: 0;
  }
  #question{QID} .checkbox-item label::after {
    width: 10px;
    height: 10px;
    left: 4px;
    top: 4px;
  }
 
  .tooltip[data-toggle="tooltip"] {
    cursor: pointer;
  }
 
  /* Styles for your .mytooltip1 elements */
  .mytooltip1 {
    cursor: pointer;
    font-weight: bold;
    color: #007894;
  }
 
 
.tooltip-inner{
    min-width:500px;
    height:auto;
    padding:3px 8px;
    color:#314A5B;
    text-align:left;
    font-weight:400;
    border-radius:15px;
    border: 1px solid #314A5B;
    background-color:white;
    font-size: 16px;
  }
 
/* Farbgebung der beiden Skalen */
  td.answer_cell_1,
  td.answer_cell_2,
  td.answer_cell_3,
  td.answer_cell_4,
  td.answer_cell_5,
  tr.ls-header th.answertext.column1-0,
  tr.ls-header th.answertext.column1-1,
  tr.ls-header th.answertext.column1-2,
  tr.ls-header th.answertext.column1-3,
  tr.ls-header th.answertext.column1-4,
  th.inserted-header.column1-1 {
  background-color:  rgba(232, 225, 208);
  }
 
  td.answer_cell_6,
  tr.ls-header th.answertext.column1-5,
  th.inserted-header.column1-2 {
  background-color: rgba(211, 222, 239);
  }
  
  .sub-header-row th {
    color: #96272D;
}
</style>
<style type="text/css">/* Hide the red warning message for mandatory multiple choice questions */
  div.ls-question-mandatory-multiplechoice,
  div.ls-question-mandatory.ls-question-mandatory-other-text-danger,
  div.ls-question-mandatory.ls-question-mandatory-other,
  /* Add the class for mandatory multiple numerical input questions */
  div.ls-question-mandatory.ls-question-mandatory-array.text-danger {
      display: none;
  }
</style>