What does it do?
The demo project asks you to solve a simple math problem: 78 + 92 = ?. If you enter a wrong answer, say 12, then when you move your mouse over the submit button to click it, the submit button will automatically move to a random place, and the button’s text will change to “Catch me if you can”. You can try to click the button, you will find it moves randomly. Then enter 170 which is the right answer, then move your mouse over the button, you will find the button does not move and the button’s text becomes “Good job, you can click me now”. Upon click, an alert message pops up saying “Good Job!”.
Fun, uh? Let’s see how it works.
How does it work?
First, let’s design the ASPX page as follows:
Use two Label controls to store the two numbers in the math problem, use a TextBox for the answer entered by user, then a Button to submit the page. Here is the markup of the page:
The function is very self-explanatory. First, it checks if the math addition problem is correctly answered. If not, then generate a random number between 100 to 600, then set the button’s left and top position with the random number and an arbitrary offset, also change the button’s text to “Catch me if you can”. If the problem is correctly answered, then don’t change the button’s position so it will not move around, also change the button’s text to “Good job, you can click me now.”
Next, in code-behind, we double check if the question is correctly answered. If yes, then generate an alert box; if not, do nothing.
That is it. You can play with it here. Have fun! Let me know if you need the complete source code.