Welcome to the LimeSurvey Community Forum

{% for step, indexItem in aSurveyInfo.aQuestionIndex.items %}
                    {% if '#' in indexItem.text %}
                        {% set statusClass = '' %}
                        {% if attribute(indexItem.stepStatus, 'index-item-unanswered') is defined and attribute(indexItem.stepStatus, 'index-item-unanswered') == true %}
                            {% set statusClass = statusClass ~ ' index-warning' %}
                        {% endif %}
                        {% if attribute(indexItem.stepStatus, 'index-item-error') is defined and attribute(indexItem.stepStatus, 'index-item-error') == true %}
                            {% set statusClass = statusClass ~ ' index-danger' %}
                        {% endif %}
                        {% if attribute(indexItem.stepStatus, 'index-item-current') is defined and attribute(indexItem.stepStatus, 'index-item-current') == true %}
                            {% set statusClass = statusClass ~  ' disabled' %}
                        {% endif %}
                        <li class="list-group-item {{ indexItem.coreClass }}">
                            <a href='{{ indexItem.url }}' data-limesurvey-submit='{{ indexItem.submit }}'
                               class='dropdown-item  {{ statusClass }}'>
                                {{ indexItem.text|split('#')[0] }}
                            </a>
                        </li>
                    {% endif %}
                {% endfor %}

<div class="d-none d-md-block survey-name large-heading surveytitle">
       {{oSurvey.localizedTitle}}
</div>

.surveytitle {
        /* Expand div to bounds of its parent vertically */
        height: 100%;
        
        /* Ensure flexible width */
        flex-grow: 1; /* Let this container take up remaining space */
        margin-right: 10px; /* Adjust margin as needed */
        
        /* Center text vertically and horizontally */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

<div class="container-fluid col-xl-8">
            {% if( aSurveyInfo.options.brandlogo == "on") %}
                <div class="navbar-brand logo-container d-none d-md-block">
                    {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-fluid"}) }}
                </div>
            {% endif %}
            <div id="survey-title" class="surveytitle">{{oSurvey.localizedTitle}} </div>
            <div id="navbar-menu" class="dropdown ms-auto ls-no-js-hidden">
                {% if( aSurveyInfo.aNavigator.load.show == "Y" or
                    aSurveyInfo.aNavigator.save.show == "Y" or
                    ((aSurveyInfo.bShowClearAll == true or aSurveyInfo.bShowClearAll == null) and
                    aSurveyInfo.options.showclearall == 'on') or
                    aSurveyInfo.aQuestionIndex.bShow == true or
                    aSurveyInfo.alanguageChanger.show == true) %}
                    <div id="navbar-toggler" class="navbar-toggler" data-bs-toggle="dropdown"
                        data-bs-auto-close="outside" aria-expanded="false">
                        <span class="ri-more-fill"></span>
                    </div>
                    <ul id="main-dropdown" class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-toggler">
                        {{ include('./subviews/navigation/language_changer_top_menu.twig') }}
                        {% if( aSurveyInfo.aNavigator.load.show == "Y" or
                            aSurveyInfo.aNavigator.save.show == "Y" or
                            ((aSurveyInfo.bShowClearAll == true or aSurveyInfo.bShowClearAll == null) and
                            aSurveyInfo.options.showclearall == 'on') or
                            aSurveyInfo.aQuestionIndex.bShow == true) %}
                            <li class="dropdown-header text-uppercase">{{ gT("Survey options") }}</li>
                        {% endif %}
                        {{ include('./subviews/navigation/save_links.twig') }}
                        {{ include('./subviews/navigation/question_index_menu.twig') }}
                        {{ include('./subviews/navigation/clearall_links.twig') }}
                    </ul>
                {% endif %}
            </div>
            <ul id="back-content" class="d-none"></ul>
        </div>

.surveytitle {
        /* Expand div to bounds of its parent vertically */
        height: 100%;
        
        /* Ensure flexible width */
        flex-grow: 1; /* Let this container take up remaining space */
        margin-right: 10px; /* Adjust margin as needed */
        
        /* Center text vertically and horizontally */
        display: flex;
        justify-content: center;
        align-items: center;
        /* Change font /
        font-family: Arial, sans-serif; /* Change to desired font family */
        /* Other styling /
        font-size: 24px; /* Adjust font size as needed /
        font-weight: bold; /* Adjust font weight as needed /
    }

<style type="text/css">
.no-bottom {
  border-bottom:0;
  margin-bottom:0;
}
.no-bottom .question-container {
    border-bottom: 0px solid white !important;
}
.no-bottom .answer-container {
    padding-bottom: 0em;
}
</style>

<style type="text/css">
.disable-irrelevant.ls-irrelevant.ls-hidden {
  display:block;
}
.disable-irrelevant.ls-irrelevant .form-control {
  background-color: #eee;cursor: not-allowed;
}
 
.no-question {
  border-top:0;
}
.no-question .question-title-container, 
.no-question .question-valid-container {
  display:none;
}
.no-question .answer-container {
    padding-top: 0em;
    padding-bottom: 0em;
}
</style>

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

<!-- logo1 -->
        <brandlogo type="buttons" category="Logos" width="4" title="Logo" options="on|off" optionlabels="Yes|No">on</brandlogo>
        <brandlogofile type="dropdown" category="Logos" width="6" title="Logo file" parent="brandlogo">files/logo.png</brandlogofile>
        <!-- logo2 -->
        <logo2 type="buttons" category="Logos" width="4" title="Second logo" options="on|off" optionlabels="Yes|No">on</logo2>
        <logo2file type="dropdown" category="Logos" width="6" title="Second logo file" parent="logo2">files/logo.png</logo2file>

<backgroundimage type="buttons" category="Background" width="4" title="Background image" options="on|off" optionlabels="Yes|No">on</backgroundimage>
        <backgroundimagefile type="dropdown" category="Background" width="6" title="Background image file" parent="backgroundimage">files/pattern.jpg</backgroundimagefile>