CODEWITHSUNDEEP
javascriptqualtrics
bcarothers
bcarothers

Reputation: 924

Qualtrics display logic interferes with javascript .hide()

I have a side-by-side question in Qualtrics with 30 rows. Each of the first 20 rows has display logic such that they only appear when something is entered in text boxes in prior questions. Each of the last 10 rows has display logic such that at least 10 rows show up in the entire question, i.e. row 21 only shows up if none of the first 20 are displayed, row 22 shows up if only one of the first 20 are displayed... row 30 shows up if 9 of the first rows are displayed, and none of them appear if at least 10 of the first rows are displayed.

The first column of the question is a checkbox, and I'm using the following Javascript to hide the checkboxes for the last 10 rows:

Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var p = $(qid);
p.down('label[for="QR~'+qid+'#1~21~1"]').hide();
p.down('label[for="QR~'+qid+'#1~22~1"]').hide();
p.down('label[for="QR~'+qid+'#1~23~1"]').hide();
p.down('label[for="QR~'+qid+'#1~24~1"]').hide();
p.down('label[for="QR~'+qid+'#1~25~1"]').hide();
p.down('label[for="QR~'+qid+'#1~26~1"]').hide();
p.down('label[for="QR~'+qid+'#1~27~1"]').hide();
p.down('label[for="QR~'+qid+'#1~28~1"]').hide();
p.down('label[for="QR~'+qid+'#1~29~1"]').hide();
p.down('label[for="QR~'+qid+'#1~30~1"]').hide();
});

It works fine if none of the previous rows are displayed:

enter image description here

But bombs if even one of the previous rows is displayed:

enter image description here

I poked around with Inspect Element on the preview to see if the tags changed somehow, but couldn't find anything unexpected as far as changing IDs. When checking the element for the checkbox on row 23 when none of the first 20 rows appear:

<input id="QR~QID4#1~23~1" name="QR~QID4#1~23~1" value="Selected" 
data-runtime-checked="runtime.Children.1.Choices.23.Answers.1.Selected" 
aria-labelledby="question1QID4 question1QID4-answer1QID4 choice23QID4"
class="QWatchTimer" type="checkbox">

<label for="QR~QID4#1~23~1" class="q-checkbox" data-runtime-class
-q-checked="runtime.Children.1.Choices.23.Answers.1.Selected" 
style="display: none;"></label>

As expected, the label code is grayed out. When one of the first 20 rows appears, it's much the same, but style="display: none;" does not appear at the end:

<input id="QR~QID4#1~23~1" name="QR~QID4#1~23~1" value="Selected" 
data-runtime-checked="runtime.Children.1.Choices.23.Answers.1.Selected" 
aria-labelledby="question1QID4 question1QID4-answer1QID4 choice23QID4"
class="QWatchTimer" type="checkbox">

<label for="QR~QID4#1~23~1" class="q-checkbox" data-runtime-class
-q-checked="runtime.Children.1.Choices.23.Answers.1.Selected"></label>

I'm at a loss for how activation of display logic would interfere with the Javascript.

Upvotes: 0

Views: 546

Answers (1)

bcarothers
bcarothers

Reputation: 924

After a few hours of percolating, I remembered that if a display logic hides an item with Javascript, that script won't run. I hadn't realized that it's not just on a line-by line basis - looks like if one element controlled by one line of code gets hidden, the whole block of code gets invalidated.

I was able to solve it with a loop that dynamically considered only the rows that would be displayed:

Qualtrics.SurveyEngine.addOnload(function()
{
    //Remove checkboxes for last ten options
    var qid = this.questionId;
    var p = $(qid);
    var count = Qualtrics.SurveyEngine.getEmbeddedData('count');
    var min = 21+count;
    for (var i = min; i < 31; i++) {
        p.down('label[for="QR~'+qid+'#1~'+i+'~1"]').hide();
    }
});

At least in my case, the count variable was used to determine how many of the last 10 rows to display. Once I built that into the parameters for the loop, nothing would be invalidated by the display logic. (Check here for the process on that if interested.)

Lesson learned: I should've been using a loop to begin with - modifying the parameters is an easy step after that.

Upvotes: 0

Related Questions