Correctly entered text changes image?
<p>I am trying to achieve an effect where the correctly entered text will result in the image changing, letting the user know he typed it in correctly.  The only problem I am having is if the person types the first two characters correctly, even if the third is incorrect it still stays changed.</p>

<p>Example:  Take the word "ate" for instance.</p>

<p>If the user types in "  aate  " with two A's the image still remains highlighted/changed.</p>

<p>Is it possible to make it somehow stay exact to what the correct text needs to be ?</p>

<p>JSFIDDLE here with google images for example:</p>

<p><a href="http://jsfiddle.net/japaneselanguagefriend/wjx6b/" rel="nofollow">http://jsfiddle.net/japaneselanguagefriend/wjx6b/</a></p>

<p>p.s. I hope I explained things cleary! I have been up and at this for hours and I could use a helping hand. Thanks so much guys!</p>
