The functionality of hiding elements using the .hide() function in Javascript is affected by Qualtrics

My Qualtrics survey has a side-by-side question with 30 rows. The first 20 rows will only appear if something is entered in text boxes from previous questions, while the last 10 rows have display logic that ensures at least 10 rows are shown in total. For example, row 21 only appears if none of the first 20 are displayed, and row 22 shows up if only one of the first 20 is displayed, and so on.

The first column of the question contains checkboxes, and I'm using 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();
});

This setup works perfectly when none of the previous rows are displayed:

https://i.sstatic.net/LqmsZ.png

However, it fails if even one of the previous rows is displayed:

https://i.sstatic.net/jFKqd.png

I used Inspect Element on the preview to check if there were any unexpected changes in tags, but couldn't find anything unusual regarding ID changes. When inspecting the checkbox for 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. However, when one of the first 20 rows appears, the same inspection reveals that 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 puzzled about how the activation of display logic could interfere with the Javascript function.

javascriptqualtrics

Answer №1

After contemplating for a while, it dawned on me that when a display logic conceals an element with Javascript, the corresponding script will not execute. I came to understand that this concept operates beyond individual lines of code - if one controlled element is hidden by a line of code, the entire block of code becomes ineffective.

To resolve this issue, I implemented a loop that dynamically addressed only the rows meant to be visible:

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();
     }
});

In my specific scenario, the count variable was crucial in determining the display of the last 10 rows. By incorporating this into the loop parameters, the validity of the code was maintained despite any display changes. (For more details, refer to the explanation here.)

The key lesson learned: Employing a loop from the start would have been beneficial - tweaking the parameters thereafter is a straightforward adjustment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extracting information from the identifier of an option within a dropdown menu <select>

I'm currently working on fetching data from a based on the choice made by the user. The data is coming from the OpenDota API. Upon inspecting the element, I can see that the option tag is being populated correctly. However, I believe I might be handl ...

javascriptreactjsaxios

What reasons might lead an object to be passed to a view as the exact term 'object' in Express.js?

Using nodejs, express, and ejs. I have a variable called 'result' which is properly defined. When I use console.log(result) within the router.get function on my index page, it outputs a correctly structured array of objects. After that, I rende ...

javascriptnode.jsexpress

Angular controller unit testing is an essential practice in software development

I am currently working with an angular module named 'widgets'. In my app, I have used its signature as follows: var app = angular.module('widgets', [ 'widget.Panel', 'widget.List', 'services' ] ...

javascriptangularjsunit-testing

Send data with AJAX and PHP without refreshing the page

I have implemented the "add to favorite" feature on my WordPress project using a <form> submission. Each time I click on the add to fav button, it works fine, but the page always reloads which is quite annoying. To tackle this issue, I decided to imp ...

javascriptphpjqueryajaxwordpress

Animating shapes in Three.js

Is it possible to animate the underlying shape of a mesh created using Three.js by drawing a shape and extruding it? For example: drawShape: function(){ var shape = new THREE.Shape(); shape.moveTo(0, 0); shape.arc(0,0,30,0,(Math.PI*1.9),true) ...

javascriptthree.js

JSON object containing multiple elements in JavaScript

I have a JavaScript JSON object const student = { name: "bob", age: 7, grade: 6 } and I can send it to my Web API using the axios POST command with JSON.stringify(student) To build multiple student objects from an array by looping through and p ...

javascriptarraysjson

Exploring Angular: Looping through an Array of Objects

How can I extract and display values from a JSON object in a loop without using the keyValue pipe? Specifically, I am trying to access the "student2" data and display the name associated with it. Any suggestions on how to achieve this? Thank you for any h ...

javascriptangularjstypescript

Breaking down a URL based on one of two distinct components

Currently, I have a piece of code that splits the URL and removes everything after &7. Is there a way to modify it so that it also checks for |relevance simultaneously and splits based on whichever one is found? $(document).ready(($) => { const pa ...

javascriptjquery

Ensure that only one button can be selected at a time for non-radio button elements in the

This is the code snippet I am working with $(document).ready(function(){ $("a.btn1").click(function() { $(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down"); }); $("a.btn2").click(function(){ $(this).fi ...

javascripthtmlcss

What is the best way to calculate the total sum of grouped data using mongoose?

I have a collection of log data that I need to work with. [ { "logType":1, "created_at": 2015-12-15 07:38:54.766Z }, .. .. .., { "logType":2, "created_at": 2015-13-15 07:38:54.766Z } ] My task is to group the ...

javascriptmongodbmongoosegroup-bysum

Tips for retrieving console data in VueJS Data

Is there a way to review data from a form component in the console without vue taking any action? I need to receive external data and fill in the fields accordingly. I attempted to set a value using document.getElementsByName("nfe.codigo")[0].value = "000 ...

javascriptvue.jsvuejs2

Storing information in a MongoDB database using Node.js

Context: Looking to insert data into a MongoDB database using Node.js Problem Statement: Attempting to insert data into the MongoDB database but encountering an error. Unable to locate the issue. Present Output: Reference Error Attach Code: filter.js ...

javascriptnode.jsmongodb

Attempting to retrieve the value from `document.all["" + object.getAttribute("EndDate", true) + ""].value;` is ineffective in Firefox

In Firefox, document.all["" + object.getAttribute("EndDate", true) + ""].value; works but not in IE. Is there an alternative method that can work across different browsers? ...

javascript

having trouble transferring data from one angular component to another

I've been attempting to send data from one component to another using the service file method. I've created two components - a login component and a home component. The goal is to pass data from the login component to the home component. In the l ...

javascriptangularangular-componentsangular-module

The Issue of Anti Forgery Token Not Functioning Properly with Ajax JSON.stringify Post

I have been attempting to utilize an Anti Forgery token with JSON.stringify, but despite researching multiple sources, I have not been successful. Below is my AJAX code for deleting some information without any issues. Upon adding the anti forgery token, I ...

javascriptajaxasp.net-mvcjsonjquery

I encounter an error message stating "Cannot read property 'push' of undefined" when trying to add an item to a property within an interface

I have a model defined like this : export interface AddAlbumeModel { name: string; gener: string; signer: string; albumeProfile:any; albumPoster:any; tracks:TrackMode[]; } export interface TrackMode { trackNumber: number; ...

javascriptangulartypescript

Directing JSON POST Request Data to View/Controller in a Node.js Application

Currently, I am working on a project hosted on a local server at http://localhost:3000/. This server receives a post request from another server in the following manner: return requestLib.post({ url: 'http://localhost:3000/test', timeout ...

javascriptangularjsnode.jsexpresspost

A guide on displaying JSON response data in Angular JS with the help of ng-repeat

I am attempting to display the values of a specific JSON in the correct order. Here is how my JSON is structured : { "A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}], "B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}], "C":[{"id":"21"," ...

javascriptjsonangularjs

Tool for enhancing user experience in web development

I've come across mentions of a JavaScript library that mimics the console from development tools, but it seems to be elusive on the internet. There are instances when I deploy my HTML5 + JavaScript application (via Icenium) on a tablet or smartphone ...

javascriptandroidiosdeveloper-toolsicenium

What is the method for displaying data from a JSON file that is associated with the wallet address of the authenticated user in next.js?

I am currently working on a claim page using next.js, where logged in Metamask addresses can perform the following tasks: Access data from a local .json file to check eligibility for claiming an item and display the claim page. Submitting a form to update ...

javascriptjsonnext.jsweb3js