Best answer by Anonymous
View original
Side-by-side matrix with 10 rows - can I show rows only on demand using a button?
I have a side-by-side matrix collecting contact information for up to 10 people. To minimize space, I'd like to set up the matrix to initially show just the first row or 2 and have a button below the table that they can click to "Add another contact" which will display the next empty row of the matrix only when clicked (up to 10 times). I assume this possible with JS, but I'm not sure exactly how. Has anyone done this before?
A
Hello @Nadaly ,
Alternative to JS: We can ask the user to enter( open text with number and range (0-10) validation ) how many number of people contact information can you provide. Now, based on this question answer, we can add display logic at option level i.e (option 1 will have no display logic), option 2 will have display logic- to show if open text has answer '2' or greater or equal to two, similarly option 3 will have logic- to show if open text has answer '3' or greater than or equal to three
Alternative to JS: We can ask the user to enter( open text with number and range (0-10) validation ) how many number of people contact information can you provide. Now, based on this question answer, we can add display logic at option level i.e (option 1 will have no display logic), option 2 will have display logic- to show if open text has answer '2' or greater or equal to two, similarly option 3 will have logic- to show if open text has answer '3' or greater than or equal to three
Hi @Shashi - Thank you! I appreciate the alternative and I did consider a display-logic based solution. However, I believe that what you describe would always require a page break between the "how many" question and the matrix. The hope is for all of this to occur on the same page.
A
Hello @Nadaly ,
Paste the below code in the Side-by-Side question js(onReady)
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();
jQuery("<input type='button' id='add' value='+' name='+' />").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add").on('click',function(){
var c= jQuery("tr.Choice:visible").length;
jQuery("#"+that+" tr.Choice:eq("+c+")").show();
});
Note: The above code will work if there is no custom validation on any of the question of the page.
Paste the below code in the Side-by-Side question js(onReady)
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();
jQuery("<input type='button' id='add' value='+' name='+' />").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add").on('click',function(){
var c= jQuery("tr.Choice:visible").length;
jQuery("#"+that+" tr.Choice:eq("+c+")").show();
});
Note: The above code will work if there is no custom validation on any of the question of the page.
@Shashi - Does the first line of your code tell it to show only the first row? Can we show the first 3 rows initially onload instead of just one? Or not possible?
Userlevel 1
@Shashi Is this code easily adaptable for text entry forms? or if that isnt possible for matrix questions?
A
> @automaticadd said:
> @Shashi Is this code easily adaptable for text entry forms? or if that isnt possible for matrix questions?
The code is not adaptable to text entry forms
> @Shashi Is this code easily adaptable for text entry forms? or if that isnt possible for matrix questions?
The code is not adaptable to text entry forms
A
> @automaticadd said:
> @Shashi Thanks for your quick reply. Is it possible matrix questions?
Change Choice to `ChoiceRow` , doing this it will work for matrix question
> @Shashi Thanks for your quick reply. Is it possible matrix questions?
Change Choice to `ChoiceRow` , doing this it will work for matrix question
@Shashi how do we start the question with more than 1 row but still have the + button available?
@uhrxx005
I used the code I noted above to start with 3 rows instead of 1.
Replace
`jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();`
with
`jQuery("#"+this.questionId+" tr.Choice:not(:lt(3))").hide();`
I used the code I noted above to start with 3 rows instead of 1.
Replace
`jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();`
with
`jQuery("#"+this.questionId+" tr.Choice:not(:lt(3))").hide();`
@Nadaly, doing that does display the first 3 rows and the + box, but clicking on the + box is no longer doing anything
I've tried it on both matrix and side by side
Userlevel 1
@uhrxx005 Your problem probably is more complicated but I am going to suggest this easy fix because I first overlooked it: Do you have multiple statements? (If there is only one statement, the code can't hide and consequently cannot unhide additional items.) Also, I noticed that things get messed up if there are multiple questions that use this code within one block (or page?).
https://www.qualtrics.com/community/discussion/comment/10464#Comment_10464Hello Nadaly ,
I am using this code in my side-by-side question with 100 rows. I want my survey to display 9 rows at the beginning so I've changed 3 to 9.
Qualtrics.SurveyEngine.addOnReady(function()
{
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:lt(9))").hide();
jQuery("").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add").on('click',function(){
var c= jQuery("tr.Choice:visible").length;
jQuery("#"+that+" tr.Choice:eq("+c+")").show();
});
});
However when I preview the question and use the "add" button, the additional rows did not come up in the right order (pls see below)
I'm not sure how to debug this, appreciate any help!!
Userlevel 2
+1
Hello. The code that was provided earlier in this discussion (pasted below) works very well to display one row, with a plus sign allowing users to add more (hidden) rows (and by rows I mean statements in a Side by side question). The only imperfection I have found is that sometimes, when adding a new row, the numbering of the rows is not sequential. The first row that appears always seems to be labelled "1", and usually the subsequent rows are "2", "3", etc., but sometimes that isn't the case (e.g., "2" is followed by "4").
var that=this.questionId;
jQuery("#"+this.questionId+" tr.Choice:not(:eq(0))").hide();
jQuery("").insertAfter("#"+this.questionId+" tr.Choice:last");
jQuery("#add").on('click',function(){
var c= jQuery("tr.Choice:visible").length;
jQuery("#"+that+" tr.Choice:eq("+c+")").show();
});
I have run into two issues with this, however, and I hope someone can help.
The first issue is when someone enters a few statements/rows (let's say three) in one of those questions and they then move on to the next page. If they go back to the page where they had entered those rows, only one is displayed. If they click the plus sign enough times, they will see all the data they had entered. Is there any way to have it automatically display all rows/statements that have had data entered into them by the user?
The second issue is kind of the same thing, but it has to do with the Response Summary page. We use the response summary at the end of the survey to allow people to review their responses, go back and correct anything, if necessary, and to download the PDF of the Response Summary. Unfortunately, the same issue occurs on this page where only the first row/statement appears in the summary. The plus button is there and can be clicked on to see more, but that is not ideal and doesn't help at all in the PDF, which we encourage them to download. Clicking the plus sign is not only not ideal, but sometimes it doesn't work properly. As skwok pointed out, the rows that appear may be random, meaning that on this Response Summary page, you may click the plus sign to see all your answers, but it may not show them to you since the rows displayed aren't necessarily the ones you entered data into.
Can anyone help with this? Thank you!
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.