Solved
How do I highlight rows in a matrix table if not selected?
Hi everyone,
I have a matrix question and if I miss to answer a row, I am getting an error message saying 'Please answer this question'.
Is there a way of highlighting the row that I have missed. Like in my screenshot below Currently it is very hard to identify the row that I have missed to answer.
Thank you.
Kai
!
Best answer by Samarth
Hi @Kai,
I do similar thing by highlighting the missed rows.
!
Please place below CSS code in question text:
<style type="text/css">.redhighlight{
background-color:red!important;
}
</style>
and Below javascript code in java script tab:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
setInterval(function(){
jQuery('#NextButton').click(function(){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
else{
jQuery(this).removeClass('redhighlight');
}
});
});
if(localStorage.getItem("clicked") == "Yes"){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
}
else{
jQuery(this).removeClass('redhighlight');
}
}) ;
}
},10);
});
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*/
if(jQuery('.ChoiceRow').length == jQuery(':radio:checked').length)
{
localStorage.clear();
localStorage.setItem("clicked", "No");
}
else{
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
});
Hope this helps 😀
Regards,
Samarth
Please place below CSS code in question text:
<style type="text/css">.redhighlight{
background-color:red!important;
}
</style>
and Below javascript code in java script tab:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
setInterval(function(){
jQuery('#NextButton').click(function(){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
else{
jQuery(this).removeClass('redhighlight');
}
});
});
if(localStorage.getItem("clicked") == "Yes"){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
}
else{
jQuery(this).removeClass('redhighlight');
}
}) ;
}
},10);
});
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*/
if(jQuery('.ChoiceRow').length == jQuery(':radio:checked').length)
{
localStorage.clear();
localStorage.setItem("clicked", "No");
}
else{
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
});
Hope this helps 😀
Regards,
Samarth
+5Hi @Kai,
I do similar thing by highlighting the missed rows.
!
Please place below CSS code in question text:
<style type="text/css">.redhighlight{
background-color:red!important;
}
</style>
and Below javascript code in java script tab:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
setInterval(function(){
jQuery('#NextButton').click(function(){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
else{
jQuery(this).removeClass('redhighlight');
}
});
});
if(localStorage.getItem("clicked") == "Yes"){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
}
else{
jQuery(this).removeClass('redhighlight');
}
}) ;
}
},10);
});
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*/
if(jQuery('.ChoiceRow').length == jQuery(':radio:checked').length)
{
localStorage.clear();
localStorage.setItem("clicked", "No");
}
else{
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
});
Hope this helps 😀
Regards,
Samarth
Please place below CSS code in question text:
<style type="text/css">.redhighlight{
background-color:red!important;
}
</style>
and Below javascript code in java script tab:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
setInterval(function(){
jQuery('#NextButton').click(function(){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
else{
jQuery(this).removeClass('redhighlight');
}
});
});
if(localStorage.getItem("clicked") == "Yes"){
jQuery('.ChoiceStructure tr:nth-child(n+1)').not('.Answers').each(function(){
if(jQuery(this).find(":radio").is(':checked')==false){
jQuery(this).addClass('redhighlight');
}
else{
jQuery(this).removeClass('redhighlight');
}
}) ;
}
},10);
});
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*/
if(jQuery('.ChoiceRow').length == jQuery(':radio:checked').length)
{
localStorage.clear();
localStorage.setItem("clicked", "No");
}
else{
localStorage.clear();
localStorage.setItem("clicked", "Yes");
}
});
Hope this helps 😀
Regards,
SamarthDear Samarth,
I have been trying to implement the code you suggested above, but are encountering some problems.
When I paste the code above into the Javascript window of my matrix table question and click Save, the following error message appears:
!
Also, when I preview the questionnaire in the Qualtrics "Preview" option, the items are highlighted in red immediately once the question has loaded:
!
Can you perhaps guide me on how to change the code to (a) fix the error message above and (b) to only highlight the unanswered statements when the user clicks on "Next" to go to the next question?
The specific question currently has the "Request response" option activated.
Thank you for your help.
Regards,
Theuns
Also, when I preview the questionnaire in the Qualtrics "Preview" option, the items are highlighted in red immediately once the question has loaded:
!
Can you perhaps guide me on how to change the code to (a) fix the error message above and (b) to only highlight the unanswered statements when the user clicks on "Next" to go to the next question?
The specific question currently has the "Request response" option activated.
Thank you for your help.
Regards,
Theuns
@tkotze, Did you ever find a solution for highlighting only the unanswered statements in a matrix?
An old thread now, I know, but I would also be very interested in finding out how to highlight missed answers but only after the question has been attempted...
I would also be very interested in finding out how to highlight unanswered statements in a matrix table but only after the user has clicked next, thanks!
+27PsyTechMMU - You might be interested in this: https://www.qualtrics.com/community/discussion/comment/32225#Comment_32225
+20Please take a look at this one...
https://www.qualtrics.com/community/discussion/comment/32400#Comment_32400
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.