<script type="text/javascript" charset="utf-8">
    $(document).on('ready pjax:scriptcomplete',function(){
        var thisQuestion = $('#question{QID}');
 
        // Insert selects
        $('.answer-item', thisQuestion).append('<select class="inserted-select form-control list-question-select">\
 <option value="">Please choose...</option>\
<option value="1">very good</option>\
<option value="2">good</option>\
<option value="3">neither / nor</option>\
<option value="4">poor</option>\
<option value="5">very poor</option>\
<option value="6">DK/NA</option>\
  </select>'); 
 
        // Listeners
        $('.inserted-select', thisQuestion).on('change', function(i) {
            if($(this).val() != '') {
                $(this).closest('.answer-item').find('input:text').val($.trim($(this).val())).trigger('change');
            }
            else {
                $(this).closest('.answer-item').find('input:text').val('').trigger('change');
            }
        });
 
        // Returning to page
        $('input:text', thisQuestion).each(function(i) {
            var thisCell = $(this).closest('.answer-item');
            var inputVal = $.trim($(this).val());
            $('select.inserted-select', thisCell).val(inputVal);
        });
 
        // Clean-up styles
        $('select.inserted-select', thisQuestion).css({
            'max-width': '100%'
        });
        $('input:text', thisQuestion).css({
            'position': 'absolute',
            'left': '-9999em'
        });
    });
</script>

<style type="text/css">.big-radio {
    width: 16px !important;
      height: 16px !important;
  }
  .clickable-span:hover {
    cursor: pointer;
    text-decoration: underline;
  }
td.with-select input.form-control { display:none;}
.ls-answers .ls-heading th {
    text-align: left;
}
</style>
<script type="text/javascript" charset="utf-8">
    var checkClosest = function(elem) {
      elem.firstElementChild.click();
    };
  
      $(document).on('ready pjax:scriptcomplete', function(){
        var thisQuestion = $('#question{QID}');
      
        // Insert radios
        if(!document.querySelector(".inserted-radio")){
            $('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append(
              '<div style="text-align: left" class="list-question-select">\
                <span onclick="checkClosest(this)">\
                    <input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="2"        class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="3"     class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal     </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="4"        class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span>  \
              </div>'
            );
            $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append(
              '<div style="text-align: left" class="list-question-select">\
                <span onclick="checkClosest(this)">\
                    <input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="2"        class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="3"     class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal     </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="4"        class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span>  \
              </div>'
            );
            $('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append(
              '<div style="text-align: left" class="list-question-select">\
                <span onclick="checkClosest(this)">\
                    <input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="2"        class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="3"     class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal     </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="4"        class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span>  \
              </div>'
            );
            $('.answer-item.answer_cell_X004', thisQuestion).addClass('with-select').append(
              '<div style="text-align: left" class="list-question-select">\
                <span onclick="checkClosest(this)">\
                    <input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="2"        class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="3"     class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal     </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="4"        class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span>  \
              </div>'
            );
            $('.answer-item.answer_cell_X005', thisQuestion).addClass('with-select').append(
              '<div style="text-align: left" class="list-question-select">\
                <span onclick="checkClosest(this)">\
                    <input value="1" class="inserted-radio" type="radio" name="radio_" id="radio-1" /> Sehr oft </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="2"        class="inserted-radio" type="radio" name="radio_" id="radio-2" /> Oft        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="3"     class="inserted-radio" type="radio" name="radio_" id="radio-3" /> Manchmal     </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="4"        class="inserted-radio" type="radio" name="radio_" id="radio-4" /> Selten        </span><br />\
                <span onclick="checkClosest(this)">\
                    <input value="5" class="inserted-radio" type="radio" name="radio_" id="radio-5" /> Nie </span>  \
              </div>'
            );
        }
        document.querySelectorAll("input[id^='answer']").forEach( function(inputElem){
          var currID = inputElem.id.substr(6);
          inputElem.parentElement.querySelector("div.list-question-select").querySelectorAll('input').forEach( function(radioNeedsName){
            radioNeedsName.name += currID;
            // Łapiemy zmiany i uzupełniamy oryginalny element
            radioNeedsName.addEventListener("change", function(){
              inputElem.value = event.target.value;
            })
          })
        });
      
        // Clean-up styles
        $('input.inserted-radio').addClass('big-radio');
        $('.list-question-select').find('span').addClass('clickable-span')
        $('.with-select input:text', thisQuestion).css({
            'position': 'absolute',
            'left': '-9999em'
        });
    });
</script>