New animation: could be used for tutorial pages

   Many times writing tutorials, you may need to put up some questions for the user to answer. It maybe just to give him an example or for some other reason. But, they all have the same working: type the answer and then press the "check!" button. Some will give an alert saying you are incorrect or others will just put up a text or something.But in all of them you have to press the button.
  Lazy guys like me hate doing that much too! So I prefer to use this code to take in the input:

<input type="text" onkeyup="checkanswer()" onfocusout="back()" id="ans"/>

also to show whether the answer is correct or not, I made this script:


<script type="text/javascript">
function checkanswer()
{
var check = document.getElementById("ans");
if(check.value=='Your Answer Here')
{
document.bgColor="#00ff00";
}
else
{
document.bgColor="#ffffff";
}
}


        function back()
       {
                document.bgColor="#ffffff";
       }
</script>


Well the script is self explanatory. After everykeypress, it checks if the answer is correct because of the onkeyup event.If answer is correct, the background colour changes to green, otherwise red. When you move the focus away from the text box the background becomes white away due to the onfocusout event.

This is quite useful for lazy guys like me :)

My main intention was to change the background color of the textbox but could not figure out how to do it so far. So send in your comments on how to do that :)
BTW check the demo here :


Tweet