<script charset="utf-8" type="text/javascript">
  $(document).ready(function() {
    $( '#question{QID} .question-item:eq(0)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(7)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
    $( '#question{QID} .question-item:eq(13)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
  });
</script>

<style type="text/css">.hide-pseudo-elements label::before,
  .hide-pseudo-elements label::after
  {
    display: none;
  }
 
  .hide-pseudo-elements .label-text
  {
    margin-left: -40px;
  }
 
  .myHeader
  {
    color: maroon;
    font-weight: bold;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    padding: 1px 5px;
    margin-left: -25px;
    display: inline-block;
   min-width: 100%;
}
 
  li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: 0.5em;
  }
 
.checkbox-item label {
  min-width: 100%;
}
</style>

 <script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var qID = '{QID}';
    var thisQuestion = $('#question'+qID);
 
    /****** HEADER ROWS ******/
    // Find the header rows
    var headerRowPrefix = 'O';
    var headerRows = $('li[id^="javatbd"]', thisQuestion).filter(function() {
      return $(this).attr('id').includes('X'+qID+headerRowPrefix+'');
    });
 
    // Loop through the header rows
    $(headerRows).each(function(i) {
      // Assign a class name
      $(this).addClass('inserted-header-row')
      // Move the label
      .prepend($('label.control-label:eq(0)', this))
      // Remove unecessary elements
      .find('input, div').remove();
    });
 
    /****** ANSWERS INTO COLUMNS ******/
    // Number of columns to display (max 4)
    var columns = 4;
 
    thisQuestion.addClass('with-inserted-columns columns-'+columns+'');
 
 
    /****** REMOVE SOME TEXT INPUTS ******/
    // Find the rows to keep text inputs
    var textRowPrefix = 'oth';
    var textRows = $('li[id^="javatbd"]', thisQuestion).filter(function() {
      return $(this).attr('id').includes('X'+qID+textRowPrefix+'');
    });
 
    // Remove text inputs from all except those rows
    $('li[id^="javatbd"]', thisQuestion).not(textRows).find('div.text-item').remove();
  });
</script>

<style data-author="Tony Partner" type="text/css">li.inserted-header-row {
    float: none;
    clear: both;
    flex: 0 0 100%;
  }
 
  li.inserted-header-row label {
/* Hier wird das Layout der Überschrift; kann man alles nach Gusto ändern */
    padding-left: 15px;
    padding-right: 15px;
    padding-top:0 !important;
    font-weight: bold;
    width: 100%;
    background-color:#e29514;;
    border: 1px solid gray;
    border-radius: 5px;
    font-size: 18px;
    color: #001957;
  }
  li.inserted-header-row label::before,
  li.inserted-header-row label::after{
    display: none;
  }
 
  @media only screen and (min-width: 768px) {
 
    .with-inserted-columns ul.ls-answers {
      display: flex;
      flex-flow: row wrap;
    }
 
    .with-inserted-columns ul.ls-answers li {
      margin: 0 0 1em 0;
      padding: 0 15px 0 0;
    }
 
    .with-inserted-columns.columns-2 ul.ls-answers li { flex: 0 0 50%; }
    .with-inserted-columns.columns-3 ul.ls-answers li { flex: 0 0 33%; }
    .with-inserted-columns.columns-4 ul.ls-answers li { flex: 0 0 25%; }
    .with-inserted-columns.columns-5 ul.ls-answers li { flex: 0 0 20%; }
 
    .with-inserted-columns ul.ls-answers li.inserted-header-row {
      flex: 0 0 100%;
      padding: 0;
    }
 
    .with-inserted-columns ul.ls-answers li > div {
      float: none;
      width: auto;
    }
 
    .with-inserted-columns ul.ls-answers li label {
      text-align: center;
    }
 
    .with-inserted-columns ul.ls-answers li input[type="text"] {
      margin-top: 0.7em;
    }
  }
</style>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() { 
        var SubHeading1="Header 1";
        var SubHeading2="Header 2";
        var SubHeading3="Header 3";
        var thisQuestion = $('#question{QID}');
 
        // Insert sub-headings
        $('.checkbox-item:eq(0)', thisQuestion).before('<li class="inserted-sub-heading"><span class="myHeader">'+SubHeading1+'</span></li>');
        $('.checkbox-item:eq(4)', thisQuestion).before('<li class="inserted-sub-heading"><span class="myHeader">'+SubHeading2+'</span></li>');
        $('.checkbox-item:eq(8)', thisQuestion).before('<li class="inserted-sub-heading"><span class="myHeader">'+SubHeading3+'</span></li>');
    });
</script>
<style type="text/css">.myHeader {
    color: maroon;
    font-weight: bold;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    padding: 1px 5px;
    margin-left: 25px;
    display: inline-block;
  }  
li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: 0.5em;
}
</style>