David,

Thank you for the reply.

So while I am using CSS and the UI is functioning as expected, and I can make colored buttons (see the KEY in my examples above), what I am not able to figure out, is how to get the changed state of the button to appear in the Save-to-Repository version of the form.

Now I do see that you create a CLASS in CSS for each button (.AButton, .BButton,.CButton,.DButton) which I do not do.  Instead I use a single CLASS (.step) for all buttons and use the element's "ID" as a reference, ID="#qn" for example.

Is that the key difference?

[NOTE: I will try using your idea of assigning multiple CLASS IDs to the same properties.  For example .step1, .step2 ... and see if that solves it. I will post the resolution.]

MY current CSS and sample JS logic are:

CSS

/* Step Button */
.step {
  background: #cccccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

JS

//STEP 1 Complete?
if ( $('#q11 select option:selected').text() != "" &&
     $('#q13 input').val() != "" ) {
         $('#q6 .step').css("background","#008000");

} 

The changes as I described, using multiple CLASSES (.step1 ... .step9) did not resolve the issue.  As you can see in the Form-As-Saved-2 screenshot, if the button is hard-coded (as is the case for the KEY), it is retained.  If the button color is dynamically changed, it will reflect in the UI in the LIVE session, but not be captured in the stored document.

HERE'S WHAT'S ODD

All the buttons use the same base CSS, from the KEY (class="key") to the STEP (class="step1") . Yet the KEY buttons can be recolored and those colors are reflected in the Saved-As document, while the STEP buttons are not.

NEXT TEST

I specify the ID for the keys, and do not for the steps. I will test this to see if it makes a difference.

CSS

/* Step Button */
.step1, .step2, .step3, .step4, .step5, .step6, .step7, .step8, .step9, .key {

...

JS

  // SET KEY COLORS
  $('#q86 span[id="i1"].key').css("background","#cccccc")    // GREY
  $('#q86 span[id="i2"].key').css("background","#008000")    // GREEN
  $('#q86 span[id="i3"].key').css("background","#b40101")    // RED
  $('#q86 span[id="i4"].key').css("background","#004c98")    // BLUE

//STEP 1 Complete?
   if ( $('#q11 select option:selected').text() != "" &&
        $('#q13 input').val() != "" ) {
           $('#q6 .step1').css("background","#008000");
}