0

Change background colour of an element on trigger action

353 0 1
Posted   2 months ago

Hi,

I'm trying to change the background colour of an input text box when the string that they input equals a pre-defined value (i.e. I'd like to have the input text box turn green when they enter the correct string).

I can get the two parts of this problem working independently (colour change and string check trigger) but can't get them to work together. I've been able to successfully target and change the input text box background using the theme Add CSS functionality, and i can successfully get an action to fire when they type in the correct string.

However, I'm using the Custom CSS action but no matter what CSS i put in the box, it wont change the text box background. I've tried having just the background colour CSS in there:

background-color:aqua;

 and I've tried adding the code to target the text box (this works when applied to the theme CSS):

[data-title="StaticSurname"]
{
background-color:aqua;
}

 but nothings working.

Am i trying to do the impossible or am i missing something? Any help would be greatly appreciated.

Many thanks,

Andy

 

Comments

( 0 )

Answers  ( 1 )

0
avatar Luke Hickey   |    
Posted   2 months ago
  ●   Edited   2 months ago

Andy,

Here's what I just tried to get this to work.

  1. Added a "basic text input" field to a page (first option in the text input form controls)
  2. set a variable for the input
    1. select the input
    2. select the Options context tab
    3. click Variable
    4. From the Form Variables modal, select New Variable and give it a name, or if you already have a variable, select it.
    5. Close the Form Variables modal
  3. Click the Interact Ribbon tab
  4. Click Triggers / Variables / Is Changed
  5. From the dialog that opens,
    1. click the Variables selection option
    2. pick your Variable from step 2
    3. Click "Equal To" option
    4. type in the value you want to use to trigger the color change
    5. click Next
    6. click Animation and Effects
    7. click Custom CSS
    8. From the Right Panel that opens,
      1. enter your CSS in the CSS box; background-color:aqua;
      2. click apply
      3. click preview

From the Preview, you should see the field change when your string matches.

One of the other things I would add, repeat the above but do a "Not Equal to" the string that matches, and set the background to an error color or use background-color: inherit; to clear the color if the learner changes the matched value to something else. This will ensure the field color reverts to not matching.

 

Comments

( 4 )
0
2 months ago     Roobaarb     0   |   1  

Hi Luke, thank you so much for your help with this. I tried your solution and it worked like a charm! I think where I was going wrong was by adding the trigger/action on the input itself, rather than on the page, targeting the text box. As an aside, I tried te above method but with border instead of background but on that occassion it didn't work. Do you know if it's possible to change the border dynamically like this? I did read on here about the borders being applied to the element and not the container, so thought it might be something to do with that? Again, many thanks for your help.

0
2 months ago     Roobaarb     0   |   1  

Disregard my last comment, I have it working! I was using the shorthand notation for setting the border (border: 5px solid red;), which for some reason doesn't seem to work. But by separating out the different elements (border-color:red; border-style: solid; border-width:1px;) works as expected.

0
2 months ago     Roobaarb     0   |   1  

As (another and final!) aside, I thought it might be worth mentioning that, as you suggested Luke, this works using the basic input box (first choice on Inserts/Inputs/Input) where as I was previously trying with the Text Input, which i could not get to work. Anyway, that's enough from me, thanks again for all your help!

0
2 months ago     Luke Hickey     233   |   4  

Yes that’s correct, for the other form input types they include a label (text + control), for accessibility. When applying background color it targets the container and not the form control.