Question

Change Field Color Based on Value

Forms Version 10

Updated July 7, 2023

asked on July 6, 2023

Is is possible to change the field background or text color based on the value in the field?

Specifically I have a test I created with multiple questions (radio button fields) I assigned the correct answer with a value of 1, while all the incorrect answers with a value of 0.

When the test goes to a review/grading step I would like to highlight the incorrect answers in red/orange perhaps.

0 0

Answer

SELECTED ANSWER

replied on July 7, 2023

How about this? This relies on the questions having a CSS Class of testQuestion. It will loop through each field with the testQuestion class. If the correct answer is marked, it highlights it in bright green. If the wrong answer is marked, it highlights it in orange and highlights the correct answer in light green.

In this screenshot, choice 2 was the correct answer (value = 1) for all three questions:

$(document).ready(function() {
  
  $('.testQuestion').each(function() {
    var answerValue = $(this).find('input:checked').val();
    if(answerValue == '1') {
      $(this).find('input:checked').parent().css('background-color', '#00BB00');
    }
    else {
      $(this).find('input:checked').parent().css('background-color', '#FF8800');
      $(this).find('input[value="1"]').parent().css('background-color', '#AAFFAA');
    }
  });
  
});

0 0

Replies

replied on July 6, 2023 • Show version history

Yes! This is definitely doable with some custom CSS and/or Javascript.

I built a test process like this and it’s available in the Solution Marketplace: https://marketplace.laserfiche.com/details/18187/Training-Evaluation Even got a shoutout during the Empower 2023 Keynote for this one.

Note that a savvy user could crack your 0 and 1 code pretty easily via the Inspect Element function in their browser. 😉

EDIT TO ADD: If you really are just wanting to highlight the fields with value=1, CSS like this should work. This identifies the element with the choice class, that has a child element of input type that has a value = 1, and then gives it a background color of orange. This was tested in the Classic Designer on Version 11.0.2212.30987 - but it should work in Version 10 (which is what you tagged for your post). Here's the CSS and a Screenshot:

.choice:has(> input[value="1"]) { background-color: #FF8800; }

0 0

replied on July 7, 2023

Thanks for the pointers. My use case is a bit different than your example. When the form is sent to the reviewer, ideally I would like to have any question that was answered incorrectly (so the value does not equal 1) highlighted in some way so the reviewer can follow up with the employee regarding those questions.

I was able to get the total score rather easily, but the javascript to do what I describe seems to be giving me trouble.

0 0

SELECTED ANSWER

replied on July 7, 2023

In this screenshot, choice 2 was the correct answer (value = 1) for all three questions:

$(document).ready(function() {
  
  $('.testQuestion').each(function() {
    var answerValue = $(this).find('input:checked').val();
    if(answerValue == '1') {
      $(this).find('input:checked').parent().css('background-color', '#00BB00');
    }
    else {
      $(this).find('input:checked').parent().css('background-color', '#FF8800');
      $(this).find('input[value="1"]').parent().css('background-color', '#AAFFAA');
    }
  });
  
});

0 0

replied on July 7, 2023

This works great! I love how it still shows the correct answer even if it was not selected by the employee.

1 0

You are not allowed to follow up in this post.

Question

Question

Change Field Color Based on Value

Answer

Replies

Sign in to reply to this post.