Hi there, I have an issue where we need to use as few page breaks as possible to maximize survey completion. The issue is that I have a side-by-side matrix table (QID7). Ideally, I wanted to use display logic on the individual answer options, however, in-page display logic does not work for individual answer options (it would force a page break and display on the next page). The purpose of this table is to only show as many options as number of children mentioned in the previous question (QID4). The maximum is 10, so if the whole table shows up, it can look intimidating and like more work than it is, especially if they only need to provide responses about one or two kids.
Does anyone know any javascript that I could use to either display/hide response options based on a previous response?
I’ve tried to first generate a numeric variable, then want to refer to that to hide/display responses, but haven’t succeeded:
Qualtrics.SurveyEngine.addOnload(function() {
// Get the response from the previous question and convert to an integer
var numChildren = parseInt("${q://QID4/ChoiceTextEntryValue}", 10);
Then ideally I would add code that would do something like this:
Display Option 1 if numChildren>=1
Display option 2 if numChildren>=2
…etc all the way to 10
Here's an example of the matrix (but it would go up to 10).
Hide response options in side-by-side matrix, based on previous response
+2
+19
Hi LauraCeleste ,
You can achieve the above using below JS code inside the JS API of side-by-side matrix with n'th number of rows(just update the parseInt value as per your QID)(I am assuming there is only side-by-side matrix on that page)
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
// Get the value of 'num' from the survey question and parse it as an integer
var num = parseInt("${q://QID4/ChoiceTextEntryValue}", 10);
// Get all table rows with class "Choice"
let tr = document.querySelectorAll("tr.Choice");
// Hide all rows in the table
for (let i = 0; i < tr.length; i++) {
tr[i].style.display = "none";
}
// Display the first 'num' rows based on the value of 'num'
for (let i = 0; i < num; i++) {
// If 'num' is greater than or equal to the total number of rows, display all rows
if (num >= tr.length && i < tr.length) {
tr[i].style.display = "table-row";
}
// If 'num' is less than the total number of rows, display only the first 'num' rows
else if (num < tr.length && i < num) {
tr[i].style.display = "table-row";
}
}
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Hope it resolves your query
!!!
+2
Thanks for the code! Unfortunately, it looks like this only displays the headers (Age/Gender and the groupings) but does not show any of the option responses, even when I try a different range of numbers for the previous question (QID4). There are no other matrices on this page. Any suggestions?
Would skip logic in my other questions cause any issues?
+27
Are QID4 and QID7 on the same page?
+2
Yes they are. And that's the main aim, to keep it all on the same page (without page breaks).
+2
I also have a similar question when it comes to a drill-down question, that I'd like to display the number of response rows to match a previous question (previous question is # of languages known, then the drill down would show one row for each number they selected, so they can specify the language from the drop down menu). So if at all possible I was hoping to learn from this code and adapt it for that type of question too. Thanks for your help!
+19
Hi LauraCeleste 
Can you see above gif and confirm above is the requirement .
IF yes ,Can you share further details of your question structure .
If possible make dummy copy and share the preview link .
+2
Hi qualtrics_nerd , in the above gif the issue is that you click the arrow to go to the next page. I am trying to avoid that (as that's something I could do with display logic). The aim is to keep all questions on the same page, so that question 2 loads directly below question 1 (without the need to click next).
+19
Hi LauraCeleste ,
Got it my previous code was made considering that both question were on different page.
please use below updated code for questions on same page:
altrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
// Get all table rows with class "Choice"
let tr = document.querySelectorAll("tr.Choice");
// Hide all rows in the table
for (let i = 0; i < tr.length; i++) {
tr[i].style.display = "none";
}
// Get the value of 'num' from the survey question and parse it as an integer
let numval=document.querySelector("input");
numval.addEventListener("keyup",function() {
let num=parseInt(numval.value,10);
// Display the first 'num' rows based on the value of 'num'
for (let i = 0; i < num; i++) {
// If 'num' is greater than or equal to the total number of rows, display all rows
if (num >= tr.length && i < tr.length) {
tr[i].style.display = "table-row";
}
// If 'num' is less than the total number of rows, display only the first 'num' rows
else if (num < tr.length && i < num) {
tr[i].style.display = "table-row";
}
}
for (let i = num; i < tr.length; i++) {
tr[i].style.display = "none";
}
});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
+2
Thanks. Unfortunately, it looks like I get the same issue I first mentioned, that this only displays the headers (Age/Gender and the groupings) but does not show any of the option responses, even when I try a different range of numbers for the previous question (QID4). It's all on the same page though.
In your latest code, I don't see anywhere where I can indicate I'm referring to QID4 does this line need to be incorporated from your first suggestion?
// Get the value of 'num' from the survey question and parse it as an integer
var num = parseInt("${q://QID4/ChoiceTextEntryValue}", 10);
+19
LauraCeleste ,
No , as it is getting the value dynamically
// Get the value of 'num' from the survey question and parse it as an integer
let numval=document.querySelector("input");
+2
Hm, seems repetitive of this line though, no?
let num=parseInt(numval.value,10);
Could you clarify what you meant. If it replaces some code or added as it's own line? I tried adding
var num = parseInt("${q://QID4/ChoiceTextEntryValue}", 10);
and still have the same issue.
Thanks!
+19
Hi LauraCeleste ,
Here is preview where it is working on same page:
+19
https://community.qualtrics.com/XMcommunity/discussion/comment/55460#Comment_55460Piping of data on the same page will not work.
As it will not be updated dynamically .
So what i have done here is:
let numval=document.querySelector("input");
//through above line i am selecting the text box where value is being entered
let num=parseInt(numval.value,10);
//numval.value will be a string so I am parsing it the parseInt() to make it integer and storing it in num to be used later
+2
Thanks for sharing the gif, glad it works for you. It's a shame that piping doesn't work on the same page. So I now have the issue that I have other questions on the same page that also have text response boxes, so if I can't identify the specific Question ID then maybe it's unsure which response it is referencing.
I re-tested it, and it looks like the code works, but for the wrong question (it works based on the first Text box on the page, not the question I was hoping for, but so close!). Any thoughts on how to refer just to the one question before? Thanks so much for your help!
+19
Hi LauraCeleste ,
If you can find the id of the textbox then you can do it , below are the steps for the same;
Replace below line of code with :
let numval=document.querySelector("input");
with this line:
let numval=document.getElementById("QR~QID9")
//QR~QID9 is the id of the textbox
Every thing else remains the same
+2
Amazing! Thank you so much! It works!
+19
LauraCeleste ,
You are welcome!!!
+2
qualtrics_nerd One last question 
If I wanted to do the same thing, but for a drill down question this time, is there an easy way to update the code for that?
(i.e., for a drill-down question, I'd like to display the number of response rows to match a previous question (previous question is # of languages known, then the drill down would show one row for each number they selected, so they can specify the language from the drop down menu).
+19
LauraCeleste ,
Will need more information as to what type question will be the previous one will be(format).
and format of data in drill down question(csv file)
+2
Of course.
The previous type of question is a Text Entry (which gives Number of languages spoken, in numeric format; similar to my original question), and the format of the data for the Drill Down, is csv file
+2
Oh, I found a solution from your initial suggestion. Now using a Text Entry (as the previous question) to inform a Matrix table (likert type answer, with drop down menu).
Qualtrics.SurveyEngine.addOnReady(function() {
// Get all table rows with tr.Choice if it's a choice
let tr = document.querySelectorAll("tr.ChoiceRow");
// Hide all rows in the table
for (let i = 0; i < tr.length; i++) {
tr[i].style.display = "none";
}
// Get the value of 'num' from the survey question and parse it as an integer
let numval = document.getElementById("QR~QID21");
numval.addEventListener("input", function() {
// Parse the value of the input as an integer
let num = parseInt(numval.value, 10);
// Show the first 'num' rows based on the value of 'num'
for (let i = 0; i < tr.length; i++) {
tr[i].style.display = num > i ? "table-row" : "none";
}
});
});
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.