Change background colour of an element on trigger action352 0 1
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:
and I've tried adding the code to target the text box (this works when applied to the theme CSS):
but nothings working.
Am i trying to do the impossible or am i missing something? Any help would be greatly appreciated.
Comments( 0 )
Answers ( 1 )
Here's what I just tried to get this to work.
- Added a "basic text input" field to a page (first option in the text input form controls)
- set a variable for the input
- select the input
- select the Options context tab
- click Variable
- From the Form Variables modal, select New Variable and give it a name, or if you already have a variable, select it.
- Close the Form Variables modal
- Click the Interact Ribbon tab
- Click Triggers / Variables / Is Changed
- From the dialog that opens,
- click the Variables selection option
- pick your Variable from step 2
- Click "Equal To" option
- type in the value you want to use to trigger the color change
- click Next
- click Animation and Effects
- click Custom CSS
- From the Right Panel that opens,
- enter your CSS in the CSS box; background-color:aqua;
- click apply
- 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.