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