How do I highlight non-matching characters when comparing two text strings?

Hello friends,

I'm trying to make a typing practice interface for my students. The user is presented with a word, they type it, and, if correct, a new word is served. If incorrect, the wrong characters are highlighted. I know how to do everything except for the highlighting of the wrong characters.

Here's a barebones project file.

dropbox.com/s/r3mllpw3g0ji9q8/matchCharacters.c3p

It doesn't include the highlighting mechanic because my attempts were so totally fruitless that there's nothing worth sharing in that regard. I suspect that I am supposed to use len to compare at every tick and get the wrong characters, but I couldn't get it working despite prolonged attempts.

Any help is greatly appreciated. Thanks!

I can now see that using the "wait until the correct character is typed before moving on" model would probably be dramatically simpler. I think that's also a fine way to go. So if a wrong character is entered, it does appear - but it's red - then a buzzer sounds, and the character flashes and goes away, leaving the user at the previous state, with the insertion point ready.

I think this must certainly be a far easier approach. It seems like it would also be less confusing to the user. Downside is it will not provide as much learning opportunity to troubleshoot and fix text, via the arrow keys, backspace, etc.

I think this route is the more sensible choice.