Question

Qualtrics Javascript only working in 'preview question' not survey preview

1 month ago
February 17, 2025
4 replies
74 views

+1

lks

Hi there,

I have used Javascript to remove the rating scale for the last row of my survey question. In ‘preview question’ it looks how I want it, like this:

However, when I preview the survey, it still looks like this:

I have also published a copy of the survey and the rating scales appear there too. The JavaScript I have used is as follows:

Qualtrics.SurveyEngine.addOnload(() => {
const questionContainer = document.getElementById("QID41");

if (questionContainer) {
// Select all radio button inputs within the container
const radioButtons = questionContainer.querySelectorAll("input[type=radio]");

// Convert NodeList to array and get the last 2 radio buttons
[...radioButtons].slice(-2).forEach(radio => {
// Disable and hide the radio button
radio.disabled = true;
radio.style.display = "none";

// Find the associated label using 'for' attribute
const label = questionContainer.querySelector(`label[for="${radio.id}"]`);
if (label) {
label.style.display = "none";
}
});
}
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/

});

Any help would be greatly appreciated! Thanks.

N

+3

nikamshubham_73
Level 2 ●●
20 days ago
February 28, 2025

Hi @lks,

I attempted to use your code but didn’t see any positive results. However, I understand your request, and below is the JavaScript that will definitely help you achieve your goal. Simply paste the code below into the JS options and replace the bold QIDXX with the appropriate Question ID from your survey. You can also find the Question ID in Support mode, as shown in the image below.
PS: It works for mobile view as well.

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

// Array of radio button IDs
var radioButtonIds = ["QR~QID82~3~1", "QR~QID82~3~2", "QR~QID82~3~3"];

radioButtonIds.forEach(function(id) {
// Disable the radio button
var radioButton = document.getElementById(id);
if (radioButton) {
radioButton.disabled = true;

// Hide the radio button (input)
radioButton.style.display = "none";
}

// Hide the label associated with the radio button
var label = document.querySelector('label[for="' + id + '"]');
if (label) {
label.style.display = "none";
}
});

OUTPUT:

J

jbk
Level 4 ●●●●
17 days ago
March 3, 2025

nikamshubham_73 wrote:

Hi @lks,

I attempted to use your code but didn’t see any positive results. However, I understand your request, and below is the JavaScript that will definitely help you achieve your goal. Simply paste the code below into the JS options and replace the bold QIDXX with the appropriate Question ID from your survey. You can also find the Question ID in Support mode, as shown in the image below.
PS: It works for mobile view as well.

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

// Array of radio button IDs
var radioButtonIds = ["QR~QID82~3~1", "QR~QID82~3~2", "QR~QID82~3~3"];

radioButtonIds.forEach(function(id) {
// Disable the radio button
var radioButton = document.getElementById(id);
if (radioButton) {
radioButton.disabled = true;

// Hide the radio button (input)
radioButton.style.display = "none";
}

// Hide the label associated with the radio button
var label = document.querySelector('label[for="' + id + '"]');
if (label) {
label.style.display = "none";
}
});

OUTPUT: