• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Forms: use JS to change text colour

New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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!

TOPICS
Acrobat SDK and JavaScript , Windows

Views

801

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 31, 2019 Mar 31, 2019

Use the actual value:

var s = event.value;

Likes

Translate

Translate
Community Expert ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

For the value of a field use:

this.getField(" field name ").value

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

After line 3 add this:

console.show();

console.println("v = " + v);

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

Thanks! So, I put the script in as you said, so it now reads:

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

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

var v = s / p * 100;

console.show();

console.println("v = " + v);

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

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

For the following examples/explanation, Gr_Points has a set value of 40, and I'm putting numbers into Gr_Score.

When I put in a number, the debugger pops up and says stuff at me. For example, when I put in 30, the console pops up and says v = 50; the 30 displays red. When I put in 20, the console pops up, says v = 75, and the 20 displays green.

So indeed, there's a maths error. What I would expect would be 30/40*100 = 75 and 20/40*100 = 50. But it's the opposite. When I put in 24, it displays red and outputs v = 50 in the console (24/40*100=60). When I put in 15, it displays green and outputs v = 60 (15/40*100=37.5).

Any ideas?

P.S. I've done some playing around, and in the script I temporarily replaced p with 40 in the equation. (So the line now reads var v = s / 40 * 100; ) Then I plugged a bunch of numbers into Gr_Score (the 'input' in the table below), and I recorded the output indicated in the console.

Trial
InputOutput
130100
22075
31550
42437.5
54060
61100

Conclusion: The calculation is always off by one. In other words, it doesn't compute based on the current input value, but on the previous one. So the output for trial 2 is the expected output for trial 1; the output for trial 3 is the expected output for trial 2; etc.

Note: reentering the same value gives no result. (So, if the current value of Gr_Score is 30, then typing 30 again doesn't run the script again; nothing changes, the console doesn't open, etc.)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

Where does you use this code?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

Use the actual value:

var s = event.value;

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

LATEST

Bingo--that did it! Thanks!

Could you please write one more comment including both

https://forums.adobe.com/people/Bernd+Alheit  wrote

For the value of a field use:

this.getField(" field name ").value

and

https://forums.adobe.com/people/Bernd+Alheit  wrote

Use the actual value:

var s = event.value;

and then I can mark it as the correct answer.

Thanks again!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

Do you have any other calculated fields on your form?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

please make sure that order of your calculations is following the logic sequence, first fields calculated before the following fields (hope it makes sense )

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

Ah, when I go there, it just lists the one field ('Ov_Score') as a calculated field. Indeed, the other field's aren't 'calculated', but 'validated'.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 31, 2019 Mar 31, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines