Hello,
I am working with a side by side question where the first column is a series of radio buttons from 0 to 5, and the second column is a comments column for survey takers to expand on their response. I am trying to find a way to force users to input a comment into the comment column if their response in the first column is either 1 or 2. If a forced requirement isn’t possible, I’d like to have the corresponding row be highlighted when a user selects 1 or 2 as a way to remind them to fill out the comment. Here’s the code I have right now trying to highlight the comment box column description, any help is appreciated!
Qualtrics.SurveyEngine.addOnReady(function() {
// Get the ID of the current question
var questionId = this.getQuestionInfo().QuestionID;
// Define the rows
var rows = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Adjust according to your question design.
// Function to check the radio button selection and apply highlight
var checkAndHighlight = function() {
var isOneOrTwoSelected = false;
rows.forEach(function(row) {
var radios = document.querySelectorAll(`#QID${questionId} .ChoiceStructure tbody tr:nth-child(${row+1}) inputttype="radio"]`);
radios.forEach(function(radio) {
if (radio.checked && (radio.value == '1' || radio.value == '2')) {
isOneOrTwoSelected = true;
return false; // break the loop
}
});
});
console.log("isOneOrTwoSelected: " + isOneOrTwoSelected); // Debugging line
// Select the comment instruction text
var commentText = document.querySelector(`#QID${questionId} .SSCMSR1 .QuestionText`);
if (isOneOrTwoSelected) {
commentText.style.backgroundColor = 'yellow'; // highlight the box
} else {
commentText.style.backgroundColor = 'white'; // remove the highlight
}
};
// Add a click event listener to all radio buttons
document.querySelectorAll(`#QID${questionId} .ChoiceStructure tbody tr inputtype="radio"]`).forEach(function(radio) {
radio.addEventListener('click', checkAndHighlight);
});
});