<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function() {
 
    // A function to add or remove rows of a multiple-short-text question
    function varLengthArray(qID) {
 
 
      // The HTML content of the Add/Remove elements - modify as you wish
      var addContent = '[+] Medikament zufügen';
      var removeContent = '[-] Medikament löschen';
 
      // Insert the buttons
      $('#question'+qID+' .subquestion-list').append('<div id="addButton'+qID+'" class="control-button btn btn-primary">'+addContent+'</div><div id="removeButton'+qID+'" class="control-button btn btn-primary">'+removeContent+'</div>');
 
      // Style the elements - you can modify here if you wish
      $('#question'+qID+' .control-button').css({
        'margin':'10px 0 10px 10px',
        'padding':'1px',
        'text-align':'center',
        'width':'auto',
        'cursor':'pointer',
        'float':'left'
      });
 
      // Initially hide the Remove element
      $( 'div#removeButton'+qID ).hide();
 
      // Call the functions below when clicked
      $( 'div#addButton'+qID ).click(function (event) {
        addRow(qID);
      });
      $( 'div#removeButton'+qID ).click(function (event) {
        removeRow(qID);
      });
 
      // Function to add a row, also shows the Remove element and hides the
      function addRow(qID) {
        $('#question'+qID+' .answer-item:hidden:first').show();
        $('div#removeButton'+qID).show();
        if ($('#question'+qID+' .answer-item:visible').length == $('#question'+qID+' .answer-item').length)  {
          $('div#addButton'+qID).hide();
        }
      }
 
      // Function to remove a row and clear the input value
      function removeRow(qID) {
        $('#question'+qID+' .answer-item:visible:last').hide();
        $('#question'+qID+' .answer-item:hidden input[type="text"]').each(function(i) {
          $(this).val('').trigger('keyup');
        });
        $( 'div#addButton'+qID ).show();
        if ($('#question'+qID+' .answer-item:visible').length == 1)  {
          $('div#removeButton'+qID).hide();
        }
      }
 
      // Just some initialization stuff
      // Initially hide all except first row or any rows with populated inputs
      $('#question'+qID+' .answer-item input[type="text"]:not(:first)').each(function(i) {
        if($.trim($(this).val()) == '') {
          $(this).closest('.answer-item').hide();
        }
        if ($('#question'+qID+' .answer-item:visible').length > 1)  {
    //      $('div#removeButton'+qID).show();
        }
      });
    }
 
    // Call the function with a question ID
    varLengthArray({QID});
  });
 
</script>

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function()  {
    var qID = {QID};    
    var inputNum = 4;
 
    // Define the select element (dropdown)
    var prov1 = '<select id="prov1" class="form-control">\
            <option value="">--</option>\
            <option value="1">Option 1</option>\
            <option value="2">Option 2</option>\
            <option value="3">Option 3</option>\
            <option value="4">Option 4</option>\
            <option value="5">Option 5</option>\
          </select>';
 
    // Hide the text input
    $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').hide();
 
    // Insert the select elements
    if($('#question'+qID+' .question-item:eq('+(inputNum-1)+') select').length == 0) {
      $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov1);
    }    
 
    // Initially select an option if the question has already been answered
    $('#question'+qID+' select').each(function(i) {
      if($.trim($(this).next('input[type="text"]').val()) != '') {
        $(this).val($.trim($(this).next('input[type="text"]').val()));
      }
    });
 
    // Listener on the dropdowns - insert selected values into hidden text input
    $('#question'+qID+' select').change(function() {
      var thisInput = $(this).next('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).attr('value'), $(thisInput).attr('name'), 'text');
    });
 
    // Some styles
    $('#question'+qID+' select').css({
    'margin':'0.3em 0 0 0',
        'width':'30%'
    });
  });
 
 
  $(document).on('ready pjax:complete',function()  {
    var qID = {QID};    
    var inputNum = 5;
 
    // Define the select element (dropdown)
    var prov2 = '<select id="prov2" class="form-control">\
            <option value="">--</option>\
            <option value="1">Eine andere Option 1</option>\
            <option value="2">Eine andere Option 2</option>\
            <option value="3">Eine andere Option 3</option>\
          </select>';
 
    // Hide the text input
    $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').hide();
 
    // Insert the select elements
    if($('#question'+qID+' .question-item:eq('+(inputNum-1)+') select').length == 0) {
      $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov2);
    }    
 
    // Initially select an option if the question has already been answered
    $('#question'+qID+' select').each(function(i) {
      if($.trim($(this).next('input[type="text"]').val()) != '') {
        $(this).val($.trim($(this).next('input[type="text"]').val()));
      }
    });
 
    // Listener on the dropdowns - insert selected values into hidden text input
    $('#question'+qID+' select').change(function() {
      var thisInput = $(this).next('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).attr('value'), $(thisInput).attr('name'), 'text');
    });
 
    // Some styles
    $('#question'+qID+' select').css({
    'margin':'0.3em 0 0 0',
        'width':'30%'
    });
  });
 
</script>

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function()  {
    var qID = {QID};    
    var inputNum = 2;
 
    // Define the select element (dropdown)
    var prov1 = '<select id="prov1" class="form-control">\
            <option value="">--</option>\
            <option value="1">Option 1</option>\
            <option value="2">Option 2</option>\
            <option value="3">Option 3</option>\
            <option value="4">Option 4</option>\
            <option value="5">Option 5</option>\
          </select>';
 
    // Hide the text input
    $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').hide();
 
    // Insert the select elements
    if($('#question'+qID+' .question-item:eq('+(inputNum-1)+') select').length == 0) {
      $('#question'+qID+' .question-item:eq('+(inputNum-1)+') input[type="text"]').before(prov1);
    }    
 
    // Initially select an option if the question has already been answered
    $('#question'+qID+' select').each(function(i) {
      if($.trim($(this).next('input[type="text"]').val()) != '') {
        $(this).val($.trim($(this).next('input[type="text"]').val()));
      }
    });
 
    // Listener on the dropdowns - insert selected values into hidden text input
    $('#question'+qID+' select').change(function() {
      var thisInput = $(this).next('input[type="text"]');
      $(thisInput).val($(this).val());
      checkconditions($(thisInput).attr('value'), $(thisInput).attr('name'), 'text');
    });
 
    // Some styles
    $('#question'+qID+' select').css({
    'margin':'0.3em 0 0 0',
        'width':'100%'
    });
  });
</script>

<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    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('column-'+i);
      });
    });
 
/* Wenn nur der farbige Strich gewünscht wird, nicht das Kästchen, lass den Teil weg */
      // Listener on the radios
    $('input:radio', thisQuestion).on('click', function(i) {
      $(this).closest('tr').find('.active-item').removeClass('active-item');
      $(this).closest('td').addClass('active-item');
    });
/* Bis hier */
  });
</script>

<style type="text/css">.custom-array table.subquestion-list thead td,
  .custom-array table.subquestion-list thead th {
    border-bottom-width: 8px;
    border-bottom-style: solid;
  }
 
  .custom-array table.subquestion-list thead .column-1 { border-bottom-color: #A80200; }
  .custom-array table.subquestion-list thead .column-2 { border-bottom-color: #C15A00; }
  .custom-array table.subquestion-list thead .column-3 { border-bottom-color: #D69D00; }
  .custom-array table.subquestion-list thead .column-4 { border-bottom-color: #E4C900; }
  .custom-array table.subquestion-list thead .column-5 { border-bottom-color: #ECE200; }
  .custom-array table.subquestion-list thead .column-6 { border-bottom-color: #E2EC00; }
  .custom-array table.subquestion-list thead .column-7 { border-bottom-color: #9CE400; }
  .custom-array table.subquestion-list thead .column-8 { border-bottom-color: #9DD600; }
  .custom-array table.subquestion-list thead .column-9 { border-bottom-color: #5AC100; }
  .custom-array table.subquestion-list thead .column-10 { border-bottom-color: #00A800; }

/* Wenn nur der farbige Strich gewünscht wird, nicht das Kästchen, lass den Teil weg */
  .custom-array td.column-1:hover,
  .custom-array td.active-item.column-1 { background-color: #A80200; }

  .custom-array td.column-2:hover,
  .custom-array td.active-item.column-2 { background-color: #C15A00; }

  .custom-array td.column-3:hover,
  .custom-array td.active-item.column-3 { background-color: #D69D00; }

  .custom-array td.column-4:hover,
  .custom-array td.active-item.column-4 { background-color: #E4C900; }

  .custom-array td.column-5:hover,
  .custom-array td.active-item.column-5 { background-color: #ECE200; }

  .custom-array td.column-6:hover,
  .custom-array td.active-item.column-6 { background-color: #ECEC00; }

  .custom-array td.column-7:hover,
  .custom-array td.active-item.column-7 { background-color: #9CE400; }

  .custom-array td.column-8:hover,
  .custom-array td.active-item.column-8 { background-color: #9DD600; }

  .custom-array td.column-9:hover,
  .custom-array td.active-item.column-9 { background-color: #5AC100; }

  .custom-array td.column-10:hover,
  .custom-array td.active-item.column-10 { background-color: #00A800; }

</style>