Catch Me If You Can: Use Javascript to Move an Element

This post is inspired by a conversation of mine with some developers in my department regarding a web application we recently built. This application uses a single sign-on system developed by another department to authenticate user whose accesses to our application. Somehow, this single sign-on system does not work well with AOL browser and users who use AOL browser will fail the authentication, thus cannot sign into our application and only see a generic error message. Since we don’t have control over the single sign-on system, we add some JavaScript code to detect user’s browser type, if AOL browser is detected, then a warning message with bold red font saying that their browser is not supported and they may experience problem signing in the application. However, some faithful AOL users just ignore the warning message and persistently try to sign in again and again bombarding us with emails generated due to the failed authentication. During a conversation with other developers regarding this issue, I jokingly suggest, if AOL browser is detected, then use JavaScript to move the submit button away whenever the user tries to click the button. Of course we cannot do that, but I think it is a fun project to play with, so I spent some time and created a small demo for you to test.

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:

Here is the JavaScript function that does all the magic:

function chaseMe()
{
    var offset = 50;
    var obj = document.getElementById('<%=btnSubmitButton.ClientID %>');
    var lblOne = document.getElementById('<%=lblNumberOne.ClientID %>');
    var lblTwo = document.getElementById('<%=lblNumberTwo.ClientID %>');
    var val = document.getElementById('<%=txtResult.ClientID %>');
    var n1 = parseInt(lblOne.innerHTML);
    var n2 = parseInt(lblTwo.innerHTML);
    
    if (n1+ n2 != parseInt(val.value))
    {
        var pos = (Math.floor(Math.random()*6) + 1) * 100;
    
        obj.style.position= "absolute";
        obj.style.left = pos + offset +  "px";
        obj.style.top = pos  + offset +  "px";
        obj.value = " Catch me if you can ";
        return false;
    }
    else
    {
        obj.value = " Good job, you can click me now ";
        return true;
    }        
}    

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.

Protected Sub btnSubmitButton_Click(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles btnSubmitButton.Click
    Dim n1 As Integer = Integer.Parse(Me.lblNumberOne.Text)
    Dim n2 As Integer = Integer.Parse(Me.lblNumberTwo.Text)
    Dim result As Integer
    Integer.TryParse(Me.txtResult.Text.Trim(), result)
    If (n1 + n2 = result) Then
        ClientScript.RegisterStartupScript(Me.GetType(), _
            "alertBox", "alert('Good job!');", True)
    End If
End Sub

That is it. You can play with it here. Have fun! Let me know if you need the complete source code.