Change the background color of text based on the value in a table | XM Community
Skip to main content

Hi Community,
I am struggling to make a question in which each participant selects one list from two lists in a table, and repeats the question 20 times. Each time the contents of the lists change randomly (either TRUE or FALSE). The column "Applicant ID" has fixed values.
There are two features that I am trying to achieve:

  1. Each cell in List 1 and List 2 has a random value, TRUE or FALSE.

  2. To increase visibility, the background color of the values in List 1 and List 2 are changed when the values are different, rows 5, 6, and 8 in this case.

Qualtrics_QA.PNGI am new to Qualtrics, and I have no idea how to implement these features.
Any help would be much appreciated. Thank you.

https://community.qualtrics.com/XMcommunity/discussion/23215/change-the-background-color-of-text-based-on-the-value-in-a-tableYes, you can use side by side question type and randomize the embedded data in survey flow and include that as default choice in the side by side open text.
Post which you can highlight the unequal columns via javascript.
Hope it helps!


https://community.qualtrics.com/XMcommunity/discussion/comment/52818#Comment_52818Thank you for your answer.
But can I display the multiple choice question to ask "Which list do you consider to be better, List 1 or List 2?" when I use side-by-side question type?


https://community.qualtrics.com/XMcommunity/discussion/comment/52835#Comment_52835No, you will have to include a multiple choice below it.
Hope it helps!


https://community.qualtrics.com/XMcommunity/discussion/comment/52836#Comment_52836Thank you for the suggestion. It works fine as I initially imagined.
Additionally, how can I prevent editing the open-ended text when displaying?


https://community.qualtrics.com/XMcommunity/discussion/comment/52838#Comment_52838I am assuming your true and false lies in the third and fourth columns side by side.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery('.SBS3.AnswerCell>input').attr("readonly",true);
jQuery('.SBS4.AnswerCell>input').attr("readonly",true);
});
Hope it helps!


https://community.qualtrics.com/XMcommunity/discussion/comment/52840#Comment_52840Thank you again for the suggestion! The code below worked (enclosures are not ' but ").
It is really helpful since I am not familiar with jQuery.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery(".SBS3.AnswerCell>input").attr("readonly",true);
jQuery(".SBS4.AnswerCell>input").attr("readonly",true);
});


https://community.qualtrics.com/XMcommunity/discussion/comment/52853#Comment_52853Glad it worked!
Kindly accept the answer if it worked for you.


Based on what Deepak shared, the current table looks like this.
Qualtrics_QA2.PNGOne last thing, I want to change the colors of the cells in List 1 and List 2 when the values are different.
In this case, I want to change the cell color except for rows 2 and 4 because the rows have the same values (TRUE) in both List 1 and List 2. The goal should look like the one below.
Qualtrics_QA2_2.pngBut I could not figure out how. Could you share a code for that?
This is the last feature I definitely need to implement. Thank you.


https://community.qualtrics.com/XMcommunity/discussion/comment/52856#Comment_52856You can use something like this, I have done it for two rows in one column as your image you can repeat for others.
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var qid= this.questionId;

/*Repeat this to include all elements of all rows*/
var A1 =  document.getElementById('QR~'+qid+'#3~1~1~TEXT').value;
var A2 = document.getElementById('QR~'+qid+'#3~1~2~TEXT').value;
var B1 =  document.getElementById('QR~'+qid+'#3~2~1~TEXT').value;
var B2 = document.getElementById('QR~'+qid+'#3~2~2~TEXT').value;

/*Repeat this if logic for all rows*/
if(A1!=A2){
document.getElementById('QR~'+qid+'#3~1~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#3~1~2~TEXT').style.background='yellow';
}

if(B1!=B2){
document.getElementById('QR~'+qid+'#3~2~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#3~2~2~TEXT').style.background='yellow';
}

});
Hope it helps!


