Hello @user12345 ,



You can either add new options as Header of the other options and hide the TextEntry fields of this header options



OR



You can use custom script to add elements before specific option as headers

---

Hi @Shashi, how do I add options as Headers of other options? That seems like it would be the easiest option but I have not been able to figure out how to do that.



Otherwise, are there any resources on writing custom scripts that I could use? I am not familiar with how to do that.

---

> @user12345 said:

> Hi @Shashi, how do I add options as Headers of other options? That seems like it would be the easiest option but I have not been able to figure out how to do that.

>

> Otherwise, are there any resources on writing custom scripts that I could use? I am not familiar with how to do that.

>



Add an option before set of option and hide its respective Input field. Use the below code to hide the input filed of option header:



`jQuery("#"+this.questionId+" .InputText:eq(n)").hide();`



Replace n in the above code with the (row number - 1) where headers are present



Write the JS in the js(OnReady) of the constant sum question

---

@ Shashi Thank you!



Thank worked but is now throwing off some additional javascript I'm using. In this question I'm asking survey respondents to allocate how they spend their time across ~50 processes. The other code identifies the top 5 processes (based on the % they enter) and creates variables that can be carried into other questions. With your suggestion, the top 5 it identifies are now off due to the headers ( I think a mismatch between # of questions and # of answers). Is there any way to correct for this? The JavaScript I was using is below.





Qualtrics.SurveyEngine.addOnReady(function()

{

/*Place your JavaScript here to run when the page is fully displayed*/

jQuery("#"+this.questionId+" .InputText:eq(0)").hide();

jQuery("#"+this.questionId+" .InputText:eq(8)").hide();

jQuery("#"+this.questionId+" .InputText:eq(12)").hide();

jQuery("#"+this.questionId+" .InputText:eq(22)").hide();

jQuery("#"+this.questionId+" .InputText:eq(35)").hide();

jQuery("#"+this.questionId+" .InputText:eq(41)").hide();





var $jq = jQuery.noConflict();// always keep this

/*$jq('input[type="text"]').after('%'); */

});



Qualtrics.SurveyEngine.addOnUnload(function()

{

});



Qualtrics.SurveyEngine.addOnPageSubmit(function(type) {

var $jq = jQuery.noConflict();

var answers = $jq('.Selection input').map(function(val) {

return $(this).getValue();

});

var questions = $jq('.Selection label span').map(function(val) {

return $(this).innerHTML;

});



zip = []

for(var i = 0; i < answers.length; i++) {

if(parseInt(answers[i]) != 0){

zip.push([parseInt(answers[i]), questions[i]]);

}

}

zip.sort(function(a, b) {

return b[0] - a[0];

});

top_5 = zip.slice(0, 5).map(function(val) { return val[1]});



console.log(top_5);



for(var i = 0; i < top_5.length; i++) {

Qualtrics.SurveyEngine.setEmbeddedData("top_question_" + (i+1), top_5[i]);

}



});

---

@Shashi Thanks again. For more context, in my survey I'm asking respondents to allocate how they spend their time across a list of ~50 processes (many will be 0). Because the list is so long I am trying to group the processes under headers to break up the list. I also need to identify the top five processes repondents spend their time on for use in follow up questions.



The code you sent earlier helped me to add the headers but threw off the javascript I was using to identify the top 5 processes. (see code in previous response above).



Is there a better way to get the headers and identify the top 5? I am using a constant sum question type (tried using a matrix with constant sum for the headers but then the top 5 code would not run).



Any help is appreciated!!

---