Please help us help you and fill where relevant:
Your LimeSurvey version: 5.6.31
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Vanilla
==================
Hi, 

I would like to create a multiple choice with comments question where show the text boxes only for two subquestions, put other two subquestions as a subtitles (with bold letters and without checkboxes) and randomize the 1st "group" of subquestions below the first subtitle between them and the 2nd "group" of subquestions below the second subtitle between them. 

I attached the survey and a sample image explaining this. 

 

- For hide the text boxes i used a JS code from this forum i already used in other survey. It worked perfectly: 

$(document).ready(function() {
 
    // Identify this question
    var qID = {QID}; 
 
    // The sub-question codes to have no text input
    var sqCodes = [1, 2, 3, 4, 6, 7, 8, 9]; 
 
    // Loop through those sq codes and remove their text inputs
    $(sqCodes).each(function(i, code) {
      $('#question'+qID+' input[type="text"][id$="X'+qID+code+'comment"]').remove();
    });
      });

- For put two subquestions as a subtitles i tried to use this JS code from this forum but is not working:

<script type="text/javascript" charset="utf-8">    
 
  $(document).on('ready pjax:scriptcomplete',function(){
    // First Row
    $('#question{QID} .question-item:eq(0)').addClass('sub-header').find('input').remove();
      // Thirteen Row
    $('#question{QID} .question-item:eq(12)').addClass('sub-header').find('input').remove();
  });
</script>
<style type="text/css">.question-item.sub-header,
  .question-item.sub-header label {
    padding: 0;
    margin-bottom: 5;
    font-weight: bold;
  }
 
  .question-item.sub-header label::before,
  .question-item.sub-header label::after {
    display: none;
  }
</style>

- And I have no idea how to randomize differents groups of subquestions between them. 

If anyone can help me it would be great. 

Thank you in advance. 

Hi,
to insert subheaders you shouldn't use a subquestion and then remove things.
Better you insert a text as a new subheader.
 


I used a class "myHeader" to easily style it.

 

Thanks Joffm, it worked perfectly!

Do you know how can i randomize the two groups of subquestions in that case?

No, I don't.
Therefore I use the easy solution.
Split the question.

Use two "multiple" questions with "Other" option and merge them with the css classes "no-bottom" in the first and "no-question" in the second.
Change the script to enter the subheaders
from
$('.checkbox-text-item:eq(0)', thisQuestion).before(...
to
$('.checkbox-item:eq(0)', thisQuestion).before(...

You may add some more css to style it.
 

Joffm

Thanks Joffm!! I would try this solution.

I tried generate some code with chat gpt but it didn't work.

<script type="text/javascript">
    $(document).ready(function() {
        // Get the options container of the question
        var optionsContainer = $('.question{QID} .answer-list');

        // Arrays for options in each group
        var group1Options = ; // Replace with the actual option values
        var group2Options = ; // Replace with the actual option values
        var otherOptions = [];

        // Filter options based on groups
        optionsContainer.find('.answer-item').each(function() {
            var optionValue = $(this).find('input[type="radio"]').val();

            if (group1Options.includes(optionValue)) {
                group1Options.push($(this));
            } else if (group2Options.includes(optionValue)) {
                group2Options.push($(this));
            } else {
                otherOptions.push($(this));
            }
        });

        // Function to shuffle an array
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array;
                array = array[j];
                array[j] = temp;
            }
        }

        // Shuffle the two groups separately
        shuffleArray(group1Options);
        shuffleArray(group2Options);

        // Empty the container and add the randomized options
        optionsContainer.empty().append(group1Options).append(group2Options).append(otherOptions);
    });
</script>

Oh, yes,
ChatGPT always makes us laugh.

I tried generate some code with chat gpt but it didn't work.

Seriously????

Sorry. Desesperation. Maybe it gave me some idea to work on. But I don't have the knowledge about Javascript.

Joffm wrote:

Hi,
to insert subheaders you shouldn't use a subquestion and then remove things.
Better you insert a text as a new subheader.
 

Code:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        var SubHeading1="Subtitle 1";
        var SubHeading2="Subtitle 2";
        var thisQuestion = $('#question{QID}');
         // Insert sub-headings
        $('.checkbox-text-item:eq(0)', thisQuestion).before('<li class="inserted-sub-heading"><span class="myHeader">'+SubHeading1+'</span></li>');
        $('.checkbox-text-item:eq(4)', thisQuestion).before('<li class="inserted-sub-heading"><span class="myHeader">'+SubHeading2+'</span></li>');
    });
</script>

I used a class "myHeader" to easily style it.

Code:

<style type="text/css">
  .myHeader {
    color:maroon;
    font-size:120%;
    margin-left: 25px;
  }
</style>

 

Any way to do it condicional depending on if an option on a previous multiple choice question is selected?

I used this in a 3.28.66 version of limesurvey and it worked: In version 2.5x, there are pseudo-elements inserted for the check-boxes and you can't reliably use JavaScript to apply styles to a pseudo-element.

The simplest approach is to apply classes to the row elements and target the pseudo-elements in those rows with CSS. You should also remove the check-boxes in those rows in case someone tabs through the question.

1) Add something like this to the question source:
CODE:
<script type="text/javascript" charset="utf-8">

$(document).ready(function() {
// First Row
$('#question{QID} .question-item:eq(0)').parent().addClass('sub-header');
$('#question{QID} .question-item:eq(0)').find('input').remove();
// Sixth Row
$('#question{QID} .question-item:eq(5)').parent().addClass('sub-header');
$('#question{QID} .question-item:eq(5)').find('input').remove();
// Tenth Row
$('#question{QID} .question-item:eq(11)').parent().addClass('sub-header');
$('#question{QID} .question-item:eq(11)').find('input').remove();
});
</script>

2) Add something like this to the end of template.css:
CODE:
.multiple-opt .sub-header .question-item {
padding-left: 0;
}

.multiple-opt .sub-header .label-text {
margin-left: 0;
font-weight: bold;
}

.multiple-opt .sub-header .checkbox label::before {
display: none;
}

(I found it in this post: forums.limesurvey.org/index.php/forum/de...les-for-subquestions )

But is not working in version 5.6.31.

May be this code for this version and put condicional on the subquestion?