Thank you very much Deepak!
Now I can implement everything I need for my survey.
As a note, I am sharing the entire code that worked.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery(".SBS1.AnswerCell>input").attr("readonly",true);
jQuery(".SBS2.AnswerCell>input").attr("readonly",true);
jQuery(".SBS3.AnswerCell>input").attr("readonly",true);
jQuery(".SBS4.AnswerCell>input").attr("readonly",true);
jQuery(".SBS5.AnswerCell>input").attr("readonly",true);
});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
var qid= this.questionId;

/*Repeat this to include all elements of all rows*/
var A1 = document.getElementById('QR~'+qid+'#2~1~1~TEXT').value;
var A2 = document.getElementById('QR~'+qid+'#2~1~2~TEXT').value;
var B1 = document.getElementById('QR~'+qid+'#2~2~1~TEXT').value;
var B2 = document.getElementById('QR~'+qid+'#2~2~2~TEXT').value;
var C1 = document.getElementById('QR~'+qid+'#2~3~1~TEXT').value;
var C2 = document.getElementById('QR~'+qid+'#2~3~2~TEXT').value;
var D1 = document.getElementById('QR~'+qid+'#2~4~1~TEXT').value;
var D2 = document.getElementById('QR~'+qid+'#2~4~2~TEXT').value;
var E1 = document.getElementById('QR~'+qid+'#2~5~1~TEXT').value;
var E2 = document.getElementById('QR~'+qid+'#2~5~2~TEXT').value;
var F1 = document.getElementById('QR~'+qid+'#2~6~1~TEXT').value;
var F2 = document.getElementById('QR~'+qid+'#2~6~2~TEXT').value;
var G1 = document.getElementById('QR~'+qid+'#2~7~1~TEXT').value;
var G2 = document.getElementById('QR~'+qid+'#2~7~2~TEXT').value;
var H1 = document.getElementById('QR~'+qid+'#2~8~1~TEXT').value;
var H2 = document.getElementById('QR~'+qid+'#2~8~2~TEXT').value;
var I1 = document.getElementById('QR~'+qid+'#2~9~1~TEXT').value;
var I2 = document.getElementById('QR~'+qid+'#2~9~2~TEXT').value;
var J1 = document.getElementById('QR~'+qid+'#2~10~1~TEXT').value;
var J2 = document.getElementById('QR~'+qid+'#2~10~2~TEXT').value;

/*Repeat this if logic for all rows*/
if(A1!=A2){
document.getElementById('QR~'+qid+'#2~1~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~1~2~TEXT').style.background='yellow';
}
if(B1!=B2){
document.getElementById('QR~'+qid+'#2~2~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~2~2~TEXT').style.background='yellow';
}
if(C1!=C2){
document.getElementById('QR~'+qid+'#2~3~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~3~2~TEXT').style.background='yellow';
}
if(D1!=D2){
document.getElementById('QR~'+qid+'#2~4~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~4~2~TEXT').style.background='yellow';
}
if(E1!=E2){
document.getElementById('QR~'+qid+'#2~5~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~5~2~TEXT').style.background='yellow';
}
if(F1!=F2){
document.getElementById('QR~'+qid+'#2~6~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~6~2~TEXT').style.background='yellow';
}
if(G1!=G2){
document.getElementById('QR~'+qid+'#2~7~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~7~2~TEXT').style.background='yellow';
}
if(H1!=H2){
document.getElementById('QR~'+qid+'#2~8~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~8~2~TEXT').style.background='yellow';
}
if(I1!=I2){
document.getElementById('QR~'+qid+'#2~9~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~9~2~TEXT').style.background='yellow';
}
if(J1!=J2){
document.getElementById('QR~'+qid+'#2~10~1~TEXT').style.background='yellow';
document.getElementById('QR~'+qid+'#2~10~2~TEXT').style.background='yellow';
}
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
And it looks like this.
Qualtrics_QA3.PNG


https://community.qualtrics.com/XMcommunity/discussion/comment/52895#Comment_52895Glad it worked!


Leave a Reply