<style type="text/css">
 
  #question{QID} .radio-item label {
    padding-left: 8px;
  }
 
  #question{QID} .radio-item label::before {
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    border: 3px solid #ccc;
  }
 
 
  #question{QID} .radio-item label::after {
    width: 12px;
    height: 12px;
    left: 4px;
    top: 4px;
  }
 
  #question{QID} .radio-item:nth-child(1) label::before {
    border-color: red;
  }
 
  #question{QID} .radio-item:nth-child(2) label::before {
    border-color: orange;
  }
 
  #question{QID} .radio-item:nth-child(3) label::before {
    border-color: yellow;
  }
 
  #question{QID} .radio-item:nth-child(4) label::before {
    border-color: green;
  }
 
  #question{QID} .radio-item:nth-child(1) input[type="radio"]:checked + label::after {
    background: red;
  }
 
  #question{QID} .radio-item:nth-child(2) input[type="radio"]:checked + label::after {
    background: orange;
  }
 
  #question{QID} .radio-item:nth-child(3) input[type="radio"]:checked + label::after {
    background: yellow;
  }
 
  #question{QID} .radio-item:nth-child(4) input[type="radio"]:checked + label::after {
    background: green;
  }
</style>

<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Insert the modals
    $('input:radio', thisQuestion).each(function(i) {
      $('body').append('<div class="modal inserted-modal fade" id="inserted-modal-'+i+1+'" aria-hidden="true"  data-backdrop="static" data-keyboard="false">\
                <div class="modal-dialog" role="document">\
                  <div class="modal-content">\
                    <div class="modal-body"></div>\
                    <div class="modal-footer">\
                      <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\
                    </div>\
                  </div>\
                </div>\
              </div>');
      $('#inserted-modal-'+i+1+' .modal-body').append($(thisQuestion).nextAll('.boilerplate:eq('+i+')').find('.question-text'));
    });
 
    // Remove the text-display questions
    $(thisQuestion).nextAll('.boilerplate:lt('+$('input:radio', thisQuestion).length+')').remove();
 
    // Listeners on the radios
    $('input:radio', thisQuestion).on('click', function(e) {
      var thisIndex = $(this).closest('.answer-item').index();
      $('#inserted-modal-'+thisIndex+1+'').modal('show');
    });
    });
</script>

<p>Some question text...</p>
<p class="conditional-text" style="display:none; color:red;">Conditional text for option 1...</p>
<p class="conditional-text" style="display:none; color:orange;">Conditional text for option 2...</p>
<p class="conditional-text" style="display:none; color:#CDCD00;">Conditional text for option 3...</p>
<p class="conditional-text" style="display:none; color:green;">Conditional text for option 4...</p>
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
 
    // Listeners on the radios
    $('input:radio', thisQuestion).on('click', function(e) {
      $('.question-text .conditional-text', thisQuestion).hide();
      var thisIndex = $(this).closest('.answer-item').index();
      $('.question-text .conditional-text:eq('+thisIndex+')', thisQuestion).fadeIn(300);
    });
    });
</script>