Hi Shmuel (@shmuel1994)
Here is something to get you going.It’s not 100% what you were asking but I’ll leave it for you or someone else to chime in and complete.
live-type-check-vDBear.hype.zip (22.7 KB)
Basically, on scene load I’m calling a function to make the element content editable and then listen for the keypress and keyup events. On keypress I’m checking the length using a max attribute and then preventing more input and on keyup I’m checking the innerHTML for the word “Mother” if it’s correct I change the color to green, if it’s not I keep / change it to red.
The difficult part is checking the individual characters. You can use this.innerHTML.charAt(position) where position is the index of the editable area (this.innerHTML.charAt(0) would equal “M” in our example) to check if it matches but you can’t use the same code to change the color unfortunately.