Changing background fill color based on Radio Button selections

[aron-gart]

Hi,

I'm very new to scripting in LC, so I've hit a wall on my latest form.I'm trying to build a form with a "leikert-like" scale, however one of the stipulations (from my boss) was the background of the Radio Buttons are to fill based on which button is selected.

For example, Question 1 has 4 Radio Buttons to choose from: Poor, Fair, Good, Great. If the person completing the form selects poor, I would like the poor background color to be filled. If someone selects fair, I would like that background color to be filled, as well as the background of poor. Selecting Good would fill the colors of good, fair, and poor; and selecting Great would fill the colors of all four.

Anyone have any ideas of how/if this can be done? In my initial tests, I've gotten the button itself to change colors, but not the background fill (which can be changed manually on the Border palette).

Any insight would be much appreciated. Thanks!

Aaron

[dcidev · Accepted solution]

Here is the code you can use in the change event of the ExclusionGroup object (titled RadioButtonList by default). It's the parent object of each individual radio button.

for (var i=0;i<this.resolveNode("#field").classAll.length;i++){
 if (i<this.rawValue)
  this.resolveNode("#field["+i+"]").border.fill.presence="visible";
 else
  this.resolveNode("#field["+i+"]").border.fill.presence="hidden";
}

This also assumes that the value for each radio button is numbered sequentially from 1 through however many radio buttons you have.

Now here's the thing. I'm assuming each radio button has a different colour. You could code for the colours yourself in JavaScript, but I manually picked the colours through Designers UI. Once all the radio buttons colours were set, select a radio button and go View>XML Source. Where you see the element <fill>, add the attribute presence="hidden". Do that for each radio button. Here's what I mean:

                  </caption>
                  <border>
                     <edge presence="hidden"/>
                     <fill presence="hidden"> <!--add presence="hidden" to look like this-->
                        <color value="255,0,0"/>
                     </fill>
                  </border>
                  <items>

Kyle

[aron-gart]

Thanks. I was able to change the XML, but am having problems with the script. As I said above, I'm new to this, so excuse me for the dumb questions...

The text above highlighted in Red...am I supposed to change that text or should the script work as written above?

[dcidev]

You should be able to just copy and paste the text as written.

Here's the sample I made:

http://www.fieldeffecttechnologies.com/AdobeForums/ColouredLikert.pdf

Kyle

[aron-gart]

This is awesome...Thanks! Didn't have the file saved as dynamic xml form so was having troubles there. Good to go now though, thanks again.

[dcidev]

You're most welcome.

Don't forget to mark as answered.

Thanks.

Kyle

[aron-gart]

Hey Kyle,

I'm finally getting back into this...only two months later. I just realized something that will throw a wrench in the script you provided. My values of my sample radio buttons were ordered sequentially from 1, but my actual buttons are ordered as follows: 1.0, 1.5, 2.0, 2.5, 3.0, 3.25, 3.50, 3.75, 4.0.

How can your script be adapted to accomodate the change in radio button values?

[dcidev]

Try this:

var bStop=false;
for (var i=0;i<this.resolveNode("#field").classAll.length;i++){
 if (bStop)
  this.resolveNode("#field["+i+"]").border.fill.presence="hidden";
 else
  this.resolveNode("#field["+i+"]").border.fill.presence="visible";
 if (!this.resolveNode("#field["+i+"]").isNull)
  bStop = true;
}

Kyle

[aron-gart]

Worked like a charm. Thanks again for taking the time!