Skip to main content
tjwdickinson
tjwdickinson
Known Participant
March 31, 2019
Answered

Forms: use JS to change text colour

  • March 31, 2019
  • 2 replies
  • 2453 views

I am creating a grade sheet to report exam scores to students, and I'd like to simplify things using JS. Unfortunately, I have little knowledge of JS, and I've been sitting here trying to make it work for me. Alas, it's time to turn to the forum.

I'm stumped on this problem: I need the colour of the text to change based on the relationship between two fields.

1. Field 'Gr_Score' is the score earned by the student.

2. Field 'Gr_Points' is the number of points for that section of the exam.

If the ratio (i.e. the result of 'Gr_Score' divided by 'Gr_Points') is less than 60%, the text in 'Gr_Score' needs to appear red. If the ratio is greater than or equal to 60%, the text in 'Gr_Score' needs to appear green. (The text in 'Gr_Points' does not change colour.)

For example:

Gr_Score = 6.0

Gr_Points = 10

Ratio = 6/10 = 0.6

Gr_Score displays as green

Gr_Score = 5.9

Gr_Points = 10

Ratio = 5.9/10 = 0.59

Gr_Score displays as red

The code currently looks like this:

--

var s = this.getField("Gr_Score"); // retrieve value of 'Gr_Score'

var p = this.getField("Gr_Points"); // retrieve value of 'Gr_Points'

var v = s / p ; // find the ratio of the score to points

if (v>=0 && v<.6) {event.target.textColor = color.red;}

else event.target.textColor = ["RGB",0,.667,0];

--

Thanks for any help you can give!

This topic has been closed for replies.
Correct answer Bernd Alheit

I'm afraid I don't quite understand the question...the code is in the 'Run custom validation script' option of the 'validation' tab in the text field properties for the element 'Gr_Score'. Is that what you're looking for?


Use the actual value:

var s = event.value;

2 replies

tjwdickinson
tjwdickinsonAuthor
Known Participant
March 31, 2019

While we're at it, I've come across another similar (but slightly different) instance:

Now I have a text field (with a text string, not numbers), and there are essentially two possible values for it: "(passed)" or "(not passed)". If I input "(passed)", I want it to display in green text; if I input "(not passed)", I want it to display in red text.

The code currently is:

var v = Text(event.value);

if (v = "(not passed)") {event.target.textColor = color.red;}

else event.target.textColor = ["RGB",0,.667,0];

Again, I've no idea if this is correct or not...well, I know it's not correct because it doesn't work...but I don't know if I'm close or if I'm miles away. Thanks in advance for your help!

sergiy2511
sergiy2511
Participating Frequently
March 31, 2019

Hi, in your IF statement, when you write the condition you need to use double equals, cause single is the assignment operator, not the comparing one. So something like this works on my end (put it into the field's custom validation script)):

var v = event.value;

if (v == "(not passed)") {event.target.textColor = color.red;}

else {event.target.textColor = ["RGB",0,.667,0];}

as for your first field, based on calculation, you have to make sure that your p variable is not zero before you run var v = s / p * 100;

otherwise, if field Gr_Points is empty, you may get a division by 0 error.

I hope it helps.

tjwdickinson
tjwdickinsonAuthor
Known Participant
March 31, 2019

Thanks! The fix for "(not passed)" worked great!

As for your advice about the divide by zero error--thanks for that. Does that mean I should always fill in the second field first (so the denominator is input before putting in the numerator, which has the script on it)? Or doesn't it matter?

Bernd Alheit
Bernd Alheit
Community Expert
March 31, 2019

For the value of a field use:

this.getField(" field name ").value

tjwdickinson
tjwdickinsonAuthor
Known Participant
March 31, 2019

Thanks, Bernd,

So my code is now:

var s = this.getField("Gr_Score").value;

var p = this.getField("Gr_Points").value;

var v = s / p * 100;

if (v>=0 && v<60) {event.target.textColor = color.red;}

else event.target.textColor = ["RGB",0,.667,0];

Unfortunately still doesn't work...I feel like there's something missing around line 3 (defining var v)...either before or after it...but I don't know what should go there.

tjwdickinson
tjwdickinsonAuthor
Known Participant
March 31, 2019

Do you have any other calculated fields on your form?


Currently three text fields in the form have something besides 'normal' properties.

1. 'Gr_Score' (the one in question)

2. 'Ov_Score' (overall score; this field is automatically calculated with the sum of 'Gr_Score' and four other fields, and it is validated by a script that turns the text green or red based on its value; it works fine)

3. 'passed' (the text string you helped with earlier, where the text colour changes red/green for 'not passed'/'passed'; this field also works fine)

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices